下载的 GeoJSON 怎么离线预览？拖拽上传 + 本地校验三件套

发布于 2026-08-11 · GeoJSONcn 技术团队 · 阅读约 13 分钟

从 geojsoncn.com 这类站点完成 GeoJSON下载之后，很多人第一步不是写代码，而是想先"看一眼"边界长什么样。开 ArcGIS 太重，装 QGIS 要点半天，直接拖进浏览器又经常报错。其实只要用原生的 Web API 加一个轻量地图库，再配合几行校验逻辑，就能凑出一个完全够用的本地 GeoJSON 预览工具，全程零后端、零依赖下载。

一、拖拽文件进来，先拿 File 对象

页面放一个 drop 区，监听 dragover 阻止默认行为，drop 里就能拿到 dataTransfer.files。这一步是零依赖的：

dropZone.addEventListener('dragover', e => e.preventDefault());
dropZone.addEventListener('drop', async e => {
  e.preventDefault();
  const file = e.dataTransfer.files[0];
  if (!file) return;
  const text = await file.text();
  try {
    const geojson = JSON.parse(text);
    renderMap(geojson);           // 交给 Leaflet 渲染
  } catch (err) {
    statusEl.textContent = '解析失败：' + err.message;
  }
});

.text() 是 File 自带的，几 MB 的内存读没问题；真要碰几百 MB 的大文件，就要换回之前聊过的换行式流式解析，别一股脑 JSON.parse。做完 GeoJSON下载，这份代码贴到