map-ol-utils 0.1.27 → 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 +573 -0
- package/dist/index.cjs +837 -805
- package/dist/index.d.cts +103 -48
- package/dist/index.d.ts +103 -48
- package/dist/index.js +848 -823
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -58,25 +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 {
|
|
74
|
-
Icon,
|
|
75
|
-
Text,
|
|
76
|
-
Fill,
|
|
77
|
-
Style,
|
|
78
|
-
Stroke
|
|
79
|
-
} from "ol/style";
|
|
63
|
+
import { Overlay } from "ol";
|
|
80
64
|
var removeOverlays = (key = "") => {
|
|
81
65
|
if (instance) {
|
|
82
66
|
const overlays = instance.getOverlays().getArray().filter((overlay) => overlay.get(key || "position"));
|
|
@@ -102,6 +86,18 @@ var createAnimationMarker = (imgUrl, data) => {
|
|
|
102
86
|
overlay.set("_isAnimationMarker", true);
|
|
103
87
|
instance.addOverlay(overlay);
|
|
104
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
|
|
105
101
|
var resetActiveVector = () => {
|
|
106
102
|
removeOverlays();
|
|
107
103
|
const layers = instance.getAllLayers();
|
|
@@ -110,167 +106,6 @@ var resetActiveVector = () => {
|
|
|
110
106
|
interaction == null ? void 0 : interaction.getFeatures().clear();
|
|
111
107
|
});
|
|
112
108
|
};
|
|
113
|
-
var setFitViewByCoords = (coords, mapInstance = instance, fitOptions) => {
|
|
114
|
-
const view = mapInstance.getView();
|
|
115
|
-
if (coords.length === 1) {
|
|
116
|
-
view.animate(__spreadValues({
|
|
117
|
-
zoom: 14,
|
|
118
|
-
duration: 1e3,
|
|
119
|
-
center: coords[0]
|
|
120
|
-
}, fitOptions || {}));
|
|
121
|
-
} else {
|
|
122
|
-
const extent = boundingExtent(coords);
|
|
123
|
-
view.fit(extent, __spreadValues({
|
|
124
|
-
padding: [50, 50, 50, 50],
|
|
125
|
-
duration: 1e3
|
|
126
|
-
}, fitOptions || {}));
|
|
127
|
-
}
|
|
128
|
-
};
|
|
129
|
-
var setFitViewByGeom = (geom, mapInstance = instance, fitOptions) => {
|
|
130
|
-
mapInstance.getView().fit(geom, __spreadValues({
|
|
131
|
-
padding: [50, 50, 50, 50],
|
|
132
|
-
duration: 1e3
|
|
133
|
-
}, fitOptions || {}));
|
|
134
|
-
};
|
|
135
|
-
var setFitViewByLayer = (layer, mapInstance = instance, fitOptions) => {
|
|
136
|
-
var _a;
|
|
137
|
-
const extent = ((_a = layer.getSource()) == null ? void 0 : _a.getExtent()) || [];
|
|
138
|
-
mapInstance.getView().fit(extent, __spreadValues({
|
|
139
|
-
padding: [50, 50, 50, 50],
|
|
140
|
-
duration: 1e3
|
|
141
|
-
}, fitOptions || {}));
|
|
142
|
-
};
|
|
143
|
-
var assembleGeoJson = (dataList, config) => {
|
|
144
|
-
const { key, crsForm } = config;
|
|
145
|
-
const tempList = [];
|
|
146
|
-
dataList.forEach((item) => {
|
|
147
|
-
try {
|
|
148
|
-
const pathArray = Array.isArray(item[key]) ? item[key] : JSON.parse(item[key] || "[]");
|
|
149
|
-
if (pathArray.length) {
|
|
150
|
-
const type = item["geoType"] || determineGeometryType(pathArray);
|
|
151
|
-
if (type !== "Invalid" /* Invalid */) {
|
|
152
|
-
tempList.push({
|
|
153
|
-
type: "Feature",
|
|
154
|
-
properties: __spreadValues({}, item),
|
|
155
|
-
geometry: {
|
|
156
|
-
type,
|
|
157
|
-
coordinates: pathArray
|
|
158
|
-
}
|
|
159
|
-
});
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
} catch (e) {
|
|
163
|
-
console.error(`\u521B\u5EFA\u7EBF\u72B6\u6570\u636E\u5931\u8D25\uFF1A${e}`);
|
|
164
|
-
}
|
|
165
|
-
});
|
|
166
|
-
return gcoord.transform(
|
|
167
|
-
{ type: "FeatureCollection", features: tempList },
|
|
168
|
-
crsForm || gcoord.WGS84,
|
|
169
|
-
gcoord.WGS84
|
|
170
|
-
);
|
|
171
|
-
};
|
|
172
|
-
var createVectorStyle = (feature, config) => {
|
|
173
|
-
const {
|
|
174
|
-
isLine,
|
|
175
|
-
colorMap,
|
|
176
|
-
fillColor,
|
|
177
|
-
colorKey,
|
|
178
|
-
strokeColor,
|
|
179
|
-
fillOpacity,
|
|
180
|
-
strokeWeight,
|
|
181
|
-
activeFillColor,
|
|
182
|
-
activeFillOpacity,
|
|
183
|
-
activeStrokeColor,
|
|
184
|
-
activeStrokeWeight
|
|
185
|
-
} = config || {};
|
|
186
|
-
const data = feature.getProperties();
|
|
187
|
-
const activeStyle = new Style({
|
|
188
|
-
stroke: new Stroke({
|
|
189
|
-
width: activeStrokeWeight || strokeWeight || 4,
|
|
190
|
-
color: activeStrokeColor || (colorKey ? (colorMap == null ? void 0 : colorMap.get(data[colorKey])) || strokeColor : strokeColor)
|
|
191
|
-
})
|
|
192
|
-
});
|
|
193
|
-
const unActiveStyle = new Style({
|
|
194
|
-
stroke: new Stroke({
|
|
195
|
-
width: strokeWeight || 2,
|
|
196
|
-
color: colorKey ? (colorMap == null ? void 0 : colorMap.get(data[colorKey])) || strokeColor : strokeColor
|
|
197
|
-
})
|
|
198
|
-
});
|
|
199
|
-
if (!isLine) {
|
|
200
|
-
activeStyle.setFill(
|
|
201
|
-
new Fill({
|
|
202
|
-
color: hexToRgba(
|
|
203
|
-
activeFillColor || fillColor || "",
|
|
204
|
-
activeFillOpacity || 1
|
|
205
|
-
) || hexToRgba(
|
|
206
|
-
(colorKey ? (colorMap == null ? void 0 : colorMap.get(data[colorKey])) || fillColor : fillColor) || "",
|
|
207
|
-
fillOpacity || 1
|
|
208
|
-
)
|
|
209
|
-
})
|
|
210
|
-
);
|
|
211
|
-
unActiveStyle.setFill(
|
|
212
|
-
new Fill({
|
|
213
|
-
color: hexToRgba(
|
|
214
|
-
(colorKey ? (colorMap == null ? void 0 : colorMap.get(data[colorKey])) || fillColor : fillColor) || "",
|
|
215
|
-
fillOpacity || 1
|
|
216
|
-
)
|
|
217
|
-
})
|
|
218
|
-
);
|
|
219
|
-
}
|
|
220
|
-
feature.setProperties(
|
|
221
|
-
Object.assign(data, {
|
|
222
|
-
activeStyle,
|
|
223
|
-
unActiveStyle
|
|
224
|
-
})
|
|
225
|
-
);
|
|
226
|
-
return unActiveStyle;
|
|
227
|
-
};
|
|
228
|
-
var createBusinessLayer = (dataList, config) => {
|
|
229
|
-
const { isAutoFit, layerName, openClick } = config;
|
|
230
|
-
const geoJson = assembleGeoJson(dataList, config);
|
|
231
|
-
const vectorLayer = new VectorLayer({
|
|
232
|
-
zIndex: 5,
|
|
233
|
-
className: layerName ? layerName : "ol-layer",
|
|
234
|
-
source: new VectorSource({
|
|
235
|
-
features: new GeoJSON().readFeatures(geoJson).map((feature) => {
|
|
236
|
-
feature.setStyle(createVectorStyle(feature, config));
|
|
237
|
-
return feature;
|
|
238
|
-
})
|
|
239
|
-
})
|
|
240
|
-
});
|
|
241
|
-
if (openClick) {
|
|
242
|
-
createSelectByLayer(vectorLayer);
|
|
243
|
-
}
|
|
244
|
-
vectorLayer.setProperties({
|
|
245
|
-
_isCustom: true,
|
|
246
|
-
_isAutoFit: isAutoFit,
|
|
247
|
-
_isVectorLayer: true,
|
|
248
|
-
_vectorConfig: config,
|
|
249
|
-
_layerName: layerName,
|
|
250
|
-
_dataList: [...dataList],
|
|
251
|
-
_uuidSet: new Set(dataList.map((item) => item._uuid) || [])
|
|
252
|
-
});
|
|
253
|
-
return vectorLayer;
|
|
254
|
-
};
|
|
255
|
-
var appendFeaturesByLayer = (targetLayer, dataList, crsForm) => {
|
|
256
|
-
const vectorSource = targetLayer.getSource();
|
|
257
|
-
const tempSet = targetLayer.get("_uuidSet") || /* @__PURE__ */ new Set();
|
|
258
|
-
dataList.forEach((item) => tempSet.add(item._uuid));
|
|
259
|
-
targetLayer.set("_uuidSet", tempSet);
|
|
260
|
-
const { _vectorConfig: config } = targetLayer.getProperties() || {};
|
|
261
|
-
const geoJson = assembleGeoJson(
|
|
262
|
-
dataList,
|
|
263
|
-
Object.assign({}, config, { crsForm })
|
|
264
|
-
);
|
|
265
|
-
vectorSource.addFeatures(
|
|
266
|
-
new GeoJSON().readFeatures(geoJson).map((feature) => {
|
|
267
|
-
feature.setStyle(createVectorStyle(feature, config));
|
|
268
|
-
return feature;
|
|
269
|
-
})
|
|
270
|
-
);
|
|
271
|
-
};
|
|
272
|
-
var createVectorFaceLayer = (dataList = [], config) => createBusinessLayer(dataList, Object.assign({}, config, { isLine: false }));
|
|
273
|
-
var createVectorLineLayer = (dataList = [], config) => createBusinessLayer(dataList, Object.assign({}, config, { isLine: true }));
|
|
274
109
|
var removeAllLayers = () => {
|
|
275
110
|
removeOverlays();
|
|
276
111
|
if (instance) {
|
|
@@ -333,707 +168,897 @@ var activeFeatureByUid = (uid) => {
|
|
|
333
168
|
}
|
|
334
169
|
}
|
|
335
170
|
};
|
|
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
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
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
|
|
369
226
|
}
|
|
370
|
-
return massMarksStyles;
|
|
371
227
|
};
|
|
228
|
+
return new Tile(config);
|
|
372
229
|
};
|
|
373
|
-
var
|
|
374
|
-
const
|
|
375
|
-
const
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
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);
|
|
403
299
|
};
|
|
404
|
-
var
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
{
|
|
418
|
-
layerFilter: (layer) => layer === vectorLayer
|
|
419
|
-
}
|
|
420
|
-
);
|
|
421
|
-
return singleClick(evt) && hasFeature;
|
|
422
|
-
}
|
|
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
|
+
})
|
|
423
313
|
});
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
selectEventHandle(vectorLayer, features[0]);
|
|
433
|
-
}
|
|
434
|
-
} else {
|
|
435
|
-
selectEventHandle(vectorLayer, feature);
|
|
436
|
-
}
|
|
437
|
-
}
|
|
438
|
-
if (deselected.length) {
|
|
439
|
-
const feature = deselected[0];
|
|
440
|
-
const data = feature.getProperties();
|
|
441
|
-
feature.setStyle(data.unActiveStyle);
|
|
442
|
-
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();
|
|
443
322
|
}
|
|
323
|
+
instance.removeLayer(layer);
|
|
324
|
+
layer.dispose();
|
|
325
|
+
}
|
|
326
|
+
};
|
|
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()));
|
|
444
331
|
});
|
|
445
|
-
instance.addInteraction(interaction);
|
|
446
|
-
vectorLayer.set("_selectInteraction", interaction);
|
|
447
|
-
return interaction;
|
|
448
332
|
};
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
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;
|
|
340
|
+
}
|
|
341
|
+
instance = createMap(config);
|
|
342
|
+
return instance;
|
|
343
|
+
};
|
|
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()]
|
|
466
373
|
});
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
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" : "";
|
|
472
381
|
});
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
_dataList: [...dataList],
|
|
479
|
-
_uuidSet: new Set(dataList.map((item) => item._uuid) || [])
|
|
382
|
+
return map;
|
|
383
|
+
};
|
|
384
|
+
var disposeMap = () => {
|
|
385
|
+
instance.getOverlays().forEach((overlay) => {
|
|
386
|
+
instance.removeOverlay(overlay);
|
|
480
387
|
});
|
|
481
|
-
|
|
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();
|
|
394
|
+
}
|
|
395
|
+
instance.removeLayer(layer);
|
|
396
|
+
layer.dispose();
|
|
397
|
+
});
|
|
398
|
+
instance.setTarget("");
|
|
399
|
+
instance.dispose();
|
|
400
|
+
instance = void 0;
|
|
482
401
|
};
|
|
483
|
-
var
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
isDynamic,
|
|
492
|
-
isAutoFit,
|
|
493
|
-
statusNum,
|
|
494
|
-
markerIcon,
|
|
495
|
-
marksStyles,
|
|
496
|
-
markerSize,
|
|
497
|
-
activeScale,
|
|
498
|
-
vectorConfig
|
|
499
|
-
} = iconConfig;
|
|
500
|
-
const massMarksStyles = marksStyles ? marksStyles : buildMassMarksStyles(getImgUrlFn)({
|
|
501
|
-
baseUrl,
|
|
502
|
-
markerIcon,
|
|
503
|
-
markerSize,
|
|
504
|
-
statusNum: statusNum || 5,
|
|
505
|
-
activeScale: activeScale || 1.3
|
|
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
|
|
506
410
|
});
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
411
|
+
}
|
|
412
|
+
};
|
|
413
|
+
var resetMap = (config = { center: mapCenter, isClearAll: true }) => {
|
|
414
|
+
removeAllLayers();
|
|
415
|
+
resetZoomAndCenter(config.center || mapCenter);
|
|
416
|
+
};
|
|
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];
|
|
514
424
|
}
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
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]);
|
|
441
|
+
};
|
|
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 */;
|
|
531
479
|
}
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
480
|
+
} catch (error) {
|
|
481
|
+
console.error("Error analyzing coordinates:", error);
|
|
482
|
+
return "Invalid" /* Invalid */;
|
|
483
|
+
}
|
|
484
|
+
};
|
|
485
|
+
|
|
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
|
+
});
|
|
550
504
|
}
|
|
551
|
-
|
|
552
|
-
_isCustom: true,
|
|
553
|
-
_offset: offset,
|
|
554
|
-
_hasLine: hasLine,
|
|
555
|
-
_hasFace: hasFace,
|
|
556
|
-
className: layerName,
|
|
557
|
-
_layerName: layerName,
|
|
558
|
-
_isVectorLayer: true,
|
|
559
|
-
_isDynamic: isDynamic
|
|
560
|
-
});
|
|
561
|
-
instance.addLayer(massMarksLayer);
|
|
562
|
-
return massMarksLayer;
|
|
563
|
-
};
|
|
505
|
+
});
|
|
564
506
|
};
|
|
565
|
-
var
|
|
566
|
-
const
|
|
567
|
-
const
|
|
568
|
-
const
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
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
|
+
);
|
|
575
528
|
} else {
|
|
576
|
-
|
|
577
|
-
feature.setStyle(data.unActiveStyle);
|
|
529
|
+
reject(new Error("Unable to create TileLayer"));
|
|
578
530
|
}
|
|
579
531
|
});
|
|
580
532
|
});
|
|
581
|
-
|
|
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
|
|
582
540
|
};
|
|
583
|
-
var
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
)
|
|
591
|
-
|
|
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
|
+
}
|
|
592
553
|
};
|
|
593
|
-
var
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
const
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
text: new Text({
|
|
624
|
-
text: size.toString(),
|
|
625
|
-
fill: new Fill({
|
|
626
|
-
color: `hsla(${180 - tempRadius * 180}, 100%, 10%, 1)`
|
|
627
|
-
}),
|
|
628
|
-
textBaseline: "middle"
|
|
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()
|
|
629
584
|
})
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
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;
|
|
641
616
|
}
|
|
642
|
-
return style;
|
|
643
|
-
};
|
|
644
|
-
const vectorLayer = new VectorLayer({
|
|
645
|
-
zIndex: 200,
|
|
646
|
-
className: layerName,
|
|
647
|
-
source: new Cluster({
|
|
648
|
-
distance: distance || 80,
|
|
649
|
-
minDistance: minDistance || 0,
|
|
650
|
-
source: new VectorSource({
|
|
651
|
-
features: dataList.map((item) => {
|
|
652
|
-
const feature = new Feature(new Point(item.lnglat));
|
|
653
|
-
feature.setProperties(item);
|
|
654
|
-
return feature;
|
|
655
|
-
})
|
|
656
|
-
})
|
|
657
|
-
}),
|
|
658
|
-
style: (feature) => buildStyle ? buildStyle(feature) : innerBuildStyle(feature)
|
|
659
617
|
});
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
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
|
+
}
|
|
664
638
|
});
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
return vectorLayer;
|
|
639
|
+
instance.addInteraction(interaction);
|
|
640
|
+
vectorLayer.set("_selectInteraction", interaction);
|
|
641
|
+
return interaction;
|
|
669
642
|
};
|
|
670
643
|
|
|
671
|
-
// src/
|
|
672
|
-
import {
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
import
|
|
676
|
-
import {
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
28.6201742126026,
|
|
708
|
-
123.705594256347,
|
|
709
|
-
31.9765041681924
|
|
710
|
-
]
|
|
711
|
-
}),
|
|
712
|
-
projection: "EPSG:4326",
|
|
713
|
-
urls: [
|
|
714
|
-
`https://ywtg.citybrain.hangzhou.gov.cn/${layerName}/{z}/{y}/{x}`,
|
|
715
|
-
`https://ywtg.citybrain.hangzhou.gov.cn:9456/${layerName}/{z}/{y}/{x}`,
|
|
716
|
-
`https://ywtg.citybrain.hangzhou.gov.cn:9457/${layerName}/{z}/{y}/{x}`,
|
|
717
|
-
`https://ywtg.citybrain.hangzhou.gov.cn:9458/${layerName}/{z}/{y}/{x}`,
|
|
718
|
-
`https://ywtg.citybrain.hangzhou.gov.cn:9459/${layerName}/{z}/{y}/{x}`
|
|
719
|
-
]
|
|
720
|
-
}),
|
|
721
|
-
properties: {
|
|
722
|
-
_isBaseLayer: true,
|
|
723
|
-
_layerName: layerName
|
|
724
|
-
}
|
|
725
|
-
};
|
|
726
|
-
return new Tile(config);
|
|
727
|
-
};
|
|
728
|
-
var createMapWorldLayer = (layerName, tk = "c77eddc667c5bed016fded560baf93e7") => {
|
|
729
|
-
const [name, matrixSet] = layerName.split("_");
|
|
730
|
-
const config = {
|
|
731
|
-
preload: 1,
|
|
732
|
-
zIndex: -10,
|
|
733
|
-
cacheSize: 20240,
|
|
734
|
-
properties: {
|
|
735
|
-
_isBaseLayer: true,
|
|
736
|
-
_layerName: layerName
|
|
737
|
-
},
|
|
738
|
-
source: new WMTS({
|
|
739
|
-
crossOrigin: "anonymous",
|
|
740
|
-
projection: "EPSG:4326",
|
|
741
|
-
wrapX: true,
|
|
742
|
-
layer: name,
|
|
743
|
-
style: "default",
|
|
744
|
-
version: "1.0.0",
|
|
745
|
-
format: "image/png",
|
|
746
|
-
matrixSet,
|
|
747
|
-
tileGrid: new WMTSTileGrid({
|
|
748
|
-
tileSize: 256,
|
|
749
|
-
origin: [-180, 90],
|
|
750
|
-
matrixIds: [
|
|
751
|
-
"1",
|
|
752
|
-
"2",
|
|
753
|
-
"3",
|
|
754
|
-
"4",
|
|
755
|
-
"5",
|
|
756
|
-
"6",
|
|
757
|
-
"7",
|
|
758
|
-
"8",
|
|
759
|
-
"9",
|
|
760
|
-
"10",
|
|
761
|
-
"11",
|
|
762
|
-
"12",
|
|
763
|
-
"13",
|
|
764
|
-
"14",
|
|
765
|
-
"15",
|
|
766
|
-
"16",
|
|
767
|
-
"17",
|
|
768
|
-
"18",
|
|
769
|
-
"19"
|
|
770
|
-
],
|
|
771
|
-
resolutions: [
|
|
772
|
-
0.703125,
|
|
773
|
-
0.3515625,
|
|
774
|
-
0.17578125,
|
|
775
|
-
0.087890625,
|
|
776
|
-
0.0439453125,
|
|
777
|
-
0.02197265625,
|
|
778
|
-
0.010986328125,
|
|
779
|
-
0.0054931640625,
|
|
780
|
-
0.00274658203125,
|
|
781
|
-
0.001373291015625,
|
|
782
|
-
6866455078125e-16,
|
|
783
|
-
34332275390625e-17,
|
|
784
|
-
171661376953125e-18,
|
|
785
|
-
858306884765625e-19,
|
|
786
|
-
4291534423828125e-20,
|
|
787
|
-
21457672119140625e-21,
|
|
788
|
-
10728836059570312e-21,
|
|
789
|
-
5364418029785156e-21,
|
|
790
|
-
2682209014892578e-21
|
|
791
|
-
]
|
|
792
|
-
}),
|
|
793
|
-
url: `https://t{0-7}.tianditu.gov.cn/${layerName}/wmts?tk=${tk}`
|
|
794
|
-
})
|
|
795
|
-
};
|
|
796
|
-
return new Tile(config);
|
|
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
|
+
);
|
|
797
680
|
};
|
|
798
|
-
var
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
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)
|
|
810
700
|
})
|
|
811
701
|
});
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
702
|
+
const unActiveStyle = new Style({
|
|
703
|
+
stroke: new Stroke({
|
|
704
|
+
width: strokeWeight || 2,
|
|
705
|
+
color: resolveColor(data, colorKey, colorMap, strokeColor)
|
|
706
|
+
})
|
|
707
|
+
});
|
|
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
|
+
);
|
|
823
728
|
}
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
changeLayers.forEach((layer) => {
|
|
828
|
-
layer.setVisible(activeNames == null ? void 0 : activeNames.includes(layer.getClassName()));
|
|
729
|
+
feature.setProperties({
|
|
730
|
+
activeStyle,
|
|
731
|
+
unActiveStyle
|
|
829
732
|
});
|
|
733
|
+
return unActiveStyle;
|
|
830
734
|
};
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
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);
|
|
838
750
|
}
|
|
839
|
-
|
|
840
|
-
|
|
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;
|
|
841
761
|
};
|
|
842
|
-
var
|
|
843
|
-
const
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
layers: [createBaseLayer()],
|
|
852
|
-
constrainResolution: false,
|
|
853
|
-
smoothExtentConstraint: false,
|
|
854
|
-
tk: "c77eddc667c5bed016fded560baf93e7"
|
|
855
|
-
},
|
|
856
|
-
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 })
|
|
857
771
|
);
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
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;
|
|
881
843
|
});
|
|
882
|
-
return instance2;
|
|
883
844
|
};
|
|
884
|
-
var
|
|
885
|
-
|
|
886
|
-
|
|
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
|
+
})
|
|
887
860
|
});
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
instance.removeLayer(layer);
|
|
896
|
-
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) || [])
|
|
897
868
|
});
|
|
898
|
-
|
|
899
|
-
instance.dispose();
|
|
900
|
-
instance = void 0;
|
|
869
|
+
return vectorLayer;
|
|
901
870
|
};
|
|
902
|
-
var
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
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
|
|
910
894
|
});
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
};
|
|
917
|
-
|
|
918
|
-
// src/helper.ts
|
|
919
|
-
var hexToRgba = (hex, alpha) => {
|
|
920
|
-
if (hex.startsWith("#")) {
|
|
921
|
-
let tempHex = hex.replace("#", "");
|
|
922
|
-
if (tempHex.length === 3) {
|
|
923
|
-
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);
|
|
924
902
|
}
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
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
|
-
|
|
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;
|
|
960
952
|
};
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
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);
|
|
972
964
|
} else {
|
|
973
|
-
|
|
965
|
+
tempList.push(data);
|
|
966
|
+
feature.setStyle(data.unActiveStyle);
|
|
974
967
|
}
|
|
975
|
-
}
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
return "Invalid" /* Invalid */;
|
|
979
|
-
}
|
|
980
|
-
} catch (error) {
|
|
981
|
-
console.error("Error analyzing coordinates:", error);
|
|
982
|
-
return "Invalid" /* Invalid */;
|
|
983
|
-
}
|
|
968
|
+
});
|
|
969
|
+
});
|
|
970
|
+
return tempList;
|
|
984
971
|
};
|
|
985
972
|
|
|
986
|
-
// src/
|
|
987
|
-
import {
|
|
988
|
-
import
|
|
989
|
-
import
|
|
990
|
-
import
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
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
|
+
})
|
|
1003
1018
|
});
|
|
1019
|
+
styleCache[size] = style;
|
|
1004
1020
|
}
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
return new Promise((resolve, reject) => {
|
|
1012
|
-
getCapabilities(capabilitiesUrl).then((data) => {
|
|
1013
|
-
const options = optionsFromCapabilities(data, {
|
|
1014
|
-
Style: style || "",
|
|
1015
|
-
layer: datastore,
|
|
1016
|
-
version: version || "1.1.0",
|
|
1017
|
-
format: format || "image/png",
|
|
1018
|
-
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]
|
|
1019
1027
|
});
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
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)
|
|
1032
1047
|
});
|
|
1033
|
-
|
|
1048
|
+
vectorLayer.setProperties({
|
|
1049
|
+
_isCustom: true,
|
|
1050
|
+
_isVectorLayer: true,
|
|
1051
|
+
_isClusterLayer: true
|
|
1052
|
+
});
|
|
1053
|
+
if (openClick) {
|
|
1054
|
+
createSelectByLayer(vectorLayer);
|
|
1055
|
+
}
|
|
1056
|
+
return vectorLayer;
|
|
1057
|
+
};
|
|
1034
1058
|
export {
|
|
1035
1059
|
GeometryType,
|
|
1036
1060
|
activeFeatureByUid,
|
|
1061
|
+
addFeaturesByLayer,
|
|
1037
1062
|
addMassMarksLayer,
|
|
1038
1063
|
appendFeaturesByLayer,
|
|
1039
1064
|
buildMassMarksStyles,
|