在做项目时遇到在页面某一区域展示宁波供电区域(非以百度地图为基础),在echarts官网研究了下Api,发现它是以geojson为基础做独立地区区域块的。
话不多说,提供下具体方法:
1、制作geojson格式的地区区域块。官网提供的地图数据在线生成工具入口由于政策原因已关闭。百度了一下,发现有网友已经把官网提供的全国三四百县市的geojson数据保存了下来(个人收藏见最后github地址)。但地域地图和供电地图有所不同,所以要以此数据为基础进行修改,否则自己完全制作也行,只要你有耐心画。。。
2、编辑geojson地图数据。在此提供一个方法,在www.geojson.io先打开geojson数据json文件;(此处以宁波地图为例)
打开后效果:
然后发现地图的“鄞州区”的地域区域与供电区域有错不同,现在把“海曙区”删除,然后把“鄞州区”分上部分给“海曙区”(单击区域块后,有tooltip弹窗,点击右下角“delete feature”即可删除)
现在删除完成后进行描绘区域:
现在用多边形工具圈好“海曙区”供电区域了:
然后给区域命名,点击绘制的区域块添加属性“name”为“海曙区”:
现在海曙区就ok了,然后剩下的区域分给“鄞州区”,相同操作。
3、加载geojson地图数据实现预期效果。
将制作完成后将右侧的json复制压缩一下(json整体数据会小一点)放在项目的资源文件夹后,在js文件进行加载json数据后进行注册即可使用:
$.get('resources/plugin/echarts3/ningbo.json', function (nbJson) {
echarts.registerMap('ningbo', nbJson);
mapChart = echarts.init(document.getElementById('areaMap'));
loadMapData();
});
map option中series的“mapType”要写上面注册的“ningbo”
{
name: '',
type: 'map',
mapType: 'ningbo',
.....
}
效果如下:
最后达到了我们想要的效果,希望可以帮到需要实现此效果的朋友。
个人收藏的geojson文件:https://github.com/hzhqk/echarts/tree/master/map-geojson