关于如何使用ehcarts2加载svg矢量地图并自定义县级内部乡镇轮廓

项目需求:显示县级内部的乡镇一级地图的轮廓!

效果预览:

阻碍因素:echarts不提供县级以下乡镇级轮廓。

 解决思路:

1.根据资料查找相关县的行政区域图(百度搜索),如本人所制作的浙江省宁波市宁海县,从百度搜索下找到一个的大概的行政轮廓图片:

 2.使用SVGDeveloper (svg绘图软件)来详细绘制地图,虽然不是画的不是太专业,但是项目需求摆在那里,勉强还凑合哈!-。-|||

怎么画呢?

1.首先我们还需要上面的echarts地图在线生成工具为我们提供县级地图的外部大轮廓,然后放大到一定比例通过截图工具截取图片,保存为.png格式(如下图所示);

2.接着使用ps软件,我用的是Adobe Fireworks CS6对图片进行处理,反选将背景设为透明;

3.首先需要使用http://www.pngtosvg.com/ 将第2步中的透明png图片在线转为ninghai.svg的矢量图。

4.打开svg作图软件,选择文件ninghai.svg:

 

右下角放大到1000%作图:

 

(因为费时,这步较为繁琐,所以大家画完一部分地图记得随时保存哟!)

5.最后关于如何使用echarts2加载svg请参考http://echarts.baidu.com/echarts2/doc/example/map18.html ,http://echarts.baidu.com/echarts2/doc/example/map17.html

 这里是echarts2官方的两个加载案例,一个是百度大厦的自定义矢量地图,一个是足球场的地图;

核心代码:

 1 require('echarts/util/mapData/params').params.ninghaimap = {
 2     getGeoJson: function (callback) {
 3         $.ajax({
 4             type: "get",
 5             url: "../static/echarts/svg/ninghaimap.svg",
 6             dataType: 'xml',
 7             success: function (xml) {
 8                 callback(xml)
 9             }
10         });
11     }

最后希望大家能够提出意见,有更好的方法的大神欢迎留言,不吝赐教,谢谢!

原文地址:https://www.cnblogs.com/xinjianheyi/p/7150289.html