三、图层的配置与绘制

3.1 图层的配置

在mapbox中，所有的map实例下允许存在多个图层，先前我们实例化地图时，已经对这两个属性作了一些配置,也就是source和layer。这一步骤意味着我们给地图加载了它的第一个图层，这个图层将以source为数据源，以layer为样式进行绘制。

3.1.1 source

source是图层的数据源，它可以是一个本地的GeoJSON文件，也可以是一个在线的GeoJSON文件，还可以是一个地图服务（如Mapbox、Google Maps等）。在配置source时，需要指定数据源的类型、ID和URL。

map.addSource('my-source',{
    type:'geojson',
    data:'https://example.com/my-data.geojson'
})

3.1.2 layer

使用layer设置一个地图图层。在配置layer时，需要指定图层的类型、ID和数据源的ID。值得注意的是，layer的地图内容（除了paint以外的特殊样式，是完全由数据源驱动的，也就是说数据源一旦改变，layer也会随之变化）

map.addLayer({
    id:'my-layer',
    type:'fill',
    source:'my-source',
    paint:{
        'fill-color':'#f00',
        'fill-opacity':0.5
    }
})

3.2 图层的绘制

刚刚我们聊到图层配置，提到了geojson和数据驱动这两个重要概念。这也是我们今后对图像进行绘制的两个重要概念。
通过修改格式为geojson的数据源，我们可以响应式的对图层进行修改，这让用户能实时的感知到绘制的图像。又通过得到的geojson结果对图像进行多种操作。

3.2.1 修改数据源

修改geojson格式的数据源,以下这个函数修改了一个点图像的数据源。同修改点的坐标特征，修改了点的具体位置。

        function addPoint(coords) {
            jsonPoint.features.push({
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: coords
                }
            });
            map.getSource('points-area').setData(jsonPoint);
        }

在学习完以上例子后，我们不难发现，对geojson格式的数据源进行修改，实际上就是对对应数组进行操作，这样我们就很有必要了解geojson都存在哪些格式

3.2.2 GeoJSON格式

建议大家先深入了解GeoJSON后，再继续接下来的学习
点我学习GeoJSON格式