绘制浙江省各级行政区划边界：一份全面的 GeoJSON 数据指南

2023-11-15 17:30:12

导言

地理信息系统（GIS）在地理空间数据可视化和分析中发挥着至关重要的作用。ECharts 是一个功能强大的 JavaScript 可视化库，它提供了一个友好的界面来创建交互式的地图。对于浙江省的地理数据，GeoJSON 格式是绘制多级联动边界（省、市、区、县、乡镇）的理想选择。

获取最新 GeoJSON 数据

获取浙江省最新 GeoJSON 数据的第一步是访问官方数据源。以下步骤将指导您完成该过程：

导航到浙江省测绘与地理信息局网站： https://zjgis.zj.gov.cn/
在“数据下载”部分，选择“行政区划”选项卡。
在“矢量数据”部分，找到“浙江省矢量数据”下的“浙江省基础地理信息”。
下载“.csv”格式的数据文件。

除了官方数据源，您还可以从开源库（如 GeoJSON.cn）中获取 GeoJSON 数据。这些库通常提供多种格式的数据，包括 GeoJSON。

转换 CSV 数据为 GeoJSON

下载的 CSV 数据需要转换为 GeoJSON 格式才能与 ECharts 地图配合使用。您可以使用 CSV to GeoJSON 转换器等在线工具轻松完成此转换。只需上传您的 CSV 文件，选择所需的坐标系，然后下载转换后的 GeoJSON 文件。

在 ECharts 地图中使用 GeoJSON 数据

要在地图中使用 GeoJSON 数据，您需要将文件导入 ECharts 配置中。以下是实现此目的的步骤：

在 ECharts 实例中，使用 fetch() 方法加载 GeoJSON 数据。
将 GeoJSON 数据解析为 JavaScript 对象。
将数据添加到 ECharts 地图的 geoJSON 选项中。

通过遵循这些步骤，您可以轻松地将浙江省各级行政区划边界可视化在地图上。

示例代码

以下示例代码演示了如何在 ECharts 地图中使用 GeoJSON 数据绘制浙江省多级联动边界：

const myChart = echarts.init(document.getElementById('main'));

fetch('./data/zj-geo.json')
  .then(res => res.json())
  .then(geoJSON => {
    const geoCoordMap = {
      '杭州市': [120.15507, 30.274089],
      '宁波市': [121.562926, 29.869102],
      // ...省略其他城市坐标
    };

    const option = {
      geo: {
        map: 'zj',
        geoJSON: geoJSON,
        roam: true,
        itemStyle: {
          areaColor: '#323c48',
          borderColor: '#404a59'
        },
        label: {
          show: true,
          color: '#fff'
        }
      },
      series: [{
        type: 'scatter',
        coordinateSystem: 'geo',
        data: Object.keys(geoCoordMap).map(name => {
          return {
            name: name,
            value: geoCoordMap[name],
          };
        }),
        symbolSize: 10,
        label: {
          show: true,
          formatter: '{b}',
          color: '#fff'
        },
        itemStyle: {
          color: '#f44336'
        }
      }]
    };

    myChart.setOption(option);
  });