时间戳

首页 > 解决方案 > Mapbox 3D动态构建映射

javascript - Mapbox 3D动态构建映射

问题描述

我正在尝试实现我在搜索条件期间选择的建筑物的动态 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 建筑，当我使用搜索条件时，它只是动态的。

标签： javascriptjquerymapboxmapbox-gl-jsmapbox-gl

解决方案

您正在使用的此文件中的GeoJSON数据包含多边形特征以及表示这些多边形在地理空间中的位置的坐标。您正在引用的 3D 室内映射示例的拉伸多边形创建“3D 模型”，通过将 GeoJSON 中的多边形特征指定的二维几何图形用作源，然后添加相应的图层，该图层利用填充挤压以在视觉上将这些二维多边形挤压成三个维度。

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

推荐阅读