无法在Mapbox中添加楼层GL

我想为使用MapBox GL的每个建筑物添加2层或3层楼，但是当我尝试使用添加层时，颜色会被覆盖，但不会添加图层或楼层。现在一直坚持这一段时间。无法在Mapbox中添加楼层GL

我想要在建筑物中的三维地板的挤压。

试图把这个按钮点击，但它仍然没有返回预期的结果。

<!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>

来源

2017-09-04 ashwinsakthi

fill-extrusion-height和fill-extrusion-base是控制填充挤出特征的下部和上部身高（米）的涂料性能。在你的例子中，这些样式的格式为identity functions，基于来自OpenStreetMap（在Mapbox Streets数据源中）的建筑高度数据，使它们模仿真实世界的建筑物形状（最好与它们映射的一样）。为了创建一个只包含一层的填充挤出层，您希望fill-extrusion-height: 3（或者无论高度，以米为单位，您会感受到一个故事）和fill-extrusion-base: 0为一层;第二个是height = 6，base = 3，等等。

请注意，在所有发布版本的Mapbox GL JS中，相对于彼此的多个填充挤出层don't render correctly。这是主版本中的fixed，并将包含在本月的下一个版本中。

来源

2017-09-05 17:53:52

非常感谢你的回复。你还可以告诉我如何限制在一个单一的建筑物或财产而不是在整个城市的地图上显示挤出物。我想专注于单个建筑物，并根据填充 - 挤出 - 高度和填充 - 挤出 - 基础属性添加相应的层或层。 – ashwinsakthi

无法在Mapbox中添加楼层GL

回答

相关问题