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地图配置工具的更多相关文章

  1. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  2. r.js实践

    r.js合并实践 项目中用到require.js做生产时模块开发,但上线要合并压缩,幸好它配套有r.js.下面就其用法说明一下. 首先建一个目录,里面的结构如下: require.js可以到r.js项 ...

  3. D3.js 制作中国地图 .net 公共基础类

    D3.js 制作中国地图 from:  http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding ...

  4. Ext JS 6 新特性和工具

    Ext JS 6 新特性和工具 Ext JS 6 带来很多新特性.工具和改进.以下是一些亮点: • 合并了 Ext JS & Sencha Touch - 在 Ext 6, 你可以访问 Ext ...

  5. js实现svg图形转存为图片下载

    我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持.研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代 ...

  6. Adobe Edge Animate –svg地图交互-精确的边缘及颜色置换

    Adobe Edge Animate –svg地图交互-精确的边缘及颜色置换 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 上一篇我们说到了使用jquer ...

  7. js调用百度地图接口

    原文:js调用百度地图接口 这是前几天公司做的新项目,上面需要用到地图的数据.第一次做这类型的东西没啥思路,咱们经理说,这东西简单,截个图存文件夹里调整好尺寸,数据库里存上图片的地址动态调用就行了.心 ...

  8. Javascript实战开发:教你使用raphael.js绘制中国地图

    最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大 ...

  9. require.js实践

    ASP.NET MVC应用require.js实践 这里有更好的阅读体验和及时的更新:http://pchou.info/javascript/asp.net/2013/11/10/527f6ec41 ...

随机推荐

  1. css3 transiton

    div { width:100px; height:100px; background:yellow; transition-property:width; transition-duration:1 ...

  2. C#核编之内建数据类型

    这个随笔中的重点之一是说明:C#中所提供的关键字都是相应系统类型的简化符号(如int是System.Int32类型的简化符号) 一.内建数据类型与层级结构 所有的C#内建数据类型都支持默认的构造函数, ...

  3. Http权威指南笔记(一) URI URL URN 关系

    定义 URI:统一资源标识符(Uniform Resource Indentifier)用来标识服务器上的资源. URL:统一资源定位符(Uniform Resouce Locator)是资源标识符最 ...

  4. Spring学习之Ioc控制反转(2)

    开始之前: 1. 本博文为原创,转载请注明出处 2. 作者非计算机科班出身,如有错误,请多指正 ---------------------------------------------------- ...

  5. zookeeper_04:curator

    定义 Curator是Netflix公司开源的一个Zookeeper客户端,与Zookeeper提供的原生客户端相比,Curator的抽象层次更高,简化了Zookeeper客户端的开发量. <d ...

  6. dialog获取焦点

    弹出层是一个iframe openWindow:function (options) { var url = options.url; url += url.indexOf("?" ...

  7. 给新建的Cocos2d-x 3.X的Win32工程添加CocoStudio库

    1.我们在VS中找到"解决方案资源管理器", 在解决方案"HelloCocos"上点击右键, 选择添加现有项目. 在弹出的对话框中选择************* ...

  8. 实用chrome插件

    2015年最实用的9款chrome插件 随着14年chrome浏览器的市场超过IE浏览器,chrome凭借它强劲性能和出色的使用体验真正的登上了平民级的殿堂.今天小编就为大家推荐9款自己常用的chro ...

  9. nodejs学习笔记-1

    nodejs入门-安装 nodejs是什么,刚接触了一段时间,我自己也说不清楚它.按我个人的简单理解,nodejs就是一个javascript的解析器,它让javascript不在局限于浏览器客户端. ...

  10. C-Free 您不能使用调试解决方案

    什么时候C-Free 当您调试 找不到gdb.exe解决方案 http://www.programarts.com/ C-Free 官方网站 下载Mingw或者其他编译器 版权声明:本文博主原创文章. ...