效果图代码!DOCTYPE html html head meta charsetutf-8 title3D City with Mapbox/title meta nameviewport contentwidthdevice-width, initial-scale1 script srchttps://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js/script link hrefhttps://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css relstylesheet / style body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } .controls { position: absolute; top: 10px; left: 10px; background: white; padding: 10px; border-radius: 5px; } /style /head body div idmap/div div classcontrols button onclicktoggle3DBuildings()切换3D建筑/button button onclickadjustTerrain()调整地形/button /div script mapboxgl.accessToken pk.eyJ1Ijoiemhhbmdjb29raWUiLCJhIjoiY2tyMngybmVvMGl3cTJvcGRrNzNna2FxcyJ9.Abt7my-eFxMOmgxGXwVknA; const map new mapboxgl.Map({ container: map, style: mapbox://styles/mapbox/satellite-streets-v12, center: [-122.4194, 37.7749], // 旧金山多山地形 zoom: 14, pitch: 60, bearing: 0 }); let buildingsVisible true; let terrainExaggeration 1.5; map.on(load, () { // 添加地形 map.addSource(mapbox-dem, { type: raster-dem, url: mapbox://mapbox.mapbox-terrain-dem-v1, tileSize: 512, maxzoom: 14 }); // 设置地形 map.setTerrain({ source: mapbox-dem, exaggeration: terrainExaggeration }); // 添加3D建筑 add3DBuildings(); }); function add3DBuildings() { map.addLayer({ id: 3d-buildings, source: composite, source-layer: building, filter: [, extrude, true], type: fill-extrusion, minzoom: 13, paint: { fill-extrusion-color: [ interpolate, [linear], [get, height], 0, lightblue, 50, blue, 100, darkblue ], fill-extrusion-height: [get, height], fill-extrusion-base: [get, min_height], fill-extrusion-opacity: 0.8, fill-extrusion-vertical-gradient: true } }); } function toggle3DBuildings() { buildingsVisible !buildingsVisible; const visibility buildingsVisible ? visible : none; map.setLayoutProperty(3d-buildings, visibility, visibility); } function adjustTerrain() { terrainExaggeration terrainExaggeration 1.5 ? 3.0 : 1.5; map.setTerrain({ source: mapbox-dem, exaggeration: terrainExaggeration }); } /script /body /html正在寻找高质量的技术教程或效率工具推荐我的博客专注于分享经过验证的开发技巧与实用资源致力于为你节省检索信息的时间以及AI工具经验分享。立即访问获取更多干货博客地址https://toolset.site/微信公众号