Mapbox GLにフロアを追加できませんGL

MapBox GLを使用して建物ごとに2〜3階を追加したいのですが、addlayerを使用すると色がオーバーライドされますが、レイヤーやフロアは追加されません。これでしばらくの間これに固執しました。Mapbox GLにフロアを追加できませんGL

私は建物内に床の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>

出典

2017-09-04 ashwinsakthi

fill-extrusion-heightとfill-extrusion-baseフィル押出特徴の（メートル）、下部及び上部高さを制御する塗料特性です。あなたの例では、OpenStreetMap（Mapbox Streetsデータソース内）の建物の高さデータに基づいて、identity functionsと書式が設定されているため、実世界の建物の図形を模倣します。 1フロアのみにまたがる塗りつぶしレイヤーを作成するには、fill-extrusion-height: 3（または高さがメートルで、1つのストーリーがあると認識します）と1階の場合はfill-extrusion-base: 0が必要です。 2番目は高さ= 6、基底= 3などとなります。

Mapbox GL JSのすべてのリリース版では、複数の塗りつぶしのレイヤーがお互いに一致することに注意してください。これはマスターのfixedで、今月の次回リリースに含まれます。

出典

2017-09-05 17:53:52

返信いただきありがとうございます。マップ内の都市全体ではなく、単一の建物や物件に表示される押出を制限する方法についても教えてください。 1つの建物に集中し、塗りつぶしの高さと塗りつぶしのベースのプロパティに基づいてそれぞれのレイヤーまたは床を追加したいと思います。 – ashwinsakthi

Mapbox GLにフロアを追加できませんGL

答えて

関連する問題