簡(jiǎn)介中國(guó)及34個(gè)省市地圖JSON文件是一套可直接用于前端地理可視化的數(shù)據(jù)包面向使用D3.js、ECharts繪制全國(guó)或省級(jí)地圖的開(kāi)發(fā)者和數(shù)據(jù)分析人員。文件以省市拼音命名覆蓋全國(guó)34個(gè)省級(jí)行政區(qū)讀者無(wú)需自行拼接或抓取地理邊界數(shù)據(jù)省去坐標(biāo)邊界整理環(huán)節(jié)可快速實(shí)現(xiàn)各級(jí)地圖的加載與交互配置。整個(gè)壓縮包共35個(gè)JSON文件容量約466KB單文件體積小、結(jié)構(gòu)規(guī)整適合按需提取單個(gè)省份或整體引入項(xiàng)目。該資源目前已有3640人學(xué)習(xí)下載常用于大數(shù)據(jù)可視化大屏、疫情/人口分布圖、區(qū)域業(yè)務(wù)看板等場(chǎng)景。包內(nèi)JSON均按國(guó)內(nèi)常用地理坐標(biāo)系組織屬性字段便于映射到ECharts的map對(duì)象也能在D3中配合投影使用同時(shí)提供china.json與各省文件方便做下鉆聯(lián)動(dòng)效果是地圖類(lèi)前端項(xiàng)目的輕量級(jí)基礎(chǔ)工具。 做數(shù)據(jù)可視化這幾年我下載次數(shù)最多的素材大概率就是中國(guó)及34個(gè)省市的地圖JSON文件了。無(wú)論是給客戶做ECharts大屏還是用Python做行政區(qū)劃數(shù)據(jù)分析第一步永遠(yuǎn)卡在同一個(gè)問(wèn)題上地圖數(shù)據(jù)從哪來(lái)、拿到的JSON能不能直接用。尤其是每次接到“全國(guó)地圖下鉆到省、市、區(qū)”的需求時(shí)最怕的就是邊界數(shù)據(jù)不完整、坐標(biāo)對(duì)不上、名稱(chēng)匹配失敗。今天這篇就把我攢下來(lái)的這套地圖JSON文件的獲取、解析和落地經(jīng)驗(yàn)一次性說(shuō)清楚。全文會(huì)從文件結(jié)構(gòu)講到下載渠道再講到ECharts注冊(cè)與坐標(biāo)轉(zhuǎn)換最后附上我踩過(guò)的幾個(gè)典型坑。希望對(duì)正在折騰地圖可視化的朋友有點(diǎn)用不管你是純前端、用Python處理數(shù)據(jù)還是偶爾做后端接口應(yīng)該都能找到自己能直接抄走的東西。1. 地圖JSON到底是個(gè)什么東西地圖JSON從本質(zhì)上說(shuō)就是用一個(gè)JSON文件把一塊區(qū)域的邊界、中心點(diǎn)、層級(jí)關(guān)系全部描述出來(lái)。日常開(kāi)發(fā)里最常見(jiàn)的格式是GeoJSON它有自己固定的數(shù)據(jù)結(jié)構(gòu)最外層通常是一個(gè)FeatureCollection對(duì)象里面裝著一個(gè)個(gè)Feature要素每個(gè)要素又分成properties和geometry兩部分。Properties里放的是屬性信息比如行政區(qū)編碼、名稱(chēng)、中心點(diǎn)坐標(biāo)geometry里放的才是這條邊界的真正遠(yuǎn)近點(diǎn)坐標(biāo)數(shù)組。很多人第一次打開(kāi)地圖JSON文件最大的感受是“頭暈”。因?yàn)槭∫患?jí)邊界的坐標(biāo)數(shù)組動(dòng)輒幾千上萬(wàn)個(gè)點(diǎn)層層嵌套的結(jié)構(gòu)讓人根本看不清哪里是開(kāi)頭哪里是結(jié)尾。其實(shí)你只需要記住一點(diǎn)就好地圖JSON最核心的信息就是邊界點(diǎn)的坐標(biāo)集合其他的字段都是給業(yè)務(wù)邏輯用的輔助信息。1.1 一張地圖JSON的內(nèi)部結(jié)構(gòu)以DataV.GeoAtlas這套最常見(jiàn)的省級(jí)數(shù)據(jù)為例一個(gè)省份的JSON文件打開(kāi)后大概長(zhǎng)這樣{ type: FeatureCollection, features: [ { type: Feature, properties: { adcode: 110000, name: 北京市, center: [116.405285, 39.904989], centroid: [116.41995, 40.04404], childrenNum: 16, level: province, parent: { adcode: 100000 }, acroutes: [100000] }, geometry: { type: MultiPolygon, coordinates: [...] } } ] }我來(lái)拆開(kāi)說(shuō)一下里面幾個(gè)關(guān)鍵字段。adcode是行政區(qū)劃代碼相當(dāng)于每個(gè)行政區(qū)的身份證號(hào)全國(guó)是100000北京市是110000后面下鉆到區(qū)縣就接著用六位編碼往上疊加。name是區(qū)域名稱(chēng)center和centroid都是中心點(diǎn)但含義不同center是官方公布的地理中心centroid是邊界多邊形計(jì)算出來(lái)的幾何質(zhì)心如果做標(biāo)注點(diǎn)位建議用centroid視覺(jué)上更居中。childrenNum表示下一級(jí)行政區(qū)數(shù)量parent表示上一級(jí)acroutes表示完整的父級(jí)鏈路數(shù)組從全國(guó)一直映射到當(dāng)前層級(jí)。geometry里的coordinates是重頭戲它存放的是區(qū)域邊界的點(diǎn)坐標(biāo)。如果區(qū)域是完整的連續(xù)地塊一般是MultiPolygon類(lèi)型里面會(huì)有多個(gè)多邊形每個(gè)多邊形再由多個(gè)環(huán)組成環(huán)由一個(gè)個(gè)經(jīng)緯度坐標(biāo)點(diǎn)組成。經(jīng)緯度順序通常是[經(jīng)度, 緯度]也就是[lon, lat]這一點(diǎn)千萬(wàn)別搞反很多新手直接把反了的坐標(biāo)丟進(jìn)地圖畫(huà)出來(lái)的形狀會(huì)歪到天上去。1.2 34個(gè)省市文件的數(shù)據(jù)關(guān)系34個(gè)省市的地圖JSON在數(shù)據(jù)組織上有一個(gè)很有意思的特征它們并不是一堆完全孤立散落的文件而是有明確父子關(guān)系的。全國(guó)地圖文件里只包含34個(gè)省級(jí)行政區(qū)的外層邊界不包含市的邊界每個(gè)省級(jí)文件里則包含它下面所有地級(jí)市的邊界再往下每個(gè)市級(jí)文件里包含區(qū)縣邊界。這種層級(jí)在DataV的數(shù)據(jù)命名里體現(xiàn)得很清楚adcode為100000的全國(guó)文件內(nèi)部的features數(shù)組就是34個(gè)省級(jí)區(qū)域每個(gè)元素里都有adcode和name字段方便你按名稱(chēng)或編碼去匹配數(shù)據(jù)。所以在實(shí)際使用中全國(guó)總圖和省圖的關(guān)系就像母圖和子圖。你要做成“點(diǎn)擊省份下鉆到市級(jí)”根本不需要一次性加載所有文件只需要先加載全國(guó)文件點(diǎn)擊某個(gè)省后動(dòng)態(tài)加載對(duì)應(yīng)的省級(jí)文件再把地圖實(shí)例重新注冊(cè)一遍就行。這種按需加載的方式能明顯減少首屏加載體積尤其是當(dāng)你只需要展示幾個(gè)省份的時(shí)候完全沒(méi)必要拖著一個(gè)幾十兆的全國(guó)完整邊界文件。2. 免費(fèi)下載中國(guó)及省市地圖JSON的三大渠道地圖JSON文件看起來(lái)稀松平常但要找到一份邊界準(zhǔn)確、坐標(biāo)系正常、帶層級(jí)關(guān)系的靠譜文件并不容易。我這些年用下來(lái)真正穩(wěn)定省心的渠道就三個(gè)下面按推薦程度排序講清楚。2.1 DataV.GeoAtlas最省事的官方渠道第一個(gè)要推薦的肯定是阿里云DataV出的GeoAtlas地理數(shù)據(jù)小工具地址在datav.aliyun.com的學(xué)校/地圖選擇器板塊。進(jìn)去之后你可以直接點(diǎn)擊中國(guó)地圖上的任意省份也可以搜索行政區(qū)名稱(chēng)頁(yè)面會(huì)實(shí)時(shí)展示該區(qū)域的地圖預(yù)覽同時(shí)提供一個(gè)JSON文件下載鏈接。我實(shí)際使用下來(lái)發(fā)現(xiàn)它還有一個(gè)非常好用的規(guī)律就是下載地址可以直接拼接。全國(guó)地圖的JSON接口是這個(gè)格式https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json后面加不加_full區(qū)別很大。帶_full表示返回的是包含下一級(jí)全部子區(qū)域的完整文件比如100000_full.json返回的就是34個(gè)省級(jí)邊界加全部地級(jí)市邊界文件更大但信息更全不帶_full則只返回當(dāng)前層級(jí)的邊界。實(shí)際做項(xiàng)目時(shí)全國(guó)大屏用100000_full.json單獨(dú)做某個(gè)省下鉆時(shí)再用對(duì)應(yīng)省份的adcode加_full。這套數(shù)據(jù)里默認(rèn)用的是GCJ-02加密坐標(biāo)在國(guó)內(nèi)地圖組件上直接渲染是沒(méi)問(wèn)題的后面章節(jié)我會(huì)細(xì)說(shuō)坐標(biāo)系的坑。用DataV的另一個(gè)好處是文件里已經(jīng)把名稱(chēng)、adcode、中心點(diǎn)這些屬性都整理好了基本不需要再做二次清洗拿過(guò)來(lái)直接registerMap就能用。我做過(guò)十多個(gè)ECharts大屏項(xiàng)目地形邊界部門(mén)從來(lái)沒(méi)因?yàn)檫@個(gè)渠道掉過(guò)鏈子。2.2 高德地圖行政區(qū)劃接口接實(shí)時(shí)數(shù)據(jù)的方案第二個(gè)渠道是高德地圖的行政區(qū)域查詢接口。如果項(xiàng)目的數(shù)據(jù)本身就跑在高德上或者你希望每次請(qǐng)求都拿到最新的邊界數(shù)據(jù)那用高德接口會(huì)更合適。需要在高德開(kāi)放平臺(tái)申請(qǐng)一個(gè)Web服務(wù)Key然后請(qǐng)求下面這個(gè)地址https://restapi.amap.com/v3/config/district?keywords北京市subdistrict2key你的Keysubdistrict參數(shù)控制返回下級(jí)層級(jí)的深度0表示只返回當(dāng)前區(qū)域2表示返回省、市、區(qū)三級(jí)。接口返回的是JSON但高德的邊界數(shù)據(jù)藏在districtList下的polyline字段里是一段用分號(hào)和逗號(hào)分隔的經(jīng)緯度字符串并不是標(biāo)準(zhǔn)的GeoJSON。你需要自己解析成坐標(biāo)數(shù)組再組裝成FeatureCollection。而且高德返回的是GCJ-02加密坐標(biāo)如果項(xiàng)目底圖用的是WGS-84的OpenStreetMap之類(lèi)的地圖解析完之后還得再做一次坐標(biāo)糾偏工作量就會(huì)上來(lái)。所以這個(gè)渠道更適合后端有一定處理能力的團(tuán)隊(duì)前端拿到的應(yīng)該是后端組裝好的GeoJSON而不是直接把高德原始返回丟給前端解析。如果你只是快速做個(gè)靜態(tài)展示沒(méi)必要選這條路。2.3 其他開(kāi)源GeoJSON資源與質(zhì)量對(duì)比除了上面兩個(gè)主力渠道還有幾個(gè)開(kāi)源項(xiàng)目也能找到中國(guó)地圖邊界數(shù)據(jù)。OpenStreetMap上可以通過(guò)Overpass API拉取國(guó)界和省界但它導(dǎo)出的是WGS-84坐標(biāo)且中國(guó)區(qū)域在OSM上的邊界完整性要看貢獻(xiàn)者的維護(hù)情況某些省市邊界會(huì)比較粗糙導(dǎo)出后還需要大量清理。Github上有不少個(gè)人維護(hù)的China GeoJSON倉(cāng)庫(kù)質(zhì)量參差不齊有些甚至是用早期數(shù)據(jù)轉(zhuǎn)的省界和市界會(huì)出現(xiàn)重疊、空洞等問(wèn)題用之前務(wù)必打開(kāi)檢查。我整理了一張對(duì)比表方便你按項(xiàng)目情況選擇渠道坐標(biāo)系統(tǒng)數(shù)據(jù)完整性實(shí)時(shí)性適合場(chǎng)景DataV.GeoAtlasGCJ-02高層級(jí)完整低頻更新ECharts等國(guó)內(nèi)地圖可視化高德APIGCJ-02高但需自行組裝GeoJSON實(shí)時(shí)后端處理、動(dòng)態(tài)數(shù)據(jù)系統(tǒng)OSM / Github倉(cāng)庫(kù)WGS-84為主參差不齊不定需自行清洗不建議生產(chǎn)環(huán)境我個(gè)人的建議是默認(rèn)優(yōu)先用DataV能省掉九成麻煩。只有當(dāng)項(xiàng)目對(duì)坐標(biāo)系統(tǒng)有特定要求或者需要用WGS-84做跨平臺(tái)地圖分析時(shí)再轉(zhuǎn)向OSM渠道并做好坐標(biāo)轉(zhuǎn)換。3. ECharts地圖可視化從JSON文件到可交互大屏拿到地圖JSON之后下一步基本就是把它渲染出來(lái)。國(guó)內(nèi)做地圖大屏最常用的就是ECharts它對(duì)GeoJSON的原生支持做得非常好只需要兩三個(gè)步驟就能把省級(jí)地圖掛到頁(yè)面上。3.1 JSON文件加載和注冊(cè)在ECharts里使用自定義地圖數(shù)據(jù)核心是registerMap方法。如果你用的是Vite或Webpack這類(lèi)打包工具可以這樣寫(xiě)import * as echarts from echarts; import chinaJson from ./assets/china.json; echarts.registerMap(china, chinaJson); const chart echarts.init(document.getElementById(map-container)); chart.setOption({ series: [ { type: map, map: china, roam: true, data: [ { name: 北京市, value: 100 }, { name: 廣東省, value: 88 } ] } ] });registerMap的第一個(gè)參數(shù)是你給這份地圖起的注冊(cè)名想叫什么都可以但保持一致就行。第二個(gè)參數(shù)就是剛才講過(guò)的GeoJSON對(duì)象可以直接import也可以先用fetch請(qǐng)求回來(lái)再傳入。這里有個(gè)容易踩的坑就是打包工具對(duì)json模塊的解析方式可能不一樣比較穩(wěn)妥的方式是先通過(guò)fetch把JSON文本取回來(lái)再用JSON.parse轉(zhuǎn)成對(duì)象這樣在Node環(huán)境、瀏覽器環(huán)境里都不容易出岔子。如果是做省份下鉆點(diǎn)擊事件里需要重新注冊(cè)地圖再setOption。偽代碼大概是這樣的chart.on(click, (params) { const adcode params.data.adcode || mapAdcodeMap[params.name]; fetch(https://geo.datav.aliyun.com/areas_v3/bound/${adcode}_full.json) .then(res res.json()) .then(json { echarts.registerMap(province, json); chart.setOption({ series: [{ type: map, map: province }] }); }); });這樣整體體驗(yàn)就順了點(diǎn)省份地圖無(wú)縫下鉆到市級(jí)用返回按鈕或屏幕左上角一個(gè)路徑導(dǎo)航再做上鉆交互手感基本可以對(duì)齊很多商業(yè)大屏模板了。3.2 數(shù)據(jù)名稱(chēng)匹配與樣式適配做地圖可視化最頭大的問(wèn)題之一是名稱(chēng)匹配。ECharts的map數(shù)據(jù)是根據(jù)name字段去匹配GeoJSON里features的properties.name的如果后端返回的名稱(chēng)是“北京”而地圖JSON里的名稱(chēng)是“北京市”那么這件數(shù)據(jù)就不會(huì)落到地圖上對(duì)應(yīng)區(qū)域會(huì)變成空白。處理辦法是在后端或前端做一層名稱(chēng)歸一化我一般會(huì)維護(hù)一個(gè)映射字典把所有常見(jiàn)縮寫(xiě)和全稱(chēng)統(tǒng)一成標(biāo)準(zhǔn)名稱(chēng)function normalizeName(name) { const map { 北京: 北京市, 上海: 上海市, 廣東: 廣東省, 內(nèi)蒙古: 內(nèi)蒙古自治區(qū), 新疆: 新疆維吾爾自治區(qū), 西藏: 西藏自治區(qū) }; return map[name] || name; }規(guī)格化之后再傳給series.data里的name字段匹配率能達(dá)到接近百分之百。名稱(chēng)匹配上之后剩下的就可以自由發(fā)揮了比如給區(qū)域加漸變顏色、給tooltip加單位后綴、根據(jù)value大小做視覺(jué)映射這些都可以用ECharts的visualMap組件實(shí)現(xiàn)。我通常會(huì)把省份名稱(chēng)作為第一列可視化維度因?yàn)榈貓D天然就有地理空間感比柱狀圖帶入感強(qiáng)太多。4. 坐標(biāo)系、數(shù)據(jù)清洗與文件轉(zhuǎn)換的深坑地圖JSON用久了之后你會(huì)發(fā)現(xiàn)真正的坑往往不在渲染而在數(shù)據(jù)和坐標(biāo)。這一節(jié)說(shuō)幾個(gè)我反復(fù)踩、也反復(fù)幫別人排查過(guò)的問(wèn)題。4.1 坐標(biāo)系三兄弟WGS-84、GCJ-02、BD-09國(guó)內(nèi)做地圖繞不開(kāi)的坐標(biāo)系就是WGS-84、GCJ-02和BD-09。WGS-84是GPS全球定位系統(tǒng)用的國(guó)際標(biāo)準(zhǔn)坐標(biāo)谷歌地球、OpenStreetMap這類(lèi)平臺(tái)用的大多是這個(gè)GCJ-02是中國(guó)國(guó)內(nèi)使用的一種加密坐標(biāo)也叫火星坐標(biāo)高德、騰訊地圖以及阿里DataV的GeoJSON用的都是它BD-09則是百度地圖在GCJ-02基礎(chǔ)上再做一層偏移的坐標(biāo)只用于百度體系。很多困惑都可以歸結(jié)為一個(gè)點(diǎn)不同來(lái)源的坐標(biāo)不能直接混合使用。比如你從高德接口拿到的邊界是GCJ-02但從Github上下載的地圖JSON可能是WGS-84兩者相差大概幾百米在大比例尺的區(qū)縣級(jí)地圖上非常明顯邊界會(huì)整體偏出底圖輪廓。處理的辦法就是在數(shù)據(jù)層面做坐標(biāo)轉(zhuǎn)換。網(wǎng)上有很多現(xiàn)成的坐標(biāo)轉(zhuǎn)換庫(kù)Node端可以用coordtransformPython端可以用幾種開(kāi)源實(shí)現(xiàn)核心就是把WGS-84和GCJ-02之間的偏移量算出來(lái)再修正回去。我自己的習(xí)慣是如果項(xiàng)目所有底圖和邊界數(shù)據(jù)都來(lái)自國(guó)內(nèi)渠道那統(tǒng)一用GCJ-02如果涉及海外地圖或OpenStreetMap底圖那就統(tǒng)一轉(zhuǎn)成WGS-84。最忌諱的是一個(gè)項(xiàng)目里混用兩套坐標(biāo)那排查起來(lái)真的會(huì)讓人崩潰。4.2 壓縮、格式轉(zhuǎn)換與Python處理地圖JSON文件通常幾兆到十幾兆不等如果項(xiàng)目對(duì)首屏性能要求高建議做壓縮和簡(jiǎn)化。最常用的工具是mapshaper一條命令就能把GeoJSON轉(zhuǎn)換成簡(jiǎn)化后的版本npx mapshaper china.json -simplify 10% -o china_simplified.json-simplify 10%表示保留大約10%的點(diǎn)文件體積能減小到原來(lái)的十分之一左右。需要注意比例太小會(huì)讓省界變得非常粗糙出現(xiàn)明顯的折線和鋸齒一般做省級(jí)大屏用20%到30%比較穩(wěn)妥做全國(guó)總覽用10%也能接受。如果你習(xí)慣用Python處理數(shù)據(jù)也可以用geopandas來(lái)讀取和轉(zhuǎn)換GeoJSONimport geopandas as gpd gdf gpd.read_file(china.json) gdf gdf.to_crs(EPSG:4326) gdf.to_file(china_4326.json, driverGeoJSON)geopandas最大的好處是可以方便地對(duì)屬性字段做過(guò)濾和清洗。比如你只需要華東地區(qū)的幾個(gè)省市直接對(duì)name字段做條件篩選后導(dǎo)出就行比手工維護(hù)文件要省事得多。另外部分老文件是TopoJSON格式它把邊界做成了拓?fù)渚幋a體積更小但結(jié)構(gòu)更復(fù)雜ECharts不直接支持需要先用topojson-client或mapshaper轉(zhuǎn)成GeoJSON后再用。4.3 省市名稱(chēng)不一致問(wèn)題與兜底方案名稱(chēng)不一致這個(gè)問(wèn)題我單獨(dú)拿出來(lái)說(shuō)是因?yàn)樗趯?shí)際項(xiàng)目中出現(xiàn)的頻率實(shí)在太高。數(shù)據(jù)源可能返回“廣東省”也可能返回“廣東”甚至可能返回“廣東省-廣州市”這種帶路徑的格式。如果只是展示全國(guó)大屏名稱(chēng)不匹配最多讓某個(gè)省市空白但如果是做下鉆交互名稱(chēng)對(duì)不上會(huì)導(dǎo)致點(diǎn)擊事件拿不到adcode整個(gè)下鉆鏈路直接斷掉。除了維護(hù)映射字典我還會(huì)在數(shù)據(jù)接入層做一個(gè)兜底邏輯先用name精確匹配匹配不到就改用adcode匹配再匹配不到就嘗試去掉“省、市、區(qū)、自治區(qū)、特別行政區(qū)”等后綴后進(jìn)行模糊匹配。三層匹配下來(lái)基本能覆蓋百分之九十九的場(chǎng)景。如果你手頭數(shù)據(jù)源比較多還可以把映射表存成一份獨(dú)立JSON文件前端和后端共用方便后續(xù)增量維護(hù)。5. 常見(jiàn)問(wèn)題速查與排查思路最后整理幾個(gè)我實(shí)際操作中大概率會(huì)遇到的問(wèn)題按“現(xiàn)象、原因、解決”的方式寫(xiě)出來(lái)收藏一下下次排查能少走很多彎路。5.1 地圖白屏或完全不顯示的五個(gè)檢查項(xiàng)地圖白屏是最常見(jiàn)的問(wèn)題大部分時(shí)候都不是代碼寫(xiě)錯(cuò)了而是數(shù)據(jù)本身有問(wèn)題。我從易到難排一下檢查順序。第一確認(rèn)JSON文件內(nèi)容是否為合法JSON很多編輯器會(huì)默認(rèn)給文件加BOM頭用JSON.parse解析時(shí)會(huì)直接報(bào)錯(cuò)第二確認(rèn)數(shù)據(jù)里是否包含features字段如果下載的是不帶FeatureCollection結(jié)構(gòu)的普通JSONECharts沒(méi)法識(shí)別第三確認(rèn)registerMap的第二個(gè)參數(shù)是對(duì)象而不是字符串一種低級(jí)錯(cuò)誤是直接傳了文件名第四確認(rèn)地圖容器有實(shí)際高度ECharts初始化時(shí)容器高度為0會(huì)導(dǎo)致圖表不渲染第五確認(rèn)坐標(biāo)系與底圖是否匹配如果底圖是高德而邊界是WGS-84地圖雖然能渲染但邊界會(huì)整體偏移看起來(lái)就像顯示了一塊錯(cuò)誤區(qū)域。5.2 常見(jiàn)報(bào)錯(cuò)信息解讀報(bào)錯(cuò)信息常見(jiàn)原因解決思路Unexpected token in JSON文件不是純JSON混入了HTML或注釋檢查下載鏈接是否正確去掉BOMCannot read properties of undefinedGeoJSON結(jié)構(gòu)不完整features為空換數(shù)據(jù)源或重新導(dǎo)出series.map.map can not be foundregisterMap未執(zhí)行或注冊(cè)名不一致核對(duì)map參數(shù)名確認(rèn)執(zhí)行順序Invalid GeoJSON坐標(biāo)范圍異?；蛞蚋呔S數(shù)組層級(jí)錯(cuò)誤無(wú)效用geopandas重新校驗(yàn)并精簡(jiǎn)結(jié)構(gòu)5.3 地圖邊界偏移問(wèn)題如何處理如果你的地圖渲染出來(lái)邊界和底圖明顯錯(cuò)位十有八九是坐標(biāo)系不一致。用高德底圖配GCJ-02數(shù)據(jù)最穩(wěn)用OSM底圖配WGS-84最穩(wěn)。如果非要把GCJ-02的數(shù)據(jù)放到WGS-84底圖上就得自己寫(xiě)偏移修正函數(shù)。網(wǎng)上有很多現(xiàn)成代碼核心思想是先計(jì)算GCJ-02相對(duì)WGS-84的偏移量再把每個(gè)坐標(biāo)點(diǎn)減去這個(gè)偏移。修改完之后建議在一個(gè)已知坐標(biāo)點(diǎn)做驗(yàn)證比如某個(gè)城市的市政府位置渲染出來(lái)要能正好落在正確位置。我個(gè)人在實(shí)際操作中的體會(huì)是地圖JSON這層數(shù)據(jù)選對(duì)來(lái)源解決了八成問(wèn)題剩下兩成時(shí)間基本都花在名稱(chēng)和層級(jí)的匹配邏輯上。DataV的文件雖然好用但也要在項(xiàng)目里做一層數(shù)據(jù)緩存不要每次刷新頁(yè)面都從遠(yuǎn)程拉全量的幾百兆內(nèi)容部署時(shí)盡量把這些JSON文件放到自己的靜態(tài)目錄下既保證訪問(wèn)速度也避免依賴外部接口的穩(wěn)定性。最后再分享一個(gè)小技巧在下鉆交互里我會(huì)額外緩存用戶點(diǎn)擊過(guò)的省份JSON返回上鉆時(shí)直接從內(nèi)存或localStorage里讀而不是再fetch一次。這樣反復(fù)切換省市時(shí)體驗(yàn)會(huì)順滑很多整個(gè)地圖感覺(jué)才會(huì)真正“活”起來(lái)。本文還有配套的精品資源點(diǎn)擊獲取