背景日常處理行政區劃、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