mapbox依据地形高度渲色彩
这里分为两种形式来实现,别离对应实用于设计师的mapbox studio
配置形式,和实用于开发者的代码更改形式,常规先看最终成果
查看交互式的最终成果
实用于设计人员的形式
先新建一个地图,根底款式任意抉择
先设置高度,这样就有了线稿个别的轮廓
而后咱们新建一个图层,留神这一步抉择如图所示的内容能够拿到地形高度信息,随后在type
里设置为fill-extrusion
而后设置色彩就和上色一样,规定由您任意定制
实用于开发者的形式
须要留神如果您应用了本人的DEM源,您须要更改源和高度获取形式为您所应用数据源的配套值
map.on('load',()=>{ map.addSource('mapbox-dem', { "type": "vector", "url": "mapbox://mapbox.mapbox-terrain-v2" }); map.addLayer({ id:'tinting-layer', 'source': 'mapbox-dem', 'source-layer': 'contour', 'type': 'fill-extrusion', paint:{ "fill-extrusion-color":[ "interpolate", ["linear"], ["get", "ele"], -410, "hsl(253, 98%, 42%)", 0, "hsl(237, 94%, 49%)", 1000, "hsl(213, 96%, 64%)", 2000, "hsl(177, 100%, 50%)", 3000, "hsl(119, 100%, 53%)", 4000, "hsl(98, 98%, 69%)", 5000, "hsl(69, 95%, 56%)", 6000, "hsl(27, 95%, 56%)", 7000, "hsl(0, 96%, 64%)" ], "fill-extrusion-height":[ "interpolate", ["linear"], ["get", "ele"], 0, 0, 8840, 8840 ] } })})