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