# 多段线
# 用法
let data = {
"type": "FeatureCollection",
"features": [
{
"id": "1",
"type": "Feature",
"properties": {
"name": "polyline1",
"color": "#00ffff"
},
"geometry": {
"coordinates": [
[
3006.0952985307595,
15198.972934052355
],
[
12606.64046359223,
9285.59366571666
],
[
4745.324495099878,
3720.060236694666
],
[
3006.0952985307595,
15198.972934052355
]
],
"type": "LineString"
}
},
{
"id": "2",
"type": "Feature",
"properties": {
"name": "polyline2",
"color": "#ff00ff"
},
"geometry": {
"coordinates": [
[
19841.833921319492,
13807.589576796912
],
[
19841.833921319492,
4207.0444117340885
],
[
26172.62819683108,
4207.0444117340885
],
[
26172.62819683108,
13807.589576796912
],
[
19841.833921319492,
13807.589576796912
]
],
"type": "LineString"
}
}
]
}
let polyline = new vjmap.Polyline({
data: map.toLngLat(data), // CAD几何坐标转渲染经纬度
// 如果是hover状态时，用红色，非hover状态时，取属性中的'color'做为颜色值
lineColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', ['get', 'color']],
lineWidth: 3,
isHoverPointer: true,
isHoverFeatureState: true
});
polyline.addTo(map);
polyline.clickLayer(e => map.logInfo(`您点击了第 ${e.features[0].id} 个，名称为 ${e.features[0].properties.name}，颜色为 ${e.features[0].properties.color} `))
polyline.hoverPopup(f => `<h3>ID: ${f.properties.name}</h3>Color: ${f.properties.color}`, { anchor: 'bottom' });
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
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
也可以用先单独创建数据源，再创建线图层的写法，如
map.addSource("lines", {
type: "geojson",
data: data
});
map.addLayer({
id: 'lineLayers',
source: 'lines',
type: 'line',
"layout": {
"line-cap": "square", //butt 尖头，round 圆头，square平头
"line-join": "round" //bevel平拐，round 圆拐，miter棱拐
},
"paint": {
"line-width": 3, //宽度
"line-color": ['case', ['to-boolean', ['feature-state', 'hover']], 'red', ['get', 'color']] //颜色
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
或 属性用驼峰式大小写，不用区分layout还是paint属性
map.addGeoJSONSource("lines", data);
map.addLineLayer("route", "lines", {
lineCap: "square", //butt 尖头，round 圆头，square平头
lineJoin: "round", //bevel平拐，round 圆拐，miter棱拐
lineWidth: 3, //宽度
lineColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', ['get', 'color']] //颜色
})
1
2
3
4
5
6
7
2
3
4
5
6
7
这种通过创建数据源和图层的写法，响应事件时，需要监听地图的图层事件进行处理
map.on("click", layerId, e => {})
1
# 常用方法
修改数据用 setData
polyline.setData(newDataJson);
1
获取图层ID、数据源ID
// 获取图层ID
polyline.getLayerId()
// 获取数据源ID
polyline.getSourceId()
1
2
3
4
2
3
4
显示或隐藏
// 显示
polyline.show()
// 隐藏
polyline.hide()
1
2
3
4
2
3
4
删除
// 删除
polyline.remove()
1
2
2
# 相关示例
批量绘制不同类型的多段线 (opens new window)
# 类型定义
/**
* 创建多段线.
*
**/
export class Polyline extends OverlayLayerBase {
options: PolylineOptions;
constructor(options: PolylineOptions);
addTo(map: Map, beforeId?: string): void;
/** 替换 GeoJSON 图层的当前数据。
@param {GeoJSON} [data] GeoJSON object to set. If not provided, defaults to an empty FeatureCollection.
*/
setData(data: PointGeoJsonInput | PointGeoJsonInput[] | GeoJsonGeomertry | GeoPointLike | any): void;
setLineCap(value: DataDrivenPropertyValueSpecification<"butt" | "round" | "square">): this;
getLineCap(): DataDrivenPropertyValueSpecification<"butt" | "round" | "square">;
setLineJoin(value: DataDrivenPropertyValueSpecification<"bevel" | "round" | "miter">): this;
getLineJoin(): DataDrivenPropertyValueSpecification<"bevel" | "round" | "miter">;
setLineMiterMimit(value: PropertyValueSpecificationEx<number>): this;
getLineMiterMimit(): PropertyValueSpecificationEx<number>;
setLineRoundLimit(value: PropertyValueSpecificationEx<number>): this;
getLineRoundLimit(): PropertyValueSpecificationEx<number>;
setLineSortKey(value: DataDrivenPropertyValueSpecification<number>): this;
getLineSortKey(): DataDrivenPropertyValueSpecification<number>;
setLineOpacity(value: DataDrivenPropertyValueSpecification<number>): this;
getLineOpacity(): DataDrivenPropertyValueSpecification<number>;
setLineColor(value: DataDrivenPropertyValueSpecification<ColorSpecification>): this;
getLineColor(): DataDrivenPropertyValueSpecification<ColorSpecification>;
setLineTranslate(value: PropertyValueSpecificationEx<[number, number]>): this;
getLineTranslate(): PropertyValueSpecificationEx<[number, number]>;
setLineTranslateAnchor(value: PropertyValueSpecificationEx<"map" | "viewport">): this;
getLineTranslateAnchor(): PropertyValueSpecificationEx<"map" | "viewport">;
setLineWidth(value: DataDrivenPropertyValueSpecification<number>): this;
getLineWidth(): DataDrivenPropertyValueSpecification<number>;
setLineGapWidth(value: DataDrivenPropertyValueSpecification<number>): this;
getLineGapWidth(): DataDrivenPropertyValueSpecification<number>;
setLineOffset(value: DataDrivenPropertyValueSpecification<number>): this;
getLineOffset(): DataDrivenPropertyValueSpecification<number>;
setLineBlur(value: DataDrivenPropertyValueSpecification<number>): this;
getLineBlur(): DataDrivenPropertyValueSpecification<number>;
setLineDasharray(value: DataDrivenPropertyValueSpecification<number[]>): this;
getLineDasharray(): DataDrivenPropertyValueSpecification<number[]>;
setLinePattern(value: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>): this;
getLinePattern(): DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
setLineGradient(value: ExpressionSpecificationEx): this;
getLineGradient(): ExpressionSpecificationEx;
}
export class OverlayLayerBase {
sourceId?: string;
layerId?: string;
_map?: Map;
constructor();
addTo(map: Map, beforeId?: string): void;
/**
* 获取数据源ID
* @return {string | undefined}
*/
getSourceId(): string | undefined;
/**
* 获取图层ID
* @return {string | undefined}
*/
getLayerId(): string | undefined;
/**
* 获取数据源的数据
* @return {GeoJsonGeomertry | undefined}
*/
getData(): GeoJsonGeomertry | undefined;
remove(): void;
/** 每当鼠标悬停在这些图层上时，将地图的光标设置为“指针”。
@returns A function to remove the handler.
* @param layerOrLayers
*/
hoverPointer(): void;
/**
每当将鼠标悬停在这些图层中的某个特征上时，更新连接源 [s] 中特征的特征状态。
* @param enterCb
* @param leaveCb
*/
hoverFeatureState(enterCb?: (arg0: {}) => void, leaveCb?: (arg0: {}) => void): void;
/** 将鼠标悬停在这些图层中的某个要素上时，会显示一个弹出窗口。
@param htmlFunc Function that receives feature and popup, returns HTML.
@param {Object<PopupOptions>} popupOptions Options passed to `Popup()` to customise popup.
@example hoverPopup(f => `<h3>${f.properties.Name}</h3> ${f.properties.Description}`, { anchor: 'left' });
*/
hoverPopup(htmlFunc: any, popupOptions?: PopupOptions): any;
/** 每当单击这些图层中的要素时都会显示一个弹出窗口。
@param htmlFunc Function that receives feature and popup, returns HTML.
@param {Object<PopupOptions>} popupOptions Options passed to `Popup()` to customise popup.
@returns A function that removes the handler.
@example clickPopup(f => `<h3>${f.properties.Name}</h3> ${f.properties.Description}`, { maxWidth: 500 });
*/
clickPopup(htmlFunc: (arg0: {}) => void, popupOptions?: PopupOptions): any;
/** 每当单击这些图层中的要素时都会触发回调。
@param {function} cb Callback that receives event with .features property
@returns A function that removes the handler.
*/
clickLayer(cb: any): any;
/** 当鼠标悬停在这些图层中的要素上时触发回调。
@returns A function to remove the handler.
*/
hoverLayer(cb: any): any;
/**
* 使给定的图层可见。
* @param layer
*/
show(): void;
/**
* 使给定的图层不可见。
* @param layer
*/
hide(): void;
/** 根据参数使给定的图层隐藏或可见。
@param {boolean} state True for visible, false for hidden.
*/
toggle(state: boolean): boolean;
/** 在一个或多个图层上设置绘制或布局属性。
@example setProperty('fillOpacity', 0.5)
*/
setProperty(prop: string | object, value?: any): void;
/** 根据样式规范，获取给定图层 ID 的图层定义。
*/
getLayerStyle(): LayerSpecification;
/**
* 设置图层样式
* @param layer
* @param style
*/
setLayerStyle(style: any): void;
/** 替换一个图层的过滤器。
@param {Array} filter New filter to set.
@example setFilter(['==','level','0']]);
*/
setFilter(filter: FilterSpecification): void;
}
export interface OverlayLayerBaseOptions {
sourceId?: string;
sourceLayer?: string;
layerId?: string;
minzoom?: number;
maxzoom?: number;
filter?: any;
visibility?: "visible" | "none";
isHoverPointer?: boolean;
isHoverFeatureState?: boolean;
}
export type LineLayerSpecification = {
id: string;
type: "line";
metadata?: unknown;
source: string;
"source-layer"?: string;
minzoom?: number;
maxzoom?: number;
filter?: FilterSpecification;
layout?: {
"line-cap"?: DataDrivenPropertyValueSpecification<"butt" | "round" | "square">;
"line-join"?: DataDrivenPropertyValueSpecification<"bevel" | "round" | "miter">;
"line-miter-limit"?: PropertyValueSpecificationEx<number>;
"line-round-limit"?: PropertyValueSpecificationEx<number>;
"line-sort-key"?: DataDrivenPropertyValueSpecification<number>;
visibility?: "visible" | "none";
};
paint?: {
"line-opacity"?: DataDrivenPropertyValueSpecification<number>;
"line-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
"line-translate"?: PropertyValueSpecificationEx<[number, number]>;
"line-translate-anchor"?: PropertyValueSpecificationEx<"map" | "viewport">;
"line-width"?: DataDrivenPropertyValueSpecification<number>;
"line-gap-width"?: DataDrivenPropertyValueSpecification<number>;
"line-offset"?: DataDrivenPropertyValueSpecification<number>;
"line-blur"?: DataDrivenPropertyValueSpecification<number>;
"line-dasharray"?: DataDrivenPropertyValueSpecification<Array<number>>;
"line-pattern"?: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
"line-gradient"?: ExpressionSpecificationEx;
};
};
export type LineLayerStyleProp = {
metadata?: unknown;
source?: string;
sourceLayer?: string;
minzoom?: number;
maxzoom?: number;
filter?: FilterSpecification;
lineCap?: DataDrivenPropertyValueSpecification<"butt" | "round" | "square">;
lineJoin?: DataDrivenPropertyValueSpecification<"bevel" | "round" | "miter">;
lineMiterMimit?: PropertyValueSpecificationEx<number>;
lineRoundLimit?: PropertyValueSpecificationEx<number>;
lineSortKey?: DataDrivenPropertyValueSpecification<number>;
visibility?: "visible" | "none";
lineOpacity?: DataDrivenPropertyValueSpecification<number>;
lineColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
lineTranslate?: PropertyValueSpecificationEx<[number, number]>;
lineTranslateAnchor?: PropertyValueSpecificationEx<"map" | "viewport">;
lineWidth?: DataDrivenPropertyValueSpecification<number>;
lineGapWidth?: DataDrivenPropertyValueSpecification<number>;
lineOffset?: DataDrivenPropertyValueSpecification<number>;
lineBlur?: DataDrivenPropertyValueSpecification<number>;
lineDasharray?: DataDrivenPropertyValueSpecification<Array<number>>;
linePattern?: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
lineGradient?: ExpressionSpecificationEx;
};
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210