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/ 它仅显示第二个 URL 中给出的建筑物的 3D 固定位置。

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

Answer 1

您正在使用的this file 上的GeoJSON 数据包含多边形要素以及表示这些多边形在地理空间中的位置的坐标。您所引用的extrude polygons for 3D indoor mapping 示例通过将GeoJSON 中的多边形特征指定的二维几何图形用作source，然后添加相应的layer，从而创建了正在显示的“3D 模型”。的fill extrusions 在视觉上将这些二维多边形挤压成三个维度。

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