Echarts 多个地区地图可视化显示

旧城等待， 2023-10-08 20:43 22阅读 0赞

在实际的前端开发工作中，有时候需要显示不相关的两个地区在地图上，例如：显示京津冀地区的地图，需要同时显示北京、天津和河北省，但是我们经常使用的获得各个省份，地市的地理信息的网站，每次只能下载一个地区，同时echart同时也只能指定一个位置信息的文件，那么我们该怎么使用echart同时显示多个地区呢。

下面我们将一步一步的完成上面的工作

例子代码：[https://download.csdn.net/download/speedwalkman/87590168][https_download.csdn.net_download_speedwalkman_87590168]

### 1. 准备Echarts环境 ###

不是本文重点，请去baidu。

### 2. 下载地区的json地理信息文件 ###

下载我们准备显示的所有地区的Json数据，这个Json数据用于Echart的显示地图使用例如，我们准备显示京津冀地区，就需要下载北京，河北，天津的地理位置信息用于在echart上显示。

下载地址：使用阿里云：[DataV.GeoAtlas地理小工具系列][DataV.GeoAtlas]![b6e22301ab9d4e608bfec681b527ace1.png][]

### 3. 将三个地区的Json文件进行合并 ###

1）使用工具网站：[geojson.io | powered by Mapbox][geojson.io _ powered by Mapbox], 点击Open，上传三个省的Json数据包，上传成功后，将自动合并三个省市的Json文件为一个Json文件，点击Save->GeoJson保存刚生成的JSON文件，或者复制粘贴生产后的Json内容另存为一个Json文件。

![7228602d86024eaa87a4fba9031897fa.png][]

2）手动方式：

（1）认识地理信息Json文件格式：

{
        "type": "FeatureCollection",
        // 如果下载的是省Json，下面是各个市的定义，如果下载的是市Json，下面是各个区的定义
        "features": [{
            "type": "Feature",
            "properties": {
                // 邮政编码
                "adcode": 110101,
                // 如果下载的是省Json，下面是各个市的定义，如果下载的是市Json，下面是各个区的定义
                "name": "东城区",
                // 区域坐标点的中心
                "center": [
                    116.418757,
                    39.917544
                ],
                // 地形上位置的中心
                "centroid": [
                    116.416718,
                    39.912934
                ],
                // 是否有子区域，因为是北京的东城区，已经是最底层的行政区了，所以没有子
                "childrenNum": 0,
                // 表示，该地区是，国、省、城市、行政区。本例子是区，district
                "level": "district",
                "parent": {
                    // 表示上级地区的邮政编码，这里是北京
                    "adcode": 110000
                },
                "subFeatureIndex": 0,
                // 表示上级各层地区的邮政编码，100000是中国，110000是北京
                "acroutes": [
                    100000,
                    110000
                ]
            },
            "geometry": {
                "type": "MultiPolygon",
                // 具体地理位置信息
                "coordinates": [
    
                ]
            }
        },
        {
         
        }
      ]
    }

（2）知道了Json中每个字段的含义后，我们就能手动合并Json文件了，我们仅仅需要将不同Json文件中的features中的内容进行合并就ok了。同理，我们可以修改features中的每一项内容去修改显示的内容。

4. 最后在我们的代码中，引用我们新生产的Json文件就OK了

![0caaaee7d90b4901a494e03e3af5c306.png][]

[https_download.csdn.net_download_speedwalkman_87590168]: https://download.csdn.net/download/speedwalkman/87590168
[DataV.GeoAtlas]: http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.230594564932193&lng=98.316650390625&zoom=6
[b6e22301ab9d4e608bfec681b527ace1.png]: https://img-blog.csdnimg.cn/b6e22301ab9d4e608bfec681b527ace1.png
[geojson.io _ powered by Mapbox]: https://geojson.io/
[7228602d86024eaa87a4fba9031897fa.png]: https://img-blog.csdnimg.cn/7228602d86024eaa87a4fba9031897fa.png
[0caaaee7d90b4901a494e03e3af5c306.png]: https://img-blog.csdnimg.cn/0caaaee7d90b4901a494e03e3af5c306.png