mapbox構建3D建築展現

時間 2019-11-24

標籤 mapbox 構建 3d 建築展現简体版

原文原文鏈接

3D建築展現，使用擠壓顯示建築物的三維高度。css

mapbox經過高度差拉伸構建3D對象。 html

<!DOCTYPE html>
//<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標籤以前。<!DOCTYPE> 聲明不是 HTML 標籤；
　　　　　　　　　
//它是指示 web 瀏覽器關於頁面使用哪一個 HTML 版本進行編寫的指令。在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，由於 HTML 4.01 基於 SGML。
　　　　　　　　　
//DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。HTML5 不基於 SGML，因此不須要引用 DTD。<html><head>

 <meta charset='utf-8' /> <title>Display buildings in 3D</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.52.0/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/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>
//在 HTML 頁面中插入一段 JavaScript
 <script> mapboxgl.accessToken = 'pk.eyJ1IjoiZ3VvbGl1eWFuZyIsImEiOiJjajJtMmFncmQwMHFhMzNydGF6ZGduN2h0In0.imqOkUMERwvj77jk5bcJaQ'; var map = new mapboxgl.Map({ style: 'mapbox://styles/mapbox/light-v9', center: [-74.0066, 40.7135], zoom: 15.5, pitch: 45, bearing: -17.6, container: 'map' }); // mapbox-streets vector source中的「building」層包含建築高度 // 公開的數據。 map.on('load', function() { // 在任何符號層下面插入該層。 var layers = map.getStyle().layers; var labelLayerId; for (var i = 0; i < layers.length; i++) { if (layers[i].type === 'symbol' && layers[i].layout['text-field']) { labelLayerId = layers[i].id; break; } } map.addLayer({ 'id': '3d-buildings', 'source': 'composite', 'source-layer': 'building', 'filter': ['==', 'extrude', 'true'], 'type': 'fill-extrusion', 'minzoom': 15, 'paint': { 'fill-extrusion-color': '#aaa', // 使用「插值」表達式爲 // 建築物做爲用戶放大 'fill-extrusion-height': [ "interpolate", ["linear"], ["zoom"], 15, 0, 15.05, ["get", "height"] ], 'fill-extrusion-base': [ "interpolate", ["linear"], ["zoom"], 15, 0, 15.05, ["get", "min_height"] ], 'fill-extrusion-opacity': .6 } }, labelLayerId); }); </script> </body> </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。