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 图像,配置地图行政中心
avalon.js实践 svg地图配置工具的更多相关文章
- 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 的目的是 ...
- r.js实践
r.js合并实践 项目中用到require.js做生产时模块开发,但上线要合并压缩,幸好它配套有r.js.下面就其用法说明一下. 首先建一个目录,里面的结构如下: require.js可以到r.js项 ...
- D3.js 制作中国地图 .net 公共基础类
D3.js 制作中国地图 from: http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding ...
- Ext JS 6 新特性和工具
Ext JS 6 新特性和工具 Ext JS 6 带来很多新特性.工具和改进.以下是一些亮点: • 合并了 Ext JS & Sencha Touch - 在 Ext 6, 你可以访问 Ext ...
- js实现svg图形转存为图片下载
我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持.研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代 ...
- Adobe Edge Animate –svg地图交互-精确的边缘及颜色置换
Adobe Edge Animate –svg地图交互-精确的边缘及颜色置换 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 上一篇我们说到了使用jquer ...
- js调用百度地图接口
原文:js调用百度地图接口 这是前几天公司做的新项目,上面需要用到地图的数据.第一次做这类型的东西没啥思路,咱们经理说,这东西简单,截个图存文件夹里调整好尺寸,数据库里存上图片的地址动态调用就行了.心 ...
- Javascript实战开发:教你使用raphael.js绘制中国地图
最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大 ...
- require.js实践
ASP.NET MVC应用require.js实践 这里有更好的阅读体验和及时的更新:http://pchou.info/javascript/asp.net/2013/11/10/527f6ec41 ...
随机推荐
- css3 transiton
div { width:100px; height:100px; background:yellow; transition-property:width; transition-duration:1 ...
- C#核编之内建数据类型
这个随笔中的重点之一是说明:C#中所提供的关键字都是相应系统类型的简化符号(如int是System.Int32类型的简化符号) 一.内建数据类型与层级结构 所有的C#内建数据类型都支持默认的构造函数, ...
- Http权威指南笔记(一) URI URL URN 关系
定义 URI:统一资源标识符(Uniform Resource Indentifier)用来标识服务器上的资源. URL:统一资源定位符(Uniform Resouce Locator)是资源标识符最 ...
- Spring学习之Ioc控制反转(2)
开始之前: 1. 本博文为原创,转载请注明出处 2. 作者非计算机科班出身,如有错误,请多指正 ---------------------------------------------------- ...
- zookeeper_04:curator
定义 Curator是Netflix公司开源的一个Zookeeper客户端,与Zookeeper提供的原生客户端相比,Curator的抽象层次更高,简化了Zookeeper客户端的开发量. <d ...
- dialog获取焦点
弹出层是一个iframe openWindow:function (options) { var url = options.url; url += url.indexOf("?" ...
- 给新建的Cocos2d-x 3.X的Win32工程添加CocoStudio库
1.我们在VS中找到"解决方案资源管理器", 在解决方案"HelloCocos"上点击右键, 选择添加现有项目. 在弹出的对话框中选择************* ...
- 实用chrome插件
2015年最实用的9款chrome插件 随着14年chrome浏览器的市场超过IE浏览器,chrome凭借它强劲性能和出色的使用体验真正的登上了平民级的殿堂.今天小编就为大家推荐9款自己常用的chro ...
- nodejs学习笔记-1
nodejs入门-安装 nodejs是什么,刚接触了一段时间,我自己也说不清楚它.按我个人的简单理解,nodejs就是一个javascript的解析器,它让javascript不在局限于浏览器客户端. ...
- C-Free 您不能使用调试解决方案
什么时候C-Free 当您调试 找不到gdb.exe解决方案 http://www.programarts.com/ C-Free 官方网站 下载Mingw或者其他编译器 版权声明:本文博主原创文章. ...