MVVM模式，在很多復(fù)雜交互邏輯下面，有很大的優(yōu)勢。現(xiàn)在相關(guān)的框架也很多，現(xiàn)在項目中使用了avalon.js，選擇它的原因，是兼容性的考慮，當然也要支持下國內(nèi)開發(fā)大牛，至于性能方面的，沒有實際測試過，不敢在這邊說明。

需求：項目中首頁需要顯示地圖，顯示公司在該區(qū)域部署的教室數(shù)量，首頁可以顯示行政中心，區(qū)域名字，加入★著重的地市

前臺：頁面顯示采用了raphael.js,把地圖信息js,轉(zhuǎn)換成vml,svg（百度的ECharts的地圖也不錯，但是它沒有區(qū)縣下面的數(shù)據(jù)，沒有采用）

問題：美術(shù)妹妹出的都是svg圖片，怎么把svg圖片轉(zhuǎn)換成需要的地圖信息js,成了難題。美術(shù)MM，又不會js。如果讓前端根據(jù)svg整理，人工比較麻煩，工具就產(chǎn)生了

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

　　　　原來設(shè)計的時候要保存省市級別關(guān)系，省市有不用的展現(xiàn)形式，導(dǎo)致耦合性比較強，擴展也比較麻煩。地圖信息都存在一個js文件中，首頁載入太慢。

　　　　現(xiàn)在設(shè)計為不關(guān)心省市關(guān)系，都可以配置，讓配置人員想要什么樣子就什么樣子。每一級地圖通過請求返回，通過返回哪個地圖有地圖確定可以進入地圖，還是跳轉(zhuǎn)頁面。

　　）

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

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

操作說明:

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

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

　　藍色方塊為用戶拖拽自定義，調(diào)整文字顯示位置（默認情況，顯示在行政中心的上方）

　　點擊svg path或polygon 圖像,配置地圖區(qū)域塊（可以選擇顏色值；可以配置多塊為一個地區(qū)，默認情況下為單一地區(qū)，配置相同地區(qū)則刪除原先地區(qū)；可以配置存在課堂，高亮顯示）

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

　　

轉(zhuǎn)載于:https://www.cnblogs.com/legu/p/4625977.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。