avalon.js实践 svg地图配置工具

时间:2023-01-26 15:56:05

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

  

avalon.js实践 svg地图配置工具