map-ol-utils 0.1.28 → 0.1.29
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.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/
|
|
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
|
|
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
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
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/hzsyvector_dark/Mapserver/tile/${layerName}/{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
|
|
368
|
-
const
|
|
369
|
-
const
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
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
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
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
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
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
|
-
|
|
440
|
-
|
|
441
|
-
return interaction;
|
|
323
|
+
instance.removeLayer(layer);
|
|
324
|
+
layer.dispose();
|
|
325
|
+
}
|
|
442
326
|
};
|
|
443
|
-
var
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
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
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
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
|
-
|
|
341
|
+
instance = createMap(config);
|
|
342
|
+
return instance;
|
|
470
343
|
};
|
|
471
|
-
var
|
|
472
|
-
const
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
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
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
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
|
|
382
|
+
return map;
|
|
487
383
|
};
|
|
488
|
-
var
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
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
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
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
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
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
|
|
590
|
-
|
|
591
|
-
|
|
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
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
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
|
-
|
|
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
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
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/
|
|
678
|
-
import {
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
import {
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
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
|
|
735
|
-
const
|
|
736
|
-
const
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
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
|
-
|
|
799
|
-
|
|
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
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
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
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
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
|
-
|
|
832
|
-
|
|
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
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
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
|
-
|
|
846
|
-
|
|
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
|
|
849
|
-
const
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
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
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
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
|
|
891
|
-
|
|
892
|
-
|
|
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
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
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
|
-
|
|
905
|
-
instance.dispose();
|
|
906
|
-
instance = void 0;
|
|
869
|
+
return vectorLayer;
|
|
907
870
|
};
|
|
908
|
-
var
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
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
|
-
|
|
920
|
-
|
|
921
|
-
|
|
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
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
}
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
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
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
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
|
-
|
|
965
|
+
tempList.push(data);
|
|
966
|
+
feature.setStyle(data.unActiveStyle);
|
|
980
967
|
}
|
|
981
|
-
}
|
|
982
|
-
|
|
983
|
-
|
|
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/
|
|
993
|
-
import {
|
|
994
|
-
import
|
|
995
|
-
import
|
|
996
|
-
import
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
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
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
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
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
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,
|