H5+JS去除geojson重复数据【从本地选择文件、导出JSON文件】

本文链接：https://blog.csdn.net/AdminGuan/article/details/126876208

该博客展示了如何使用JavaScript处理GeoJSON文件，实现数据去重并导出。用户可以选择文件，然后通过提供的按钮导出去重后的数组和名称列表。去重函数通过检查属性名称来过滤重复项，导出文件功能则将处理后的数据转换为JSON格式并触发下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

选择文件

<div><input type="file" id="updateInput"></div>

/* 选择文件 */
document.getElementById("updateInput").onchange = function() {
  const resultFile = document.getElementById("updateInput").files[0]; // 获取文件
  const fileLen = resultFile.name.lastIndexOf("."); // 文件名长度
  var fileName = resultFile.name.substring(0, fileLen); // 文件名称
  const reader = new FileReader(); // 新建一个FileReader
  reader.readAsText(resultFile, 'UTF-8'); // 读取文件
  reader.onload = function(e) {
    const fileString = e.target.result; // 读取的文件内容
  }
}

去重

/* 去重 */
function unique(arr) {
  arr = JSON.parse(arr); // 将字符串解析为JavaScript对象
  var newArr = [], // 去重后的数组
    nameList = []; // 名称列表
  newArr = arr.features.filter(function(item) {
    return newArr.includes(item.properties.name) ? '' : newArr.push(item.properties.name);
  })
  newArr.forEach(item => {
    nameList.push({
      name: item.properties.name,
      value: 0,
      other: []
    })
  })
  console.log('去重后的数组：', newArr);
  console.log('名称列表：', nameList);
}

导出json文件

/* 导出json文件 */
function exportJSON(data, fName) {
  if (data.length <= 0) {
    alert('请选择文件');
    return;
  }
  if (typeof data === "object") {
    data = JSON.stringify(data, undefined, 4); // 将JavaScript对象转换为字符串
  }
  const blob = new Blob([data], {
      type: "text/json"
    }),
    e = document.createEvent("MouseEvents"),
    a = document.createElement("a");
  a.download = fName; // 文件名
  a.href = window.URL.createObjectURL(blob);
  a.dataset.downloadurl = ["text/json", a.download, a.href].join(":");
  e.initMouseEvent(
    "click",
    true,
    false,
    window,
    0,
    0,
    0,
    0,
    0,
    false,
    false,
    false,
    false,
    0,
    null
  );
  a.dispatchEvent(e);
}

完整代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS去除geojson重复数据</title>
  </head>
  <body>
    <div><input type="file" id="updateInput"></div>
    <div style="margin-top: 30px">
      <button id="exportMap">导出去重后的数组</button>
      <button id="exportName">导出名称列表</button>
    </div>
    <div style="margin-top: 30px"><button id="exportAll">导出全部文件</button></div>
  </body>
  <script>
    var fileName = "", // 文件名称
      newArr = [], // 去重后的数组
      nameList = []; // 名称列表
    /* 选择文件 */
    document.getElementById("updateInput").onchange = function() {
      const resultFile = document.getElementById("updateInput").files[0]; // 获取文件
      const fileLen = resultFile.name.lastIndexOf("."); // 文件名长度
      fileName = resultFile.name.substring(0, fileLen); // 文件名称
      const reader = new FileReader(); // 新建一个FileReader
      reader.readAsText(resultFile, 'UTF-8'); // 读取文件
      reader.onload = function(e) {
        const fileString = e.target.result; // 读取的文件内容
        unique(fileString); // 去重
      }
    }
    /* 去重 */
    function unique(arr) {
      arr = JSON.parse(arr); // 将字符串解析为JavaScript对象
      newArr = []; // 去重后的数组
      nameList = []; // 名称列表
      newArr = arr.features.filter(function(item) {
        return newArr.includes(item.properties.name) ? '' : newArr.push(item.properties.name);
      })
      newArr.forEach(item => {
        nameList.push({
          name: item.properties.name,
          value: 0,
          other: []
        })
      })
      console.log('去重后的数组：', newArr);
      console.log('名称列表：', nameList);
    }
    /* 导出文件 */
    document.getElementById("exportMap").onclick = function() {
      exportJSON(newArr, fileName + '-map.json'); // 导出json文件
    }
    document.getElementById("exportName").onclick = function() {
      exportJSON(nameList, fileName + '-name.json'); // 导出json文件
    }
    document.getElementById("exportAll").onclick = function() {
      exportJSON(newArr, fileName + '-map.json'); // 导出json文件
      exportJSON(nameList, fileName + '-name.json'); // 导出json文件
    }
    /* 导出json文件 */
    function exportJSON(data, fName) {
      if (data.length <= 0) {
        alert('请选择文件');
        return;
      }
      if (typeof data === "object") {
        data = JSON.stringify(data, undefined, 4); // 将JavaScript对象转换为字符串
      }
      const blob = new Blob([data], {
          type: "text/json"
        }),
        e = document.createEvent("MouseEvents"),
        a = document.createElement("a");
      a.download = fName; // 文件名
      a.href = window.URL.createObjectURL(blob);
      a.dataset.downloadurl = ["text/json", a.download, a.href].join(":");
      e.initMouseEvent(
        "click",
        true,
        false,
        window,
        0,
        0,
        0,
        0,
        0,
        false,
        false,
        false,
        false,
        0,
        null
      );
      a.dispatchEvent(e);
    }
  </script>
</html>