【mapbox自定義樣式】根據高度着色

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
          ]
      }
  })
})

查看交互式的最終效果