是否可以在Mapbox中降低特定多边形的地形?

Question

我有一个带地窖的房子的3D模型，我想把它加载到Mapbox上。由于地窖在地下，我看不到模型的那部分。是否有办法降低地形或地图特定部分的z轴(通过多边形)?

如果不是这样，有没有办法在地图"下面"看?这样我就能看到地窖了。

加载我使用的3D模型的例子:https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/

Answer 1

我不确定这是可能的，但你可以尝试在三个ejs中使用outline来显示地下的东西:https://threejs.org/examples/?q=outline#webgl_postprocessing_outline

您还可以看到https://github.com/nagix/mapbox-gl-indoor-map的实现。

注意，在https://github.com/nagix/mapbox-gl-indoor-map/blob/master/mapbox-gl-indoor-map.js中它使用:

getFloorTranslateY(floorId) {
const zoomFactor = Math.pow(2, this.getZoom() - 12);
const pitchFactor = Math.sin(this.getPitch() * Math.PI / 180);
return isNaN(this.visibleFloorId) ?
-floorId * zoomFactor * pitchFactor :
-(floorId - this.visibleFloorId) * zoomFactor * pitchFactor * 10;
}

计算"y"平移偏移量。给人以"在地板下面"的印象。

然后当它添加图层时，它使用这个平移+挤压高度作为负值:

const translate = [0, this.getFloorTranslateY(floorId)];
...
this.addLayer({
id: `floor-fill-${floorId}`,
type: 'fill-extrusion',
source: 'indoor',
'source-layer': 'indoor_floorplan',
filter: ['all', floorFilter, ['!', roomFilter]],
paint: {
'fill-extrusion-color': COLOR_MAIN,
'fill-extrusion-opacity': OPACITY_FLOOR * opacity,
'fill-extrusion-height': (+floorId - FLOOR_IDS[0]) * DELTA, //
'fill-extrusion-translate': translate,
'fill-extrusion-translate-anchor': 'viewport'
}
});