背景日常处理行政区划、POI、轨迹等 GeoJSON 数据时经常需要先看一眼边界画得对不对、坐标系是不是 WGS84、字段结构是否符合预期。常见的做法是把文件传到在线工具或者打开一个完整的桌面 GIS。前者有数据外泄的顾虑后者对于一个看一眼的需求又太重。我们把 GeoJSONcn 站点里的预览编辑器抽出来做成了一个不依赖任何后端的纯前端工具并开源出来。它解决什么问题本地打开 GeoJSON 即可渲染数据不上传服务器支持要素级的查看与编辑能把同一份数据导出成 GeoJSON / KML / SVG / CSV / PNG对接不同的下游系统不需要npm install不需要构建双击index.html就能用。技术实现渲染Leaflet 与坐标系核心就是用地图库把 GeoJSON 画出来。下面是一段最小可用的加载代码// 初始化地图并加载一份 GeoJSON// 要素量大时把渲染器从默认 SVG 换成 Canvas避免 DOM 节点过多卡顿constmapL.map(map,{renderer:L.canvas()}).setView([39.9,116.4],4);L.tileLayer(https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png,{attribution:© OpenStreetMap}).addTo(map);fetch(example.geojson).then(rr.json()).then(geojson{L.geoJSON(geojson,{style:{color:#2563eb,weight:1.5},onEachFeature:(feature,layer){constnamefeature.propertiesfeature.properties.name;if(name)layer.bindPopup(name);}}).addTo(map);});这里有个容易混淆的点Leaflet 的地图视图默认使用 Web MercatorEPSG:3857投影但Feature 的坐标本身仍是 EPSG:4326WGS84Leaflet 在加载时会自动完成经纬度到墨卡托的转换开发者无需手动处理。需要提醒的是本项目只处理 WGS84 数据。国内的地图数据常常混用 GCJ-02火星坐标系或 BD-09本项目目前没有内置纠偏逻辑如果拿到的数据偏移明显需要先自行纠偏再导入。计算Turf.js要素的几何操作计算包围盒、合并、切分、面积量算等交给 Turf.js。本仓库把 Turf 以本地文件形式打包在turf/目录里页面里直接通过全局turf对象调用无需打包工具// 用 Turf 计算要素包围盒与面积turf 为仓库内置的全局对象constbboxturf.bbox(geojson);// [minX, minY, maxX, maxY]constareaturf.area(geojson);// 单位平方米console.log(包围盒:,bbox,面积(㎡):,area);预览页里切分选中要素这类能力就是从主站编辑器移植过来的底层依赖 Turf 的几何运算。导出管线几种导出格式各自有几个容易踩坑的技术点// KML 坐标顺序是 经度,纬度,海拔注意和 GeoJSON 的 [lon, lat] 对应多一个高程// 多环 / 多维坐标需要递归处理functioncoordsToKml(coords){if(typeofcoords[0][0]number){returncoords.map(c${c[0]},${c[1]},0).join( );}returncoords.map(coordsToKml).join( );}// 导出 CSV 时在开头写入 BOM避免 Excel 打开中文乱码constcsvname,lon,lat\nrows.join(\n);constblobnewBlob([\uFEFFcsv],{type:text/csv;charsetutf-8;});GeoJSON最直接把内存里的 FeatureCollection 序列化即可注意保留properties与坐标系声明。KML需要按DocumentPlacemarkPolygonouterBoundaryIsLinearRingcoordinates的结构组织坐标顺序经度,纬度,海拔转换时别写反见上。SVG把[经度, 纬度]用等距圆柱投影线性映射到viewBox的像素坐标输出path dM x y L x y Z。投影本身很简单难点在视口自适应和描边宽度的处理。CSV每个要素一行属性平铺成列字段含中文且要进 Excel 时文件开头需带 BOMEF BB BF否则中文乱码见上。PNG把当前渲染结果绘制到canvas后用toBlob/toDataURL导出图片。目录结构geojson-preview/ ├── index.html # 入口页说明 主站入口 ├── preview.html # 预览编辑器本体 ├── leaflet/ # 地图渲染引擎 ├── turf/ # 几何计算 ├── vendor/ # 其他第三方依赖 ├── LICENSE # MIT ├── NOTICE └── README.md整个项目是静态文件没有打包步骤依赖都以本地文件形式存在leaflet/、turf/、vendor/目录里。快速开始# GitHubgitclone https://github.com/laukuo/geojson-preview.git# Giteegitclone https://gitee.com/SmartMailer/geojson-preview.git克隆后用浏览器直接打开index.html即可无需安装依赖、无需启动服务。与 GeoJSONcn 主站的关系这个仓库是 GeoJSONcn全国行政区划边界矢量数据下载平台预览功能的独立开源版。主站还提供省、市、区县、乡镇街道四级行政区划边界数据的在线预览与下载你也可以直接在 在线预览页 体验完整功能开源版把轻量预览 编辑 导出这一段单独拆了出来方便在自己的项目里直接集成或做二次开发。二次开发与集成几种常见的接入方式在自己的页面里直接引用本仓库的leaflet/与turf/复用渲染与计算逻辑把preview.html以iframe的形式嵌到内部系统里本地加载 GeoJSON 时优先用FileReader读取用户选定的文件而不是fetch本地路径——后者在file://协议下会受到浏览器同源策略限制// file:// 下用 FileReader 读本地文件避开 fetch 的同源限制constinputdocument.getElementById(file);input.addEventListener(change,(){constreadernewFileReader();reader.onloaderenderGeoJSON(JSON.parse(e.target.result));reader.readAsText(input.files[0]);});开源地址代码基于 MIT 协议发布同时托管在 GitHub 与 GiteeGitHubhttps://github.com/laukuo/geojson-previewGiteehttps://gitee.com/SmartMailer/geojson-preview欢迎在仓库里提 Issue 和 PR。相关链接开源仓库GitHubhttps://github.com/laukuo/geojson-preview开源仓库Giteehttps://gitee.com/SmartMailer/geojson-preview项目主站https://geojsoncn.com/在线预览https://geojsoncn.com/preview.html