echarts自定义地图(想怎么画就怎么画)

3,642 阅读2分钟

816806-3c993ec83409306f.webp

官方

echarts提供了全国各省市及区县的js和json文件,但是并没有细化到区域内各街道范围,有时候项目中又有这种需求,领导给予重任,我们又不能轻易拒绝,只能是硬着头皮上了。

816806-75212df6c68c620b.jpg

基于官方细化

今天我们以北京市西城区各街道地图为例,教大家如何应对各种变态echarts地图类需求。

前段时间接到任务,需求是将北京市西城区各街道,用echarts地图形式展现出来。我们应该知道使用echarts实现北京市地图展示还是比较简单的效果,只需要引入对应的beijing.js或者北京市的beijing.json数据,根据官方文档配置就可以轻松实现。

但是源码中并没有细分到城区中各街道的范围,所以就不能在使用echarts提供的文件了。

在官方文档API中,echarts 有一个registerMap(mapName,geoJson,specialAreas)方法,此方法有3个参数:

  • mapName:地图名称,这里的名称要与地图配置中 option--series--mapType 的值保持一致。
  • geoJson:geoJson 格式的数据,具体格式见 geojson.org/
  • specialAreas:可选参数,细节配置,具体参考文档。

获取geojson

现在我们欠缺的就只是 geoJson 文件了。下面我们需要用到北京市的 geoJson 文件,可以到我的个人 github 上自取 github.com/zhangqian00…

我们通过北京市的 json 文件可以得到西城区的 geoJson 如下:

816806-6f5491c8cbf52cc6.png

自定义编辑geojson

然后我们打开geojson.io,这是一个可以在线绘制 geoJson 的网站,就是因为它我们才能随心所欲的绘制我们想要的地图样式和 geoJson 数据。将前面得到的西城区 geoJson 数据粘贴上去:

816806-cc834bcfc435c212.png

下面你就可以自由发挥了,因为复制过来的是一整块的数据,你要将图形按各区范围分为对应的块,修改左边的图形,右边的 geoJson 数据会自动更新。当然,你也可以完全从零开始,绘制你自己的地图,这样自由度更大。

其实,如果你也可以忽略掉后边的地图,地图只是给你一个参照。你完全可以把它当做一个画图工具,最后用到的是右侧的 geoJson 数据,通过 echarts.registerMap() 方法生成 echarts 地图,搞定!!

816806-d3b1d1e4a0b5deee.png

最后

公众号:前端很忙

做一个喜欢分享的前端开发者!

获取更多干货分享,欢迎来搞!