⭐Mapbox GL JS学习探索系列（3） - Layer
⭐Mapbox GL JS学习探索系列（3） - Layer
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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相反。