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