Echarts地图绘制自定义区域 - geojson.io使用方法

最新推荐文章于 2024-11-11 10:30:44 发布

zaqenenen

最新推荐文章于 2024-11-11 10:30:44 发布

阅读量5.5k

点赞数 6

分类专栏： Echarts 文章标签： echarts 前端街景地图 css

本文链接：https://blog.csdn.net/Zaqenenen/article/details/111051942

版权

本文介绍了如何使用Echarts绘制自定义区域，如高新区的河源市地图，通过geojson.io工具进行地图编辑。针对区域点击无效的问题，提供了编辑已绘制地图和解决本地json文件跨域问题的方法，包括转换为js文件引入。

摘要由CSDN通过智能技术生成

Echarts地图绘制自定义区域 & 解决区域点击无效

1. 绘制地图自定义区域

需求：绘制带高新区的河源市地图，目前百度地图json还没有此新区。需手动绘制。
STEP1：获取市区json文件—输入市区后选择下面JSON API(包含子区域)的下载

STEP2：geojson中左上角打开step1下载的文件，点下图按钮绘制新区区域，右侧富文本框便会同步生成新生地图的json文件，绘制完成保存即可在echarts中引入。

在这里插入图片描述
STEP3： 在echart中使用

var heyuanMap= echarts.init(document.getElementById('map_box'))
//第一个参数为自定义地图名，最好是绘制市区的拼音
//第二个参数是外部引入的json文件，放在变量data中
 echarts.registerMap('heyuan', data); 
  heyuanMap.setOption({
  	//.