Echarts自定义地图显示区域，可以显示公园，小区，学校等区域

清疚 2023-10-12 12:29 52阅读 0赞

**目 录**

一、实现功能:

二、需要使用的工具:

三、步骤:

1. 在百度地图上，找到需要绘制echart区域的位置

2. 到 geojson.io, 绘制我们地图上的区域

3. 选择需要绘制的区域

4. 开始拖拽地图上的坐标点，使坐标点落在想要的区域上

5. 完成我们的坐标绘制

6. 为生产的区域坐标信息添加属性，比如地图上显示的名称，父亲节点的ID

7. 将新生产的区域坐标信息与城市的坐标信息进行融合

8. 最后下载

--------------------

## 一、实现功能: ##

显示阜新市清河门区的城区地图。因为没有找到Echarts需要的城区地理信息。需要自己制作一个。

## 二、需要使用的工具: ##

1. 下载Echarts需要使用的地区json地理信息文件：[DataV.GeoAtlas地理小工具系列][DataV.GeoAtlas]

2. 在线编辑地区的json地理信息文件: [geojson.io | powered by Mapbox][geojson.io _ powered by Mapbox]

## 三、步骤: ##

#### 1. 在百度地图上，找到需要绘制echart区域的位置 ####

比如，阜新市阜新蒙古族自治县伊吗图镇及氟化工产业园区

![712580f7e49b4d9eba6d3d1cab4f2666.png][]

#### 2. 到 [geojson.io][geojson.io _ powered by Mapbox], 绘制我们地图上的区域 ####

首先切换成“卫星视角”，然后选择“画圈工具”。

![0be87b1abbbf45ccb12d1c03dd172e21.png][]

#### 3. 选择需要绘制的区域 ####

step1: 在地图上画上我们想生产echarts地理信息的区域后：

![bd5703a807f24e92a418e0ef1452fd7d.png][]

step2: 选择“编辑按钮”，进入到编辑模式：

![23626b70751d465fbcc83d0614ff610b.png][]

注意，保存按钮，每次修改完地图上的坐标点后，一定要点击保存，否则编辑的信息不回生效。

#### 4. 开始拖拽地图上的坐标点，使坐标点落在想要的区域上 ####

![dfcec4b4273342db9ab0021d0367fa0e.png][]

完成了一个区域的坐标点绘制：

![c56cf52ae9574850a09273ef4e774e8a.png][]

在拖拽坐标点的时候，我们可以放大地图利于更精准的拖拽，也可以删除多余的坐标点和添加缺少的坐标点，具体使用技巧请自己动手体验！

![7042dbfa2bec4fa680e396ed4d9e3a76.png][]

#### 5. 完成我们的坐标绘制 ####

一定注意，完成后点击“保存按钮”，每次修改完地图上的坐标点后，一定要点击保存，否则编辑的信息不回生效。

![9ede3476b1ec4b8eb5304f7c5302c4e8.png][]

#### 6. 为生产的区域坐标信息添加属性，比如地图上显示的名称，父亲节点的ID ####

请参考下面的文章中介绍的地理信息各属性的含义填写每个属性值。

[Echarts 多个地区地图可视化显示\_echarts天津地图\_IT小悟的博客-CSDN博客Echarts 多个地区地图可视化显示。怎么在echart上同时显示不同多个省份，不同多个城市，不同的多个县区![favicon32.ico][]https://blog.csdn.net/speedwalkman/article/details/129622954][Echarts _echarts_IT_-CSDN_Echarts _echart_favicon32.ico_https_blog.csdn.net_speedwalkman_article_details_129622954]

#### 7. 将新生产的区域坐标信息与城市的坐标信息进行融合 ####

此步骤也是通过修改GeoJson地理信息各属性的值完成的，请参考上面的文章。

#### 8. 最后下载 ####

保存成功后，选择“GeoJSON”下载坐标数据。

![15a2edce1a114b4a94dea5f4baa93788.png][]

[DataV.GeoAtlas]: http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.230594564932193&lng=98.316650390625&zoom=6
[geojson.io _ powered by Mapbox]: http://geojson.io/
[712580f7e49b4d9eba6d3d1cab4f2666.png]: https://img-blog.csdnimg.cn/712580f7e49b4d9eba6d3d1cab4f2666.png
[0be87b1abbbf45ccb12d1c03dd172e21.png]: https://img-blog.csdnimg.cn/0be87b1abbbf45ccb12d1c03dd172e21.png
[bd5703a807f24e92a418e0ef1452fd7d.png]: https://img-blog.csdnimg.cn/bd5703a807f24e92a418e0ef1452fd7d.png
[23626b70751d465fbcc83d0614ff610b.png]: https://img-blog.csdnimg.cn/23626b70751d465fbcc83d0614ff610b.png
[dfcec4b4273342db9ab0021d0367fa0e.png]: https://img-blog.csdnimg.cn/dfcec4b4273342db9ab0021d0367fa0e.png
[c56cf52ae9574850a09273ef4e774e8a.png]: https://img-blog.csdnimg.cn/c56cf52ae9574850a09273ef4e774e8a.png
[7042dbfa2bec4fa680e396ed4d9e3a76.png]: https://img-blog.csdnimg.cn/7042dbfa2bec4fa680e396ed4d9e3a76.png
[9ede3476b1ec4b8eb5304f7c5302c4e8.png]: https://img-blog.csdnimg.cn/9ede3476b1ec4b8eb5304f7c5302c4e8.png
[favicon32.ico]: https://g.csdnimg.cn/static/logo/favicon32.ico
[Echarts _echarts_IT_-CSDN_Echarts _echart_favicon32.ico_https_blog.csdn.net_speedwalkman_article_details_129622954]: https://blog.csdn.net/speedwalkman/article/details/129622954
[15a2edce1a114b4a94dea5f4baa93788.png]: https://img-blog.csdnimg.cn/15a2edce1a114b4a94dea5f4baa93788.png