⭐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相反。