Skip to content

Commit 0bb9843

Browse files
cocaine-codercocaine-coder
committed
修改测量layer存储方式
1 parent 7d2462e commit 0bb9843

File tree

3 files changed

+174
-59
lines changed

3 files changed

+174
-59
lines changed

‎packages/maplugin-core/managers/geojson-draw-manager.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -255,8 +255,8 @@ export class DrawManager {
255255
this.glManager.deleteById(feature.properties.id);
256256
}
257257
else {
258+
this.glManager.update(feature);
258259
this.options.onDrawed?.call(this, feature);
259-
260260
if (this.options.once)
261261
this.stop();
262262
}

‎packages/maplugin-core/managers/measure-manager.ts‎

Lines changed: 161 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,16 @@ export class MeasureManager {
3333
*/
3434
private polygonDistance: boolean = true;
3535

36-
/**
37-
* 测量id
38-
*
39-
* 用于创建标注文字id
40-
*/
41-
readonly id_layer_measure_symbol = Tools.uuid();
36+
37+
readonly id_source_measure_symbol = Tools.uuid();
38+
39+
40+
readonly id_layer_measrue_point = Tools.uuid();
41+
readonly id_layer_measrue_line = Tools.uuid();
42+
readonly id_layer_measrue_line_segment = Tools.uuid();
43+
readonly id_layer_measrue_polygon = Tools.uuid();
44+
readonly id_layer_measrue_polygon_line = Tools.uuid();
45+
readonly id_layer_measure_polygon_line_segment = Tools.uuid();
4246

4347
/**
4448
* 面方向图层id
@@ -68,32 +72,12 @@ export class MeasureManager {
6872
this.glManager.on('clear', () => this.customFeatures = []);
6973
this.glManager.on('all', () => this.renderMeasure());
7074

71-
this.glManager.addLayer(this.id_layer_measure_symbol);
72-
this.glManager.addLayer(this.id_layer_polygon_clockwise);
73-
7475
/**
75-
* 添加测量数值图层
76+
* 添加数据源
7677
*/
77-
this.glManager.map.addLayer({
78-
id: this.id_layer_measure_symbol,
79-
type: 'symbol',
80-
source: {
81-
type: 'geojson',
82-
data: { type: 'FeatureCollection', features: [] }
83-
},
84-
layout: {
85-
"text-field": ['get', 'value'],
86-
'text-size': ['case',
87-
['boolean', ['get', 'center'], false], 12,
88-
['==', ['get', 'type'], 'Polygon'], 16, 14],
89-
'text-offset': [0, -1]
90-
},
91-
paint: {
92-
'text-color': ['case',
93-
['boolean', ['get', 'center'], false], 'red', 'black'],
94-
'text-halo-color': 'white',
95-
'text-halo-width': 2
96-
}
78+
this.glManager.map.addSource(this.id_source_measure_symbol, {
79+
type: 'geojson',
80+
data: { type: 'FeatureCollection', features: [] }
9781
});
9882

9983
/**
@@ -119,7 +103,127 @@ export class MeasureManager {
119103
'text-halo-width': 3
120104
},
121105
filter: ['==', '$type', 'Polygon']
122-
}, this.id_layer_measure_symbol);
106+
});
107+
108+
/**
109+
* 测量点结果的图层
110+
*/
111+
this.glManager.map.addLayer({
112+
id: this.id_layer_measrue_point,
113+
type: 'symbol',
114+
source: this.id_source_measure_symbol,
115+
layout: {
116+
"text-field": ['get', 'value'],
117+
'text-size': 14,
118+
'text-offset': [0, -1]
119+
},
120+
paint: {
121+
'text-color': 'black',
122+
'text-halo-color': 'white',
123+
'text-halo-width': 2
124+
},
125+
filter: ['==', ['get', 'type'], 'point']
126+
});
127+
128+
/**
129+
* 添加线测量总结果图层
130+
*/
131+
this.glManager.map.addLayer({
132+
id: this.id_layer_measrue_line,
133+
type: 'symbol',
134+
source: this.id_source_measure_symbol,
135+
layout: {
136+
"text-field": ['get', 'value'],
137+
'text-size': 14,
138+
'text-offset': [0, -1]
139+
},
140+
paint: {
141+
'text-color': 'black',
142+
'text-halo-color': 'white',
143+
'text-halo-width': 2
144+
},
145+
filter: ['==', ['get', 'type'], 'line']
146+
});
147+
148+
/**
149+
* 添加线测量线段结果图层
150+
*/
151+
this.glManager.map.addLayer({
152+
id: this.id_layer_measrue_line_segment,
153+
type: 'symbol',
154+
source: this.id_source_measure_symbol,
155+
layout: {
156+
"text-field": ['get', 'value'],
157+
'text-size': 12,
158+
'text-offset': [0, -1]
159+
},
160+
paint: {
161+
'text-color': 'red',
162+
'text-halo-color': 'white',
163+
'text-halo-width': 2
164+
},
165+
filter: ['==', ['get', 'type'], 'line-segment']
166+
});
167+
168+
/**
169+
* 添加面测量结果图层
170+
*/
171+
this.glManager.map.addLayer({
172+
id: this.id_layer_measrue_polygon,
173+
type: 'symbol',
174+
source: this.id_source_measure_symbol,
175+
layout: {
176+
"text-field": ['get', 'value'],
177+
'text-size': 18,
178+
'text-offset': [0, -1]
179+
},
180+
paint: {
181+
'text-color': 'black',
182+
'text-halo-color': 'white',
183+
'text-halo-width': 2
184+
},
185+
filter: ['==', ['get', 'type'], 'polygon']
186+
});
187+
188+
/**
189+
* 添加面测量外侧线结果图层
190+
*/
191+
this.glManager.map.addLayer({
192+
id: this.id_layer_measrue_polygon_line,
193+
type: 'symbol',
194+
source: this.id_source_measure_symbol,
195+
layout: {
196+
"text-field": ['get', 'value'],
197+
'text-size': 14,
198+
'text-offset': [0, -1]
199+
},
200+
paint: {
201+
'text-color': 'black',
202+
'text-halo-color': 'white',
203+
'text-halo-width': 2
204+
},
205+
filter: ['==', ['get', 'type'], 'polygon-line']
206+
});
207+
208+
/**
209+
* 添加面测量外侧线段结果图层
210+
*/
211+
this.glManager.map.addLayer({
212+
id: this.id_layer_measure_polygon_line_segment,
213+
type: 'symbol',
214+
source: this.id_source_measure_symbol,
215+
layout: {
216+
"text-field": ['get', 'value'],
217+
'text-size': 12,
218+
'text-offset': [0, -1]
219+
},
220+
paint: {
221+
'text-color': 'red',
222+
'text-halo-color': 'white',
223+
'text-halo-width': 2
224+
},
225+
filter: ['==', ['get', 'type'], 'polygon-line-segment']
226+
});
123227

124228
this.units = {
125229
area: 'M2KM2',
@@ -136,8 +240,15 @@ export class MeasureManager {
136240
}
137241

138242
setVisible(visible: boolean) {
139-
this.glManager.map.setLayoutProperty(this.id_layer_measure_symbol, 'visibility', visible ? 'visible' : 'none');
140-
this.glManager.map.setLayoutProperty(this.id_layer_polygon_clockwise, 'visibility', visible ? 'visible' : 'none');
243+
[this.id_layer_measrue_point,
244+
this.id_layer_measrue_line,
245+
this.id_layer_measrue_line_segment,
246+
this.id_layer_measrue_polygon,
247+
this.id_layer_measrue_polygon_line,
248+
this.id_layer_measure_polygon_line_segment,
249+
this.id_layer_polygon_clockwise].forEach(id => {
250+
this.glManager.map.setLayoutProperty(id, 'visibility', visible ? 'visible' : 'none');
251+
});
141252
}
142253

143254
/**
@@ -220,7 +331,8 @@ export class MeasureManager {
220331
* @param val
221332
*/
222333
showPolygonDirection(val: boolean) {
223-
this.glManager.map.setLayoutProperty(this.id_layer_polygon_clockwise, "visibility", val ? "visible" : 'none');
334+
this.glManager.map.setFilter(this.id_layer_polygon_clockwise,
335+
val ? ['==', '$type', 'Polygon'] : ['==', '1', '0']);
224336
}
225337

226338
/**
@@ -237,8 +349,11 @@ export class MeasureManager {
237349
* @param val
238350
*/
239351
showSegment(val: boolean) {
240-
this.glManager.map.setFilter(this.id_layer_measure_symbol,
241-
val ? undefined : ['!', ['boolean', ['get', 'center'], false]]);
352+
this.glManager.map.setFilter(this.id_layer_measrue_line_segment,
353+
val ? ['==', ['get', 'type'], 'line-segment'] : ['==', '1', '0']);
354+
355+
this.glManager.map.setFilter(this.id_layer_measure_polygon_line_segment,
356+
val ? ['==', ['get', 'type'], 'polygon-line-segment'] : ['==', '1', '0']);
242357
}
243358

244359
/**
@@ -248,7 +363,7 @@ export class MeasureManager {
248363
const features = this.glManager.fc.features.concat(this.customFeatures);
249364

250365
// 设置测量结果数据
251-
(this.glManager.map.getSource(this.id_layer_measure_symbol)).setData({
366+
(this.glManager.map.getSource(this.id_source_measure_symbol)).setData({
252367
type: 'FeatureCollection',
253368
features: Measurement.cal(features, {
254369
polygon: {
@@ -299,14 +414,18 @@ export class MeasureManager {
299414
})
300415
});
301416

302-
// 设置方向数据
417+
// 设置面方向数据
303418
(this.glManager.map.getSource(this.id_layer_polygon_clockwise)).setData({
304419
type: 'FeatureCollection',
305-
features: features.map(x => {
306-
if (x.geometry.type === 'Polygon') {
307-
(x.properties as any).clockwise = booleanClockwise(x.geometry.coordinates[0]);
420+
features: features.filter(x => x.geometry.type === 'Polygon').map(x => {
421+
return {
422+
type: 'Feature',
423+
geometry: x.geometry,
424+
properties: {
425+
...x.properties,
426+
clockwise: booleanClockwise((x.geometry as any).coordinates[0])
427+
}
308428
}
309-
return x;
310429
})
311430
});
312431
}

‎packages/maplugin-core/utils/measurement.ts‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -117,17 +117,10 @@ export namespace Measurement {
117117
*/
118118
value: string,
119119

120-
/**
121-
* 是否为中间值
122-
*
123-
* 线测量中的线段数据
124-
*/
125-
center?: boolean,
126-
127120
/**
128121
* 测量类型
129122
*/
130-
type: "point" | "line" | "polygon"
123+
type: "point" | "line" | "line-segment" | "polygon" | "polygon-line" | "polygon-line-segment"
131124
}
132125

133126
type TMeasureMarkerFeature = GeoJSON.Feature<GeoJSON.Point, TMeasureProperties>;
@@ -152,9 +145,9 @@ export namespace Measurement {
152145
* @param length 长度数值
153146
* @param index 标点下标
154147
* @param end 是否为最后一个
155-
* @param center 是否为中间数值
148+
* @param segment 是否为中间数值
156149
*/
157-
format?(length: number, index: number, end: boolean, center: boolean): string,
150+
format?(length: number, index: number, end: boolean, segment: boolean): string,
158151

159152
/**
160153
* 是否包含第一个数值
@@ -180,7 +173,7 @@ export namespace Measurement {
180173
}
181174

182175
function calPoint(g: GeoJSON.Position, options?: TMeasureCalPointOptions): TMeasureMarkerFeature[] {
183-
const value = options?.format?.(g) || `${g[0].toFixed(6)} , ${g[1].toFixed(6)}`;
176+
const value = options?.format?.(g) || g[0].toFixed(6) + ',' + g[1].toFixed(6);
184177
return [{
185178
type: "Feature",
186179
geometry: {
@@ -194,7 +187,7 @@ export namespace Measurement {
194187
}]
195188
}
196189

197-
function calLineString(g: GeoJSON.Position[], options?: TMeasureCalLineStringOptions): TMeasureMarkerFeature[] {
190+
function calLineString(g: GeoJSON.Position[], options?: TMeasureCalLineStringOptions, isPolygon: boolean = false): TMeasureMarkerFeature[] {
198191
const ret = new Array<TMeasureMarkerFeature>();
199192
let sumLength = 0;
200193

@@ -203,7 +196,11 @@ export namespace Measurement {
203196

204197
if (i > 0) {
205198
const last = g[i - 1];
206-
const line: GeoJSON.Feature<GeoJSON.LineString> = { type: 'Feature', geometry: { type: 'LineString', coordinates: [last, current] }, properties: {} };
199+
const line: GeoJSON.Feature<GeoJSON.LineString> = {
200+
type: 'Feature',
201+
geometry: { type: 'LineString', coordinates: [last, current] },
202+
properties: {}
203+
};
207204
const l = length(line.geometry);
208205
const c = calCenter(line);
209206

@@ -217,8 +214,7 @@ export namespace Measurement {
217214
},
218215
properties: {
219216
value: options?.format?.(l, i, false, true) || `${l.toFixed(2)} m`,
220-
center: true,
221-
type: 'line'
217+
type: isPolygon ? 'polygon-line-segment' : 'line-segment'
222218
}
223219
});
224220
}
@@ -234,7 +230,7 @@ export namespace Measurement {
234230
},
235231
properties: {
236232
value: options?.format?.(sumLength, i, i === g.length - 1, false) || `${sumLength.toFixed(2)} m`,
237-
type: 'line'
233+
type: isPolygon ? 'polygon-line' : 'line'
238234
}
239235
});
240236
}

0 commit comments

Comments
 (0)