簡(jiǎn)介本資源是一個(gè)基于Three.js與Vue.js實(shí)現(xiàn)的交互式中國(guó)3D地理可視化項(xiàng)目面向前端開發(fā)者、GIS初學(xué)者及Web 3D技術(shù)實(shí)踐者解決傳統(tǒng)二維地圖缺乏空間感知與動(dòng)態(tài)交互的問題適用于數(shù)字孿生、政務(wù)可視化、教學(xué)演示等場(chǎng)景。壓縮包共2000個(gè)文件主體為2002個(gè)JavaScript文件含three.module.js、web-ifc-api.js等核心3D庫(kù)、165個(gè)JSON格式地理數(shù)據(jù)與配置文件、50個(gè)Markdown文檔說明及少量CSS/HTML資源整體體積11.35MB結(jié)構(gòu)模塊清晰涵蓋場(chǎng)景初始化、省份網(wǎng)格建模、相機(jī)控制、光照紋理配置與Vue響應(yīng)式狀態(tài)管理邏輯。已有3829人學(xué)習(xí)下載提供開箱即用的Three-chinaMap-Demo.html入口完整包含地形渲染、鼠標(biāo)拖拽縮放、區(qū)域點(diǎn)擊高亮、LOD性能優(yōu)化等可運(yùn)行功能是深入理解WebGL封裝、Vue 3D狀態(tài)聯(lián)動(dòng)與大規(guī)模地理數(shù)據(jù)可視化的優(yōu)質(zhì)實(shí)踐樣本。 去年接了一個(gè)展廳數(shù)據(jù)可視化需求要在現(xiàn)場(chǎng)大屏上放一張中國(guó)3D地圖能看省份海拔差異、重點(diǎn)城市分布、還有點(diǎn)擊省份彈出業(yè)務(wù)數(shù)據(jù)。當(dāng)時(shí)第一反應(yīng)就是用 Three.js因?yàn)橐氖钦嫒S不是那種用 CSS 搞出來的偽 3D。整個(gè)項(xiàng)目最終用 Vue Three.js 完成前后大概兩周時(shí)間踩了不少坑也總結(jié)出一套可以直接復(fù)用的流程。這篇文章就把整個(gè)項(xiàng)目從技術(shù)選型到核心實(shí)現(xiàn)、再到坑位排查完整拆一遍希望對(duì)正在做 Web 3D 可視化大屏的朋友有幫助。先說結(jié)論Vue 負(fù)責(zé)頁面骨架、交互狀態(tài)和業(yè)務(wù)數(shù)據(jù)Three.js 負(fù)責(zé)地圖渲染和三維場(chǎng)景兩者通過組件生命周期綁定用 ref 掛載 DOM用 reactive 驅(qū)動(dòng)場(chǎng)景狀態(tài)。這套分工在實(shí)操里非常順也是后文展開的主線。1. 為什么是 Three.js Vue而不是其他方案1.1 Three.js 到底解決了什么問題很多人會(huì)問地圖可視化用 ECharts 或者 Mapbox 不就行了為什么還要上 Three.js我的回答是視業(yè)務(wù)目標(biāo)而定。ECharts 的 map3D 確實(shí)能做出帶擠出效果的 3D 地圖但它的擴(kuò)展邊界很明顯——你想在某個(gè)城市上方放一個(gè)動(dòng)態(tài)波紋標(biāo)記、想從北京畫一條飛到烏魯木齊的曲線、想讓相機(jī)沿著某個(gè)路徑自動(dòng)巡航這些在 ECharts 里做起來要么依賴 hack要么干脆做不了。Three.js 是底層 WebGL 渲染引擎本質(zhì)上是給你一塊自由的 3D 畫布地圖只是你在這塊畫布上搭出來的一個(gè)場(chǎng)景而已。換句話說Three.js 不是“地圖庫(kù)”它比地圖庫(kù)更底層也更靈活。這次項(xiàng)目里實(shí)際用到的高頻能力包括幾何體擠出ExtrudeGeometry、多邊形輪廓線、Raycaster 點(diǎn)擊拾取、OrbitControls 相機(jī)控制、Sprite 標(biāo)記點(diǎn)、CatmullRomCurve3 飛線。這些在 Three.js 里都是成熟能力組合起來就能做出一張交互感很強(qiáng)的中國(guó)3D地圖。1.2 Vue 在這里不是主角但離了它很別扭地圖主體雖然是 Three.js 干的但整個(gè)頁面不可能只有一張地圖左側(cè)要放省份數(shù)據(jù)排行右側(cè)要放選中省份的詳情面板底部可能還有時(shí)間軸篩選。這些 UI 和地圖之間需要聯(lián)動(dòng)比如鼠標(biāo)懸停到某個(gè)省右側(cè)面板實(shí)時(shí)更新點(diǎn)擊某個(gè)省地圖視角飛過去。如果純用原生 JS 寫這些狀態(tài)管理會(huì)非常痛苦而 Vue 的響應(yīng)式數(shù)據(jù)天生就適合干這事。我的做法是把“當(dāng)前選中省份”“當(dāng)前懸停省份”這類狀態(tài)放在 Vue 的 reactive 對(duì)象里Three.js 側(cè)監(jiān)聽這些狀態(tài)變化對(duì)應(yīng)更新地圖材質(zhì)顏色、相機(jī)位置、UI 面板內(nèi)容。反過來Three.js 的 Raycaster 拾取到省份后修改的也是 Vue 的響應(yīng)式對(duì)象這樣 UI 和 3D 場(chǎng)景就形成了一個(gè)閉環(huán)數(shù)據(jù)流。這個(gè)思路對(duì)于所有用 Three.js 做數(shù)據(jù)可視化大屏的項(xiàng)目都適用。2. 環(huán)境搭建與地圖數(shù)據(jù)預(yù)處理2.1 快速初始化 Vue3 Vite Three.js 開發(fā)環(huán)境這個(gè)項(xiàng)目我用的 Vite 而不是 Vue CLI原因很簡(jiǎn)單Vite 冷啟動(dòng)快、熱更新快在開發(fā)階段會(huì)舒服很多。Node.js 版本用的是 18直接按官方文檔創(chuàng)建命令如下npm create vitelatest china-3d-map -- --template vue cd china-3d-map npm install npm install three npm install --save-dev unplugin-auto-import unplugin-vue-components裝完以后先確認(rèn)一下 three 的版本。我寫這篇文章時(shí) three 已經(jīng)到 0.160 了API 基本穩(wěn)定下面示例代碼在 0.150 ~ 0.170 之間都能跑。不過要注意一個(gè)小變化新版本里THREE.Geometry已經(jīng)移除很久了所有幾何體都是BufferGeometry寫代碼時(shí)別再用舊 API。項(xiàng)目里還需要引入地圖 GeoJSON 數(shù)據(jù)。中國(guó)省份邊界的 GeoJSON 可以在阿里云 DataV 的公開數(shù)據(jù)集里拿到搜索“china.json”或者“中國(guó)地圖 geojson”就能找到。我用的這份數(shù)據(jù)包含了省份名稱、adcode、以及對(duì)應(yīng)的多邊形坐標(biāo)數(shù)組格式是標(biāo)準(zhǔn)的 GeoJSON FeatureCollection。2.2 GeoJSON 坐標(biāo)數(shù)據(jù)解析從經(jīng)緯度到 3D 平面坐標(biāo)拿到 GeoJSON 以后第一步不是急著渲染而是把經(jīng)緯度坐標(biāo)轉(zhuǎn)換成 Three.js 場(chǎng)景里能用的平面坐標(biāo)。這里面有個(gè)新手最容易踩的坑直接把經(jīng)緯度當(dāng)成 x/y 用。中國(guó)地圖的大致范圍是經(jīng)度 73°~135°、緯度 18°~54°如果你原樣用這組數(shù)字去創(chuàng)建幾何體地圖確實(shí)能顯示出來但它會(huì)跑到坐標(biāo)軸的右上方很遠(yuǎn)的地方而且比例失衡相機(jī)很難定位。比較穩(wěn)妥的做法是先計(jì)算整個(gè)數(shù)據(jù)集的最小/最大經(jīng)緯度然后按比例映射到一個(gè)以原點(diǎn)為中心的矩形區(qū)域內(nèi)。下面是我項(xiàng)目里實(shí)際用的投影函數(shù)function normalizeGeoJSON(features, width 100, height 100) { // 1. 計(jì)算經(jīng)緯度范圍 let minLon Infinity, maxLon -Infinity; let minLat Infinity, maxLat -Infinity; features.forEach(feature { const coords getAllCoordinates(feature); coords.forEach(([lon, lat]) { minLon Math.min(minLon, lon); maxLon Math.max(maxLon, lon); minLat Math.min(minLat, lat); maxLat Math.max(maxLat, lat); }); }); // 2. 計(jì)算等比縮放比例保持地圖不變形 const xScale width / (maxLon - minLon); const yScale height / (maxLat - minLat); const scale Math.min(xScale, yScale); // 3. 返回一個(gè)經(jīng)緯度轉(zhuǎn) x/y 的函數(shù) return function project(lon, lat) { const x (lon - minLon) * scale - width / 2; const y (lat - minLat) * scale - height / 2; return { x, y }; }; } function getAllCoordinates(feature) { // GeoJSON 可能是 Polygon 也可能是 MultiPolygon統(tǒng)一拍平處理 const geometry feature.geometry; if (geometry.type Polygon) return geometry.coordinates.flat(); if (geometry.type MultiPolygon) return geometry.coordinates.flat(2); return []; }這里有個(gè)細(xì)節(jié)值得多說一句為什么用Math.min(xScale, yScale)而不是分別用 x 和 y 方向的縮放因?yàn)槿绻蝗〉缺壤貓D的橫向和縱向會(huì)被拉伸中國(guó)地圖看起來會(huì)比實(shí)際“胖”或者“瘦”。很多教程沒提這一點(diǎn)做完以后地圖輪廓總覺得不對(duì)勁其實(shí)就是這里出了問題。等比例縮放犧牲的是一部分展示面積但換來的地圖形狀保真是完全值得的。2.3 三種可選的“高度”數(shù)據(jù)來源這個(gè)項(xiàng)目標(biāo)題叫“3D地圖”3D 體現(xiàn)在哪里最直觀的就是每個(gè)省份的墻體和擠出高度。在實(shí)操里高度數(shù)據(jù)常見有三種來源真實(shí)地形高程比如 NASA 的 SRTM 30米分辨率 DEM 數(shù)據(jù)但處理起來很麻煩需要切片、讀像素值對(duì)前端來說成本太高一般不做業(yè)務(wù)指標(biāo)映射比如各省 GDP、人口、銷售額用數(shù)值大小決定擠出高度這是大屏項(xiàng)目最常用、也是效果最直觀的方案模擬海拔如果只是想要一個(gè)酷炫的展示效果并不需要反映真實(shí)業(yè)務(wù)數(shù)據(jù)那可以直接給每個(gè)省份設(shè)定一個(gè)“虛擬海拔”比如西藏高度 5000四川 1000你只需要維護(hù)一個(gè)省名對(duì)應(yīng)高度的字典就行。我這次項(xiàng)目一開始用了真實(shí)海拔數(shù)據(jù)模擬方案后來客戶要求能反映業(yè)務(wù)數(shù)據(jù)變化于是改成按指標(biāo)映射高度。建議你把高度計(jì)算抽成一個(gè)函數(shù)后續(xù)切換數(shù)據(jù)源會(huì)非常方便function getProvinceHeight(provinceName, data) { const value data[provinceName] || 0; return 3 value * 20; // 最低 3 個(gè)單位最高根據(jù)數(shù)據(jù)自適應(yīng) }實(shí)踐下來如果所有省份高度都是平的比如都是 3地圖看起來就是一張“餅”沒有立體感。至少要保證西藏、青海、云南這些區(qū)域比東部省份高一點(diǎn)視覺上才有“中國(guó)地勢(shì)三級(jí)階梯”的感覺。這雖然不是真實(shí)地理數(shù)據(jù)但觀眾的直覺會(huì)覺得“對(duì)就是這種感覺”。3. 核心功能拆解與實(shí)現(xiàn)3.1 用 ExtrudeGeometry 把省份從“平面”變成“立體”處理完坐標(biāo)以后就可以為每個(gè)省份創(chuàng)建幾何體了。Three.js 里做立體地圖最直接的方法是ExtrudeGeometry先畫一個(gè)多邊形平面再沿 z 軸方向擠出一個(gè)高度就得到了有“墻體”的立體形狀。具體流程分三步第一步把省份的多邊形輪廓轉(zhuǎn)成THREE.Shape。注意一個(gè)省可能有多個(gè)不相連的輪廓比如廣東省包含海南島不對(duì)海南是單獨(dú)的省份但有些省份確實(shí)有飛地或島嶼所以一個(gè)Shape可能不夠需要循環(huán)處理。function createProvinceShape(coordinates, project) { const shape new THREE.Shape(); coordinates.forEach(([lon, lat], index) { const { x, y } project(lon, lat); if (index 0) shape.moveTo(x, y); else shape.lineTo(x, y); }); return shape; }第二步用ExtrudeGeometry擠出。這里有兩個(gè)關(guān)鍵參數(shù)depth是擠出高度也就是省份的“海拔”bevelEnabled默認(rèn)是true會(huì)產(chǎn)生一個(gè)倒角我建議在大多數(shù)地圖場(chǎng)景里把它關(guān)掉否則省份邊緣會(huì)有一個(gè)斜切面影響視覺精度而且會(huì)額外增加頂點(diǎn)數(shù)。const geometry new THREE.ExtrudeGeometry(shape, { depth: provinceHeight, bevelEnabled: false, });第三步把幾何體平移到合適的位置。ExtrudeGeometry默認(rèn)從 z0 向上擠所以省底和頂都在一個(gè)很小的范圍內(nèi)。為了讓地圖看起來是“懸浮”的或者“沉在底座上的”可以整體平移geometry.translate(0, 0, -provinceHeight / 2)讓省體居中。每個(gè)省份對(duì)應(yīng)一個(gè)獨(dú)立 Mesh把這個(gè) Mesh 放進(jìn)一個(gè)THREE.Group里方便統(tǒng)一管理。給每個(gè) Mesh 的userData上掛省份名稱、adcode、原始高度等業(yè)務(wù)字段后面做點(diǎn)擊高亮和飛線都會(huì)用到。3.2 省份高亮、選中與點(diǎn)擊交互交互是大屏項(xiàng)目的重頭戲。Three.js 里做點(diǎn)擊拾取的標(biāo)準(zhǔn)方式是用Raycaster從相機(jī)發(fā)射一條射線檢測(cè)與哪些 Mesh 相交。這里有個(gè)性能優(yōu)化的點(diǎn)場(chǎng)景里可能有幾十個(gè)省份 Mesh如果每一次鼠標(biāo)移動(dòng)都做全量射線檢測(cè)會(huì)有一些多余的 CPU 開銷。我一般會(huì)單獨(dú)維護(hù)一個(gè)provinceMeshes數(shù)組只對(duì)這個(gè)數(shù)組做檢測(cè)而不是對(duì)scene.children全部檢測(cè)。const raycaster new THREE.Raycaster(); const mouse new THREE.Vector2(); function onMouseMove(event) { // 將鼠標(biāo)位置轉(zhuǎn)換成 NDC 坐標(biāo)-1 ~ 1 mouse.x (event.clientX / window.innerWidth) * 2 - 1; mouse.y -(event.clientY / window.innerHeight) * 2 1; raycaster.setFromCamera(mouse, camera); const intersects raycaster.intersectObjects(provinceMeshes); if (intersects.length 0) { const mesh intersects[0].object; hoverProvince(mesh.userData.name); } else { clearHover(); } }高亮的效果我推薦兩種方案一起用。一是改變材質(zhì)顏色懸停時(shí)從默認(rèn)藍(lán)色調(diào)變成亮一點(diǎn)的青色或綠色二是疊加一個(gè)描邊效果用EdgesGeometryLineSegments把省份輪廓線畫出來選中時(shí)讓輪廓線變成亮色。只有顏色變化的話在展廳大屏的高亮環(huán)境下容易被忽略加上輪廓線以后辨識(shí)度會(huì)高很多。關(guān)于點(diǎn)擊后如何把 Vue 側(cè)的 UI 面板帶出來我的數(shù)據(jù)流是這樣的點(diǎn)擊某個(gè)省先更新 Vue 的 reactivestate.currentProvince然后地圖側(cè)通過watch監(jiān)聽這個(gè)值執(zhí)行相機(jī)飛行動(dòng)畫用 Tween 或自定義軌跡飛行到目標(biāo)省份上方同時(shí)把省份材質(zhì)換成選中色。UI 面板里展示的業(yè)務(wù)數(shù)據(jù)直接根據(jù)state.currentProvince從接口或者本地 JSON 里讀取。3.3 城市標(biāo)記與飛線動(dòng)畫讓地圖有生命力光有立體的省份輪廓還不夠大屏上還得有“點(diǎn)”和“線”——點(diǎn)代表重點(diǎn)城市線代表城市之間的關(guān)聯(lián)。城市標(biāo)記我用的是THREE.Sprite Canvas 生成的紋理這樣能保證文字比如城市名始終面向相機(jī)而且成本很低。function createCitySprite(name, position) { const canvas document.createElement(canvas); canvas.width 128; canvas.height 64; const ctx canvas.getContext(2d); ctx.fillStyle #ffffff; ctx.font bold 24px sans-serif; ctx.textAlign center; ctx.fillText(name, 64, 36); const texture new THREE.CanvasTexture(canvas); const material new THREE.SpriteMaterial({ map: texture, transparent: true }); const sprite new THREE.Sprite(material); sprite.position.copy(position); sprite.scale.set(8, 4, 1); return sprite; }飛線是這種地圖展示里最出效果的一環(huán)。我的做法是拿到起點(diǎn)和終點(diǎn)城市的三維坐標(biāo)后用CatmullRomCurve3創(chuàng)建一條貝塞爾曲線。為了讓飛線看起來有弧度我在起點(diǎn)和終點(diǎn)中間加一個(gè)抬升的中間點(diǎn)控制點(diǎn)高度向上偏移 20~30 個(gè)單位。然后用TubeGeometry生成管狀線條或者用Line直接渲染曲線。帶漸變效果的飛線更推薦用Line2FatLines但實(shí)現(xiàn)復(fù)雜度會(huì)高一些。第一次做的話先用CatmullRomCurve3.getPoints(50)生成一系列點(diǎn)再用THREE.Line畫出來效果已經(jīng)足夠。飛線動(dòng)畫有兩種常見做法一種是讓線的透明度或?qū)挾妊芈窂诫S時(shí)間變化需要 Shader另一種是移動(dòng)一個(gè)“光點(diǎn)”從起點(diǎn)到終點(diǎn)后面這種比較好理解。用一個(gè)球體或 Sprite 作為飛行光點(diǎn)每一幀更新它在曲線上的位置// 預(yù)先計(jì)算曲線 const curve new THREE.CatmullRomCurve3([startPoint, controlPoint, endPoint]); // 在 requestAnimationFrame 里更新 const t (Date.now() / 1500) % 1; // 1.5 秒走完一次 const point curve.getPoint(t); flyPoint.position.copy(point);3.4 Vue 生命周期與 Three.js 場(chǎng)景的綁定把 Three.js 塞進(jìn) Vue 組件里有一個(gè)老生常態(tài)但很多人還是會(huì)踩的坑場(chǎng)景只能在組件掛載后創(chuàng)建組件銷毀前必須清理。我的組件結(jié)構(gòu)大概是這樣的template div refmapContainer classmap-container/div /template script setup import { ref, onMounted, onBeforeUnmount } from vue; const mapContainer ref(null); let renderer, scene, camera, controls; let animationId null; function initScene() { const container mapContainer.value; const width container.clientWidth; const height container.clientHeight; scene new THREE.Scene(); camera new THREE.PerspectiveCamera(45, width / height, 0.1, 1000); camera.position.set(0, -80, 80); camera.lookAt(0, 0, 0); renderer new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(width, height); container.appendChild(renderer.domElement); controls new OrbitControls(camera, renderer.domElement); controls.enableDamping true; } function animate() { animationId requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); } onMounted(() { initScene(); loadMapData(); animate(); window.addEventListener(resize, onResize); }); onBeforeUnmount(() { cancelAnimationFrame(animationId); window.removeEventListener(resize, onResize); renderer.dispose(); mapContainer.value.removeChild(renderer.domElement); }); /script這里額外提醒一下renderer.dispose()之后一定要把 canvas 從 DOM 里移除否則在 Vue 的 HMR 熱更新或路由切換時(shí)你的頁面里會(huì)保留很多幽靈 canvas占用顯存。4. 性能優(yōu)化與三個(gè)最值得記錄的坑4.1 大屏渲染性能優(yōu)化展廳大屏的分辨率一般是 1920x1080 或者更高數(shù)據(jù)量大的時(shí)候容易掉幀。我做過的優(yōu)化主要有幾個(gè)方向合并靜態(tài)幾何體如果某些省份的幾何體不需要單獨(dú)交互可以先把它們合并成一個(gè)幾何體一次 draw call 渲染完能顯著降低 GPU 壓力。需要交互的省份再單獨(dú)保留減少透明物體大量半透明疊加會(huì)觸發(fā)透明度排序GPU 開銷成倍增加。標(biāo)記點(diǎn)、貼片能用不透明的就盡量不透明GeoJSON 數(shù)據(jù)簡(jiǎn)化中國(guó)地圖的 GeoJSON 原始文件可能有幾百 KB頂點(diǎn)數(shù)非常多?？梢杂?mapshaper 之類的工具把精度從 5 位小數(shù)降到 2~3 位肉眼幾乎看不出差別但頂點(diǎn)數(shù)可以減少一半以上使用 DRACOLoader 壓縮模型如果還有 GLTF/GLB 模型比如建筑模型、裝飾物務(wù)必用 Draco 壓縮壓縮率通常在 70% 以上。我記得有一次地圖旋轉(zhuǎn)的時(shí)候掉幀特別嚴(yán)重檢查了半天發(fā)現(xiàn)是 GeoJSON 里每個(gè)省份的輪廓精度都特別高渲染時(shí)的頂點(diǎn)數(shù)達(dá)到了十幾萬。用 mapshaper 簡(jiǎn)化到 2% 以后幀率從 30 以下直接拉回 60效果非常明顯。4.2 坐標(biāo)偏移導(dǎo)致省份輪廓“錯(cuò)位”的排查思路這個(gè)項(xiàng)目里最典型的一個(gè)問題地圖渲染出來以后某個(gè)省份的形狀整體偏離了它本來的位置或者省份之間有交疊。排查下來原因通常出在getAllCoordinates函數(shù)把MultiPolygon拍平的邏輯寫錯(cuò)了。GeoJSON 里Polygon的坐標(biāo)層級(jí)是三層數(shù)組最外層是環(huán)Ring每個(gè)環(huán)里是坐標(biāo)點(diǎn)數(shù)組而MultiPolygon是四層數(shù)組。拍平時(shí)如果flat(1)或flat(2)層級(jí)不對(duì)取出來的點(diǎn)就會(huì)錯(cuò)亂。建議你寫完之后做一個(gè)可視化調(diào)試先把所有省份的輪廓線用LineSegments畫出來疊加在平面底圖上對(duì)比這樣可以快速判斷題是否出在輪廓解析上。如果輪廓整體錯(cuò)位一定是投影函數(shù)的問題如果只有個(gè)別省份錯(cuò)位、扭曲那就是MultiPolygon解析的問題按上面提到的拍平層級(jí)逐層檢查即可。4.3 透明材質(zhì)渲染順序問題Three.js 里透明物體的渲染順序是一個(gè)老大難問題。地圖場(chǎng)景里如果既要有透明的省份漂浮塊半透明膜狀效果又要有透明的飛線、透明的標(biāo)記點(diǎn)經(jīng)常會(huì)出現(xiàn)“透過一個(gè)透明物體看到另一個(gè)透明物體時(shí)后面的物體有一部分不顯示”的現(xiàn)象。這個(gè)問題沒有一勞永逸的解決辦法。我的經(jīng)驗(yàn)是depends 優(yōu)先級(jí) renderOrder 手動(dòng)調(diào)整。在創(chuàng)建 Mesh 的時(shí)候顯式設(shè)置provinceMesh.renderOrder 1; flyLineMesh.renderOrder 2; sprite.renderOrder 3;同時(shí)把透明材質(zhì)的depthWrite: false設(shè)上防止透明物體寫入深度緩沖導(dǎo)致后面的透明物體被遮擋。這個(gè)技巧不是萬能的但對(duì)大多數(shù)情況能明顯改善。5. 項(xiàng)目還能怎么擴(kuò)展從“會(huì)動(dòng)的地圖”到“可用的產(chǎn)品”做完主體功能以后我并沒有馬上收工而是按客戶需求加了幾個(gè)擴(kuò)展點(diǎn)這里也一并分享出來。第一是時(shí)間軸播放。在 Vue 側(cè)做一個(gè) slider拖動(dòng)時(shí)間軸時(shí)各省的擠出高度會(huì)按照時(shí)間變化而重新計(jì)算形成一個(gè)數(shù)據(jù)演變的動(dòng)畫效果。實(shí)現(xiàn)起來并不復(fù)雜因?yàn)槭》莞叨纫呀?jīng)抽成了getProvinceHeight函數(shù)改動(dòng)高度時(shí)只需要循環(huán)省份 Mesh更新幾何體或者重新創(chuàng)建幾何體就行。不過要注意頻繁重建幾何體很耗內(nèi)存更好的做法是用geometry.attributes.position動(dòng)態(tài)修改頂點(diǎn)位置但計(jì)算量會(huì)大一些需要自己權(quán)衡。第二是圖表面板與地圖聯(lián)動(dòng)。頁面右側(cè)放一個(gè) ECharts 折線圖展示選中省份的歷史數(shù)據(jù)。點(diǎn)擊省份時(shí)Vue 側(cè)更新 ECharts 的option這個(gè)很簡(jiǎn)單重點(diǎn)在于地圖和圖表要共用一套數(shù)據(jù)源避免兩側(cè)數(shù)據(jù)不一致。第三是部署和加載體驗(yàn)。地圖 GeoJSON 文件如果比較大建議放到 CDN 上并用fetch異步加載期間顯示一個(gè) loading 狀態(tài)。還可以用topojson-client把 TopoJSON 轉(zhuǎn) GeoJSON文件更小加載更快。不過 TopoJSON 會(huì)增加一個(gè)轉(zhuǎn)換步驟如果不是特別在意首屏速度直接用優(yōu)化后的 GeoJSON 就夠。我在實(shí)際部署時(shí)踩過一個(gè)相關(guān)的小坑如果項(xiàng)目部署在 Nginx 子路徑下比如http://example.com/geo/靜態(tài)資源路徑默認(rèn)是相對(duì)路徑直接fetch(china.json)會(huì) 404。解決方法是給 Vite 配置base: /geo/或者用相對(duì)路徑fetch(new URL(./china.json, import.meta.url).href)。6. 最后幾個(gè)實(shí)用建議寫到這里項(xiàng)目主體基本講完了。按照我的經(jīng)驗(yàn)再給大家?guī)讉€(gè)通用建議別期待一次寫對(duì)。三維場(chǎng)景坐標(biāo)系遠(yuǎn)比二維 Web 頁面復(fù)雜最好先把地圖輪廓線渲染出來看形狀再往上疊加立體和交互。一步一步來更容易定位問題。相機(jī)位置和燈光是照片質(zhì)量的關(guān)鍵。同一種藍(lán)色材質(zhì)在偏暗的展廳大屏和明亮的辦公顯示器上呈現(xiàn)效果差別巨大。建議用HemisphereLight作為環(huán)境光再配一個(gè)DirectionalLight作為主光并花時(shí)間調(diào)光的方向陰影和高光會(huì)比默認(rèn)光照自然很多。保持場(chǎng)景可配置化。把省份顏色、高度、飛線速度、相機(jī)初始位置這些參數(shù)全部抽到一個(gè)配置文件里。因?yàn)榇笃另?xiàng)目的需求溝通通常不是一次性能敲定的客戶總會(huì)在交付前提出“這個(gè)紫色換一下”“地圖轉(zhuǎn)得再慢一點(diǎn)”之類的改動(dòng)。配置化之后改起來就是調(diào)參數(shù)的事。最后再分享一個(gè)我在項(xiàng)目交付階段學(xué)到的經(jīng)驗(yàn)不要只盯著技術(shù)指標(biāo)還要多考慮“使用場(chǎng)景”?？蛻艨创笃恋臅r(shí)候不會(huì)關(guān)注你用的是 Three.js 的哪個(gè) API只會(huì)關(guān)注視覺效果是否夠震撼、交互反饋是否夠流暢。所以寧可減少幾個(gè)花哨功能也要保證相機(jī)旋轉(zhuǎn)、飛線動(dòng)畫、點(diǎn)擊響應(yīng)這些核心交互的流暢度。我這次項(xiàng)目里最受好評(píng)的一個(gè)設(shè)置其實(shí)是 OrbitControls 的autoRotate——地圖加載完成后自動(dòng)緩慢旋轉(zhuǎn)立刻讓整個(gè)大屏的科技感上了一個(gè)臺(tái)階。這個(gè)設(shè)置對(duì)代碼來說只有一行但現(xiàn)場(chǎng)效果提升非常大強(qiáng)烈建議也試一下。本文還有配套的精品資源點(diǎn)擊獲取