meface/01startup.md at 9956b0172658ff275d090cdb6ed5dfbd4d99b7a1

3.0 KiB

Raw Blame History

title

data

author

catageries

关键概念

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的代码经常使用事件绑定，在正确的时间改变地图。例如:

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章节。

瓦片集合(Tilesets)包含多个子集的数据叫做source layers。例如： Mapbox Streets tileset包含了有roads、parks和其他子数据集，当你只想加载其中某些图层时，可以使用source-layer属性指定数据集。

map.on('load', () => {
    map.addLayer({
        id: 'rpd_parks',
        type: 'fill',
        source: {
            type: 'vector',
            url: 'mapbox://mapbox.3o7ubwm8'
        },
        'source-layer': 'RPD_Parks'
    });
});

3.0 KiB Raw Blame History Unescape Escape