我是如何自定义一个 Echarts GeoJSON 的

245 阅读1分钟

最近在做一个可视化项目,需要展示常州市的区级划分地图,然而 Echarts 内部提供的 GeoJSON 格式的地图文件并没有常州新增的经开区,只能自己去网上找资源,但是很多都没有,只能自己去自定义

DataV.GeoAtlas
Bigemap GIS Office
geojson.io

20221101165845.png

下载村镇数据

GeoJSON 是由经纬度坐标组成的一个集合,我们需要使用经开区下辖的村镇边界组合成经开区

下载 Bigemap GIS Office

选择目标区域

1664160119792-077d377d-8f10-4c9d-b55f-9e439e914962.png

选中目标区域图层,右键导出

1664160179223-932390f8-fdb3-4cf2-811d-ff08308c9cb4.png

导出的文件为目标区域的经纬度集合

1664160217480-2050dbe7-d762-4e66-981b-70dac1376375.png

将经纬度集合放入 geoJSON 中

{
        "type""FeatureCollection",
        "features": [
            {
                "type""Feature",
                "properties": { "name"`${name}` },
                "geometry": {
                    "type""Polygon",
                    "coordinates": [
                        `${经纬度集合}`
                    ]
                }
            }
        ]
}

20221101175255.png

同样的方式生成其他村镇的 GeoJSON

生成经开区 GeoJSON

使用DataV.GeoAtlas的边界生成器功能合并村镇经纬度区域,生成经开区 GeoJSON

20221101175547.png

合并经开区到常州市 GeoJSON

由于经开区是从武进区中分离出来的一个区,我们需要使用差集生成新的武进区的 GeoJSON

20221101175918.png

然后把经开区和新的武进区合并到常州市的 GeoJSON中,至此我们的自定义GeoJSON大功告成。

20221101180258.png