mapboxgl使用threebox和deckgl加载虚拟墙效果(类似cesium中的wall)

threebox加载主要方法：

changeVolumeWq() { let wqPositions = [ [120.93157614259553, 23.606140205595835], [120.89867634832353, 23.55226657781192], [120.95424491778579, 23.51032223122705], [121.00710542739341, 23.564733098952402], [120.93157614259553, 23.606140205595835] ]; let wqGeojson = { features: [], type: "FeatureCollection" }; for (let i = 0; i < wqPositions.length - 1; i++) { // 将点转换成线 let line = turf.lineString([wqPositions[i], wqPositions[i + 1]]); // 计算每个线段的中心点 var point1 = turf.point(wqPositions[i]); var point2 = turf.point(wqPositions[i + 1]); var midpoint = turf.midpoint(point1, point2); let wqPolygon = turf.buffer(line, 0.0005, { units: "kilometers" }); wqPolygon.properties = { center: midpoint.geometry.coordinates }; wqGeojson.features.push(wqPolygon); } // 添加图层 this.mapgl.addLayer({ id: "wq", type: "custom", renderingMode: "3d", onAdd: (map, mbxContext) => { wqGeojson.features.forEach((feature) => { let center = feature.properties.center; let s = window.tb.projectedUnitsPerMeter(center[1]); let extrusion = window.tb.extrusion({ coordinates: feature.geometry.coordinates, geometryOptions: { curveSegments: 1, bevelEnabled: false, depth: 3000 * s }, materials: new THREE.MeshPhongMaterial({ color: "rgb(0,100,0)", opacity: 0.3, transparent: true, side: THREE.DoubleSide }) }); extrusion.setCoords([center[0], center[1], 0]); window.tb.add(extrusion); }); }, render: (gl, matrix) => { window.tb.update(); } }); }

deckgl加载

/* * https://deck.gl/docs/api-reference/layers/polygon-layer */ const {DeckGL, PolygonLayer,SolidPolygonLayer} = deck; const polygon = [ [121.12821578979492, 24.04035006599652], [121.08512878417969, 23.96507783495322], [121.146240234375, 23.90953637956389], [121.21095657348633, 23.977469416068716], [121.12821578979492, 24.04035006599652] // 闭合 ]; const minHeight = 1000; // 统一底部高度 const maxHeight = 1900; // 统一顶高度 const jzmHeight = 1300; const wallData = []; const jzmData= [ { jzm:[] } ]; // 每条边生成一个竖直墙体 for (let i = 0; i < polygon.length - 1; i++) { const start = polygon[i]; const end = polygon[i + 1]; wallData.push({ polygon: [ [start[0], start[1]], // 左下 [end[0], end[1]], // 右下 [end[0], end[1]], // 右上 [start[0], start[1]] // 左上 ], minHeight, maxHeight }); jzmData[0].jzm.push([start[0],start[1],jzmHeight]) } const layer = new SolidPolygonLayer({ id: 'wall-layer', data: wallData, extruded: true, // 开启3D wireframe: true, // 可选，显示边线 getPolygon: d => d.polygon, // 提取多边形 getElevation: d => d.minHeight + (d.maxHeight - d.minHeight), getFillColor: [0,100,0, 120], // RGBA颜色 }); const jzmLayer = new PolygonLayer({ id: 'PolygonLayer', data: jzmData, getFillColor: d => [72,209,204,120], getPolygon: d => d.jzm, getLineColor: [72,209,204,150], getLineWidth: 10, lineWidthMinPixels: 1, }); new DeckGL({ mapStyle: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json', initialViewState: { longitude: 121.128215, latitude: 24.0403, zoom: 11, maxZoom: 20, pitch: 80, bearing: 0 }, controller: true, getTooltip: ({object}) => object && `${object.zipcode} Population: ${object.population}`, layers: [layer,jzmLayer] });