图层管理
图层是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');
详见示例。