接下來要介紹一些進階應用啦～你一定看過像這種類型的地圖：

這個只是圖層 (Layer) 的應用之一，它的做法其實就是在一張基礎地圖上面再疊一張圖層，接下來的這幾天我們就要來介紹一些常見類型的圖層，像是：Line、Symbol、Circle、Fill、Heatmap，今天的話就先看一些關於 Layer 的屬性 (Property) 是如何應用的，開始吧！

Something About Layer

在進入 Property 介紹之前，先來稍微認識一下 Layer 的架構！
圖層的類型是由 type 屬性指定，必須是 background、fill、line、symbol、raster、circle、fill-extrusion、heatmap、hillshade、sky 之一 (之後要介紹的圖層主要是上述所提的常見類型)，除了 background 和 sky 以外，每個圖層都必須從 source 引用數據，也可以依據需求定義樣式。

使用範例：

"layers": [
  {
    "id": "water",
    "source": "mapbox-streets",
    "source-layer": "water",
    "type": "fill",
    "paint": {
      "fill-color": "#00ffff"
    }
  }
]

Layer properties

一樣的，我就介紹一些我認為比較常用的屬性，如果有興趣可以看一下官網的超～詳細介紹！

• id：每個圖層都需要一個 unique id
• type：圖層類型
• filter: 對 source (地圖資料來源) 進行篩選
• maxzoom：最大縮放級別
• minzoom：最小縮放級別
• source：資料來源名稱

Layer sub-properties

這裡特別拉出 2 個跟 Layer 關係較為親近的屬性來做介紹，會這麼說是因為它們所定義的是關於數據在地圖上的渲染方式，簡單來說就是關係到圖層和數據的應用樣式啦！
(概念有點像幫 Layer 加上 css)

• layout：定義 Mapbox GL renderer 如何為圖層繪製和應用數據
  • 渲染過程的早期應用
  • ex. visibility, line-cap, symbol-placement

使用範例：

map.addLayer({
  id: 'gl-draw-line',
  type: 'line',
  source: 'draw-line',
  layout: {
    'line-cap': 'round',
    'line-join': 'round',
    'line-opacity': 0.75
  }
});

• paint：定義該圖層數據的樣式
  • 渲染過程的後期應用
  • ex. fill-color, background-pattern, line-opacity

使用範例：

map.addLayer({
  id: 'trees-point',
  type: 'circle',
  source: 'trees',
  paint: {
    'circle-radius': 3,
    'circle-color': '#223b53',
    'circle-stroke-color': 'white',
    'circle-stroke-width': 1,
    'circle-opacity': 0.5
  }
});

圖層介紹就到這邊，今天算是稍微知道一下 Layer 如何組成的 (?
明天開始來看一些 Layer 的應用吧～如果可以我會努力放上範例程式碼的 ( ˚ཫ˚ )

Reference

• Layers
• layout and paint properties