（精）echarts台湾省地图解决方案

土拨鼠爱coding

已于 2025-02-24 15:45:39 修改

阅读量508

点赞数 3

CC 4.0 BY-SA版权

文章标签： echarts 前端 javascript

于 2025-02-24 15:43:37 首次发布

本文链接：https://blog.csdn.net/weixin_46449236/article/details/145828186

本条文章是根据在实际的业务需求遇到的困难而提出的解决方案。

一、问题如下:

当我使用echarts-gl制作3D地图时，需要下钻，下钻到台湾地区时需要用到台湾省市的数据，奈何市面上的官方geoJson只提供到省份的数据，比如DataV。

然后我就从网上其他渠道找json，有两种数据大小，一个要么特别小，如图，省市无边界，json大小98KB左右。要么就是文件特别大，达到了9MB左右。然后我在echarts-gl中使用的时候会特别卡顿，因为其他正常规格的geoJson在一百多KB左右。

这里我就要提到一个库了：simplify-geojson。安装命令如下：

npm install simplify-geojson

二、思路

我们的思路是将完整的地图简化成我们所需要的只有省市边界的json。

首先，我们可以拿到一个完整的也就是那个9MB的台湾地图，链接如下：https://gitee.com/cqdx/twgeojson/raw/master/json/twCounty2010.geo.json

然后，使用nodejs将该文件进行处理和简化，在过程中我发现地区是繁体字，所以顺便替换了下，你们可以手动替换：

const fs = require('fs');
const simplify = require('simplify-geojson');

// 读取并解析 JSON 文件
fs.readFile('d:\\shen\\front-site\\src\\assets\\twCounty2010.geo.json', 'utf8', (err, data) => {
  if (err) {
    console.error('读取文件出错:', err);
    return;
  }

  try {
    const geoJson = JSON.parse(data);
    console.log('原始数据特征数量:', geoJson.features.length);

    // 过滤数据，只保留指定的市
    const provinceCityNames = [
      '台東縣',
      '宜蘭縣',
      '台北市',
      '雲林縣',
      '桃園縣',
      '屏東縣',
      '台中市',
      '台南市',
      '基隆市',
      '連江縣',
      '南投縣',
      '澎湖縣',
      '苗栗縣',
      '嘉義市',
      '新竹縣',
      '新北市',
      '花蓮縣',
      '高雄市',
      '彰化縣',
      '嘉義縣',
      '金門縣',
      '新竹市',
    ];

    const simplifiedFeatures = geoJson.features.filter((feature) => {
      return provinceCityNames.includes(feature.properties.COUNTYNAME);
    });

    console.log('简化后数据特征数量:', simplifiedFeatures.length);

    // 将地区名称从繁体字转换为简体字
    const traditionalToSimplified = {
      台東縣: '台东县',
      宜蘭縣: '宜兰县',
      台北市: '台北市',
      雲林縣: '云林县',
      桃園縣: '桃园县',
      屏東縣: '屏东县',
      台中市: '台中市',
      台南市: '台南市',
      基隆市: '基隆市',
      連江縣: '连江县',
      南投縣: '南投县',
      澎湖縣: '澎湖县',
      苗栗縣: '苗栗县',
      嘉義市: '嘉义市',
      新竹縣: '新竹县',
      新北市: '新北市',
      花蓮縣: '花莲县',
      高雄市: '高雄市',
      彰化縣: '彰化县',
      嘉義縣: '嘉义县',
      金門縣: '金门县',
      新竹市: '新竹市',
    };

    simplifiedFeatures.forEach((feature) => {
      const traditionalName = feature.properties.COUNTYNAME;
      if (traditionalToSimplified[traditionalName]) {
        feature.properties.COUNTYNAME = traditionalToSimplified[traditionalName];
      }
    });

    // 使用 simplify-geojson 简化坐标点
    const simplifiedGeoJson = simplify(
      {
        ...geoJson,
        features: simplifiedFeatures,
      },
      0.01
    ); // 0.01 是简化的容差值，可以根据需要调整

    // 保存简化后的数据
    fs.writeFile(
      'd:\\shen\\front-site\\src\\assets\\twCounty2010_simplified.geo.json',
      JSON.stringify(simplifiedGeoJson),
      'utf8',
      (err) => {
        if (err) {
          console.error('写入文件出错:', err);
        } else {
          console.log('简化后的 GeoJSON 文件已保存。');
        }
      }
    );
  } catch (parseError) {
    console.error('解析 JSON 出错:', parseError);
  }
});

在终端运行node simplifyJson.js即可处理简化json文件了。