图层管理

图层是wmapgl中展示数据的主要方式，另一种展示方式是覆盖物。

wmapgl内置多种图层展示，如果内置图层不能满足要求，可以自定义图层。

每种图层都有各种参数，灵活的使用这些图层及其参数，可以实现非常丰富的展示效果。平台内置的底图就是使用图层技术在前台实时生成的。

概述

每个层都需要指定id、type、datasource、style（样式，包括layout属性和paint属性）。

添加图层通常分两步：

• 第1步，添加数据源，数据源定义地图上能够被使用的数据，通过addSource()方法实现数据源的添加,详见数据源规格说明。
• 第2步，添加图层，图层定义数据源中的数据在地图上的展现方式，通过 addLayer()方法实现图层的添加,详见图层规格说明。

一个数据源可以支持多个图层展示，每个图层只能使用一个数据源中的数据。数据源和图层都有唯一标识，不能重复。

map.on('load', function () {
    // 地图资源加载完成后触发
    // 增加自定义数据源、自定义图层
    addBusinessSources();
    addBusinessLayers();
});

// 增加自定义数据源
addBusinessSources()
{

    let data = {
        type: "geojson",
        data: {
            'type': 'FeatureCollection',
            'features': [
                {
                    type: 'Feature',
                    'geometry': {
                        'type': 'Point',
                        'coordinates': [116.45, 39.9]
                    }
                }
            ]
        }
    };


    map.addSource("test-point-source", data);
}

// 增加自定义图层
addBusinessLayers()
{
    let layerOptions = {
        id: 'testLayer',
        type: 'circle',
        source: 'test-point-source',
        paint: {
            'circle-radius': 6,
            'circle-color': '#B42222'
        },
        minzoom: 0,
        maxzoom: 20,
    };

    map.addLayer(layerOptions)
}

数据源管理

添加数据源：

let data = {
    type: "geojson",
    data: {
        'type': 'FeatureCollection',
        'features': [
            {
                type: 'Feature',
                'geometry': {
                    'type': 'Point',
                    'coordinates': [116.45, 39.9]
                }
            }
        ]
    }
};


map.addSource("test-point-source", data);

获取数据源：

var source = map.getSource("test-point-source"); /*参数为数据源ID*/

删除数据源：

map.removeSource("test-point-source"); /*参数为数据源ID*/

图层管理

添加图层

let layerOptions = {
    id: 'testLayer',
    type: 'circle',
    source: 'test-point-source',
    paint: {
        'circle-radius': 6,
        'circle-color': '#B42222'
    },
    minzoom: 0,
    maxzoom: 20,
};

map.addLayer(layerOptions)

获取图层：

var layer = map.getLayer("testLayer"); /*参数为图层ID*/

删除图层：

map.removeLayer("testLayer"); /*参数为图层ID*/

详见示例。

图层显示和隐藏

图层添加到地图后，可以控制图层显示或隐藏。

显示图层：

map.setLayoutProperty('testLayer', 'visibility', 'visible');

隐藏图层：

map.setLayoutProperty('testLayer', 'visibility', 'none');

详见示例。

控制图层显示级别

可以通过maxzoom和minzoom控制图层显示级别。

  let layerOptions = {
    id: 'testLayer',
    type: 'circle',
    source: 'test-point-source',
    paint: {
        'circle-radius': 6,
        'circle-color': '#B42222'
    },
    minzoom: 0,
    maxzoom: 20,
};

map.addLayer(layerOptions);

详见示例。

图层显示顺序

wmapgl按顺序绘制图层， 可在调用addLayer()方法时指定图层顺序。

 map.addLayer({
    id: 'layer-b',
    type: 'circle',
    source: 'test-point-source',
    paint: {
        'circle-radius': 10,
        'circle-color': 'blue',
        'circle-opacity': 1.0
    }
}, 'layer-a');

如果图层已经添加到地图，可以使用moveLayer()修改顺序。

map.moveLayer('layer-a', 'layer-b');

详见示例。