# 图层操作
# 增加图层
先增加数据源，再根据数据源增加相应的图层。如增加wms栅格图层
map.addSource('wms-test-source', {
'type': 'raster',
'tiles': [
wmsurl
],
'tileSize': 256
});
map.addLayer({
'id': 'wms-test-layer',
'type': 'raster',
'source': 'wms-test-source',
'paint': { "raster-opacity": 1 }
}
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
在线示例天地图与CAD图叠加 (opens new window)
// 创建为"ids"的geojson数据源
map.addGeoJSONSource('ids');
// 创建关联"ids"的图层id为 'ids-circle'的圆图层
map.addCircleLayer('ids-circle', 'ids', {
// 根据hover不同的状态设置不同的颜色值
circleColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', '#FFA0FD'],
// 根据hover不同的状态设置不同的宽度值
circleStrokeWidth: ['case', ['to-boolean', ['feature-state', 'hover']], 2, 1],
});
// 设置图层的圆的半径
map.setCircleRadius(['ids-circle'], 12);
// 设置鼠标位于此图层上时，鼠标改变为 'pointer‘ 形状
map.hoverPointer(['ids-circle']);
// 设置可以改变此图层的 hover state,用于根据hover不同的状态设置不同的值
map.hoverFeatureState('ids-circle');
// 随机生成一些geojson的点
let data = mapBounds.randomGeoJsonPointCollection(1000);
// 设置数据源数据
map.setData('ids', map.toLngLat(data))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
其他增加图层方法
/** 添加一个图层，给定 id、来源、类型和属性。
* @param id
* @param source
* @param type
* @param props
* @param before
*/
addLayerEx(
id: string,
source: string,
type: string,
props: {},
before: string | null | undefined
): SourceBoundUtils;
/** 在某个图层之前添加一个图层，给定 id、来源、类型和属性。
* @param id
* @param source
* @param type
* @param props
* @param before
*/
addLayerBefore(
id: string,
source: SourceOrData,
type: string,
props: {},
before?: string
): SourceBoundUtils | null | undefined;
/** 添加一个类型为“line”的图层。
* @param id
* @param props
* @param before
* @param source
*/
addLineLayer(id: string, source: string, props: LineLayerStyleProp, before?: string): void;
/** 添加一个类型为“fill”的图层。
* @param id
* @param props
* @param before
* @param source
*/
addFillLayer(id: string, source: string, props: FillLayerStyleProp, before?: string): void;
/** 添加一个类型为“circle”的图层。
* @param id
* @param props
* @param before
* @param source
*/
addCircleLayer(
id: string,
source: string,
props: CircleLayerStyleProp,
before?: string
): void;
/** 添加一个类型为“符号”的图层。
* @param id
* @param props
* @param before
* @param source
*/
addSymbolLayer(
id: string,
source: string,
props: SymbolLayerStyleProp,
before?: string
): void;
/** 添加一个类型为`video`的层。
* @param id
* @param props
* @param before
* @param source
*/
addVideoLayer(id: string, source: string, props: object, before?: string): void;
/**添加一个类型为 `raster` 的图层。
* @param id
* @param props
* @param before
* @param source
*/
addRasterLayer(
id: string,
source: string,
props: RasterLayerStyleProp,
before?: string
): void;
/** 添加一个类型为“FillExtrusion”的层。
* @param id
* @param props
* @param before
* @param source
*/
addFillExtrusionLayer(
id: string,
source: string,
props: FillExtrusionLayerStyleProp,
before?: string
): void;
/** 添加一个类型为“Heatmap”的图层。
* @param id
* @param props
* @param before
* @param source
*/
addHeatmapLayer(
id: string,
source: string,
props: HeatmapLayerStyleProp,
before?: string
): void;
/** 添加一个类型为“hillshade”的图层。
* @param id
* @param props
* @param before
* @param source
*/
addHillshadeLayer(
id: string,
source: string,
props: HillshadeLayerStyleProp,
before?: string
): void;
/** 添加一个 `raster` 源
@param sourceId ID of the new source.
@param {object} props Properties defining the source, per the style spec.
*/
addRasterSource(sourceId: string, props: RasterSourceSpecification): SourceBoundUtils;
/** 添加一个 `raster-dem` 源
@param sourceId ID of the new source.
@param {object} props Properties defining the source, per the style spec.
*/
addRasterDemSource(sourceId: string, props: RasterDEMSourceSpecification): SourceBoundUtils;
/** 添加一个 `image` 源
@param sourceId ID of the new source.
@param {object} props Properties defining the source, per the style spec.
*/
addImageSource(sourceId: string, props: ImageSourceSpecification): SourceBoundUtils;
/** 添加“Video”源
@param sourceId ID of the new source.
@param {object} props Properties defining the source, per the style spec.
*/
addVideoSource(sourceId: string, props: VideoSourceSpecification): SourceBoundUtils;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
# 删除图层
removeLayer 从地图的样式中删除具有给定 ID 的图层。如果不存在这样的层，error则会触发一个事件。
if (map.getLayer('state-data')) map.removeLayer('state-data');
1
removeLayerEx 移除一个或多个图层，如果不存在，不会报错
map.removeLayerEx('state-data');
map.removeLayerEx(['state-data', "layer2"]);
1
2
2
removeSourceEx 移除一个或多个源，首先移除所有依赖于它们的层。如果源不存在，则不会提示错误
map.removeSourceEx('ids');
map.removeLayerEx(['source1', "source2"]);
1
2
2
# 显示图层
通过设置布局visibility属性显示图层
map.setLayoutProperty(layerid, "visibility", "visible");
1
或通过图层id显示
map.show(layerid);
1
或
map.toggle(layerid, true)
1
或使数据源相关的图层都可见
map.showSource(sourceid);
1
或
map.toggleSource(sourceid, true)
1
# 隐藏图层
通过设置布局visibility属性隐藏图层
map.setLayoutProperty(layerid, "visibility", "none");
1
或通过图层id隐藏
map.hide(layerid);
1
或
map.toggle(layerid, false)
1
或使数据源相关的图层都隐藏
map.hideSource(sourceid);
1
或
map.toggleSource(sourceid, false)
1
# 设置图层属性
// 它们都同时作用于多个层：
map.setLineWidth([ 'mylayer' , 'mylayer-highlight' ], 4 );
map.setLineOpacity( /^ border- / , 0 );
map.setFillColor( layer => layer.source === 'farms' , 'green' );
// 还有一个更熟悉的 setProperty() 形式。
map.setProperty( 'mylayer' , 'line-width' , 3 );
// 更新源数据的更简单方法：
map.setData( 'mysource' , data);
// 您可以省略 data 参数以清除 GeoJSON 源：
map.setData( 'mysource' );
// 一次更新多个过滤器。
map.setFilter([ 'buildings-fill' , 'buildings-outline' , 'buildings-label' ], [...]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 图层事件
通过map事件监听，如
map.on("click", layerid, e => {
console.log(e)
})
1
2
3
2
3
或
// clickLayer() 类似于 .on('click)'，但可以接受一个数组并向事件中添加一个 'features' 成员用于点击的内容。
map.clickLayer([ 'towns' , 'town-labels' ], e => panel.selectedId = e.features[ 0 ].id);
1
2
2
// 悬停在此图层上时使用鼠标“手指”光标。
map.hoverPointer( 'mylayer' );
// 如果您传递多个图层，它会正确处理从一个图层移动到另一个图层
// 悬停在该图层上时使用鼠标“手指”光标。
map.hoverPointer([ 'regions-border' , 'regions-fill' ]);
// 当鼠标移动到该层的特征上时，将“悬停”特征状态设置为真或假。
// 要求特性有一个 `id`。
map.hoverFeatureState( 'mylayer' );
// 想要将悬停功能状态应用于不同的源？
// 例如，您将鼠标悬停在标签上，但想要突出显示周围的边界。
map.hoverFeatureState( 'town-labels' , 'boundaries' , 'town-boundaries' );
// 您还可以添加其他事件处理程序：
map.hoverFeatureState( 'mylayer' , 'mysource' , 'mysourcelayer' ,
e => console.log(`Entered ${e.features[0].id}`),
e => console.log(`Left ${e.oldFeatureid}`);
// 当一个功能悬停或点击时显示一个弹出窗口。
// 第三个参数是一个选项对象，传递给 Popup 构造函数。
// 回调被调用为： (feature, popup) => htmlString
map.hoverPopup( 'mylayer' , f => `<h3> ${f.properties.Name} </h3> ${f.properties.Description} ` , { anchor : 'left' });
map.clickPopup( 'mylayer' , f => `<h3> ${f.properties.Name} </h3> ${f.properties.Description} ` , { maxWidth : 500 });
// clickOneLayer 按顺序测试多个层，在第一个命中的 上触发回调。回调被传递 { 功能，功能，层，事件 }。
map.clickOneLayer([ 'town-labels' , 'state-boundaries' ], e => {
if (e.layer === 'town-labels') {
setView('town');
panel.selectedId = e.features[0].id;
} else if (e.layer === 'state-boundaries') {
setView('state');
panel.selectedId = e.features[0].id;
}
});
// 可选地传入一个额外的回调，该回调为错过所有图层的点击而触发：
map.clickOneLayer(['town-labels', 'state-boundaries'], e => {...}, e => {
console.log('Missed everything');
});
// 所有这些函数都返回一个“撤消”函数，删除添加的处理程序：
const remove = map.hoverPopup( 'mylayer' , showPopupFunc);
//...
remove(); // 不再有悬停弹出
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47