avalon.js實踐 svg地圖配置工具

MVVM模式，在不少複雜交互邏輯下面，有很大的優點。如今相關的框架也不少，如今項目中使用了avalon.js，選擇它的緣由，是兼容性的考慮，固然也要支持下國內開發大牛，至於性能方面的，沒有實際測試過，不敢在這邊說明。

需求：項目中首頁須要顯示地圖，顯示公司在該區域部署的教室數量，首頁能夠顯示行政中心，區域名字，加入★着重的地市

前臺：頁面顯示採用了raphael.js,把地圖信息js,轉換成vml,svg（百度的ECharts的地圖也不錯，可是它沒有區縣下面的數據，沒有采用）

問題：美術妹妹出的都是svg圖片，怎麼把svg圖片轉換成須要的地圖信息js,成了難題。美術MM，又不會js。若是讓前端根據svg整理，人工比較麻煩，工具就產生了

設計：js文件主要是存儲了地圖信息（

　　　　原來設計的時候要保存省市級別關係，省市有不用的展示形式，致使耦合性比較強，擴展也比較麻煩。地圖信息都存在一個js文件中，首頁載入太慢。

　　　　如今設計爲不關心省市關係，均可以配置，讓配置人員想要什麼樣子就什麼樣子。每一級地圖經過請求返回，經過返回哪一個地圖有地圖肯定能夠進入地圖，仍是跳轉頁面。

　　）

地圖配置，戳這裏。爲了演示方便，上傳SVG文件改成了html5文件讀取,SVG文件IE8也不支持，因此請IE10+，查看效果，中國地圖svg文件下載，戳這裏。

這邊截圖顯示下配置完的地圖效果，在線地址戳這裏。文件略大，請耐心等待。

操做說明:

　　左邊爲原始SVG圖，右邊爲實時完成效果圖

　　紅色點爲用戶拖拽自定義，行政中心或★配置

　　藍色方塊爲用戶拖拽自定義，調整文字顯示位置（默認狀況，顯示在行政中心的上方）

　　點擊svg path或polygon 圖像,配置地圖區域塊（能夠選擇顏色值；能夠配置多塊爲一個地區，默認狀況下爲單一地區，配置相同地區則刪除原先地區；能夠配置存在課堂，高亮顯示）

      點擊svg circle 圖像,配置地圖行政中心