⭐Mapbox GL JS學習探索系列（3） - Layer

⭐Mapbox GL JS學習探索系列（3） – Layer

2019 年 10 月 25 日
筆記

本文鏈接：https://blog.csdn.net/j_bleach/article/details/102636838

簡介

地圖上大部分的動態顯示效果嗎，如圖標，區域點，線，面等都是基於layer來實現的， mapbox中的layer主要存在以下幾種類型：background, fill, line, symbol, raster, circle, fill-extrusion, heatmap, hillshade。其中只有background的顯示不依賴source。

background

map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/64px-Cat_silhouette.svg.png', function(err, image) {  // Throw an error if something went wrong              if (err) throw err;    // Declare the image              map.addImage('pattern', image);    // Use it              map.addLayer({                  "id": "pattern-layer",                  "type": "background",                  "paint": {                      "background-pattern": "pattern"                  }              });          });

background 類型的圖層，不需要傳入source，background-pattern接受一個地圖載入好的圖片，可以將地圖鋪滿。

fill

fill 同樣可以做圖案填充，區別在於可以通過source來確定區間。即

map.addSource('source', {  	"type": "geojson",  	"data": {  	"type": "Feature",  	"properties": {},  	"geometry": {  	"type": "Polygon",  	"coordinates": [[  		[-30, -25],  		[-30, 35],  		[30, 35],  		[30, -25],  		[-30, -25]  		]]  		}  	}  });   map.addLayer({                  "id": "pattern-layer",                  "type": "fill",  				"source": "source",                  "paint": {                      "background-pattern": "pattern"                  }              });          });

fill-sort-key 用來改變不同填充層之間的上下級關係。

symbol

symbol可以展示圖標和文字文字：其中控制布局的屬性是symbol-placement，這個屬性的選項是控制文字布局。

map.addLayer({  "id": "poi-labels",  "type": "symbol",  "source": "places",  "layout": {  "text-field": "文字填充",  "text-variable-anchor": ["top", "bottom", "left", "right"],  "text-radial-offset": 0.5,  "text-justify": "auto",  "icon-image": ["concat", ["get", "icon"], "-15"]  }  });

text-field 作用是填充label的值。

可以通過n 來對字元串主動換行，如 "text-field": "文字n填充",

也可以通過訪問source屬性來給地圖上的坐標點批量增加文字，即"text-field": ["get", "description"]

symbol 中增加圖標的方法，也是將圖標資源載入地圖，然後通過傳入圖片id在地圖上顯示，即"icon-image":'imgId'。

heatmap

熱力圖通過獲取的geojson中的值，來匹配熱力圖的樣式屬性。 heatmap-intensity 根據縮放級別來調整熱力圖強度

"heatmap-intensity": [  "interpolate",  ["linear"],  ["zoom"],  0, 1,  9, 3  ],

當縮放級別，有9=>3 的時候，linear 按照9=>3的比例關係，在0=>1 之間漸變，此時配合heatmap-color，可配置在不能線性漸變的條件下，顯示不同的顏色，即

"heatmap-color": [  "interpolate",  ["linear"],  ["heatmap-density"],  0, "rgba(33,102,172,0)",  0.2, "rgb(103,169,207)",  0.4, "rgb(209,229,240)",  0.6, "rgb(253,219,199)",  0.8, "rgb(239,138,98)",  1, "rgb(178,24,43)"  ],

同理，如透明度，半徑等屬性，也可以通過縮放來進行不同程度的匹配。

addLayer

添加圖層接受兩個參數，一個是當前圖層配置，另一個是圖層ID（非必填），填寫後會放置填寫圖層ID的前一層，默認放置在圖層列表最後。

moveLayer

map.moveLayer(『label』, 『beforeId』); 可以達到同樣的效果，在添加圖層後2次操作圖層位置。

Filter

關於圖層，主要配置項有paint ，layout 和filter這三種。paint，layout 與瀏覽器的重繪，迴流的概念有點像，不展開敘述。本次主要介紹filter這個屬性。

Comparison Filters

這種filter，主要是以比較符號開頭，通過比較source中的properties 屬性中的鍵值，來對圖層進行篩選。如：

map.addLayer({  "id": layerID,  "type": "symbol",  "source": "places",  "layout": {  "icon-allow-overlap": true  },  "filter": ["==", "icon", "music"]  });

會將source當中 properties 下icon等於music的資源篩選出來。通過增加$符號，可以將source中的非properties下的特殊屬性，篩選過濾。

Existential Filters

["has", key]

可以將source中是否存在某種key，篩選出來。

Set Membership Filters

["in", "class", "street_major", "street_minor", "street_limited"]

接受一組篩選目標。

Combining Filters

[      "all",      ["==", "class", "street_limited"],      [">=", "admin_level", 3],      ["!in", "$type", "Polygon"]  ]

組合篩選。有all，any，none。all和any類似於js數組方法中的every和some，全部滿足條件為真，和滿足任意一項為真，none 與 all相反。