背景

在日常处理行政区划、POI、轨迹等 GeoJSON 数据时往往先想快速确认：

• 边界是否正确绘制
• 坐标系是否为 WGS84
• 字段结构是否符合预期

传统做法是将文件上传到在线工具或打开完整的桌面 GIS 软件。上传导致数据外泄担忧，桌面 GIS 对于“一眼看完”需求又显得过于臃肿。于是我们把 GeoJSONcn 站点里的预览编辑器抽离出来做成了一个不依赖后端的纯前端工具，并公开开源。老实说，

它解决什么痛点

• 本地渲染。无需上传服务器避免敏感数据泄漏。
• 要素级查看与编辑一次点击即可查看属性并进行局部修改。话说回来，
• 多格式导出满足不同下游程序的接入需求。
• : 双击 index.html 就可以使用，省去繁琐的依赖安装步骤。

技术实现概览

渲染的观点是，Leaflet 与坐标系处理

const map = L.map }).setView;L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
attribution: '© OpenStreetMap'
}).addTo;fetch
.n)
.n(geojson => {
L.geoJSON(geojson,{
说到style，{ color:'#2563eb'。weight:1 },onEachFeature:=>{
const name = f.properties && f.properties.name;if l.bindPopup;}
}).addTo，});

Leaflet 默认使用 Web Mercator 投影，但 Feature 坐标仍为 WGS84；加载时 Leaflet 自动完成经纬度到墨卡托转换，无需手动处理。注意这方面，项目仅支持 WGS84。若遇 GCJ/BD 坐标需要自行纠偏后再导入。

Turf.js 用于几何计算

// 包围盒与面积
const bbox = turf.bbox;//
const area = turf.area;// 单位平方米
console.log:',area);

导出管线细节

• KML：坐标顺序为经度、纬度、海拔；多环递归处理，按理说，
• CSV：BOM 开头避免 Excel 中文乱码。
• SvG：Equirectangular 投影映射到 viewBox，关注视口自适应与描边宽度。
• Png：dCanvas 转 Blob 或 DataURL 导出图片。

KML 与 CSV 示例代码片段：

// KML 坐标递归
function coordsToKml{
if{
return coords.map.join;}
return coords.map.join;}
// CSV 写 BOM
const csv = 'name。lon,lat
'+rows.join;不过，const blob = new Blob;

目录结构简述

geojson-preview/
├── index.html # 主入口
├── preview.html # 编辑器主体
├── leaflet/ # 地图渲染引擎
├── turf/ # 几何计算库
├── vendor/ # 第三方依赖
├── LICENSE # MIT 协议
└── README.md # 文档说明

快速开始 & 使用方式

1. # GitHub git clone https://github.com/laukuo/geojson-preview.git # Gitee git clone https://gitee.com/SmartMailer/geojson-preview.git
2. 克隆后直接在浏览器中打开 index.html。就可以使用，无需安装任何依赖或开启服务器。
3. 若需要在 file:// 协议下读取本地文件，请使用 FileReader：

   const input=document.getElementById;input.addEventListener=>{
   const reader=new FileReader;reader.onload=e=>renderGeoJSON);reader.readAsText;})，

与 GeoJSONcn 主站关系 & 二次开发建议

This repository 是 GeoJSONcn预览功能的独立开源版。主站提供四级行政区划的在线预览与下载，可直接体验完整功能；而开源版则拆解为“轻量预览 + 编辑 + 导出”，方便在自己的项目中直接集成或二次开发。

• 直接引用库: 将 leaflet/ 与 turf/ 引入页面即可复用渲染和计算逻辑；
• 嵌入 iframe: 把 preview.html 嵌套到内部程序中；
• 本地读取: 优先使用 FileReader 避免 fetch 的同源限制。
• 兼容性提示: 此工具仅支持 WGS84，经纬度坐标系请自行纠偏。
• 至于思路， 可以添加自定义投影、批量导入批处理脚本等功能。

开源地址 & 社区参与教程

• 说到GitHub。
• 再看Gitee，
• 欢迎在仓库中提 Issue 和 PR，一起完善功能与文档。