96 lines
3.0 KiB
Markdown
96 lines
3.0 KiB
Markdown
---
|
||
title: Key concepts
|
||
data: 2023-11-05
|
||
author: ac
|
||
catageries:
|
||
- GIS
|
||
tags:
|
||
- Mapbox
|
||
---
|
||
|
||
### 关键概念
|
||
|
||
#### 1. `Mapbox GL`
|
||
|
||
`Mapbox GL JS`中的“`GL`”指的是`Mapbox GL`，这是一个图形库，可以在任何兼容的web浏览器中使用`OpenGL`将2D和3D Mapbox地图渲染为动态视觉图形，而无需使用额外的插件。
|
||
|
||
|
||
|
||
#### 2. 客户端渲染
|
||
|
||
`Mapbox GL JS`依赖于客户端渲染。`Mapbox GL JS`地图是通过在浏览器（不是服务器）上结合矢量瓦片和样式规则来动态呈现的，这使得改变地图的样式和显示数据可以及时响应用户，改善用户体验。
|
||
|
||
|
||
|
||
#### 3. `Map` 类
|
||
|
||
`mapboxgl.Map`类是每个`Mapbox GL JS`项目的基础。
|
||
|
||
|
||
|
||
#### 4. Layers 图层
|
||
|
||
`Mapbox GL JS`地图可以由几个层组成，这些层提供可视元素和地图数据`source`。每一层都提供了关于渲染器`render`应该如何在浏览器中绘制特定数据的规则，并且渲染器使用这些层在屏幕上绘制地图。
|
||
|
||
`Mapbox GL JS`的`addLayer`方法为地图的`style`样式添加了一个`Mapbox`样式层。`addLayer`唯一需要的参数是一个`Mapbox`样式的`layer`对象。
|
||
|
||
> 它还接受一个可选的before参数，生成的新图层会在该参数指定的图层上面。如果省略这个参数，那么渲染器将在地图的顶部绘制图层（最上面）。
|
||
|
||
|
||
|
||
#### 5. Asynchronous
|
||
|
||
由于在`Mapbox GL JS`中`layers`是异步的（如：获取数据）。所以连接到Mapbox GL JS的代码经常使用事件绑定，在正确的时间改变地图。例如:
|
||
|
||
```javascript
|
||
map.on('load', () => {
|
||
map.addLayer({
|
||
id: 'terrain-data',
|
||
type: 'line',
|
||
source: {
|
||
type: 'vector',
|
||
url: 'mapbox://mapbox.mapbox-terrain-v2'
|
||
},
|
||
'source-layer': 'contour'
|
||
});
|
||
});
|
||
```
|
||
|
||
这个示例代码绑定了map的load事件，`addLayer`只在地图的资源`source`(包括样式`style`)被加载之后，才能被正确加载。如果资源未加载运行map，它会触发一个错误，因为你想要添加一个图层的样式还不存在。
|
||
|
||
|
||
|
||
#### 6.图层源Layer source
|
||
|
||
在加载新图层时，必须定义一个图层源`source`，它接受一个`type`和`url`参数，用于指定源的数据类型和地址，包括`geojson`数据。有6中数据类型：
|
||
|
||
- `vector tiles`:
|
||
- `raster tiles`:
|
||
- `raster-dem`
|
||
- `GeoJSON`
|
||
- `Image`
|
||
- `video`
|
||
|
||
每种类型都有自己的属性，详细信息可以查看`Mapbox`的样式规范的[Sources](https://docs.mapbox.com/style-spec/reference/sources/)章节。
|
||
|
||
瓦片集合(`Tilesets`)包含多个子集的数据叫做`source layers`。例如：` Mapbox Streets tileset`包含了有`roads`、`parks`和其他子数据集，当你只想加载其中某些图层时，可以使用`source-layer`属性指定数据集。
|
||
|
||
```javascript
|
||
map.on('load', () => {
|
||
map.addLayer({
|
||
id: 'rpd_parks',
|
||
type: 'fill',
|
||
source: {
|
||
type: 'vector',
|
||
url: 'mapbox://mapbox.3o7ubwm8'
|
||
},
|
||
'source-layer': 'RPD_Parks'
|
||
});
|
||
});
|
||
```
|
||
|
||
|
||
|
||
|
||
|