---
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'
    });
});
```