无法在 Mapbox GL 中添加楼层

Question

我想使用 MapBox GL 为每个建筑物添加 2 层或 3 层，但是当我尝试使用 addlayer 时，颜色被覆盖但没有添加任何层或地板。现在已经坚持了一段时间。

我想要建筑物中地板的 3d 拉伸。

也尝试将其放入按钮点击中，但仍未返回预期结果。

    <!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>

</head>
<body>

<div id='map'>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZGFuc3dpY2siLCJhIjoiY2l1dTUzcmgxMDJ0djJ0b2VhY2sxNXBiMyJ9.25Qs4HNEkHubd4_Awbd8Og';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-87.61694, 41.86625],
    zoom: 15.99,
    pitch: 40,
    bearing: 20
});

map.on('load', function() {

    map.addLayer({
        'id': 'room-extrusion10',
        'type': 'fill-extrusion',
        'source': 'composite',
        'source-layer': 'building',
        'paint': {
            'fill-extrusion-color': 'blue',
            'fill-extrusion-height': {
                'type': 'identity',
                'property': 'height'
            },
            'fill-extrusion-base': {
                'type': 'identity',
                'property': 'max_height'
            },
            'fill-extrusion-opacity': 1
        }
    });

    map.addLayer({
        'id': 'room-extrusion11',
        'type': 'fill-extrusion',
        'source': 'composite',
        'source-layer': 'building',
        'paint': {
            'fill-extrusion-color': 'red',
            'fill-extrusion-height': {
                'type': 'identity',
                'property': 'height'
            },
            'fill-extrusion-base': {
                'type': 'identity',
                'property': 'min_height'
            },
            'fill-extrusion-opacity': 1
        }
    },'room-extrusion10');

});
</script>

</body>
</html>

Answer 1

fill-extrusion-height and fill-extrusion-base are the paint properties that control the lower and upper height (in meters) of a fill-extrusion feature. In your example these are styled with identity functions 基于来自 OpenStreetMap 的建筑物高度数据（在 Mapbox Streets 数据源中），使它们模仿真实世界的建筑物形状（尽可能地映射）。为了创建一个仅跨越一个楼层的填充挤出层，您需要 fill-extrusion-height: 3（或者无论多高，以米为单位，您认为一个故事是多少）和 fill-extrusion-base: 0 一楼；第二个是 height=6 和 base=3，依此类推。

请注意，在所有已发布的 Mapbox GL JS 版本中，master 中有多个填充挤压层 don't render correctly with respect to each other. This is fixed，并将包含在本月的下一个版本中。

无法在 Mapbox GL 中添加楼层

Unable to add floors in Mapbox GL

html

javascript

mapbox-gl

mapbox-gl-js