maptalks.three 矢量瓦片教程ThreeVectorTileLayer 三維瓦片渲染完全指南【免費(fèi)下載鏈接】maptalks.threeA maptalks layer to render with three.js.項(xiàng)目地址: https://gitcode.com/gh_mirrors/ma/maptalks.threemaptalks.three 是一款基于 three.js 渲染的 maptalks 圖層插件其內(nèi)置的ThreeVectorTileLayer 矢量瓦片圖層可按瓦片加載 GeoJSON/MVT 矢量數(shù)據(jù)自動(dòng)生成立體建筑、三維道路線與點(diǎn)要素是構(gòu)建輕量級(jí)三維城市可視化的利器。本文面向新手帶你從零完成三維瓦片渲染上手。? 什么是矢量瓦片ThreeVectorTileLayer 解決什么問題傳統(tǒng)三維 GIS 應(yīng)用要把整份 GeoJSON 一次性灌入渲染引擎數(shù)據(jù)量大時(shí)首屏卡頓、內(nèi)存暴漲。矢量瓦片Vector Tile把地理數(shù)據(jù)按z/x/y切分成小塊視野變到哪、加載到哪天然適合海量數(shù)據(jù)的漸進(jìn)式渲染。ThreeVectorTileLayer 繼承自 maptalks 的 TileLayer它接管瓦片調(diào)度把每個(gè)瓦片的 GeoJSON 數(shù)據(jù)自動(dòng)轉(zhuǎn)換成 three.js 圖形對(duì)象并掛到 ThreeLayer 的 WebGL 場(chǎng)景中要素類型自動(dòng)轉(zhuǎn)換成的三維對(duì)象要求的材質(zhì)類型多邊形建筑、地塊ExtrudePolygons 立體擠出多邊形任意 THREE.Material推薦 MeshPhongMaterial線道路、水系Lines 三維線條LineBasicMaterial / LineDashedMaterial點(diǎn)興趣點(diǎn)Points 點(diǎn)云PointsMaterial它的核心實(shí)現(xiàn)位于 ThreeVectorTileLayer.ts 與 BaseVectorTileLayer.ts。 快速安裝maptalks.three 依賴與加載順序方式一npm 安裝npm install maptalks.three方式二瀏覽器腳本引入注意加載順序maptalks.three是 maptalks 的插件必須先加載 three.js 和 maptalks.js最后再加載 maptalks.threescript srcthree.min.js/script script srcmaptalks.min.js/script script srcmaptalks.three.min.js/script 版本提示three.js 128 時(shí)官方默認(rèn)提供 ES6 的 UMD 包若運(yùn)行環(huán)境不支持 ES6請(qǐng)使用配套的 ES5 版本對(duì)應(yīng) three.js 127。 三步上手toThreeVectorTileLayer 創(chuàng)建三維瓦片圖層創(chuàng)建流程非常簡潔——先建 ThreeLayer再調(diào)用工廠方法最后map.addLayer// 1. 創(chuàng)建 ThreeLayer三維渲染容器 const threeLayer new maptalks.ThreeLayer(t, { forceRenderOnMoving: true, forceRenderOnRotating: true }); // 2. 創(chuàng)建矢量瓦片圖層url 支持 {z}/{x}/{y} 占位符 const vectorTileLayer threeLayer.toThreeVectorTileLayer( http://your-server/tile/{z}/{x}/{y}, // 瓦片數(shù)據(jù)地址模板 { minZoom: 10, maxZoom: 16, interactive: false, // 是否開啟拾取交互 worker: false // 是否用 Worker 異步構(gòu)建網(wǎng)格 }, getMaterial // 材質(zhì)回調(diào)函數(shù)見下文 ); // 3. 加入地圖 threeLayer.prepareToDraw function (gl, scene, camera) { const light new THREE.DirectionalLight(0xffffff); light.position.set(0, -10, -10).normalize(); scene.add(light); map.addLayer(vectorTileLayer); }; threeLayer.addTo(map);toThreeVectorTileLayer的完整簽名見 index.ts返回一個(gè)標(biāo)準(zhǔn)的ThreeVectorTileLayer實(shí)例支持show() / hide() / remove()等 TileLayer 通用方法。 核心靈魂getMaterial 材質(zhì)回調(diào)怎么寫getMaterial(layerName, data, index, geojson)會(huì)在每個(gè)瓦片數(shù)據(jù)到達(dá)時(shí)被調(diào)用按圖層名layerName返回材質(zhì)決定這一組要素長什么樣const roadMaterial new THREE.LineBasicMaterial({ color: rgb(43,69,107) }); const buildMaterial new THREE.MeshPhongMaterial({ color: #fff, transparent: true }); function getMaterial(layerName, data, key, geojson) { switch (layerName) { case roads: return roadMaterial; case buildings: return buildMaterial; default: return null; // 返回 null 不渲染該圖層 } }??新手最常見的不渲染坑材質(zhì)類型必須與要素匹配——道路線條必須是LineBasicMaterial或LineDashedMaterial點(diǎn)必須是PointsMaterial否則該要素會(huì)被直接跳過。瓦片數(shù)據(jù)格式約定每個(gè)瓦片 URL 應(yīng)返回一個(gè)JSON 對(duì)象鍵是圖層名值是 FeatureCollection或 Feature 數(shù)組{ buildings: { type: FeatureCollection, features: [ ... ] }, roads: { type: FeatureCollection, features: [ ... ] } } 立體建筑的高度請(qǐng)寫進(jìn)每個(gè)要素的properties.height中圖層會(huì)據(jù)此擠出不同高度的三維樓體。?? 數(shù)據(jù)加載機(jī)制隊(duì)列調(diào)度 按需緩存ThreeVectorTileLayer 內(nèi)部有一套精巧的調(diào)度機(jī)制理解它能幫你優(yōu)化性能瓦片數(shù)據(jù)隊(duì)列所有瓦片請(qǐng)求進(jìn)入 TileDataQueue.ts 隊(duì)列逐幀消費(fèi)、分批構(gòu)建網(wǎng)格避免同一時(shí)刻大量數(shù)據(jù)涌入導(dǎo)致掉幀視野同步監(jiān)聽layerload事件視野內(nèi)新瓦片自動(dòng)加入、滑出視野的瓦片自動(dòng)移除緩存回收緩存超過tileCache.max時(shí)批量dispose不再使用的 geometry釋放顯存Worker 異步構(gòu)建設(shè)置worker: true后網(wǎng)格構(gòu)建移入 Web Worker見 worker.ts大數(shù)據(jù)量下主線程不再卡頓。還可以覆蓋getTileData(q)自定義數(shù)據(jù)獲取方式例如加超時(shí)、做模擬延時(shí)平滑掉幀demo 中有現(xiàn)成寫法vectorTileLayer.getTileData function (q) { const { key, url, callback, img } q; // 用自己的 fetch/axios 拉取瓦片成功后 callback(key, geojson, img) };? 交互增強(qiáng)拾取高亮與事件回調(diào)設(shè)置interactive: true后通過重寫onSelectMesh就能拿到點(diǎn)擊/懸停命中的三維對(duì)象做高亮或信息窗vectorTileLayer.onSelectMesh function (type, e) { if (type click e.select) { const baseObject e.select.baseObject; baseObject.setSymbol(highlightMaterial); // 換高亮材質(zhì) } };配合vectorTileLayer.getBaseObjects()還能拿到當(dāng)前所有三維對(duì)象批量設(shè)置setAltitude()抬升整體高度、或用animateShow()播放入場(chǎng)動(dòng)畫。? 常見問題與性能調(diào)優(yōu)清單建筑沒顯示檢查getMaterial返回的材質(zhì)類型是否匹配要素見上文對(duì)照表移動(dòng)地圖掉幀開啟worker: true或覆蓋getTileData加隨機(jī)延時(shí)錯(cuò)峰處理想動(dòng)態(tài)顯隱圖層直接調(diào)用vectorTileLayer.show() / hide()內(nèi)部會(huì)自動(dòng)同步所有 BaseObject 的可見性樓層紋理想要更真實(shí)給建筑材質(zhì)疊加貼圖例如項(xiàng)目里的夜景建筑紋理見 demo-bak/vectortilelayer.html 中的 dat.GUI 調(diào)色面板 延伸閱讀源碼與示例地圖資源路徑矢量瓦片圖層主實(shí)現(xiàn)src/ThreeVectorTileLayer.ts瓦片基類加載/緩存機(jī)制src/BaseVectorTileLayer.ts瓦片數(shù)據(jù)隊(duì)列src/queue/TileDataQueue.tsThreeLayer 完整 API 文檔docs/api/threelayer.md選項(xiàng)類型定義docs/api/types.mdGeoJSON 瓦片演示demo-bak/vectortilelayer.html本地 GeoJSON 轉(zhuǎn)瓦片演示demo-bak/vectortilelayer-geojson-vt.htmlMVT 瓦片演示demo-bak/vectortilelayer-mvt.html掌握以上要點(diǎn)后你就可以把任意 GeoJSON/MVT 瓦片服務(wù)接入 maptalks.three幾分鐘搭出一個(gè)可交互、可拾取、按瓦片漸進(jìn)加載的三維地圖應(yīng)用?！久赓M(fèi)下載鏈接】maptalks.threeA maptalks layer to render with three.js.項(xiàng)目地址: https://gitcode.com/gh_mirrors/ma/maptalks.three創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 maptalks.three 矢量瓦片教程：ThreeVectorTileLayer 三維瓦片渲染完全指南
maptalks.three 矢量瓦片教程ThreeVectorTileLayer 三維瓦片渲染完全指南【免費(fèi)下載鏈接】maptalks.threeA maptalks layer to render with three.js.項(xiàng)目地址: https://gitcode.com/gh_mirrors/ma/maptalks.threemaptalks.three 是一款基于 three.js 渲染的 maptalks 圖層插件其內(nèi)置的ThreeVectorTileLayer 矢量瓦片圖層可按瓦片加載 GeoJSON/MVT 矢量數(shù)據(jù)自動(dòng)生成立體建筑、三維道路線與點(diǎn)要素是構(gòu)建輕量級(jí)三維城市可視化的利器。本文面向新手帶你從零完成三維瓦片渲染上手。? 什么是矢量瓦片ThreeVectorTileLayer 解決什么問題傳統(tǒng)三維 GIS 應(yīng)用要把整份 GeoJSON 一次性灌入渲染引擎數(shù)據(jù)量大時(shí)首屏卡頓、內(nèi)存暴漲。矢量瓦片Vector Tile把地理數(shù)據(jù)按z/x/y切分成小塊視野變到哪、加載到哪天然適合海量數(shù)據(jù)的漸進(jìn)式渲染。ThreeVectorTileLayer 繼承自 maptalks 的 TileLayer它接管瓦片調(diào)度把每個(gè)瓦片的 GeoJSON 數(shù)據(jù)自動(dòng)轉(zhuǎn)換成 three.js 圖形對(duì)象并掛到 ThreeLayer 的 WebGL 場(chǎng)景中要素類型自動(dòng)轉(zhuǎn)換成的三維對(duì)象要求的材質(zhì)類型多邊形建筑、地塊ExtrudePolygons 立體擠出多邊形任意 THREE.Material推薦 MeshPhongMaterial線道路、水系Lines 三維線條LineBasicMaterial / LineDashedMaterial點(diǎn)興趣點(diǎn)Points 點(diǎn)云PointsMaterial它的核心實(shí)現(xiàn)位于 ThreeVectorTileLayer.ts 與 BaseVectorTileLayer.ts。 快速安裝maptalks.three 依賴與加載順序方式一npm 安裝npm install maptalks.three方式二瀏覽器腳本引入注意加載順序maptalks.three是 maptalks 的插件必須先加載 three.js 和 maptalks.js最后再加載 maptalks.threescript srcthree.min.js/script script srcmaptalks.min.js/script script srcmaptalks.three.min.js/script 版本提示three.js 128 時(shí)官方默認(rèn)提供 ES6 的 UMD 包若運(yùn)行環(huán)境不支持 ES6請(qǐng)使用配套的 ES5 版本對(duì)應(yīng) three.js 127。 三步上手toThreeVectorTileLayer 創(chuàng)建三維瓦片圖層創(chuàng)建流程非常簡潔——先建 ThreeLayer再調(diào)用工廠方法最后map.addLayer// 1. 創(chuàng)建 ThreeLayer三維渲染容器 const threeLayer new maptalks.ThreeLayer(t, { forceRenderOnMoving: true, forceRenderOnRotating: true }); // 2. 創(chuàng)建矢量瓦片圖層url 支持 {z}/{x}/{y} 占位符 const vectorTileLayer threeLayer.toThreeVectorTileLayer( http://your-server/tile/{z}/{x}/{y}, // 瓦片數(shù)據(jù)地址模板 { minZoom: 10, maxZoom: 16, interactive: false, // 是否開啟拾取交互 worker: false // 是否用 Worker 異步構(gòu)建網(wǎng)格 }, getMaterial // 材質(zhì)回調(diào)函數(shù)見下文 ); // 3. 加入地圖 threeLayer.prepareToDraw function (gl, scene, camera) { const light new THREE.DirectionalLight(0xffffff); light.position.set(0, -10, -10).normalize(); scene.add(light); map.addLayer(vectorTileLayer); }; threeLayer.addTo(map);toThreeVectorTileLayer的完整簽名見 index.ts返回一個(gè)標(biāo)準(zhǔn)的ThreeVectorTileLayer實(shí)例支持show() / hide() / remove()等 TileLayer 通用方法。 核心靈魂getMaterial 材質(zhì)回調(diào)怎么寫getMaterial(layerName, data, index, geojson)會(huì)在每個(gè)瓦片數(shù)據(jù)到達(dá)時(shí)被調(diào)用按圖層名layerName返回材質(zhì)決定這一組要素長什么樣const roadMaterial new THREE.LineBasicMaterial({ color: rgb(43,69,107) }); const buildMaterial new THREE.MeshPhongMaterial({ color: #fff, transparent: true }); function getMaterial(layerName, data, key, geojson) { switch (layerName) { case roads: return roadMaterial; case buildings: return buildMaterial; default: return null; // 返回 null 不渲染該圖層 } }??新手最常見的不渲染坑材質(zhì)類型必須與要素匹配——道路線條必須是LineBasicMaterial或LineDashedMaterial點(diǎn)必須是PointsMaterial否則該要素會(huì)被直接跳過。瓦片數(shù)據(jù)格式約定每個(gè)瓦片 URL 應(yīng)返回一個(gè)JSON 對(duì)象鍵是圖層名值是 FeatureCollection或 Feature 數(shù)組{ buildings: { type: FeatureCollection, features: [ ... ] }, roads: { type: FeatureCollection, features: [ ... ] } } 立體建筑的高度請(qǐng)寫進(jìn)每個(gè)要素的properties.height中圖層會(huì)據(jù)此擠出不同高度的三維樓體。?? 數(shù)據(jù)加載機(jī)制隊(duì)列調(diào)度 按需緩存ThreeVectorTileLayer 內(nèi)部有一套精巧的調(diào)度機(jī)制理解它能幫你優(yōu)化性能瓦片數(shù)據(jù)隊(duì)列所有瓦片請(qǐng)求進(jìn)入 TileDataQueue.ts 隊(duì)列逐幀消費(fèi)、分批構(gòu)建網(wǎng)格避免同一時(shí)刻大量數(shù)據(jù)涌入導(dǎo)致掉幀視野同步監(jiān)聽layerload事件視野內(nèi)新瓦片自動(dòng)加入、滑出視野的瓦片自動(dòng)移除緩存回收緩存超過tileCache.max時(shí)批量dispose不再使用的 geometry釋放顯存Worker 異步構(gòu)建設(shè)置worker: true后網(wǎng)格構(gòu)建移入 Web Worker見 worker.ts大數(shù)據(jù)量下主線程不再卡頓。還可以覆蓋getTileData(q)自定義數(shù)據(jù)獲取方式例如加超時(shí)、做模擬延時(shí)平滑掉幀demo 中有現(xiàn)成寫法vectorTileLayer.getTileData function (q) { const { key, url, callback, img } q; // 用自己的 fetch/axios 拉取瓦片成功后 callback(key, geojson, img) };? 交互增強(qiáng)拾取高亮與事件回調(diào)設(shè)置interactive: true后通過重寫onSelectMesh就能拿到點(diǎn)擊/懸停命中的三維對(duì)象做高亮或信息窗vectorTileLayer.onSelectMesh function (type, e) { if (type click e.select) { const baseObject e.select.baseObject; baseObject.setSymbol(highlightMaterial); // 換高亮材質(zhì) } };配合vectorTileLayer.getBaseObjects()還能拿到當(dāng)前所有三維對(duì)象批量設(shè)置setAltitude()抬升整體高度、或用animateShow()播放入場(chǎng)動(dòng)畫。? 常見問題與性能調(diào)優(yōu)清單建筑沒顯示檢查getMaterial返回的材質(zhì)類型是否匹配要素見上文對(duì)照表移動(dòng)地圖掉幀開啟worker: true或覆蓋getTileData加隨機(jī)延時(shí)錯(cuò)峰處理想動(dòng)態(tài)顯隱圖層直接調(diào)用vectorTileLayer.show() / hide()內(nèi)部會(huì)自動(dòng)同步所有 BaseObject 的可見性樓層紋理想要更真實(shí)給建筑材質(zhì)疊加貼圖例如項(xiàng)目里的夜景建筑紋理見 demo-bak/vectortilelayer.html 中的 dat.GUI 調(diào)色面板 延伸閱讀源碼與示例地圖資源路徑矢量瓦片圖層主實(shí)現(xiàn)src/ThreeVectorTileLayer.ts瓦片基類加載/緩存機(jī)制src/BaseVectorTileLayer.ts瓦片數(shù)據(jù)隊(duì)列src/queue/TileDataQueue.tsThreeLayer 完整 API 文檔docs/api/threelayer.md選項(xiàng)類型定義docs/api/types.mdGeoJSON 瓦片演示demo-bak/vectortilelayer.html本地 GeoJSON 轉(zhuǎn)瓦片演示demo-bak/vectortilelayer-geojson-vt.htmlMVT 瓦片演示demo-bak/vectortilelayer-mvt.html掌握以上要點(diǎn)后你就可以把任意 GeoJSON/MVT 瓦片服務(wù)接入 maptalks.three幾分鐘搭出一個(gè)可交互、可拾取、按瓦片漸進(jìn)加載的三維地圖應(yīng)用?！久赓M(fèi)下載鏈接】maptalks.threeA maptalks layer to render with three.js.項(xiàng)目地址: https://gitcode.com/gh_mirrors/ma/maptalks.three創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考