jvectormap 总结

标签: jvectormap 总结 | 发表时间:2013-10-04 20:53 | 作者:lanximu
分享到:
出处:http://blog.csdn.net

该文档总结:从shp格式的地图文件出发,最终生成html,达到能够在网页上操作地图的效果。好处不用多说,jvectormap是矢量地图,且有自己的API,有比较丰富的效果。

 

方法一:我采用的可行的方法

 

一: arcgis  shp 抠图:

包括抠出想要的区域 and 合并想合并的区域  arcgis->arcmap: 抠图:选定要抠出的区域后->ArcToolbox->Analysis Tools->Extract->Clip;

合并:dissolve , union:将所要合并的多边形选中,点击tools工具箱中的data management中的generalization——dissolve工具,得到合并后的多边形,单独新建为一个图层,但是多边形属性还是相对独立;选中该图层,Editor->start editing,选择unit菜单项,即将多边形合并了,但是所有的属性已经失去。

 



注:只要对arcmap操作稍加学习,这部分就可以完成,只是体力活;

 

二: shp to svg:

arcmap另存为svg,File->Export map: 只有选中的图层能被导出!这是最为简便的方法。另外也可以写相应的脚本进行转换,既然有现成的,就不用麻烦了,网上有相应代码可参考;

 

三: 修改svg格式

直接使用会产生格式错乱,只需取取出svg格式中以M开头,Z结尾的数据(体力活),再加上头上那一串即可,见附件:guangxi.svg 或 Liuzhou.svg。

 

四: svg to js:

  http://svgto.jvectormap.com/  到这个网站,将改好后的svg代码贴上去,点击转换即可。(好的是,转换方便,而且可以直接命名id和name,不好的是,转换时似乎识别不了strokeWidth之类的参数,导致我命名在svg代码里加粗了边界线,转出来的结果还是一样。)

五:html引入 地图数据js,jvectormap 的js, Jquery的js, 显示地图

(jvectormap 的js有不同的版本,实现起相应功能来有些不一样,我们也可以根据自己的需要对其进行修改:后面讲)我采用的是:jquery-1.8.2.js  jquery-jvectormap-1.2.2.css jquery-jvectormap-1.2.2.min.js


或:


上图中,guangxifinal.js   CBD-zh.js 都是转换出来的地图数据文件。

鼠标marker事件都有API, http://jvectormap.com/documentation/javascript-api/ 

marker上不足的是,或许由于转换数据时投影坐标系没有弄好,导致加marker无法根据经纬度定位,只能根据平面坐标系估计添加。 添加文字有三种方法:(一):直接在层上面写:这样导致放大缩小时,字就移位了,且不能放大缩小;(二):用raphael.js插件:var paper= Raphael(0,0,200,300); paper.text(100, 100,'Hello'); 此方法的缺点在于文字占据区域较大,占据后的区域就死掉了,不可控,也不能放大缩小,对文字标注多的不适用;

(三):见补充->二:相当好!

 

注:如果有一天,svgtto js那网站用不了了,就手动转吧 或自己写脚本也行,js格式都那样,熟悉了之后照着把数据copy过来就是了,网上有不少人都手动生成js。

 

 

方法二:官方网站的方法

   http://jvectormap.com/

 

一、五步骤同上;

二、三、四:网站采用的是用python写脚本,直接从shp 转为 js,这个折腾了好久好久,window,linux都试过,虽然最终能转出来js,但显示结果总是有偏差。这可能和我python弱爆了有关系,想要研究的朋友可以按网上上说的步骤再研究下,我总感觉它并不是适合所有的shp,仅适合由国家组成的?

 

 

方法三:

https://github.com/RandomEtc/shapefile-js  这个是某牛写的,直接将shp转为html,在firefox 或 safari 下能完成功能,但IE不兼容啊,就没太大用了。

 

 

补充:

 

一:对jquery-jvectormap-1.2.2.min.js jquery-jvectormap-1.2.2.css 的修改

(1)取消鼠标放大缩小功能:只需要在js文件中找到带mousewheel的函数,删除或注释掉即可。

(2)隐藏或修改放大缩小按钮的位置:只需要在css文件中 设置相应位置或属性即可,该css很简单。

 

 

二:对jquery.vector-map.js 的修改 (这个js 也挺好用啊)

感谢http://dove19900520.iteye.com/blog/188066的帮助,在此附上他给的 修改边界,添加文字的源码( 对jquery.vector-map.js进行了修改,添加了createText方法,并在其内部进行调用,对地图.js的格式进行了一些修改,添加了文字,坐标等);虽然来得晚了一些,但终究是学习了。原来js的运用可以如此灵活。见附件CBDDemo。

