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

      

  • 相关阅读:
    图片上传
    解决Vuex持久化插件-在F5刷新页面后数据不见的问题
    vue登录
    拖动排序的vue组件
    vue图片懒加载
    vue中使用图片预加载
    前端架构知识体系
    html判断IE版本
    HighCharts 在IE8下饼图不显示的问题
    新一代调试王者Console
  • 原文地址:https://www.cnblogs.com/legu/p/4625977.html
Copyright © 2020-2023  润新知