echarts map自定义区域

作者: hzhqk | 来源:发表于2017-12-24 00:04 被阅读76次

  在做项目时遇到在页面某一区域展示宁波供电区域(非以百度地图为基础),在echarts官网研究了下Api,发现它是以geojson为基础做独立地区区域块的。
话不多说,提供下具体方法:
1、制作geojson格式的地区区域块。官网提供的地图数据在线生成工具入口由于政策原因已关闭。百度了一下,发现有网友已经把官网提供的全国三四百县市的geojson数据保存了下来(个人收藏见最后github地址)。但地域地图和供电地图有所不同,所以要以此数据为基础进行修改,否则自己完全制作也行,只要你有耐心画。。。
2、编辑geojson地图数据。在此提供一个方法,在www.geojson.io先打开geojson数据json文件;(此处以宁波地图为例)

open geojson.png
打开后效果:
show data.png
然后发现地图的“鄞州区”的地域区域与供电区域有错不同,现在把“海曙区”删除,然后把“鄞州区”分上部分给“海曙区”(单击区域块后,有tooltip弹窗,点击右下角“delete feature”即可删除)
diff.png
delete areapng.png
现在删除完成后进行描绘区域:
edit map.png
现在用多边形工具圈好“海曙区”供电区域了:
edit ok.png
然后给区域命名,点击绘制的区域块添加属性“name”为“海曙区”:
edit area.png
area ok.png
现在海曙区就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',
            .....
}

效果如下:


show.png

最后达到了我们想要的效果,希望可以帮到需要实现此效果的朋友。
个人收藏的geojson文件:https://github.com/hzhqk/echarts/tree/master/map-geojson

相关文章

网友评论

    本文标题:echarts map自定义区域

    本文链接:https://www.haomeiwen.com/subject/wylcgxtx.html