项目需求:显示县级内部的乡镇一级地图的轮廓!html
效果预览:ajax
阻碍因素:echarts不提供县级如下乡镇级轮廓。echarts
解决思路:svg
1.根据资料查找相关县的行政区域图(百度搜索),如本人所制做的浙江省宁波市宁海县,从百度搜索下找到一个的大概的行政轮廓图片:工具
2.使用SVGDeveloper (svg绘图软件)来详细绘制地图,虽然不是画的不是太专业,可是项目需求摆在那里,勉强还凑合哈!-。-|||ui
怎么画呢?url
1.首先咱们还须要上面的echarts地图在线生成工具为咱们提供县级地图的外部大轮廓,而后放大到必定比例经过截图工具截取图片,保存为.png格式(以下图所示);spa
2.接着使用ps软件,我用的是Adobe Fireworks CS6对图片进行处理,反选将背景设为透明;code
3.首先须要使用http://www.pngtosvg.com/ 将第2步中的透明png图片在线转为ninghai.svg的矢量图。xml
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 }
最后但愿你们可以提出意见,有更好的方法的大神欢迎留言,不吝赐教,谢谢!