3D建筑展示，使用挤压显示建筑物的三维高度。
mapbox通过高度差拉伸构建3D对象。
<!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>