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 圖像,配置地圖行政中心

　　

轉載于:https://www.cnblogs.com/legu/p/4625977.html

總結

以上是生活随笔為你收集整理的avalon.js实践 svg地图配置工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。