jvectormap 总结
该文档总结:从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。
方法二:官方网站的方法
一、五步骤同上;
二、三、四:网站采用的是用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。