携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情
Source
sources 和 layers 决定了哪儿些元素将要显示到地图上，以及这些元素的具体表显形式。
在 mapbox-gl 中基本所有的可视化都是依靠添加图层 （layer） 去实现的，并且图层的显示也基本都是依托于相应的数据源去渲染的。这里Source指的就是这个数据源。
Source 有4种类别，分别是：geojson、image、video、vector
geojson
geojson 是一种用于编码各种地理数据结构的格式。这也是最常用的一种源数据。
map.addSource("geojson-id", {
type: "geojson",
data: {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "",
"coordinates": []
},
"properties": {}
}]
}
})
当然这里的data值也可以是一个geojson的网络地址。
类型为geojson的数据源有一个很常用的方法：setData(data)，其参数可以是一个geojson对象，也可以是一个url地址。 该方法可以动态更新数据源。
geojsonSource.setData(geojson)
image
图片数据源，可以将图片展示到地图上
map.addSource('image-id', {
type: "image",
url: "图片url",
coordinates: [
[], [], [], []
]
})
url：必须的图片url地址
coordinates: 四个地理坐标， 用于定义图片的四角
video
视频数据源，将视频展示到地图上
map.addSource('image-id', {
type: "image",
url: [
"视频url"
],
coordinates: [
[], [], [], []
]
})
基本和图片数据源一样
vector
矢量瓦片数据源。其实初始化地图时设置的style，其本质就是设置一种矢量瓦片数据源。
在解决地图离线的问题时，可以看到，设置底图样式本身就是在修改设置vector类型的Source，以及各种不同的layer。
map.addSource('vector-id', {
type: 'vector',
// url: "url.api"
tiles: "url.mvt\url.pbf",
})
url: 表示离线底图服务接口。
tiles: 提供.pbf或.mvt文件。
Layer
layer 决定元素展现形式与样式。一共有10种类型的图层：
- background 背景
- fill 区域
- line 线
- symbol 图标或文本
- raster 栅格
- circle 点、圆
- fill-extrusion 3d挤压
- heatmap 热图
- hillshade 山体阴影
- sky 天空
其中除了背景（background）和天空（sky）不需要指定数据源，其他图层都需要指定一个数据源。
layer示例：
let layer = {
"id": "my-layer",
"source": "source-id",
"type": "fill",
"paint": {
},
"layout": {
},
"filter": []
}
具体的配置可以直接看 官网说明
这里着重记录下filter属性。
filter,顾名思义，它是一个过滤器，通过一些表达式来显示与过滤条件匹配的数据。
filter: ["!=", "name", "Chengdu"]
其值通常为一个长度为3的列表。第一个元素为判断行为、第二个元素为判断依据、第三个元素为判断条件。
所以上面filter的含义就是：当前图层只显示name != "Chengdu"的数据。
filter可以判断的行为：
-
== 和 != 相同或不同
-
>、>=、 < 、<= 比较大小的判断方式，这里的判断字段需要数字类型，或者可以转为数字类型的字段。
-
in 和 match 可以根据某个字段进行多值过滤
最后filter也支持多条件过滤，其写法如下：
// 表示选择 age > 18且type != school的数据
filter: [
"all",
[">", "age", 18 ],
["!=", "type", "school"]
]
geojson
最后记录下geojson中的7种几何类型，分别是：
- Position
- Point
- MultiPoint
- LineString
- MultiLineString
- Polygon
- MultiPolygon
- GeometryCollection
