3D室内地图多边形挤出
使用fill-extrude-height属性创建3D室内地图；
<!DOCTYPE html>
<html lang="en">
<head>
<title>用于3D室内地图的多边形拉伸效果</title>
<meta property="og:description" content="使用fill-extrude-height属性创建3D室内地图" />
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.js'></script>
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = new maplibregl.Map({
container: 'map',
style: {
'id': 'raster',
'version': 8,
'name': 'Raster tiles',
'center': [0, 0],
'zoom': 0,
'sources': {
'raster-tiles': {
'type': 'raster',
'tiles': ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
'tileSize': 256,
'minzoom': 0,
'maxzoom': 19
}
},
'layers': [
{
'id': 'background',
'type': 'background',
'paint': {
'background-color': '#e0dfdf'
}
},
{
'id': 'simple-tiles',
'type': 'raster',
'source': 'raster-tiles'
}
]
},
center: [-87.61694, 41.86625],
zoom: 15.99,
pitch: 40,
bearing: 20,
canvasContextAttributes: {antialias: true}
});
map.on('load', () => {
map.addSource('floorplan', {
// GeoJSON 数据源用于矢量瓦片，文档位于
// https://gist.github.com/ryanbaumann/a7d970386ce59d11c16278b90dde094d
'type': 'geojson',
'data': 'https://maplibre.org/maplibre-gl-js/docs/assets/indoor-3d-map.geojson'
});
map.addLayer({
'id': 'room-extrusion',
'type': 'fill-extrusion',
'source': 'floorplan',
'paint': {
// 有关数据表达式的详细信息，请参阅 MapLibre 样式规范。
// https://maplibre.org/maplibre-style-spec/expressions/
// 从源数据的 'color' 属性获取 fill-extrusion-color。
'fill-extrusion-color': ['get', 'color'],
// 从源数据的 'height' 属性获取 fill-extrusion-height。
'fill-extrusion-height': ['get', 'height'],
// 从源数据的 'base_height' 属性获取 fill-extrusion-base。
'fill-extrusion-base': ['get', 'base_height'],
// 使拉伸效果稍微透明，以便可以看透室内墙壁。
'fill-extrusion-opacity': 0.5
}
});
});
</script>
</body>
</html>