附件:(http://www.t00y.com/file/31250993)两个项目示例,一:example1:广西地图和柳州地图初稿,因为加字当时用的是在div里写死,就暂时不加上去了;二:example2:CBDDemo添加文字和修改边界:可看其demo,也可以看我仿照他demo给柳州加的边界和文字liuzhou.html。

 

作者:lanximu 发表于2013-10-4 20:53:23 原文链接
阅读:95 评论:0 查看评论

相关 [jvectormap 总结] 推荐:

jvectormap 总结

- - CSDN博客Web前端推荐文章
该文档总结:从shp格式的地图文件出发,最终生成html,达到能够在网页上操作地图的效果. 好处不用多说,jvectormap是矢量地图,且有自己的API,有比较丰富的效果. 方法一:我采用的可行的方法. 一: arcgis  shp 抠图:. 包括抠出想要的区域 and 合并想合并的区域  arcgis->arcmap: 抠图:选定要抠出的区域后->ArcToolbox->Analysis Tools->Extract->Clip;.

jQuery矢量SVG地图插件JVectorMap

- - HTML5资源教程
JVectorMap是一款基于jQuery的矢量地图插件,它是基于SVG结构的,和其他jQuery地图插件不同的是,jVectorMap是矢量地图,但是它同样支持地图缩放和地图平面移动等相应的功能. 由于JVectorMap是基于jQuery的,所以支持大部分主流的浏览器,应用也相当广泛.

2009年总结

- 火丁 - 槽边往事
午夜刚过,正式进入2009年的最后一天. 我坐在电脑前,使用代理越洋访问自己的Blog,在极为缓慢的网速下试图发布一篇长贴子,送别即将离去的2009年. 此时此刻我发布Blog的方式,胜过万语千言,道出了独立Blogger在这一年的真实处境. 如果说这些Blogger如同茫茫比特海上的点点渔火,一度赏心悦目,那么现在,它们分明在一盏盏第次熄灭,陷入黑暗之中.

Android ContentProvider总结

- - CSDN博客推荐文章
1) ContentProvider为存储和读取数据提供了统一的接口. 2) 使用ContentProvider,应用程序可以实现数据共享. 3) android内置的许多数据都是使用ContentProvider形式,供开发者调用的(如视频,音频,图片,通讯录等). 1)ContentProvider简介.

CSS总结

- - CSDN博客Web前端推荐文章
         接触过一段CSS,为简单理解,将CSS说成两步,一步是你做个“记号”,另一步是根据记号设置样式.      网页的内容和样式是分开的. “记号”便是能标识网页中某部分内容的关键字词(选择器),而根据记号设置样式呢,就是按图索骥根据记号设置标识的那部分内容的样式.     这段时间练习的每个CSS小例子,或是用id做记号,或是用name,或是用class,只有有了这些所谓的记号,CSS设定的样式才有用,.

面试总结

- - A programmer's life
最近我在找工作,面试了多家公司:百度、阿里、小米、美团、Yahoo、Symantec、Amazon. 其中Amazon面的是供应链(被HR忽悠的),fail了. 其它拿到了offer,但是都有些不如意. 很多公司给我的薪水和职级只相当于毕业1-2年的人的水平,而我已经毕业7年了,所以这些公司的尽管给我发了offer,在我看来他们不过是婉拒了我.

sql语句总结

- zhaoloving - 博客园-首页原创精华区
1、创建数据库语句(以部门表(department)和员工表(employee)位例). --员工表 employee.   alter table [表名] add .     constraint [键名] Primary key [主键名称].   alter table [表名] add.      constraint [键名] unique(唯一键名称).

WebView使用总结

- - ITeye博客
        以下是使用WebView过程中的部分场景和解决方案. 如果WebView是放在TabHost中的Activity, 而且WebView中包含html的select,会在点击其中的Item时候崩溃,异常信息如下: android.view.WindowManager$BadTokenException: Unable to add window.

jQuery知识总结

- - 博客园_iTech's Blog
转自: http://www.cnblogs.com/oec2003/archive/2013/04/13/3017731.html. 原作者:  oec2003(水杯) . 出处:     http://oec2003.cnblogs.com/ . 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则 保留追究法律责任的权利.

WEKA学习总结

- - CSDN博客互联网推荐文章
1.      Weka处理的数据表格中,一个横行称为一个实例(Instance),竖行代表一个属性(Arrtibute),数据表格称为一个数据集,在weka看来,呈现了属性之间的一种关系(Relation). 2.      Weka存储数据的格式是ARFF(Attribute-RelationFile Format)文件,这是一种ASCII文本文件.