map-ol-utils 0.1.28 → 0.1.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -58,19 +58,9 @@ import Map2 from "ol/Map";
58
58
  import View from "ol/View";
59
59
  import { defaults } from "ol/control";
60
60
 
61
- // src/layer-utils.ts
62
- import { GeoJSON } from "ol/format";
63
- import { Feature, Overlay } from "ol";
64
- import Cluster from "ol/source/Cluster";
65
- import { Select } from "ol/interaction";
66
- import CircleStyle from "ol/style/Circle";
61
+ // src/overlay.ts
67
62
  import gcoord from "gcoord";
68
- import VectorLayer from "ol/layer/Vector";
69
- import VectorSource from "ol/source/Vector";
70
- import { Point } from "ol/geom";
71
- import { singleClick } from "ol/events/condition";
72
- import { boundingExtent, getCenter } from "ol/extent";
73
- import { Icon, Text, Fill, Style, Stroke } from "ol/style";
63
+ import { Overlay } from "ol";
74
64
  var removeOverlays = (key = "") => {
75
65
  if (instance) {
76
66
  const overlays = instance.getOverlays().getArray().filter((overlay) => overlay.get(key || "position"));
@@ -96,6 +86,18 @@ var createAnimationMarker = (imgUrl, data) => {
96
86
  overlay.set("_isAnimationMarker", true);
97
87
  instance.addOverlay(overlay);
98
88
  };
89
+ var createOverlay = (config = { id: "popup-container", positioning: "top-center" }) => {
90
+ return new Overlay(
91
+ Object.assign(
92
+ {
93
+ element: document.getElementById(config.id) || void 0
94
+ },
95
+ config
96
+ )
97
+ );
98
+ };
99
+
100
+ // src/layer-manager.ts
99
101
  var resetActiveVector = () => {
100
102
  removeOverlays();
101
103
  const layers = instance.getAllLayers();
@@ -104,167 +106,6 @@ var resetActiveVector = () => {
104
106
  interaction == null ? void 0 : interaction.getFeatures().clear();
105
107
  });
106
108
  };
107
- var setFitViewByCoords = (coords, mapInstance = instance, fitOptions) => {
108
- const view = mapInstance.getView();
109
- if (coords.length === 1) {
110
- view.animate(__spreadValues({
111
- zoom: 14,
112
- duration: 1e3,
113
- center: coords[0]
114
- }, fitOptions || {}));
115
- } else {
116
- const extent = boundingExtent(coords);
117
- view.fit(extent, __spreadValues({
118
- padding: [50, 50, 50, 50],
119
- duration: 1e3
120
- }, fitOptions || {}));
121
- }
122
- };
123
- var setFitViewByGeom = (geom, mapInstance = instance, fitOptions) => {
124
- mapInstance.getView().fit(geom, __spreadValues({
125
- padding: [50, 50, 50, 50],
126
- duration: 1e3
127
- }, fitOptions || {}));
128
- };
129
- var setFitViewByLayer = (layer, mapInstance = instance, fitOptions) => {
130
- var _a;
131
- const extent = ((_a = layer.getSource()) == null ? void 0 : _a.getExtent()) || [];
132
- mapInstance.getView().fit(extent, __spreadValues({
133
- padding: [50, 50, 50, 50],
134
- duration: 1e3
135
- }, fitOptions || {}));
136
- };
137
- var assembleGeoJson = (dataList, config) => {
138
- const { key, crsForm } = config;
139
- const tempList = [];
140
- dataList.forEach((item) => {
141
- try {
142
- const pathArray = Array.isArray(item[key]) ? item[key] : JSON.parse(item[key] || "[]");
143
- if (pathArray.length) {
144
- const type = item["geoType"] || determineGeometryType(pathArray);
145
- if (type !== "Invalid" /* Invalid */) {
146
- tempList.push({
147
- type: "Feature",
148
- properties: __spreadValues({}, item),
149
- geometry: {
150
- type,
151
- coordinates: pathArray
152
- }
153
- });
154
- }
155
- }
156
- } catch (e) {
157
- console.error(`\u521B\u5EFA\u7EBF\u72B6\u6570\u636E\u5931\u8D25\uFF1A${e}`);
158
- }
159
- });
160
- return gcoord.transform(
161
- { type: "FeatureCollection", features: tempList },
162
- crsForm || gcoord.WGS84,
163
- gcoord.WGS84
164
- );
165
- };
166
- var createVectorStyle = (feature, config) => {
167
- const {
168
- isLine,
169
- colorMap,
170
- fillColor,
171
- colorKey,
172
- strokeColor,
173
- fillOpacity,
174
- strokeWeight,
175
- activeFillColor,
176
- activeFillOpacity,
177
- activeStrokeColor,
178
- activeStrokeWeight
179
- } = config || {};
180
- const data = feature.getProperties();
181
- const activeStyle = new Style({
182
- stroke: new Stroke({
183
- width: activeStrokeWeight || strokeWeight || 4,
184
- color: activeStrokeColor || (colorKey ? (colorMap == null ? void 0 : colorMap.get(data[colorKey])) || strokeColor : strokeColor)
185
- })
186
- });
187
- const unActiveStyle = new Style({
188
- stroke: new Stroke({
189
- width: strokeWeight || 2,
190
- color: colorKey ? (colorMap == null ? void 0 : colorMap.get(data[colorKey])) || strokeColor : strokeColor
191
- })
192
- });
193
- if (!isLine) {
194
- activeStyle.setFill(
195
- new Fill({
196
- color: hexToRgba(
197
- activeFillColor || fillColor || "",
198
- activeFillOpacity || 1
199
- ) || hexToRgba(
200
- (colorKey ? (colorMap == null ? void 0 : colorMap.get(data[colorKey])) || fillColor : fillColor) || "",
201
- fillOpacity || 1
202
- )
203
- })
204
- );
205
- unActiveStyle.setFill(
206
- new Fill({
207
- color: hexToRgba(
208
- (colorKey ? (colorMap == null ? void 0 : colorMap.get(data[colorKey])) || fillColor : fillColor) || "",
209
- fillOpacity || 1
210
- )
211
- })
212
- );
213
- }
214
- feature.setProperties(
215
- Object.assign(data, {
216
- activeStyle,
217
- unActiveStyle
218
- })
219
- );
220
- return unActiveStyle;
221
- };
222
- var createBusinessLayer = (dataList, config) => {
223
- const { isAutoFit, layerName, openClick } = config;
224
- const geoJson = assembleGeoJson(dataList, config);
225
- const vectorLayer = new VectorLayer({
226
- zIndex: 5,
227
- className: layerName ? layerName : "ol-layer",
228
- source: new VectorSource({
229
- features: new GeoJSON().readFeatures(geoJson).map((feature) => {
230
- feature.setStyle(createVectorStyle(feature, config));
231
- return feature;
232
- })
233
- })
234
- });
235
- if (openClick) {
236
- createSelectByLayer(vectorLayer);
237
- }
238
- vectorLayer.setProperties({
239
- _isCustom: true,
240
- _isAutoFit: isAutoFit,
241
- _isVectorLayer: true,
242
- _vectorConfig: config,
243
- _layerName: layerName,
244
- _dataList: [...dataList],
245
- _uuidSet: new Set(dataList.map((item) => item._uuid) || [])
246
- });
247
- return vectorLayer;
248
- };
249
- var appendFeaturesByLayer = (targetLayer, dataList, crsForm) => {
250
- const vectorSource = targetLayer.getSource();
251
- const tempSet = targetLayer.get("_uuidSet") || /* @__PURE__ */ new Set();
252
- dataList.forEach((item) => tempSet.add(item._uuid));
253
- targetLayer.set("_uuidSet", tempSet);
254
- const { _vectorConfig: config } = targetLayer.getProperties() || {};
255
- const geoJson = assembleGeoJson(
256
- dataList,
257
- Object.assign({}, config, { crsForm })
258
- );
259
- vectorSource.addFeatures(
260
- new GeoJSON().readFeatures(geoJson).map((feature) => {
261
- feature.setStyle(createVectorStyle(feature, config));
262
- return feature;
263
- })
264
- );
265
- };
266
- var createVectorFaceLayer = (dataList = [], config) => createBusinessLayer(dataList, Object.assign({}, config, { isLine: false }));
267
- var createVectorLineLayer = (dataList = [], config) => createBusinessLayer(dataList, Object.assign({}, config, { isLine: true }));
268
109
  var removeAllLayers = () => {
269
110
  removeOverlays();
270
111
  if (instance) {
@@ -327,716 +168,893 @@ var activeFeatureByUid = (uid) => {
327
168
  }
328
169
  }
329
170
  };
330
- var buildMassMarksStyles = (getImgUrlFn) => {
331
- return (iconConfig) => {
332
- const {
333
- baseUrl,
334
- markerIcon,
335
- statusNum = 5,
336
- activeScale = 1.3,
337
- markerSize = [32, 32]
338
- } = iconConfig;
339
- const getMarkerUrl = getImgUrlFn(baseUrl);
340
- const [x, y] = markerSize;
341
- const massMarksStyles = new Array(statusNum * 2);
342
- for (let i = 0; i < statusNum; i++) {
343
- const imageUrl = getMarkerUrl(`${markerIcon}-${i}`, ".webp");
344
- massMarksStyles[i] = new Style({
345
- zIndex: 88 + i,
346
- image: new Icon({
347
- width: x,
348
- height: y,
349
- src: imageUrl,
350
- anchor: [0.5, 1]
351
- })
352
- });
353
- const activeImage = getMarkerUrl(`${markerIcon}-${i}-active`, ".webp");
354
- massMarksStyles[i + statusNum] = new Style({
355
- zIndex: 120,
356
- image: new Icon({
357
- width: x * activeScale,
358
- height: y * activeScale,
359
- anchor: [0.5, 1],
360
- src: activeImage ? activeImage : imageUrl
361
- })
362
- });
171
+
172
+ // src/create-map.ts
173
+ import { defaults as interactionDefaults } from "ol/interaction";
174
+
175
+ // src/base-layer.ts
176
+ import { XYZ, WMTS } from "ol/source";
177
+ import { TileGrid } from "ol/tilegrid";
178
+ import { Tile } from "ol/layer";
179
+ import WMTSTileGrid from "ol/tilegrid/WMTS";
180
+
181
+ // src/constants.ts
182
+ var DEFAULT_TIANDITU_TK = "c77eddc667c5bed016fded560baf93e7";
183
+ var DEFAULT_ZHEJIANG_TOKEN = "3b0cdd02-c366-4363-b6de-081a9f12b364";
184
+
185
+ // src/base-layer.ts
186
+ var createBaseLayer = (layerName = "hzsyvector_dark") => {
187
+ const config = {
188
+ zIndex: -5,
189
+ preload: 1,
190
+ minZoom: 8,
191
+ maxZoom: 21,
192
+ source: new XYZ({
193
+ tileGrid: new TileGrid({
194
+ tileSize: 256,
195
+ resolutions: [
196
+ 0.00549933137253187,
197
+ 0.00274966568626595,
198
+ 0.00137483284313297,
199
+ 687416421566485e-18,
200
+ 343708210783242e-18,
201
+ 171854105391621e-18,
202
+ 859270526958104e-19,
203
+ 429635263479052e-19,
204
+ 214817631739526e-19,
205
+ 107408815869763e-19,
206
+ 537044079348816e-20,
207
+ 268522039674407e-20,
208
+ 134261019837204e-20
209
+ ],
210
+ origin: [118.122911693886, 31.2869311022836],
211
+ extent: [
212
+ 116.43263049006,
213
+ 28.6201742126026,
214
+ 123.705594256347,
215
+ 31.9765041681924
216
+ ]
217
+ }),
218
+ projection: "EPSG:4326",
219
+ urls: [
220
+ `https://cb.hangzhoumap.gov.cn/E36CCEA93443D1495DB9B9F2B2FFE348CB1A367D75176F815040AB19E54CDCA5DAAA25813AF965E2ABD0CC2463DD1223/PBS/rest/services/${layerName}/Mapserver/tile/{z}/{y}/{x}`
221
+ ]
222
+ }),
223
+ properties: {
224
+ _isBaseLayer: true,
225
+ _layerName: layerName
363
226
  }
364
- return massMarksStyles;
365
227
  };
228
+ return new Tile(config);
366
229
  };
367
- var selectEventHandle = (vectorLayer, feature) => {
368
- const data = feature.getProperties();
369
- const { activeStyle } = data;
370
- feature.setStyle(activeStyle);
371
- emitter_default.emit("selected-feature", data);
372
- vectorLayer.set("_hasActive", true);
373
- if (vectorLayer.get("_isDynamic")) {
374
- const activeImage = activeStyle.getImage();
375
- setTimeout(() => {
376
- emitter_default.emit(
377
- "dynamic-marker",
378
- Object.assign({}, data.rawData || {}, {
379
- lnglat: data.lnglat,
380
- style: data.style,
381
- crsForm: data.crsForm,
382
- width: activeImage.getWidth(),
383
- height: activeImage.getHeight()
384
- })
385
- );
386
- }, 1e3);
387
- }
388
- const isAutoFit = vectorLayer.get("_isAutoFit");
389
- if (isAutoFit) {
390
- const view = instance.getView();
391
- view.animate({
392
- duration: 1e3,
393
- zoom: view.getZoom(),
394
- center: getCenter(feature.getGeometry().getExtent())
395
- });
396
- }
230
+ var createMapWorldLayer = (layerName, tk = DEFAULT_TIANDITU_TK) => {
231
+ const [name, matrixSet] = layerName.split("_");
232
+ const config = {
233
+ preload: 1,
234
+ zIndex: -10,
235
+ cacheSize: 20240,
236
+ properties: {
237
+ _isBaseLayer: true,
238
+ _layerName: layerName
239
+ },
240
+ source: new WMTS({
241
+ crossOrigin: "anonymous",
242
+ projection: "EPSG:4326",
243
+ wrapX: true,
244
+ layer: name,
245
+ style: "default",
246
+ version: "1.0.0",
247
+ format: "image/png",
248
+ matrixSet,
249
+ tileGrid: new WMTSTileGrid({
250
+ tileSize: 256,
251
+ origin: [-180, 90],
252
+ matrixIds: [
253
+ "1",
254
+ "2",
255
+ "3",
256
+ "4",
257
+ "5",
258
+ "6",
259
+ "7",
260
+ "8",
261
+ "9",
262
+ "10",
263
+ "11",
264
+ "12",
265
+ "13",
266
+ "14",
267
+ "15",
268
+ "16",
269
+ "17",
270
+ "18",
271
+ "19"
272
+ ],
273
+ resolutions: [
274
+ 0.703125,
275
+ 0.3515625,
276
+ 0.17578125,
277
+ 0.087890625,
278
+ 0.0439453125,
279
+ 0.02197265625,
280
+ 0.010986328125,
281
+ 0.0054931640625,
282
+ 0.00274658203125,
283
+ 0.001373291015625,
284
+ 6866455078125e-16,
285
+ 34332275390625e-17,
286
+ 171661376953125e-18,
287
+ 858306884765625e-19,
288
+ 4291534423828125e-20,
289
+ 21457672119140625e-21,
290
+ 10728836059570312e-21,
291
+ 5364418029785156e-21,
292
+ 2682209014892578e-21
293
+ ]
294
+ }),
295
+ url: `https://t{0-7}.tianditu.gov.cn/${layerName}/wmts?tk=${tk}`
296
+ })
297
+ };
298
+ return new Tile(config);
397
299
  };
398
- var createSelectByLayer = (vectorLayer) => {
399
- const interaction = new Select({
400
- style: null,
401
- multi: false,
402
- hitTolerance: 10,
403
- layers: [vectorLayer],
404
- condition: (evt) => {
405
- let hasFeature = false;
406
- instance.forEachFeatureAtPixel(
407
- evt.pixel,
408
- () => {
409
- hasFeature = true;
410
- },
411
- {
412
- layerFilter: (layer) => layer === vectorLayer
413
- }
414
- );
415
- return singleClick(evt) && hasFeature;
416
- }
300
+ var createZheJiangLayer = (layerName = "emap", tk = DEFAULT_ZHEJIANG_TOKEN) => {
301
+ return new Tile({
302
+ preload: 1,
303
+ minZoom: 4,
304
+ maxZoom: 20,
305
+ zIndex: -10,
306
+ cacheSize: 20240,
307
+ source: new XYZ({
308
+ wrapX: true,
309
+ projection: "EPSG:4326",
310
+ crossOrigin: "anonymous",
311
+ url: `https://ditu{0-6}.zjzwfw.gov.cn/services/wmts/${layerName}/default/oss/getTile/{z}/{y}/{x}?token=${tk}`
312
+ })
417
313
  });
418
- interaction.on("select", (evt) => {
419
- const { selected, deselected } = evt;
420
- if (selected.length) {
421
- const feature = selected[0];
422
- const isClusterLayer = vectorLayer.get("_isClusterLayer");
423
- if (isClusterLayer) {
424
- const features = feature.get("features");
425
- if (features.length === 1) {
426
- selectEventHandle(vectorLayer, features[0]);
427
- }
428
- } else {
429
- selectEventHandle(vectorLayer, feature);
430
- }
431
- }
432
- if (deselected.length) {
433
- const feature = deselected[0];
434
- const data = feature.getProperties();
435
- feature.setStyle(data.unActiveStyle);
436
- vectorLayer.set("_hasActive", false);
314
+ };
315
+ var getLayerByName = (name) => instance.getAllLayers().find((item) => (item.get("_layerName") || item.getClassName()) === name);
316
+ var removeLayerByName = (name) => {
317
+ const layer = getLayerByName(name);
318
+ if (layer) {
319
+ const source = layer.getSource();
320
+ if (source && source.dispose) {
321
+ source.dispose();
437
322
  }
438
- });
439
- instance.addInteraction(interaction);
440
- vectorLayer.set("_selectInteraction", interaction);
441
- return interaction;
323
+ instance.removeLayer(layer);
324
+ layer.dispose();
325
+ }
442
326
  };
443
- var createFeatures = (dataList, styleList = []) => {
444
- return dataList.map((item) => {
445
- const { crsForm } = item;
446
- const coord = gcoord.transform(
447
- [+item.lnglat[0], +item.lnglat[1]],
448
- crsForm || gcoord.WGS84,
449
- gcoord.WGS84
450
- );
451
- const feature = new Feature({
452
- geometry: new Point(coord)
453
- });
454
- feature.setProperties(__spreadProps(__spreadValues({}, item), {
455
- unActiveStyle: styleList[item.style],
456
- activeStyle: styleList[item.style + styleList.length / 2]
457
- }));
458
- feature.setStyle(styleList[item.style]);
459
- return feature;
327
+ var changeLayersByNames = (activeNames, allLayerNames) => {
328
+ const changeLayers = instance.getAllLayers().filter((item) => allLayerNames.includes(item.getClassName()));
329
+ changeLayers.forEach((layer) => {
330
+ layer.setVisible(activeNames == null ? void 0 : activeNames.includes(layer.getClassName()));
460
331
  });
461
332
  };
462
- var addFeaturesByLayer = (targetLayer, dataList, config) => {
463
- const massMarksStyles = targetLayer.get("_massMarksStyles");
464
- const targetSource = targetLayer == null ? void 0 : targetLayer.getSource();
465
- const { clear } = config;
466
- if (clear) {
467
- targetSource == null ? void 0 : targetSource.clear();
333
+
334
+ // src/create-map.ts
335
+ var instance;
336
+ var mapCenter = [119.71512016971076, 30.122490541963536];
337
+ var createMapInstance = (config = {}) => {
338
+ if (instance) {
339
+ return instance;
468
340
  }
469
- targetSource == null ? void 0 : targetSource.addFeatures(createFeatures(dataList, massMarksStyles));
341
+ instance = createMap(config);
342
+ return instance;
470
343
  };
471
- var createMassMarksLayer = (dataList, styleList = []) => {
472
- const vectorLayer = new VectorLayer({
473
- zIndex: 2e3,
474
- source: new VectorSource({
475
- features: createFeatures(dataList, styleList)
476
- })
344
+ var createMap = (config = {}) => {
345
+ const innerConfig = Object.assign(
346
+ {
347
+ zoom: 9.4,
348
+ maxZoom: 18,
349
+ minZoom: 9.4,
350
+ center: mapCenter,
351
+ baseLayer: "vec-layer",
352
+ projection: "EPSG:4326",
353
+ layers: [createBaseLayer()],
354
+ constrainResolution: false,
355
+ smoothExtentConstraint: false,
356
+ tk: DEFAULT_TIANDITU_TK
357
+ },
358
+ config || {}
359
+ );
360
+ const map = new Map2({
361
+ view: new View(innerConfig),
362
+ controls: defaults({
363
+ zoom: false,
364
+ rotate: false,
365
+ attribution: false
366
+ }),
367
+ interactions: interactionDefaults({
368
+ pinchRotate: false,
369
+ doubleClickZoom: false,
370
+ altShiftDragRotate: false
371
+ }),
372
+ layers: innerConfig.layers || [createBaseLayer()]
477
373
  });
478
- vectorLayer.setProperties({
479
- _isCustom: true,
480
- _isVectorLayer: true,
481
- _isMassMarksLayer: true,
482
- _statusNum: styleList.length / 2,
483
- _dataList: [...dataList],
484
- _uuidSet: new Set(dataList.map((item) => item._uuid) || [])
374
+ mapCenter = innerConfig.center || mapCenter;
375
+ map.activeBaseLayer = innerConfig.baseLayer;
376
+ map.getLayerByName = getLayerByName;
377
+ map.removeLayerByName = removeLayerByName;
378
+ map.changeLayersByNames = changeLayersByNames;
379
+ map.on("pointermove", (evt) => {
380
+ map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel) ? "pointer" : "";
485
381
  });
486
- return vectorLayer;
382
+ return map;
487
383
  };
488
- var addMassMarksLayer = (getImgUrlFn) => {
489
- return (dataList = [], iconConfig, openClick = true) => {
490
- const {
491
- offset = [0, 0],
492
- baseUrl,
493
- hasLine,
494
- hasFace,
495
- layerName,
496
- isDynamic,
497
- isAutoFit,
498
- statusNum,
499
- markerIcon,
500
- marksStyles,
501
- markerSize,
502
- activeScale,
503
- vectorConfig
504
- } = iconConfig;
505
- const massMarksStyles = marksStyles ? marksStyles : buildMassMarksStyles(getImgUrlFn)({
506
- baseUrl,
507
- markerIcon,
508
- markerSize,
509
- statusNum: statusNum || 5,
510
- activeScale: activeScale || 1.3
511
- });
512
- const massMarksLayer = createMassMarksLayer(dataList, massMarksStyles);
513
- if (openClick) {
514
- massMarksLayer.setProperties({
515
- _offset: offset,
516
- _isAutoFit: isAutoFit
517
- });
518
- createSelectByLayer(massMarksLayer);
519
- }
520
- if (hasLine) {
521
- const vectorLayer = createBusinessLayer(
522
- dataList,
523
- Object.assign(
524
- {},
525
- {
526
- key: "line",
527
- isLine: true,
528
- openClick: false,
529
- strokeWeight: 4,
530
- strokeColor: "rgba(29, 235, 255, 0.8)"
531
- },
532
- vectorConfig || {}
533
- )
534
- );
535
- instance.addLayer(vectorLayer);
536
- }
537
- if (hasFace) {
538
- const vectorLayer = createBusinessLayer(
539
- dataList,
540
- Object.assign(
541
- {},
542
- {
543
- isLine: false,
544
- key: "faceList",
545
- strokeWeight: 1,
546
- openClick: false,
547
- fillColor: "#4247DF",
548
- strokeStyle: "dashed",
549
- strokeColor: "#4247DF"
550
- },
551
- vectorConfig || {}
552
- )
553
- );
554
- instance.addLayer(vectorLayer);
384
+ var disposeMap = () => {
385
+ instance.getOverlays().forEach((overlay) => {
386
+ instance.removeOverlay(overlay);
387
+ });
388
+ instance.getInteractions().clear();
389
+ const layers = instance.getAllLayers();
390
+ layers.forEach((layer) => {
391
+ const source = layer.getSource();
392
+ if (source && source.dispose) {
393
+ source.dispose();
555
394
  }
556
- massMarksLayer.setProperties({
557
- _isCustom: true,
558
- _offset: offset,
559
- _hasLine: hasLine,
560
- _hasFace: hasFace,
561
- className: layerName,
562
- _layerName: layerName,
563
- _isVectorLayer: true,
564
- _isDynamic: isDynamic,
565
- _massMarksStyles: massMarksStyles
566
- });
567
- instance.addLayer(massMarksLayer);
568
- return massMarksLayer;
569
- };
395
+ instance.removeLayer(layer);
396
+ layer.dispose();
397
+ });
398
+ instance.setTarget("");
399
+ instance.dispose();
400
+ instance = void 0;
570
401
  };
571
- var updateMarksLayersByStatus = (checkedStatusList = []) => {
572
- const hideStyle = new Style({});
573
- const tempList = [];
574
- const targetLayers = instance.getAllLayers().filter((layer) => layer.get("_isMassMarksLayer"));
575
- targetLayers.forEach((layer) => {
576
- const features = layer.getSource().getFeatures();
577
- features.forEach((feature) => {
578
- const data = feature.getProperties();
579
- if (!checkedStatusList.includes(data.status)) {
580
- feature.setStyle(hideStyle);
581
- } else {
582
- tempList.push(data);
583
- feature.setStyle(data.unActiveStyle);
584
- }
402
+ var getMapInstance = () => instance;
403
+ var resetZoomAndCenter = (center = mapCenter) => {
404
+ if (instance) {
405
+ const view = instance.getView();
406
+ view.animate({
407
+ zoom: 9.4,
408
+ center,
409
+ duration: 1e3
585
410
  });
586
- });
587
- return tempList;
411
+ }
588
412
  };
589
- var createOverlay = (config = { id: "popup-container", positioning: "top-center" }) => {
590
- return new Overlay(
591
- Object.assign(
592
- {
593
- element: document.getElementById(config.id) || void 0
594
- },
595
- config
596
- )
597
- );
413
+ var resetMap = (config = { center: mapCenter, isClearAll: true }) => {
414
+ removeAllLayers();
415
+ resetZoomAndCenter(config.center || mapCenter);
598
416
  };
599
- var createClusterLayer = (dataList, config) => {
600
- const count = dataList.length;
601
- const styleCache = {};
602
- const {
603
- distance,
604
- minDistance,
605
- openClick,
606
- buildStyle,
607
- singleStyles,
608
- computedRadius,
609
- layerName = "cluster-layer"
610
- } = config;
611
- const innerComputedRadius = (size) => Math.pow(size / count, 1 / 18);
612
- styleCache[1] = singleStyles;
613
- const innerBuildStyle = (feature) => {
614
- const size = feature.get("features").length;
615
- let style = styleCache[size];
616
- const tempRadius = computedRadius ? computedRadius(size) : innerComputedRadius(size);
617
- if (!style) {
618
- style = new Style({
619
- image: new CircleStyle({
620
- radius: tempRadius * 20,
621
- stroke: new Stroke({
622
- width: 2,
623
- color: `hsla(${180 - tempRadius * 180}, 100%, 40%, 1)`
624
- }),
625
- fill: new Fill({
626
- color: `hsla(${180 - tempRadius * 180}, 100%, 50%, 1)`
627
- })
628
- }),
629
- text: new Text({
630
- text: size.toString(),
631
- fill: new Fill({
632
- color: `hsla(${180 - tempRadius * 180}, 100%, 10%, 1)`
633
- }),
634
- textBaseline: "middle"
635
- })
636
- });
637
- styleCache[size] = style;
638
- }
639
- if (Array.isArray(style)) {
640
- const tempFeature = feature.get("features")[0];
641
- const index = tempFeature.get("styleIndex") || 0;
642
- tempFeature.setProperties({
643
- unActiveStyle: style[index],
644
- activeStyle: style[index + style.length / 2]
645
- });
646
- return style[index];
417
+
418
+ // src/helper.ts
419
+ var hexToRgba = (hex, alpha) => {
420
+ if (hex.startsWith("#")) {
421
+ let tempHex = hex.replace("#", "");
422
+ if (tempHex.length === 3) {
423
+ tempHex = tempHex[0] + tempHex[0] + tempHex[1] + tempHex[1] + tempHex[2] + tempHex[2];
647
424
  }
648
- return style;
425
+ const r = parseInt(tempHex.substring(0, 2), 16);
426
+ const g = parseInt(tempHex.substring(2, 4), 16);
427
+ const b = parseInt(tempHex.substring(4, 6), 16);
428
+ return `rgba(${r}, ${g}, ${b}, ${alpha})`;
429
+ } else {
430
+ return hex;
431
+ }
432
+ };
433
+ var getLayersDataList = () => {
434
+ var _a;
435
+ return ((_a = instance) == null ? void 0 : _a.getAllLayers().map((layer) => layer.get("_dataList") || []).flat(2)) || [];
436
+ };
437
+ var determineGeometryType = (coordinates) => {
438
+ const getArrayDepth = (arr) => {
439
+ if (!Array.isArray(arr) || arr.length === 0) return 0;
440
+ return 1 + getArrayDepth(arr[0]);
649
441
  };
650
- const vectorLayer = new VectorLayer({
651
- zIndex: 200,
652
- className: layerName,
653
- source: new Cluster({
654
- distance: distance || 80,
655
- minDistance: minDistance || 0,
656
- source: new VectorSource({
657
- features: dataList.map((item) => {
658
- const feature = new Feature(new Point(item.lnglat));
659
- feature.setProperties(item);
660
- return feature;
661
- })
662
- })
663
- }),
664
- style: (feature) => buildStyle ? buildStyle(feature) : innerBuildStyle(feature)
665
- });
666
- vectorLayer.setProperties({
667
- _isCustom: true,
668
- _isVectorLayer: true,
669
- _isClusterLayer: true
670
- });
671
- if (openClick) {
672
- createSelectByLayer(vectorLayer);
442
+ const isClosedRing = (coords) => {
443
+ if (!Array.isArray(coords) || coords.length < 3) return false;
444
+ const first = coords[0];
445
+ const last = coords[coords.length - 1];
446
+ return first[0] === last[0] && first[1] === last[1];
447
+ };
448
+ const isValidCoordinate = (coord) => {
449
+ return Array.isArray(coord) && coord.length >= 2 && typeof coord[0] === "number" && typeof coord[1] === "number";
450
+ };
451
+ const isValidLineString = (coords) => {
452
+ return Array.isArray(coords) && coords.length >= 2 && coords.every(isValidCoordinate);
453
+ };
454
+ const isValidPolygon = (coords) => {
455
+ if (!Array.isArray(coords)) return false;
456
+ const rings = getArrayDepth(coords) === 2 ? [coords] : coords;
457
+ return rings.every(
458
+ (ring) => Array.isArray(ring) && ring.length >= 4 && isClosedRing(ring) && ring.every(isValidCoordinate)
459
+ );
460
+ };
461
+ const depth = getArrayDepth(coordinates);
462
+ try {
463
+ if (depth < 2 || !coordinates || coordinates.length === 0) {
464
+ return "Invalid" /* Invalid */;
465
+ } else if (depth === 2 && isValidLineString(coordinates)) {
466
+ return isClosedRing(coordinates) && coordinates.length >= 4 ? "Polygon" /* Polygon */ : "LineString" /* LineString */;
467
+ } else if (depth === 3 && Array.isArray(coordinates) && coordinates.every(isValidLineString)) {
468
+ if (isValidPolygon(coordinates)) {
469
+ return "Polygon" /* Polygon */;
470
+ } else if (coordinates.every((arr) => !isClosedRing(arr))) {
471
+ return "MultiLineString" /* MultiLineString */;
472
+ } else {
473
+ return "Invalid" /* Invalid */;
474
+ }
475
+ } else if (depth === 4 && Array.isArray(coordinates) && coordinates.every((rings) => isValidPolygon(rings))) {
476
+ return "MultiPolygon" /* MultiPolygon */;
477
+ } else {
478
+ return "Invalid" /* Invalid */;
479
+ }
480
+ } catch (error) {
481
+ console.error("Error analyzing coordinates:", error);
482
+ return "Invalid" /* Invalid */;
673
483
  }
674
- return vectorLayer;
675
484
  };
676
485
 
677
- // src/create-map.ts
678
- import { defaults as interactionDefaults } from "ol/interaction";
679
-
680
- // src/base-layer.ts
681
- import { XYZ } from "ol/source";
682
- import { WMTS } from "ol/source";
683
- import { TileGrid } from "ol/tilegrid";
684
- import { Tile } from "ol/layer";
685
- import WMTSTileGrid from "ol/tilegrid/WMTS";
686
- var createBaseLayer = (layerName = "hzsyvector_dark") => {
687
- const config = {
688
- zIndex: -5,
689
- preload: 1,
690
- minZoom: 8,
691
- maxZoom: 21,
692
- source: new XYZ({
693
- tileGrid: new TileGrid({
694
- tileSize: 256,
695
- resolutions: [
696
- 0.00549933137253187,
697
- 0.00274966568626595,
698
- 0.00137483284313297,
699
- 687416421566485e-18,
700
- 343708210783242e-18,
701
- 171854105391621e-18,
702
- 859270526958104e-19,
703
- 429635263479052e-19,
704
- 214817631739526e-19,
705
- 107408815869763e-19,
706
- 537044079348816e-20,
707
- 268522039674407e-20,
708
- 134261019837204e-20
709
- ],
710
- origin: [118.122911693886, 31.2869311022836],
711
- extent: [
712
- 116.43263049006,
713
- 28.6201742126026,
714
- 123.705594256347,
715
- 31.9765041681924
716
- ]
717
- }),
718
- projection: "EPSG:4326",
719
- urls: [
720
- `https://ywtg.citybrain.hangzhou.gov.cn/${layerName}/{z}/{y}/{x}`,
721
- `https://ywtg.citybrain.hangzhou.gov.cn:9456/${layerName}/{z}/{y}/{x}`,
722
- `https://ywtg.citybrain.hangzhou.gov.cn:9457/${layerName}/{z}/{y}/{x}`,
723
- `https://ywtg.citybrain.hangzhou.gov.cn:9458/${layerName}/{z}/{y}/{x}`,
724
- `https://ywtg.citybrain.hangzhou.gov.cn:9459/${layerName}/{z}/{y}/{x}`
725
- ]
726
- }),
727
- properties: {
728
- _isBaseLayer: true,
729
- _layerName: layerName
486
+ // src/ogc-utils.ts
487
+ import { WMTS as WMTS2 } from "ol/source";
488
+ import TileLayer from "ol/layer/Tile";
489
+ import { WMTSCapabilities } from "ol/format";
490
+ import { optionsFromCapabilities } from "ol/source/WMTS";
491
+ var parser = new WMTSCapabilities();
492
+ var capabilitiesMap = /* @__PURE__ */ new Map();
493
+ var getCapabilities = (url) => {
494
+ return new Promise((resolve) => {
495
+ const capabilities = capabilitiesMap.get(url);
496
+ if (capabilities) {
497
+ resolve(capabilities);
498
+ } else {
499
+ fetch(url).then((data) => data.text()).then((text) => {
500
+ const capabilities2 = parser.read(text);
501
+ capabilitiesMap.set(url, capabilities2);
502
+ resolve(capabilities2);
503
+ });
730
504
  }
731
- };
732
- return new Tile(config);
505
+ });
733
506
  };
734
- var createMapWorldLayer = (layerName, tk = "c77eddc667c5bed016fded560baf93e7") => {
735
- const [name, matrixSet] = layerName.split("_");
736
- const config = {
737
- preload: 1,
738
- zIndex: -10,
739
- cacheSize: 20240,
740
- properties: {
741
- _isBaseLayer: true,
742
- _layerName: layerName
743
- },
744
- source: new WMTS({
745
- crossOrigin: "anonymous",
746
- projection: "EPSG:4326",
747
- wrapX: true,
748
- layer: name,
749
- style: "default",
750
- version: "1.0.0",
751
- format: "image/png",
752
- matrixSet,
753
- tileGrid: new WMTSTileGrid({
754
- tileSize: 256,
755
- origin: [-180, 90],
756
- matrixIds: [
757
- "1",
758
- "2",
759
- "3",
760
- "4",
761
- "5",
762
- "6",
763
- "7",
764
- "8",
765
- "9",
766
- "10",
767
- "11",
768
- "12",
769
- "13",
770
- "14",
771
- "15",
772
- "16",
773
- "17",
774
- "18",
775
- "19"
776
- ],
777
- resolutions: [
778
- 0.703125,
779
- 0.3515625,
780
- 0.17578125,
781
- 0.087890625,
782
- 0.0439453125,
783
- 0.02197265625,
784
- 0.010986328125,
785
- 0.0054931640625,
786
- 0.00274658203125,
787
- 0.001373291015625,
788
- 6866455078125e-16,
789
- 34332275390625e-17,
790
- 171661376953125e-18,
791
- 858306884765625e-19,
792
- 4291534423828125e-20,
793
- 21457672119140625e-21,
794
- 10728836059570312e-21,
795
- 5364418029785156e-21,
796
- 2682209014892578e-21
797
- ]
798
- }),
799
- url: `https://t{0-7}.tianditu.gov.cn/${layerName}/wmts?tk=${tk}`
507
+ var createWmtsLayer = (serverUrl) => (config) => __async(null, null, function* () {
508
+ const { style, format, version, layerName, matrixSet } = config;
509
+ const [workspace, datastore] = layerName.split(":");
510
+ const capabilitiesUrl = `${serverUrl}/${workspace}/${datastore}/gwc/service/wmts?request=GetCapabilities`;
511
+ return new Promise((resolve, reject) => {
512
+ getCapabilities(capabilitiesUrl).then((data) => {
513
+ const options = optionsFromCapabilities(data, {
514
+ Style: style || "",
515
+ layer: datastore,
516
+ version: version || "1.1.0",
517
+ format: format || "image/png",
518
+ matrixSet: matrixSet || "EPSG:4326"
519
+ });
520
+ if (options) {
521
+ resolve(
522
+ new TileLayer({
523
+ zIndex: 3,
524
+ className: layerName,
525
+ source: new WMTS2(options)
526
+ })
527
+ );
528
+ } else {
529
+ reject(new Error("Unable to create TileLayer"));
530
+ }
531
+ });
532
+ });
533
+ });
534
+
535
+ // src/view-fit.ts
536
+ import { boundingExtent } from "ol/extent";
537
+ var DEFAULT_FIT_OPTIONS = {
538
+ padding: [50, 50, 50, 50],
539
+ duration: 1e3
540
+ };
541
+ var setFitViewByCoords = (coords, mapInstance = instance, fitOptions) => {
542
+ const view = mapInstance.getView();
543
+ if (coords.length === 1) {
544
+ view.animate(__spreadValues({
545
+ zoom: 14,
546
+ duration: 1e3,
547
+ center: coords[0]
548
+ }, fitOptions || {}));
549
+ } else {
550
+ const extent = boundingExtent(coords);
551
+ view.fit(extent, __spreadValues(__spreadValues({}, DEFAULT_FIT_OPTIONS), fitOptions || {}));
552
+ }
553
+ };
554
+ var setFitViewByGeom = (geom, mapInstance = instance, fitOptions) => {
555
+ mapInstance.getView().fit(geom, __spreadValues(__spreadValues({}, DEFAULT_FIT_OPTIONS), fitOptions || {}));
556
+ };
557
+ var setFitViewByLayer = (layer, mapInstance = instance, fitOptions) => {
558
+ var _a;
559
+ const extent = ((_a = layer.getSource()) == null ? void 0 : _a.getExtent()) || [];
560
+ mapInstance.getView().fit(extent, __spreadValues(__spreadValues({}, DEFAULT_FIT_OPTIONS), fitOptions || {}));
561
+ };
562
+
563
+ // src/select.ts
564
+ import { getCenter } from "ol/extent";
565
+ import { Select } from "ol/interaction";
566
+ import { singleClick } from "ol/events/condition";
567
+ var selectEventHandle = (vectorLayer, feature) => {
568
+ const data = feature.getProperties();
569
+ const { activeStyle } = data;
570
+ feature.setStyle(activeStyle);
571
+ emitter_default.emit("selected-feature", data);
572
+ vectorLayer.set("_hasActive", true);
573
+ if (vectorLayer.get("_isDynamic")) {
574
+ const activeImage = activeStyle.getImage();
575
+ setTimeout(() => {
576
+ emitter_default.emit(
577
+ "dynamic-marker",
578
+ Object.assign({}, data.rawData || {}, {
579
+ lnglat: data.lnglat,
580
+ style: data.style,
581
+ crsForm: data.crsForm,
582
+ width: activeImage.getWidth(),
583
+ height: activeImage.getHeight()
584
+ })
585
+ );
586
+ }, 1e3);
587
+ }
588
+ const isAutoFit = vectorLayer.get("_isAutoFit");
589
+ if (isAutoFit) {
590
+ const view = instance.getView();
591
+ view.animate({
592
+ duration: 1e3,
593
+ zoom: view.getZoom(),
594
+ center: getCenter(feature.getGeometry().getExtent())
595
+ });
596
+ }
597
+ };
598
+ var createSelectByLayer = (vectorLayer) => {
599
+ const interaction = new Select({
600
+ style: null,
601
+ multi: false,
602
+ hitTolerance: 10,
603
+ layers: [vectorLayer],
604
+ condition: (evt) => {
605
+ let hasFeature = false;
606
+ instance.forEachFeatureAtPixel(
607
+ evt.pixel,
608
+ () => {
609
+ hasFeature = true;
610
+ },
611
+ {
612
+ layerFilter: (layer) => layer === vectorLayer
613
+ }
614
+ );
615
+ return singleClick(evt) && hasFeature;
616
+ }
617
+ });
618
+ interaction.on("select", (evt) => {
619
+ const { selected, deselected } = evt;
620
+ if (selected.length) {
621
+ const feature = selected[0];
622
+ const isClusterLayer = vectorLayer.get("_isClusterLayer");
623
+ if (isClusterLayer) {
624
+ const features = feature.get("features");
625
+ if (features.length === 1) {
626
+ selectEventHandle(vectorLayer, features[0]);
627
+ }
628
+ } else {
629
+ selectEventHandle(vectorLayer, feature);
630
+ }
631
+ }
632
+ if (deselected.length) {
633
+ const feature = deselected[0];
634
+ const data = feature.getProperties();
635
+ feature.setStyle(data.unActiveStyle);
636
+ vectorLayer.set("_hasActive", false);
637
+ }
638
+ });
639
+ instance.addInteraction(interaction);
640
+ vectorLayer.set("_selectInteraction", interaction);
641
+ return interaction;
642
+ };
643
+
644
+ // src/vector-layer.ts
645
+ import { GeoJSON } from "ol/format";
646
+ import gcoord2 from "gcoord";
647
+ import VectorLayer from "ol/layer/Vector";
648
+ import VectorSource from "ol/source/Vector";
649
+ import { Fill, Style, Stroke } from "ol/style";
650
+ var resolveColor = (data, colorKey, colorMap, fallback) => colorKey ? (colorMap == null ? void 0 : colorMap.get(data[colorKey])) || fallback : fallback;
651
+ var assembleGeoJson = (dataList, config) => {
652
+ const { key, crsForm } = config;
653
+ const tempList = [];
654
+ dataList.forEach((item) => {
655
+ try {
656
+ const raw = item[key];
657
+ const pathArray = Array.isArray(raw) ? raw : JSON.parse(raw || "[]");
658
+ if (pathArray.length) {
659
+ const type = item["geoType"] || determineGeometryType(pathArray);
660
+ if (type !== "Invalid" /* Invalid */) {
661
+ tempList.push({
662
+ type: "Feature",
663
+ properties: __spreadValues({}, item),
664
+ geometry: {
665
+ type,
666
+ coordinates: pathArray
667
+ }
668
+ });
669
+ }
670
+ }
671
+ } catch (e) {
672
+ console.error(`\u521B\u5EFA\u7EBF\u72B6\u6570\u636E\u5931\u8D25\uFF1A${e}`);
673
+ }
674
+ });
675
+ return gcoord2.transform(
676
+ { type: "FeatureCollection", features: tempList },
677
+ crsForm || gcoord2.WGS84,
678
+ gcoord2.WGS84
679
+ );
680
+ };
681
+ var createVectorStyle = (feature, config) => {
682
+ const {
683
+ isLine,
684
+ colorMap,
685
+ fillColor,
686
+ colorKey,
687
+ strokeColor,
688
+ fillOpacity,
689
+ strokeWeight,
690
+ activeFillColor,
691
+ activeFillOpacity,
692
+ activeStrokeColor,
693
+ activeStrokeWeight
694
+ } = config || {};
695
+ const data = feature.getProperties();
696
+ const activeStyle = new Style({
697
+ stroke: new Stroke({
698
+ width: activeStrokeWeight || strokeWeight || 4,
699
+ color: activeStrokeColor || resolveColor(data, colorKey, colorMap, strokeColor)
800
700
  })
801
- };
802
- return new Tile(config);
803
- };
804
- var createZheJiangLayer = (layerName = "emap", tk = "3b0cdd02-c366-4363-b6de-081a9f12b364") => {
805
- return new Tile({
806
- preload: 1,
807
- minZoom: 4,
808
- maxZoom: 20,
809
- zIndex: -10,
810
- cacheSize: 20240,
811
- source: new XYZ({
812
- wrapX: true,
813
- projection: "EPSG:4326",
814
- crossOrigin: "anonymous",
815
- url: `https://ditu{0-6}.zjzwfw.gov.cn/services/wmts/${layerName}/default/oss/getTile/{z}/{y}/{x}?token=${tk}`
701
+ });
702
+ const unActiveStyle = new Style({
703
+ stroke: new Stroke({
704
+ width: strokeWeight || 2,
705
+ color: resolveColor(data, colorKey, colorMap, strokeColor)
816
706
  })
817
707
  });
818
- };
819
- var getLayerByName = (name) => instance.getAllLayers().find((item) => (item.get("_layerName") || item.getClassName()) === name);
820
- var removeLayerByName = (name) => {
821
- const layer = instance.getAllLayers().find((item) => (item.get("_layerName") || item.getClassName()) === name);
822
- if (layer) {
823
- const source = layer.getSource();
824
- if (source && source.dispose) {
825
- source.dispose();
826
- }
827
- instance.removeLayer(layer);
828
- layer.dispose();
708
+ if (!isLine) {
709
+ activeStyle.setFill(
710
+ new Fill({
711
+ color: hexToRgba(
712
+ activeFillColor || fillColor || "",
713
+ activeFillOpacity || 1
714
+ ) || hexToRgba(
715
+ resolveColor(data, colorKey, colorMap, fillColor) || "",
716
+ fillOpacity || 1
717
+ )
718
+ })
719
+ );
720
+ unActiveStyle.setFill(
721
+ new Fill({
722
+ color: hexToRgba(
723
+ resolveColor(data, colorKey, colorMap, fillColor) || "",
724
+ fillOpacity || 1
725
+ )
726
+ })
727
+ );
829
728
  }
830
- };
831
- var changeLayersByNames = (activeNames, allLayerNames) => {
832
- const changeLayers = instance.getAllLayers().filter((item) => allLayerNames.includes(item.getClassName()));
833
- changeLayers.forEach((layer) => {
834
- layer.setVisible(activeNames == null ? void 0 : activeNames.includes(layer.getClassName()));
729
+ feature.setProperties({
730
+ activeStyle,
731
+ unActiveStyle
835
732
  });
733
+ return unActiveStyle;
836
734
  };
837
-
838
- // src/create-map.ts
839
- var instance;
840
- var mapCenter = [119.71512016971076, 30.122490541963536];
841
- var createMapInstance = (config = {}) => {
842
- if (instance) {
843
- return instance;
735
+ var createBusinessLayer = (dataList, config) => {
736
+ const { isAutoFit, layerName, openClick } = config;
737
+ const geoJson = assembleGeoJson(dataList, config);
738
+ const vectorLayer = new VectorLayer({
739
+ zIndex: 5,
740
+ className: layerName ? layerName : "ol-layer",
741
+ source: new VectorSource({
742
+ features: new GeoJSON().readFeatures(geoJson).map((feature) => {
743
+ feature.setStyle(createVectorStyle(feature, config));
744
+ return feature;
745
+ })
746
+ })
747
+ });
748
+ if (openClick) {
749
+ createSelectByLayer(vectorLayer);
844
750
  }
845
- instance = createMap(config);
846
- return instance;
751
+ vectorLayer.setProperties({
752
+ _isCustom: true,
753
+ _isAutoFit: isAutoFit,
754
+ _isVectorLayer: true,
755
+ _vectorConfig: config,
756
+ _layerName: layerName,
757
+ _dataList: [...dataList],
758
+ _uuidSet: new Set(dataList.map((item) => item._uuid) || [])
759
+ });
760
+ return vectorLayer;
847
761
  };
848
- var createMap = (config = {}) => {
849
- const innerConfig = Object.assign(
850
- {
851
- zoom: 9.4,
852
- maxZoom: 18,
853
- minZoom: 9.4,
854
- center: mapCenter,
855
- baseLayer: "vec-layer",
856
- projection: "EPSG:4326",
857
- layers: [createBaseLayer()],
858
- constrainResolution: false,
859
- smoothExtentConstraint: false,
860
- tk: "c77eddc667c5bed016fded560baf93e7"
861
- },
862
- config || {}
762
+ var appendFeaturesByLayer = (targetLayer, dataList, crsForm) => {
763
+ const vectorSource = targetLayer.getSource();
764
+ const tempSet = targetLayer.get("_uuidSet") || /* @__PURE__ */ new Set();
765
+ dataList.forEach((item) => tempSet.add(item._uuid));
766
+ targetLayer.set("_uuidSet", tempSet);
767
+ const { _vectorConfig: config } = targetLayer.getProperties() || {};
768
+ const geoJson = assembleGeoJson(
769
+ dataList,
770
+ Object.assign({}, config, { crsForm })
863
771
  );
864
- const instance2 = new Map2({
865
- view: new View(innerConfig),
866
- controls: defaults({
867
- zoom: false,
868
- rotate: false,
869
- attribution: false
870
- }),
871
- interactions: interactionDefaults({
872
- pinchRotate: false,
873
- doubleClickZoom: false,
874
- altShiftDragRotate: false
875
- }),
876
- layers: innerConfig.layers || [createBaseLayer()]
877
- });
878
- mapCenter = innerConfig.center || mapCenter;
879
- instance2.activeBaseLayer = innerConfig.baseLayer;
880
- instance2.getLayerByName = getLayerByName;
881
- instance2.removeLayerByName = removeLayerByName;
882
- instance2.changeLayersByNames = changeLayersByNames;
883
- instance2.on("pointermove", (evt) => {
884
- instance2.getTargetElement().style.cursor = instance2.hasFeatureAtPixel(
885
- evt.pixel
886
- ) ? "pointer" : "";
772
+ vectorSource.addFeatures(
773
+ new GeoJSON().readFeatures(geoJson).map((feature) => {
774
+ feature.setStyle(createVectorStyle(feature, config));
775
+ return feature;
776
+ })
777
+ );
778
+ };
779
+ var createVectorFaceLayer = (dataList = [], config) => createBusinessLayer(dataList, Object.assign({}, config, { isLine: false }));
780
+ var createVectorLineLayer = (dataList = [], config) => createBusinessLayer(dataList, Object.assign({}, config, { isLine: true }));
781
+
782
+ // src/mass-marks.ts
783
+ import { Feature } from "ol";
784
+ import { Point } from "ol/geom";
785
+ import gcoord3 from "gcoord";
786
+ import { Icon, Style as Style2 } from "ol/style";
787
+ import VectorLayer2 from "ol/layer/Vector";
788
+ import VectorSource2 from "ol/source/Vector";
789
+ var buildMassMarksStyles = (getImgUrlFn) => {
790
+ return (iconConfig) => {
791
+ const {
792
+ baseUrl,
793
+ markerIcon,
794
+ statusNum = 5,
795
+ activeScale = 1.3,
796
+ markerSize = [32, 32]
797
+ } = iconConfig;
798
+ const getMarkerUrl = getImgUrlFn(baseUrl);
799
+ const [x, y] = markerSize;
800
+ const massMarksStyles = new Array(statusNum * 2);
801
+ for (let i = 0; i < statusNum; i++) {
802
+ const imageUrl = getMarkerUrl(`${markerIcon}-${i}`, ".webp");
803
+ massMarksStyles[i] = new Style2({
804
+ zIndex: 88 + i,
805
+ image: new Icon({
806
+ width: x,
807
+ height: y,
808
+ src: imageUrl,
809
+ anchor: [0.5, 1]
810
+ })
811
+ });
812
+ const activeImage = getMarkerUrl(`${markerIcon}-${i}-active`, ".webp");
813
+ massMarksStyles[i + statusNum] = new Style2({
814
+ zIndex: 120,
815
+ image: new Icon({
816
+ width: x * activeScale,
817
+ height: y * activeScale,
818
+ anchor: [0.5, 1],
819
+ src: activeImage ? activeImage : imageUrl
820
+ })
821
+ });
822
+ }
823
+ return massMarksStyles;
824
+ };
825
+ };
826
+ var createFeatures = (dataList, styleList = []) => {
827
+ return dataList.map((item) => {
828
+ const { crsForm } = item;
829
+ const coord = gcoord3.transform(
830
+ [+item.lnglat[0], +item.lnglat[1]],
831
+ crsForm || gcoord3.WGS84,
832
+ gcoord3.WGS84
833
+ );
834
+ const feature = new Feature({
835
+ geometry: new Point(coord)
836
+ });
837
+ feature.setProperties(__spreadProps(__spreadValues({}, item), {
838
+ unActiveStyle: styleList[item.style],
839
+ activeStyle: styleList[item.style + styleList.length / 2]
840
+ }));
841
+ feature.setStyle(styleList[item.style]);
842
+ return feature;
887
843
  });
888
- return instance2;
889
844
  };
890
- var disposeMap = () => {
891
- instance.getOverlays().forEach((overlay) => {
892
- instance.removeOverlay(overlay);
845
+ var addFeaturesByLayer = (targetLayer, dataList, config) => {
846
+ const massMarksStyles = targetLayer.get("_massMarksStyles");
847
+ const targetSource = targetLayer == null ? void 0 : targetLayer.getSource();
848
+ const { clear } = config;
849
+ if (clear) {
850
+ targetSource == null ? void 0 : targetSource.clear();
851
+ }
852
+ targetSource == null ? void 0 : targetSource.addFeatures(createFeatures(dataList, massMarksStyles));
853
+ };
854
+ var createMassMarksLayer = (dataList, styleList = []) => {
855
+ const vectorLayer = new VectorLayer2({
856
+ zIndex: 2e3,
857
+ source: new VectorSource2({
858
+ features: createFeatures(dataList, styleList)
859
+ })
893
860
  });
894
- instance.getInteractions().clear();
895
- const layers = instance.getAllLayers();
896
- layers.forEach((layer) => {
897
- const source = layer.getSource();
898
- if (source && source.dispose) {
899
- source.dispose();
900
- }
901
- instance.removeLayer(layer);
902
- layer.dispose();
861
+ vectorLayer.setProperties({
862
+ _isCustom: true,
863
+ _isVectorLayer: true,
864
+ _isMassMarksLayer: true,
865
+ _statusNum: styleList.length / 2,
866
+ _dataList: [...dataList],
867
+ _uuidSet: new Set(dataList.map((item) => item._uuid) || [])
903
868
  });
904
- instance.setTarget("");
905
- instance.dispose();
906
- instance = void 0;
869
+ return vectorLayer;
907
870
  };
908
- var getMapInstance = () => instance;
909
- var resetZoomAndCenter = (center = mapCenter) => {
910
- if (instance) {
911
- const view = instance.getView();
912
- view.animate({
913
- zoom: 9.4,
914
- center,
915
- duration: 1e3
871
+ var addMassMarksLayer = (getImgUrlFn) => {
872
+ return (dataList = [], iconConfig, openClick = true) => {
873
+ const {
874
+ offset = [0, 0],
875
+ baseUrl,
876
+ hasLine,
877
+ hasFace,
878
+ layerName,
879
+ isDynamic,
880
+ isAutoFit,
881
+ statusNum,
882
+ markerIcon,
883
+ marksStyles,
884
+ markerSize,
885
+ activeScale,
886
+ vectorConfig
887
+ } = iconConfig;
888
+ const massMarksStyles = marksStyles ? marksStyles : buildMassMarksStyles(getImgUrlFn)({
889
+ baseUrl,
890
+ markerIcon,
891
+ markerSize,
892
+ statusNum: statusNum || 5,
893
+ activeScale: activeScale || 1.3
916
894
  });
917
- }
918
- };
919
- var resetMap = (config = { center: mapCenter, isClearAll: true }) => {
920
- removeAllLayers();
921
- resetZoomAndCenter(config.center || mapCenter);
922
- };
923
-
924
- // src/helper.ts
925
- var hexToRgba = (hex, alpha) => {
926
- if (hex.startsWith("#")) {
927
- let tempHex = hex.replace("#", "");
928
- if (tempHex.length === 3) {
929
- tempHex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
895
+ const massMarksLayer = createMassMarksLayer(dataList, massMarksStyles);
896
+ if (openClick) {
897
+ massMarksLayer.setProperties({
898
+ _offset: offset,
899
+ _isAutoFit: isAutoFit
900
+ });
901
+ createSelectByLayer(massMarksLayer);
930
902
  }
931
- const r = parseInt(tempHex.substring(0, 2), 16);
932
- const g = parseInt(tempHex.substring(2, 4), 16);
933
- const b = parseInt(tempHex.substring(4, 6), 16);
934
- return `rgba(${r}, ${g}, ${b}, ${alpha})`;
935
- } else {
936
- return hex;
937
- }
938
- };
939
- var getLayersDataList = () => {
940
- var _a;
941
- return ((_a = instance) == null ? void 0 : _a.getAllLayers().map((layer) => layer.get("_dataList") || []).flat(2)) || [];
942
- };
943
- var determineGeometryType = (coordinates) => {
944
- const getArrayDepth = (arr) => {
945
- if (!Array.isArray(arr) || arr.length === 0) return 0;
946
- return 1 + getArrayDepth(arr[0]);
947
- };
948
- const isClosedRing = (coords) => {
949
- if (!Array.isArray(coords) || coords.length < 3) return false;
950
- const first = coords[0];
951
- const last = coords[coords.length - 1];
952
- return first[0] === last[0] && first[1] === last[1];
953
- };
954
- const isValidCoordinate = (coord) => {
955
- return Array.isArray(coord) && coord.length >= 2 && typeof coord[0] === "number" && typeof coord[1] === "number";
956
- };
957
- const isValidLineString = (coords) => {
958
- return Array.isArray(coords) && coords.length >= 2 && coords.every(isValidCoordinate);
959
- };
960
- const isValidPolygon = (coords) => {
961
- if (!Array.isArray(coords)) return false;
962
- const rings = getArrayDepth(coords) === 2 ? [coords] : coords;
963
- return rings.every(
964
- (ring) => Array.isArray(ring) && ring.length >= 4 && isClosedRing(ring) && ring.every(isValidCoordinate)
965
- );
903
+ if (hasLine) {
904
+ const vectorLayer = createBusinessLayer(
905
+ dataList,
906
+ Object.assign(
907
+ {},
908
+ {
909
+ key: "line",
910
+ isLine: true,
911
+ openClick: false,
912
+ strokeWeight: 4,
913
+ strokeColor: "rgba(29, 235, 255, 0.8)"
914
+ },
915
+ vectorConfig || {}
916
+ )
917
+ );
918
+ instance.addLayer(vectorLayer);
919
+ }
920
+ if (hasFace) {
921
+ const vectorLayer = createBusinessLayer(
922
+ dataList,
923
+ Object.assign(
924
+ {},
925
+ {
926
+ isLine: false,
927
+ key: "faceList",
928
+ strokeWeight: 1,
929
+ openClick: false,
930
+ fillColor: "#4247DF",
931
+ strokeStyle: "dashed",
932
+ strokeColor: "#4247DF"
933
+ },
934
+ vectorConfig || {}
935
+ )
936
+ );
937
+ instance.addLayer(vectorLayer);
938
+ }
939
+ massMarksLayer.setProperties({
940
+ _isCustom: true,
941
+ _offset: offset,
942
+ _hasLine: hasLine,
943
+ _hasFace: hasFace,
944
+ className: layerName,
945
+ _layerName: layerName,
946
+ _isVectorLayer: true,
947
+ _isDynamic: isDynamic,
948
+ _massMarksStyles: massMarksStyles
949
+ });
950
+ instance.addLayer(massMarksLayer);
951
+ return massMarksLayer;
966
952
  };
967
- const depth = getArrayDepth(coordinates);
968
- try {
969
- if (depth < 2 || !coordinates || coordinates.length === 0) {
970
- return "Invalid" /* Invalid */;
971
- } else if (depth === 2 && isValidLineString(coordinates)) {
972
- return isClosedRing(coordinates) && coordinates.length >= 4 ? "Polygon" /* Polygon */ : "LineString" /* LineString */;
973
- } else if (depth === 3 && Array.isArray(coordinates) && coordinates.every(isValidLineString)) {
974
- if (isValidPolygon(coordinates)) {
975
- return "Polygon" /* Polygon */;
976
- } else if (coordinates.every((arr) => !isClosedRing(arr))) {
977
- return "MultiLineString" /* MultiLineString */;
953
+ };
954
+ var updateMarksLayersByStatus = (checkedStatusList = []) => {
955
+ const hideStyle = new Style2({});
956
+ const tempList = [];
957
+ const targetLayers = instance.getAllLayers().filter((layer) => layer.get("_isMassMarksLayer"));
958
+ targetLayers.forEach((layer) => {
959
+ const features = layer.getSource().getFeatures();
960
+ features.forEach((feature) => {
961
+ const data = feature.getProperties();
962
+ if (!checkedStatusList.includes(data.status)) {
963
+ feature.setStyle(hideStyle);
978
964
  } else {
979
- return "Invalid" /* Invalid */;
965
+ tempList.push(data);
966
+ feature.setStyle(data.unActiveStyle);
980
967
  }
981
- } else if (depth === 4 && Array.isArray(coordinates) && coordinates.every((rings) => isValidPolygon(rings))) {
982
- return "MultiPolygon" /* MultiPolygon */;
983
- } else {
984
- return "Invalid" /* Invalid */;
985
- }
986
- } catch (error) {
987
- console.error("Error analyzing coordinates:", error);
988
- return "Invalid" /* Invalid */;
989
- }
968
+ });
969
+ });
970
+ return tempList;
990
971
  };
991
972
 
992
- // src/ogc-utils.ts
993
- import { WMTS as WMTS2 } from "ol/source";
994
- import TileLayer from "ol/layer/Tile";
995
- import { WMTSCapabilities } from "ol/format";
996
- import { optionsFromCapabilities } from "ol/source/WMTS";
997
- var parser = new WMTSCapabilities();
998
- var capabilitiesMap = /* @__PURE__ */ new Map();
999
- var getCapabilities = (url) => {
1000
- return new Promise((resolve) => {
1001
- const capabilities = capabilitiesMap.get(url);
1002
- if (capabilities) {
1003
- resolve(capabilities);
1004
- } else {
1005
- fetch(url).then((data) => data.text()).then((text) => {
1006
- const capabilities2 = parser.read(text);
1007
- capabilitiesMap.set(url, capabilities2);
1008
- resolve(capabilities2);
973
+ // src/cluster.ts
974
+ import { Feature as Feature2 } from "ol";
975
+ import { Point as Point2 } from "ol/geom";
976
+ import Cluster from "ol/source/Cluster";
977
+ import CircleStyle from "ol/style/Circle";
978
+ import VectorLayer3 from "ol/layer/Vector";
979
+ import VectorSource3 from "ol/source/Vector";
980
+ import { Fill as Fill2, Style as Style3, Stroke as Stroke2, Text } from "ol/style";
981
+ var createClusterLayer = (dataList, config) => {
982
+ const count = dataList.length;
983
+ const styleCache = {};
984
+ const {
985
+ distance,
986
+ minDistance,
987
+ openClick,
988
+ buildStyle,
989
+ singleStyles,
990
+ computedRadius,
991
+ layerName = "cluster-layer"
992
+ } = config;
993
+ const innerComputedRadius = (size) => Math.pow(size / count, 1 / 18);
994
+ styleCache[1] = singleStyles;
995
+ const innerBuildStyle = (feature) => {
996
+ const size = feature.get("features").length;
997
+ let style = styleCache[size];
998
+ const tempRadius = computedRadius ? computedRadius(size) : innerComputedRadius(size);
999
+ if (!style) {
1000
+ style = new Style3({
1001
+ image: new CircleStyle({
1002
+ radius: tempRadius * 20,
1003
+ stroke: new Stroke2({
1004
+ width: 2,
1005
+ color: `hsla(${180 - tempRadius * 180}, 100%, 40%, 1)`
1006
+ }),
1007
+ fill: new Fill2({
1008
+ color: `hsla(${180 - tempRadius * 180}, 100%, 50%, 1)`
1009
+ })
1010
+ }),
1011
+ text: new Text({
1012
+ text: size.toString(),
1013
+ fill: new Fill2({
1014
+ color: `hsla(${180 - tempRadius * 180}, 100%, 10%, 1)`
1015
+ }),
1016
+ textBaseline: "middle"
1017
+ })
1009
1018
  });
1019
+ styleCache[size] = style;
1010
1020
  }
1011
- });
1012
- };
1013
- var createWmtsLayer = (serverUrl) => (config) => __async(null, null, function* () {
1014
- const { style, format, version, layerName, matrixSet } = config;
1015
- const [workspace, datastore] = layerName.split(":");
1016
- const capabilitiesUrl = `${serverUrl}/${workspace}/${datastore}/gwc/service/wmts?request=GetCapabilities`;
1017
- return new Promise((resolve, reject) => {
1018
- getCapabilities(capabilitiesUrl).then((data) => {
1019
- const options = optionsFromCapabilities(data, {
1020
- Style: style || "",
1021
- layer: datastore,
1022
- version: version || "1.1.0",
1023
- format: format || "image/png",
1024
- matrixSet: matrixSet || "EPSG:4326"
1021
+ if (Array.isArray(style)) {
1022
+ const tempFeature = feature.get("features")[0];
1023
+ const index = tempFeature.get("styleIndex") || 0;
1024
+ tempFeature.setProperties({
1025
+ unActiveStyle: style[index],
1026
+ activeStyle: style[index + style.length / 2]
1025
1027
  });
1026
- if (options) {
1027
- resolve(
1028
- new TileLayer({
1029
- zIndex: 3,
1030
- className: layerName,
1031
- source: new WMTS2(options)
1032
- })
1033
- );
1034
- } else {
1035
- reject(new Error("Unable to create TileLayer"));
1036
- }
1037
- });
1028
+ return style[index];
1029
+ }
1030
+ return style;
1031
+ };
1032
+ const vectorLayer = new VectorLayer3({
1033
+ zIndex: 200,
1034
+ className: layerName,
1035
+ source: new Cluster({
1036
+ distance: distance || 80,
1037
+ minDistance: minDistance || 0,
1038
+ source: new VectorSource3({
1039
+ features: dataList.map((item) => {
1040
+ const feature = new Feature2(new Point2(item.lnglat));
1041
+ feature.setProperties(item);
1042
+ return feature;
1043
+ })
1044
+ })
1045
+ }),
1046
+ style: (feature) => buildStyle ? buildStyle(feature) : innerBuildStyle(feature)
1038
1047
  });
1039
- });
1048
+ vectorLayer.setProperties({
1049
+ _isCustom: true,
1050
+ _isVectorLayer: true,
1051
+ _isClusterLayer: true
1052
+ });
1053
+ if (openClick) {
1054
+ createSelectByLayer(vectorLayer);
1055
+ }
1056
+ return vectorLayer;
1057
+ };
1040
1058
  export {
1041
1059
  GeometryType,
1042
1060
  activeFeatureByUid,