Mapbox 3D动态构建地图

Question

我正在尝试实现在搜索条件期间选择的建筑物的动态3D模型，到目前为止，我所做的代码如下。

 map.on('load', function () {
        // Listen for the `geocoder.input` event that is triggered when a user
        // makes a selection
        geocoder.on('result', function (ev) {
            debugger;
            var layers = map.getStyle().layers;
            var styleSpec = ev.result;
            var styleSpecBox = document.getElementById('json-response');
            var styleSpecText = JSON.stringify(styleSpec, null, 2);
            var syntaxStyleSpecText = syntaxHighlight(styleSpecText);
            styleSpecBox.innerHTML = syntaxStyleSpecText;

            map.addSource('floorplan', {
                // GeoJSON Data source used in vector tiles, documented at
                // https://gist.github.com/ryanbaumann/a7d970386ce59d11c16278b90dde094d
                'type': 'geojson',
                'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/indoor-3d-map.geojson'
            });


            map.addLayer({
                'id': 'room-extrusion',
                'type': 'fill-extrusion',
                'source': 'floorplan',
                'paint': {
                    // See the Mapbox Style Specification for details on data expressions.
                    // https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions

                    // Get the fill-extrusion-color from the source 'color' property.
                    'fill-extrusion-color': ['get', 'color'],

                    // Get fill-extrusion-height from the source 'height' property.
                    'fill-extrusion-height': ['get', 'height'],

                    // Get fill-extrusion-base from the source 'base_height' property.
                    'fill-extrusion-base': ['get', 'base_height'],

                    // Make extrusions slightly opaque for see through indoor walls.
                    'fill-extrusion-opacity': 0.5
                }
            });
        });





    });

由于我尝试添加此链接上找到的json URL（https://docs.mapbox.com/mapbox-gl-js/assets/indoor-3d-map.geojson）：https://docs.mapbox.com/mapbox-gl-js/example/3d-extrusion-floorplan/它仅显示建筑物的3D固定位置，该位置在第二个URL上给出。

现在，我实际上想在地图上实现特定的3D建筑，因为当我使用搜索条件时，它只是动态的。

Answer 1

正在使用的GeoJSON处的this file数据包含多边形要素以及代表这些多边形在地理空间中位置的坐标。您要引用的extrude polygons for 3D indoor mapping示例通过使用由GeoJSON中多边形要素指定的二维几何作为source，然后添加相应的layer来创建要显示的“ 3D模型” fill extrusions的值将这些二维多边形可视化为三个维度。

因此，除非您更改用作来源的GeoJSON文件的内容，否则建筑物的“ 3D模型”将继续在相同地理位置显示。如果地理编码器根据输入的搜索条件返回特定建筑物的位置，您仍将需要指定应挤压哪些GeoJSON多边形以创建建筑物的挤压模型。地址搜索本身的地理编码API响应正文可能不足以实现此目的，因为将仅返回表示此POI位置的坐标。因此，您将需要集成一些自定义建筑数据或另一个自定义工作流程，以生成拉伸各种建筑多边形几何形状所需的多边形。