iT邦幫忙

2024 iThome 鐵人賽

DAY 15
0

在Mapbox中,Layers是一種單一類型數據的樣式化表示,例如填充、線條或符號。圖層為地圖的視覺化提供動力,沒有它們,你將無法看到數據。你可以從相同的數據創建多個圖層,並可以根據屬性對圖層中的數據進行過濾和樣式設置。圖層可以是組件的一部分,但不一定必須是。

屬性

圖層的屬性列在樣式的 layers 屬性中。圖層的類型由 "type" 屬性指定,並且必須是以下類型之一
背景(background)
填充(fill)
線條(line)
符號(symbol)
光柵(raster)
光柵粒子(raster-particle)
圓形(circle)
填充擠壓(fill-extrusion)
熱力圖(heatmap)
陰影(hillshade)
天空(sky)
模型(model)

樣式屬性

每個層都有 layout 和 paint 屬性,這些屬性控制層的外觀和行為:

layout:控制圖層的排版和布局,例如圖層是否可見,圖標或文字的位置。它決定了圖層的基本樣式,如 visibility 決定圖層是否顯示。
paint:決定了圖層的視覺效果,例如顏色、透明度和線條粗細。paint 屬性是圖層呈現的核心,定義了如何將數據以視覺化的方式表現出來。例如:
fill-color: 用於設定多邊形的填充顏色。
line-width: 控制線條的寬度。
circle-radius: 設定圓形標記的大小。

背景層(Background Layer)

背景層用來設置地圖的基礎背景,通常用於定義地圖的底色或背景圖像。它是所有其他層的基礎,沒有背景層時,地圖的背景會顯示為空白。可以根據需求自定義顏色、透明度或添加圖像背景,使地圖風格更具個性化。

背景層屬性

background-color: 設置地圖背景顏色。
background-opacity: 控制背景層的透明度。
background-pattern: 使用圖像設置背景樣式。

map.addLayer({
    'id': 'background',
    'type': 'background',
    'paint': {
        'background-color': '#f0f0f0',
        'background-opacity': 0.5
    }
});

上一篇
Day14:mapbox 的popup
下一篇
Day16:Fill and Line layers
系列文
深入前端地圖框架技術探索19
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言