map-ol-utils 0.0.5 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +578 -1
- package/dist/index.d.cts +6 -12
- package/dist/index.d.ts +6 -12
- package/dist/index.js +523 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1 +1,578 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __defProps = Object.defineProperties;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
10
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
+
var __spreadValues = (a, b) => {
|
|
14
|
+
for (var prop in b || (b = {}))
|
|
15
|
+
if (__hasOwnProp.call(b, prop))
|
|
16
|
+
__defNormalProp(a, prop, b[prop]);
|
|
17
|
+
if (__getOwnPropSymbols)
|
|
18
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
+
if (__propIsEnum.call(b, prop))
|
|
20
|
+
__defNormalProp(a, prop, b[prop]);
|
|
21
|
+
}
|
|
22
|
+
return a;
|
|
23
|
+
};
|
|
24
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
|
+
var __export = (target, all) => {
|
|
26
|
+
for (var name in all)
|
|
27
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
28
|
+
};
|
|
29
|
+
var __copyProps = (to, from, except, desc) => {
|
|
30
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
31
|
+
for (let key of __getOwnPropNames(from))
|
|
32
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
33
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
34
|
+
}
|
|
35
|
+
return to;
|
|
36
|
+
};
|
|
37
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
38
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
39
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
40
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
41
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
42
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
43
|
+
mod
|
|
44
|
+
));
|
|
45
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
46
|
+
|
|
47
|
+
// src/index.ts
|
|
48
|
+
var index_exports = {};
|
|
49
|
+
__export(index_exports, {
|
|
50
|
+
activeMarkerByUid: () => activeMarkerByUid,
|
|
51
|
+
addMassMarksLayer: () => addMassMarksLayer,
|
|
52
|
+
buildMassMarksStyles: () => buildMassMarksStyles,
|
|
53
|
+
createAnimationMarker: () => createAnimationMarker,
|
|
54
|
+
createBaseLayer: () => createBaseLayer,
|
|
55
|
+
createGeoJsonLayer: () => createGeoJsonLayer,
|
|
56
|
+
createMapInstance: () => createMapInstance,
|
|
57
|
+
createMapWorldLayer: () => createMapWorldLayer,
|
|
58
|
+
createMassMarksLayer: () => createMassMarksLayer,
|
|
59
|
+
createSelectByLayer: () => createSelectByLayer,
|
|
60
|
+
createVectorFaceLayer: () => createVectorFaceLayer,
|
|
61
|
+
createVectorLineLayer: () => createVectorLineLayer,
|
|
62
|
+
disposeMap: () => disposeMap,
|
|
63
|
+
emitter: () => emitter_default,
|
|
64
|
+
getMapInstance: () => getMapInstance,
|
|
65
|
+
instance: () => instance,
|
|
66
|
+
removeAllLayers: () => removeAllLayers,
|
|
67
|
+
resetActiveMarker: () => resetActiveMarker,
|
|
68
|
+
resetActiveVector: () => resetActiveVector,
|
|
69
|
+
resetMap: () => resetMap,
|
|
70
|
+
resetZoomAndCenter: () => resetZoomAndCenter,
|
|
71
|
+
updateMarksLayersByStatus: () => updateMarksLayersByStatus
|
|
72
|
+
});
|
|
73
|
+
module.exports = __toCommonJS(index_exports);
|
|
74
|
+
|
|
75
|
+
// src/emitter.ts
|
|
76
|
+
var import_mitt = __toESM(require("mitt"), 1);
|
|
77
|
+
var emitter = (0, import_mitt.default)();
|
|
78
|
+
var emitter_default = emitter;
|
|
79
|
+
|
|
80
|
+
// src/base-layer.ts
|
|
81
|
+
var import_source = require("ol/source");
|
|
82
|
+
var import_source2 = require("ol/source");
|
|
83
|
+
var import_tilegrid = require("ol/tilegrid");
|
|
84
|
+
var import_layer = require("ol/layer");
|
|
85
|
+
|
|
86
|
+
// src/create-map.ts
|
|
87
|
+
var import_Map = __toESM(require("ol/Map"), 1);
|
|
88
|
+
var import_View = __toESM(require("ol/View"), 1);
|
|
89
|
+
var import_control = require("ol/control");
|
|
90
|
+
var import_interaction = require("ol/interaction");
|
|
91
|
+
var instance;
|
|
92
|
+
var createMapInstance = (config = {}) => {
|
|
93
|
+
const innerConfig = Object.assign(
|
|
94
|
+
{
|
|
95
|
+
zoom: 9.4,
|
|
96
|
+
maxZoom: 18,
|
|
97
|
+
minZoom: 9.4,
|
|
98
|
+
baseLayer: "vec-layer",
|
|
99
|
+
projection: "EPSG:4326",
|
|
100
|
+
layers: [createBaseLayer()],
|
|
101
|
+
smoothExtentConstraint: false,
|
|
102
|
+
tk: "c77eddc667c5bed016fded560baf93e7",
|
|
103
|
+
center: [119.5326450625435, 29.8845606679097]
|
|
104
|
+
},
|
|
105
|
+
config || {}
|
|
106
|
+
);
|
|
107
|
+
if (!instance) {
|
|
108
|
+
instance = new import_Map.default({
|
|
109
|
+
view: new import_View.default(innerConfig),
|
|
110
|
+
controls: (0, import_control.defaults)({
|
|
111
|
+
zoom: false,
|
|
112
|
+
rotate: false,
|
|
113
|
+
attribution: false
|
|
114
|
+
}),
|
|
115
|
+
interactions: (0, import_interaction.defaults)({
|
|
116
|
+
doubleClickZoom: false
|
|
117
|
+
}),
|
|
118
|
+
layers: innerConfig.layers || [createBaseLayer()]
|
|
119
|
+
});
|
|
120
|
+
instance.activeBaseLayer = innerConfig.baseLayer;
|
|
121
|
+
instance.getLayerByName = getLayerByName;
|
|
122
|
+
instance.removeLayerByName = removeLayerByName;
|
|
123
|
+
instance.changeLayersByNames = changeLayersByNames;
|
|
124
|
+
instance.on("pointermove", (evt) => {
|
|
125
|
+
instance.getTargetElement().style.cursor = instance.hasFeatureAtPixel(evt.pixel) ? "pointer" : "";
|
|
126
|
+
});
|
|
127
|
+
return instance;
|
|
128
|
+
}
|
|
129
|
+
return instance;
|
|
130
|
+
};
|
|
131
|
+
var disposeMap = () => {
|
|
132
|
+
const layers = instance.getAllLayers();
|
|
133
|
+
layers.forEach((layer) => {
|
|
134
|
+
instance.removeLayer(layer);
|
|
135
|
+
});
|
|
136
|
+
instance.setTarget("");
|
|
137
|
+
instance = void 0;
|
|
138
|
+
};
|
|
139
|
+
var getMapInstance = () => {
|
|
140
|
+
};
|
|
141
|
+
var resetMap = () => {
|
|
142
|
+
};
|
|
143
|
+
var resetZoomAndCenter = () => {
|
|
144
|
+
};
|
|
145
|
+
|
|
146
|
+
// src/base-layer.ts
|
|
147
|
+
var import_WMTS = __toESM(require("ol/tilegrid/WMTS"), 1);
|
|
148
|
+
var createBaseLayer = (isDark = true) => {
|
|
149
|
+
return new import_layer.Tile({
|
|
150
|
+
zIndex: -1,
|
|
151
|
+
minZoom: 8,
|
|
152
|
+
maxZoom: 21,
|
|
153
|
+
source: new import_source.XYZ({
|
|
154
|
+
tileGrid: new import_tilegrid.TileGrid({
|
|
155
|
+
tileSize: 256,
|
|
156
|
+
resolutions: [
|
|
157
|
+
5492298e-9,
|
|
158
|
+
2746149e-9,
|
|
159
|
+
0.0013730745,
|
|
160
|
+
68653725e-11,
|
|
161
|
+
343268625e-12,
|
|
162
|
+
1716343125e-13,
|
|
163
|
+
8581715625e-14,
|
|
164
|
+
42908578125e-15,
|
|
165
|
+
214542890625e-16,
|
|
166
|
+
1072714453125e-17,
|
|
167
|
+
5363572265625e-18,
|
|
168
|
+
26817861328125e-19,
|
|
169
|
+
134089306640625e-20
|
|
170
|
+
],
|
|
171
|
+
origin: [118.122911693886, 31.2869311022836],
|
|
172
|
+
extent: [118.340502132662, 29.2073269598186, 120.724787992425, 30.5617943760008]
|
|
173
|
+
}),
|
|
174
|
+
projection: "EPSG:4326",
|
|
175
|
+
urls: isDark ? [
|
|
176
|
+
"https://ywtg.citybrain.hangzhou.gov.cn:9456/hzsyvector_dark/{z}/{y}/{x}",
|
|
177
|
+
"https://ywtg.citybrain.hangzhou.gov.cn:9457/hzsyvector_dark/{z}/{y}/{x}",
|
|
178
|
+
"https://ywtg.citybrain.hangzhou.gov.cn:9458/hzsyvector_dark/{z}/{y}/{x}",
|
|
179
|
+
"https://ywtg.citybrain.hangzhou.gov.cn:9459/hzsyvector_dark/{z}/{y}/{x}",
|
|
180
|
+
"https://cb.hangzhoumap.gov.cn/E36CCEA93443D1495DB9B9F2B2FFE348CB1A367D75176F815040AB19E54CDCA5DAAA25813AF965E2ABD0CC2463DD1223/PBS/rest/services/hzsyvector_dark/Mapserver/tile/{z}/{y}/{x}"
|
|
181
|
+
] : [
|
|
182
|
+
"https://ywtg.citybrain.hangzhou.gov.cn:9456/hzsyvector/{z}/{y}/{x}",
|
|
183
|
+
"https://ywtg.citybrain.hangzhou.gov.cn:9457/hzsyvector/{z}/{y}/{x}",
|
|
184
|
+
"https://ywtg.citybrain.hangzhou.gov.cn:9458/hzsyvector/{z}/{y}/{x}",
|
|
185
|
+
"https://ywtg.citybrain.hangzhou.gov.cn:9459/hzsyvector/{z}/{y}/{x}",
|
|
186
|
+
"https://cb.hangzhoumap.gov.cn/E36CCEA93443D1495DB9B9F2B2FFE348CB1A367D75176F815040AB19E54CDCA5DAAA25813AF965E2ABD0CC2463DD1223/PBS/rest/services/hzsyvector/Mapserver/tile/{z}/{y}/{x}"
|
|
187
|
+
]
|
|
188
|
+
})
|
|
189
|
+
});
|
|
190
|
+
};
|
|
191
|
+
var createMapWorldLayer = (layerName, className, tk = "c77eddc667c5bed016fded560baf93e7") => {
|
|
192
|
+
const [name, matrixSet] = layerName.split("_");
|
|
193
|
+
return new import_layer.Tile({
|
|
194
|
+
className,
|
|
195
|
+
cacheSize: 20240,
|
|
196
|
+
zIndex: -1,
|
|
197
|
+
source: new import_source2.WMTS({
|
|
198
|
+
crossOrigin: "anonymous",
|
|
199
|
+
projection: "EPSG:4326",
|
|
200
|
+
wrapX: true,
|
|
201
|
+
layer: name,
|
|
202
|
+
style: "default",
|
|
203
|
+
version: "1.0.0",
|
|
204
|
+
format: "image/png",
|
|
205
|
+
matrixSet,
|
|
206
|
+
tileGrid: new import_WMTS.default({
|
|
207
|
+
origin: [-180, 90],
|
|
208
|
+
matrixIds: [
|
|
209
|
+
"1",
|
|
210
|
+
"2",
|
|
211
|
+
"3",
|
|
212
|
+
"4",
|
|
213
|
+
"5",
|
|
214
|
+
"6",
|
|
215
|
+
"7",
|
|
216
|
+
"8",
|
|
217
|
+
"9",
|
|
218
|
+
"10",
|
|
219
|
+
"11",
|
|
220
|
+
"12",
|
|
221
|
+
"13",
|
|
222
|
+
"14",
|
|
223
|
+
"15",
|
|
224
|
+
"16",
|
|
225
|
+
"17",
|
|
226
|
+
"18",
|
|
227
|
+
"19"
|
|
228
|
+
],
|
|
229
|
+
resolutions: [
|
|
230
|
+
0.703125,
|
|
231
|
+
0.3515625,
|
|
232
|
+
0.17578125,
|
|
233
|
+
0.087890625,
|
|
234
|
+
0.0439453125,
|
|
235
|
+
0.02197265625,
|
|
236
|
+
0.010986328125,
|
|
237
|
+
0.0054931640625,
|
|
238
|
+
0.00274658203125,
|
|
239
|
+
0.001373291015625,
|
|
240
|
+
6866455078125e-16,
|
|
241
|
+
34332275390625e-17,
|
|
242
|
+
171661376953125e-18,
|
|
243
|
+
858306884765625e-19,
|
|
244
|
+
4291534423828125e-20,
|
|
245
|
+
21457672119140625e-21,
|
|
246
|
+
10728836059570312e-21,
|
|
247
|
+
5364418029785156e-21,
|
|
248
|
+
2682209014892578e-21
|
|
249
|
+
]
|
|
250
|
+
}),
|
|
251
|
+
url: `https://t{0-7}.tianditu.gov.cn/${layerName}/wmts?tk=${tk}`
|
|
252
|
+
})
|
|
253
|
+
});
|
|
254
|
+
};
|
|
255
|
+
var getLayerByName = (name) => instance.getAllLayers().find((item) => item.getClassName() === name);
|
|
256
|
+
var removeLayerByName = (name) => {
|
|
257
|
+
const tempLayer = instance.getAllLayers().find((item) => item.getClassName() === name);
|
|
258
|
+
if (tempLayer) {
|
|
259
|
+
instance.removeLayer(tempLayer);
|
|
260
|
+
}
|
|
261
|
+
};
|
|
262
|
+
var changeLayersByNames = (activeNames, allLayerNames) => {
|
|
263
|
+
const changeLayers = instance.getAllLayers().filter((item) => allLayerNames.includes(item.getClassName()));
|
|
264
|
+
changeLayers.forEach((layer) => {
|
|
265
|
+
layer.setVisible(activeNames == null ? void 0 : activeNames.includes(layer.getClassName()));
|
|
266
|
+
});
|
|
267
|
+
};
|
|
268
|
+
|
|
269
|
+
// src/layer-utils.ts
|
|
270
|
+
var import_geom = require("ol/geom");
|
|
271
|
+
var import_format = require("ol/format");
|
|
272
|
+
var import_ol = require("ol");
|
|
273
|
+
var import_interaction2 = require("ol/interaction");
|
|
274
|
+
var import_Vector = __toESM(require("ol/layer/Vector"), 1);
|
|
275
|
+
var import_Vector2 = __toESM(require("ol/source/Vector"), 1);
|
|
276
|
+
var import_condition = require("ol/events/condition");
|
|
277
|
+
var import_style = require("ol/style");
|
|
278
|
+
var removeAnimationMarker = () => {
|
|
279
|
+
const overlays = instance.getOverlays().getArray().filter((overlay) => overlay.get("_isAnimationMarker"));
|
|
280
|
+
overlays.forEach((overlay) => instance.removeOverlay(overlay));
|
|
281
|
+
};
|
|
282
|
+
var createAnimationMarker = (imgUrl, data) => {
|
|
283
|
+
removeAnimationMarker();
|
|
284
|
+
const element = document.createElement("div");
|
|
285
|
+
element.innerHTML = `<img src=${imgUrl} height=${data.height} width=${data.width} alt="" />`;
|
|
286
|
+
const overlay = new import_ol.Overlay({
|
|
287
|
+
element,
|
|
288
|
+
stopEvent: false,
|
|
289
|
+
positioning: "bottom-center",
|
|
290
|
+
position: [+data.lnglat[0], +data.lnglat[1]]
|
|
291
|
+
});
|
|
292
|
+
overlay.set("_isAnimationMarker", true);
|
|
293
|
+
instance.addOverlay(overlay);
|
|
294
|
+
};
|
|
295
|
+
var resetActiveVector = () => {
|
|
296
|
+
const layers = instance.getLayers();
|
|
297
|
+
layers.forEach((layer) => {
|
|
298
|
+
const interaction = layer.get("_selectInteraction");
|
|
299
|
+
if (interaction) {
|
|
300
|
+
interaction.getFeatures().clear();
|
|
301
|
+
}
|
|
302
|
+
});
|
|
303
|
+
};
|
|
304
|
+
var assembleGeoJson = (dataList, config) => {
|
|
305
|
+
const { key, isLine } = config;
|
|
306
|
+
const tempList = [];
|
|
307
|
+
dataList.forEach((item) => {
|
|
308
|
+
try {
|
|
309
|
+
const pathArray = Array.isArray(item[key]) ? item[key] : JSON.parse(item[key] || "[]");
|
|
310
|
+
if (pathArray.length) {
|
|
311
|
+
tempList.push({
|
|
312
|
+
type: "Feature",
|
|
313
|
+
properties: __spreadValues({}, item),
|
|
314
|
+
geometry: {
|
|
315
|
+
coordinates: pathArray,
|
|
316
|
+
type: isLine ? "Polyline" : "Polygon"
|
|
317
|
+
}
|
|
318
|
+
});
|
|
319
|
+
}
|
|
320
|
+
} catch (e) {
|
|
321
|
+
console.error(`\u521B\u5EFA\u7EBF\u72B6\u6570\u636E\u5931\u8D25\uFF1A${e}`);
|
|
322
|
+
}
|
|
323
|
+
});
|
|
324
|
+
return { type: "FeatureCollection", features: tempList };
|
|
325
|
+
};
|
|
326
|
+
var createGeoJsonLayer = (dataList, config) => {
|
|
327
|
+
const { isLine, layerName } = config || {};
|
|
328
|
+
const geoJson = assembleGeoJson(dataList, config);
|
|
329
|
+
const vectorLayer = new import_Vector.default({
|
|
330
|
+
className: layerName ? layerName : "ol-layer",
|
|
331
|
+
source: new import_Vector2.default({
|
|
332
|
+
features: new import_format.GeoJSON().readFeatures(geoJson)
|
|
333
|
+
}),
|
|
334
|
+
style: isLine ? new import_style.Style({
|
|
335
|
+
stroke: new import_style.Stroke({
|
|
336
|
+
color: "red",
|
|
337
|
+
lineDash: [10],
|
|
338
|
+
width: 3
|
|
339
|
+
})
|
|
340
|
+
}) : new import_style.Style({
|
|
341
|
+
stroke: new import_style.Stroke({
|
|
342
|
+
color: "red",
|
|
343
|
+
lineDash: [10],
|
|
344
|
+
width: 3
|
|
345
|
+
}),
|
|
346
|
+
fill: new import_style.Fill({
|
|
347
|
+
color: "rgba(0, 0, 255, 0.1)"
|
|
348
|
+
})
|
|
349
|
+
})
|
|
350
|
+
});
|
|
351
|
+
vectorLayer.set("_layerName", layerName);
|
|
352
|
+
return vectorLayer;
|
|
353
|
+
};
|
|
354
|
+
var createVectorFaceLayer = (dataList = [], config) => createGeoJsonLayer(dataList, Object.assign(config, { isLine: false }));
|
|
355
|
+
var createVectorLineLayer = (dataList = [], config) => createGeoJsonLayer(dataList, Object.assign(config, { isLine: true }));
|
|
356
|
+
var removeAllLayers = (isClearAll = true) => {
|
|
357
|
+
console.log(isClearAll);
|
|
358
|
+
if (instance) {
|
|
359
|
+
instance.getLayers().forEach((layer) => {
|
|
360
|
+
instance.removeLayer(layer);
|
|
361
|
+
});
|
|
362
|
+
}
|
|
363
|
+
};
|
|
364
|
+
var resetActiveMarker = () => {
|
|
365
|
+
};
|
|
366
|
+
var activeMarkerByUid = (uid, setFitView = true) => {
|
|
367
|
+
var _a;
|
|
368
|
+
console.log(setFitView);
|
|
369
|
+
const massMarksLayers = instance.getLayers().getArray().filter((layer) => layer.get("_isMassMarksLayer"));
|
|
370
|
+
if (massMarksLayers.length) {
|
|
371
|
+
const targetLayer = massMarksLayers.find(
|
|
372
|
+
(layer) => layer.get("_uuidSet").has(uid)
|
|
373
|
+
);
|
|
374
|
+
if (targetLayer) {
|
|
375
|
+
const tempList = ((_a = targetLayer.getSource()) == null ? void 0 : _a.getFeatures()) || [];
|
|
376
|
+
const targetFeature = tempList.find((feature) => feature.get("_uuid") === uid);
|
|
377
|
+
const selectInteraction = targetLayer.get("_selectInteraction");
|
|
378
|
+
if (selectInteraction) {
|
|
379
|
+
const collection = selectInteraction.getFeatures().getArray();
|
|
380
|
+
const hasFeature = collection.find((feature) => feature.get("_uuid") === uid);
|
|
381
|
+
if (!hasFeature) {
|
|
382
|
+
selectInteraction.dispatchEvent({
|
|
383
|
+
type: "select",
|
|
384
|
+
deselected: collection,
|
|
385
|
+
selected: [targetFeature],
|
|
386
|
+
mapBrowserEvent: void 0
|
|
387
|
+
});
|
|
388
|
+
selectInteraction.getFeatures().push(targetFeature);
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
}
|
|
393
|
+
};
|
|
394
|
+
var buildMassMarksStyles = (getImgUrlFn) => {
|
|
395
|
+
return (iconConfig) => {
|
|
396
|
+
const {
|
|
397
|
+
baseUrl,
|
|
398
|
+
markerIcon,
|
|
399
|
+
statusNum = 5,
|
|
400
|
+
activeScale = 1.3,
|
|
401
|
+
markerSize = [32, 32]
|
|
402
|
+
} = iconConfig;
|
|
403
|
+
const getMarkerUrl = getImgUrlFn(baseUrl);
|
|
404
|
+
const [x, y] = markerSize;
|
|
405
|
+
const massMarksStyles = new Array(statusNum * 2);
|
|
406
|
+
for (let i = 0; i < statusNum; i++) {
|
|
407
|
+
const imageUrl = getMarkerUrl(`${markerIcon}-${i}`, ".webp");
|
|
408
|
+
massMarksStyles[i] = new import_style.Style({
|
|
409
|
+
zIndex: 88 + i,
|
|
410
|
+
image: new import_style.Icon({
|
|
411
|
+
width: x,
|
|
412
|
+
height: y,
|
|
413
|
+
src: imageUrl,
|
|
414
|
+
anchor: [0.5, 1]
|
|
415
|
+
})
|
|
416
|
+
});
|
|
417
|
+
const activeImage = getMarkerUrl(`${markerIcon}-${i}-active`, ".webp");
|
|
418
|
+
massMarksStyles[i + statusNum] = new import_style.Style({
|
|
419
|
+
zIndex: 102,
|
|
420
|
+
image: new import_style.Icon({
|
|
421
|
+
width: x * activeScale,
|
|
422
|
+
height: y * activeScale,
|
|
423
|
+
anchor: [0.5, 1],
|
|
424
|
+
src: activeImage ? activeImage : imageUrl
|
|
425
|
+
})
|
|
426
|
+
});
|
|
427
|
+
}
|
|
428
|
+
return massMarksStyles;
|
|
429
|
+
};
|
|
430
|
+
};
|
|
431
|
+
var createSelectByLayer = (vectorLayer) => {
|
|
432
|
+
const interaction = new import_interaction2.Select({
|
|
433
|
+
style: null,
|
|
434
|
+
layers: [vectorLayer],
|
|
435
|
+
condition: (evt) => {
|
|
436
|
+
let hasFeature = false;
|
|
437
|
+
instance.forEachFeatureAtPixel(
|
|
438
|
+
evt.pixel,
|
|
439
|
+
() => {
|
|
440
|
+
hasFeature = true;
|
|
441
|
+
},
|
|
442
|
+
{
|
|
443
|
+
layerFilter: (layer) => layer === vectorLayer
|
|
444
|
+
}
|
|
445
|
+
);
|
|
446
|
+
return (0, import_condition.click)(evt) && hasFeature;
|
|
447
|
+
}
|
|
448
|
+
});
|
|
449
|
+
interaction.on("select", (evt) => {
|
|
450
|
+
const { selected, deselected } = evt;
|
|
451
|
+
if (selected.length) {
|
|
452
|
+
const feature = selected[0];
|
|
453
|
+
const data = feature.getProperties();
|
|
454
|
+
const { activeStyle } = data;
|
|
455
|
+
feature.setStyle(activeStyle);
|
|
456
|
+
emitter_default.emit("marker-click", data);
|
|
457
|
+
vectorLayer.set("_hasActive", true);
|
|
458
|
+
if (vectorLayer.get("_isDynamic")) {
|
|
459
|
+
const activeImage = activeStyle.getImage();
|
|
460
|
+
emitter_default.emit("dynamic-marker", Object.assign({}, data.rawData || {}, { lnglat: data.lnglat, style: data.style, width: activeImage.getWidth(), height: activeImage.getHeight() }));
|
|
461
|
+
}
|
|
462
|
+
}
|
|
463
|
+
if (deselected.length) {
|
|
464
|
+
const feature = deselected[0];
|
|
465
|
+
const data = feature.getProperties();
|
|
466
|
+
feature.setStyle(data.unActiveStyle);
|
|
467
|
+
vectorLayer.set("_hasActive", false);
|
|
468
|
+
}
|
|
469
|
+
});
|
|
470
|
+
instance.addInteraction(interaction);
|
|
471
|
+
vectorLayer.set("_selectInteraction", interaction);
|
|
472
|
+
return interaction;
|
|
473
|
+
};
|
|
474
|
+
var createMassMarksLayer = (dataList, styleList = []) => {
|
|
475
|
+
const features = dataList.map((item) => {
|
|
476
|
+
const feature = new import_ol.Feature({
|
|
477
|
+
geometry: new import_geom.Point([+item.lnglat[0], +item.lnglat[1]])
|
|
478
|
+
});
|
|
479
|
+
feature.setProperties(__spreadProps(__spreadValues({}, item), {
|
|
480
|
+
unActiveStyle: styleList[item.style],
|
|
481
|
+
activeStyle: styleList[item.style + styleList.length / 2]
|
|
482
|
+
}));
|
|
483
|
+
feature.setStyle(styleList[item.style]);
|
|
484
|
+
return feature;
|
|
485
|
+
});
|
|
486
|
+
const vectorLayer = new import_Vector.default({
|
|
487
|
+
source: new import_Vector2.default({
|
|
488
|
+
features
|
|
489
|
+
})
|
|
490
|
+
});
|
|
491
|
+
vectorLayer.setProperties({
|
|
492
|
+
_isCustom: true,
|
|
493
|
+
_isMassMarksLayer: true,
|
|
494
|
+
_statusNum: styleList.length / 2,
|
|
495
|
+
_dataList: dataList,
|
|
496
|
+
_uuidSet: new Set(dataList.map((item) => item._uuid) || [])
|
|
497
|
+
});
|
|
498
|
+
return vectorLayer;
|
|
499
|
+
};
|
|
500
|
+
var addMassMarksLayer = (getImgUrlFn) => {
|
|
501
|
+
return (dataList = [], iconConfig, openClick = true) => {
|
|
502
|
+
const {
|
|
503
|
+
baseUrl,
|
|
504
|
+
hasLine,
|
|
505
|
+
hasFace,
|
|
506
|
+
isDynamic,
|
|
507
|
+
statusNum,
|
|
508
|
+
markerIcon,
|
|
509
|
+
markerSize
|
|
510
|
+
} = iconConfig;
|
|
511
|
+
const massMarksStyles = buildMassMarksStyles(getImgUrlFn)({
|
|
512
|
+
baseUrl,
|
|
513
|
+
markerIcon,
|
|
514
|
+
markerSize,
|
|
515
|
+
activeScale: 1.3,
|
|
516
|
+
statusNum: statusNum || 5
|
|
517
|
+
});
|
|
518
|
+
const massMarksLayer = createMassMarksLayer(dataList, massMarksStyles);
|
|
519
|
+
if (openClick) {
|
|
520
|
+
createSelectByLayer(massMarksLayer);
|
|
521
|
+
}
|
|
522
|
+
if (hasLine) {
|
|
523
|
+
const vectorLayer = createGeoJsonLayer(dataList, {
|
|
524
|
+
key: "line",
|
|
525
|
+
isLine: true,
|
|
526
|
+
strokeColor: "rgba(29, 235, 255, 0.8)"
|
|
527
|
+
});
|
|
528
|
+
instance.addLayer(vectorLayer);
|
|
529
|
+
}
|
|
530
|
+
if (hasFace) {
|
|
531
|
+
const vectorLayer = createGeoJsonLayer(dataList, {
|
|
532
|
+
isLine: false,
|
|
533
|
+
key: "faceList",
|
|
534
|
+
fillOpacity: 0.1,
|
|
535
|
+
fillColor: "#4247DF",
|
|
536
|
+
strokeWeight: 1,
|
|
537
|
+
strokeStyle: "dashed",
|
|
538
|
+
strokeColor: "#4247DF"
|
|
539
|
+
});
|
|
540
|
+
instance.addLayer(vectorLayer);
|
|
541
|
+
}
|
|
542
|
+
massMarksLayer.setProperties({
|
|
543
|
+
_hasLine: hasLine,
|
|
544
|
+
_hasFace: hasFace,
|
|
545
|
+
_isDynamic: isDynamic
|
|
546
|
+
});
|
|
547
|
+
instance.addLayer(massMarksLayer);
|
|
548
|
+
return massMarksLayer;
|
|
549
|
+
};
|
|
550
|
+
};
|
|
551
|
+
var updateMarksLayersByStatus = (checkedStatusList = []) => {
|
|
552
|
+
console.log(checkedStatusList);
|
|
553
|
+
};
|
|
554
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
555
|
+
0 && (module.exports = {
|
|
556
|
+
activeMarkerByUid,
|
|
557
|
+
addMassMarksLayer,
|
|
558
|
+
buildMassMarksStyles,
|
|
559
|
+
createAnimationMarker,
|
|
560
|
+
createBaseLayer,
|
|
561
|
+
createGeoJsonLayer,
|
|
562
|
+
createMapInstance,
|
|
563
|
+
createMapWorldLayer,
|
|
564
|
+
createMassMarksLayer,
|
|
565
|
+
createSelectByLayer,
|
|
566
|
+
createVectorFaceLayer,
|
|
567
|
+
createVectorLineLayer,
|
|
568
|
+
disposeMap,
|
|
569
|
+
emitter,
|
|
570
|
+
getMapInstance,
|
|
571
|
+
instance,
|
|
572
|
+
removeAllLayers,
|
|
573
|
+
resetActiveMarker,
|
|
574
|
+
resetActiveVector,
|
|
575
|
+
resetMap,
|
|
576
|
+
resetZoomAndCenter,
|
|
577
|
+
updateMarksLayersByStatus
|
|
578
|
+
});
|
package/dist/index.d.cts
CHANGED
|
@@ -49,6 +49,8 @@ type LineConfig = {
|
|
|
49
49
|
type MassData = {
|
|
50
50
|
style: number;
|
|
51
51
|
_uuid?: string;
|
|
52
|
+
width?: number;
|
|
53
|
+
height?: number;
|
|
52
54
|
status?: number | string | undefined;
|
|
53
55
|
_status?: number | string | undefined;
|
|
54
56
|
lnglat: [string, string] | [number, number];
|
|
@@ -93,6 +95,7 @@ declare const getMapInstance: () => void;
|
|
|
93
95
|
declare const resetMap: () => void;
|
|
94
96
|
declare const resetZoomAndCenter: () => void;
|
|
95
97
|
|
|
98
|
+
declare const createAnimationMarker: (imgUrl: string, data: MassData) => void;
|
|
96
99
|
/**
|
|
97
100
|
* 重置激活的矢量数据
|
|
98
101
|
*/
|
|
@@ -115,25 +118,16 @@ declare const createVectorLineLayer: (dataList: any[] | undefined, config: Vecto
|
|
|
115
118
|
* @param isClearAll
|
|
116
119
|
*/
|
|
117
120
|
declare const removeAllLayers: (isClearAll?: boolean) => void;
|
|
118
|
-
/**
|
|
119
|
-
* 根据当前Marker创建一个动画Marker
|
|
120
|
-
* @param lnglat
|
|
121
|
-
* @param config
|
|
122
|
-
*/
|
|
123
|
-
declare const createAnimationMarker: (lnglat: any, config: {
|
|
124
|
-
size: any;
|
|
125
|
-
getAnimationUrl: GetImgUrl;
|
|
126
|
-
alarmLevel: number | string;
|
|
127
|
-
}) => void;
|
|
128
121
|
/**
|
|
129
122
|
* 重置激活Marker
|
|
130
123
|
*/
|
|
131
124
|
declare const resetActiveMarker: () => void;
|
|
132
125
|
/**
|
|
133
126
|
* 激活标注点
|
|
134
|
-
* @param
|
|
127
|
+
* @param uid
|
|
128
|
+
* @param setFitView
|
|
135
129
|
*/
|
|
136
|
-
declare const activeMarkerByUid: (
|
|
130
|
+
declare const activeMarkerByUid: (uid: string, setFitView?: boolean) => void;
|
|
137
131
|
/**
|
|
138
132
|
* 构建MassMarks样式数组
|
|
139
133
|
*/
|
package/dist/index.d.ts
CHANGED
|
@@ -49,6 +49,8 @@ type LineConfig = {
|
|
|
49
49
|
type MassData = {
|
|
50
50
|
style: number;
|
|
51
51
|
_uuid?: string;
|
|
52
|
+
width?: number;
|
|
53
|
+
height?: number;
|
|
52
54
|
status?: number | string | undefined;
|
|
53
55
|
_status?: number | string | undefined;
|
|
54
56
|
lnglat: [string, string] | [number, number];
|
|
@@ -93,6 +95,7 @@ declare const getMapInstance: () => void;
|
|
|
93
95
|
declare const resetMap: () => void;
|
|
94
96
|
declare const resetZoomAndCenter: () => void;
|
|
95
97
|
|
|
98
|
+
declare const createAnimationMarker: (imgUrl: string, data: MassData) => void;
|
|
96
99
|
/**
|
|
97
100
|
* 重置激活的矢量数据
|
|
98
101
|
*/
|
|
@@ -115,25 +118,16 @@ declare const createVectorLineLayer: (dataList: any[] | undefined, config: Vecto
|
|
|
115
118
|
* @param isClearAll
|
|
116
119
|
*/
|
|
117
120
|
declare const removeAllLayers: (isClearAll?: boolean) => void;
|
|
118
|
-
/**
|
|
119
|
-
* 根据当前Marker创建一个动画Marker
|
|
120
|
-
* @param lnglat
|
|
121
|
-
* @param config
|
|
122
|
-
*/
|
|
123
|
-
declare const createAnimationMarker: (lnglat: any, config: {
|
|
124
|
-
size: any;
|
|
125
|
-
getAnimationUrl: GetImgUrl;
|
|
126
|
-
alarmLevel: number | string;
|
|
127
|
-
}) => void;
|
|
128
121
|
/**
|
|
129
122
|
* 重置激活Marker
|
|
130
123
|
*/
|
|
131
124
|
declare const resetActiveMarker: () => void;
|
|
132
125
|
/**
|
|
133
126
|
* 激活标注点
|
|
134
|
-
* @param
|
|
127
|
+
* @param uid
|
|
128
|
+
* @param setFitView
|
|
135
129
|
*/
|
|
136
|
-
declare const activeMarkerByUid: (
|
|
130
|
+
declare const activeMarkerByUid: (uid: string, setFitView?: boolean) => void;
|
|
137
131
|
/**
|
|
138
132
|
* 构建MassMarks样式数组
|
|
139
133
|
*/
|
package/dist/index.js
CHANGED
|
@@ -1 +1,523 @@
|
|
|
1
|
-
var
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
|
|
21
|
+
// src/emitter.ts
|
|
22
|
+
import mitt from "mitt";
|
|
23
|
+
var emitter = mitt();
|
|
24
|
+
var emitter_default = emitter;
|
|
25
|
+
|
|
26
|
+
// src/base-layer.ts
|
|
27
|
+
import { XYZ } from "ol/source";
|
|
28
|
+
import { WMTS } from "ol/source";
|
|
29
|
+
import { TileGrid } from "ol/tilegrid";
|
|
30
|
+
import { Tile } from "ol/layer";
|
|
31
|
+
|
|
32
|
+
// src/create-map.ts
|
|
33
|
+
import Map from "ol/Map";
|
|
34
|
+
import View from "ol/View";
|
|
35
|
+
import { defaults } from "ol/control";
|
|
36
|
+
import { defaults as interactionDefaults } from "ol/interaction";
|
|
37
|
+
var instance;
|
|
38
|
+
var createMapInstance = (config = {}) => {
|
|
39
|
+
const innerConfig = Object.assign(
|
|
40
|
+
{
|
|
41
|
+
zoom: 9.4,
|
|
42
|
+
maxZoom: 18,
|
|
43
|
+
minZoom: 9.4,
|
|
44
|
+
baseLayer: "vec-layer",
|
|
45
|
+
projection: "EPSG:4326",
|
|
46
|
+
layers: [createBaseLayer()],
|
|
47
|
+
smoothExtentConstraint: false,
|
|
48
|
+
tk: "c77eddc667c5bed016fded560baf93e7",
|
|
49
|
+
center: [119.5326450625435, 29.8845606679097]
|
|
50
|
+
},
|
|
51
|
+
config || {}
|
|
52
|
+
);
|
|
53
|
+
if (!instance) {
|
|
54
|
+
instance = new Map({
|
|
55
|
+
view: new View(innerConfig),
|
|
56
|
+
controls: defaults({
|
|
57
|
+
zoom: false,
|
|
58
|
+
rotate: false,
|
|
59
|
+
attribution: false
|
|
60
|
+
}),
|
|
61
|
+
interactions: interactionDefaults({
|
|
62
|
+
doubleClickZoom: false
|
|
63
|
+
}),
|
|
64
|
+
layers: innerConfig.layers || [createBaseLayer()]
|
|
65
|
+
});
|
|
66
|
+
instance.activeBaseLayer = innerConfig.baseLayer;
|
|
67
|
+
instance.getLayerByName = getLayerByName;
|
|
68
|
+
instance.removeLayerByName = removeLayerByName;
|
|
69
|
+
instance.changeLayersByNames = changeLayersByNames;
|
|
70
|
+
instance.on("pointermove", (evt) => {
|
|
71
|
+
instance.getTargetElement().style.cursor = instance.hasFeatureAtPixel(evt.pixel) ? "pointer" : "";
|
|
72
|
+
});
|
|
73
|
+
return instance;
|
|
74
|
+
}
|
|
75
|
+
return instance;
|
|
76
|
+
};
|
|
77
|
+
var disposeMap = () => {
|
|
78
|
+
const layers = instance.getAllLayers();
|
|
79
|
+
layers.forEach((layer) => {
|
|
80
|
+
instance.removeLayer(layer);
|
|
81
|
+
});
|
|
82
|
+
instance.setTarget("");
|
|
83
|
+
instance = void 0;
|
|
84
|
+
};
|
|
85
|
+
var getMapInstance = () => {
|
|
86
|
+
};
|
|
87
|
+
var resetMap = () => {
|
|
88
|
+
};
|
|
89
|
+
var resetZoomAndCenter = () => {
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
// src/base-layer.ts
|
|
93
|
+
import WMTSTileGrid from "ol/tilegrid/WMTS";
|
|
94
|
+
var createBaseLayer = (isDark = true) => {
|
|
95
|
+
return new Tile({
|
|
96
|
+
zIndex: -1,
|
|
97
|
+
minZoom: 8,
|
|
98
|
+
maxZoom: 21,
|
|
99
|
+
source: new XYZ({
|
|
100
|
+
tileGrid: new TileGrid({
|
|
101
|
+
tileSize: 256,
|
|
102
|
+
resolutions: [
|
|
103
|
+
5492298e-9,
|
|
104
|
+
2746149e-9,
|
|
105
|
+
0.0013730745,
|
|
106
|
+
68653725e-11,
|
|
107
|
+
343268625e-12,
|
|
108
|
+
1716343125e-13,
|
|
109
|
+
8581715625e-14,
|
|
110
|
+
42908578125e-15,
|
|
111
|
+
214542890625e-16,
|
|
112
|
+
1072714453125e-17,
|
|
113
|
+
5363572265625e-18,
|
|
114
|
+
26817861328125e-19,
|
|
115
|
+
134089306640625e-20
|
|
116
|
+
],
|
|
117
|
+
origin: [118.122911693886, 31.2869311022836],
|
|
118
|
+
extent: [118.340502132662, 29.2073269598186, 120.724787992425, 30.5617943760008]
|
|
119
|
+
}),
|
|
120
|
+
projection: "EPSG:4326",
|
|
121
|
+
urls: isDark ? [
|
|
122
|
+
"https://ywtg.citybrain.hangzhou.gov.cn:9456/hzsyvector_dark/{z}/{y}/{x}",
|
|
123
|
+
"https://ywtg.citybrain.hangzhou.gov.cn:9457/hzsyvector_dark/{z}/{y}/{x}",
|
|
124
|
+
"https://ywtg.citybrain.hangzhou.gov.cn:9458/hzsyvector_dark/{z}/{y}/{x}",
|
|
125
|
+
"https://ywtg.citybrain.hangzhou.gov.cn:9459/hzsyvector_dark/{z}/{y}/{x}",
|
|
126
|
+
"https://cb.hangzhoumap.gov.cn/E36CCEA93443D1495DB9B9F2B2FFE348CB1A367D75176F815040AB19E54CDCA5DAAA25813AF965E2ABD0CC2463DD1223/PBS/rest/services/hzsyvector_dark/Mapserver/tile/{z}/{y}/{x}"
|
|
127
|
+
] : [
|
|
128
|
+
"https://ywtg.citybrain.hangzhou.gov.cn:9456/hzsyvector/{z}/{y}/{x}",
|
|
129
|
+
"https://ywtg.citybrain.hangzhou.gov.cn:9457/hzsyvector/{z}/{y}/{x}",
|
|
130
|
+
"https://ywtg.citybrain.hangzhou.gov.cn:9458/hzsyvector/{z}/{y}/{x}",
|
|
131
|
+
"https://ywtg.citybrain.hangzhou.gov.cn:9459/hzsyvector/{z}/{y}/{x}",
|
|
132
|
+
"https://cb.hangzhoumap.gov.cn/E36CCEA93443D1495DB9B9F2B2FFE348CB1A367D75176F815040AB19E54CDCA5DAAA25813AF965E2ABD0CC2463DD1223/PBS/rest/services/hzsyvector/Mapserver/tile/{z}/{y}/{x}"
|
|
133
|
+
]
|
|
134
|
+
})
|
|
135
|
+
});
|
|
136
|
+
};
|
|
137
|
+
var createMapWorldLayer = (layerName, className, tk = "c77eddc667c5bed016fded560baf93e7") => {
|
|
138
|
+
const [name, matrixSet] = layerName.split("_");
|
|
139
|
+
return new Tile({
|
|
140
|
+
className,
|
|
141
|
+
cacheSize: 20240,
|
|
142
|
+
zIndex: -1,
|
|
143
|
+
source: new WMTS({
|
|
144
|
+
crossOrigin: "anonymous",
|
|
145
|
+
projection: "EPSG:4326",
|
|
146
|
+
wrapX: true,
|
|
147
|
+
layer: name,
|
|
148
|
+
style: "default",
|
|
149
|
+
version: "1.0.0",
|
|
150
|
+
format: "image/png",
|
|
151
|
+
matrixSet,
|
|
152
|
+
tileGrid: new WMTSTileGrid({
|
|
153
|
+
origin: [-180, 90],
|
|
154
|
+
matrixIds: [
|
|
155
|
+
"1",
|
|
156
|
+
"2",
|
|
157
|
+
"3",
|
|
158
|
+
"4",
|
|
159
|
+
"5",
|
|
160
|
+
"6",
|
|
161
|
+
"7",
|
|
162
|
+
"8",
|
|
163
|
+
"9",
|
|
164
|
+
"10",
|
|
165
|
+
"11",
|
|
166
|
+
"12",
|
|
167
|
+
"13",
|
|
168
|
+
"14",
|
|
169
|
+
"15",
|
|
170
|
+
"16",
|
|
171
|
+
"17",
|
|
172
|
+
"18",
|
|
173
|
+
"19"
|
|
174
|
+
],
|
|
175
|
+
resolutions: [
|
|
176
|
+
0.703125,
|
|
177
|
+
0.3515625,
|
|
178
|
+
0.17578125,
|
|
179
|
+
0.087890625,
|
|
180
|
+
0.0439453125,
|
|
181
|
+
0.02197265625,
|
|
182
|
+
0.010986328125,
|
|
183
|
+
0.0054931640625,
|
|
184
|
+
0.00274658203125,
|
|
185
|
+
0.001373291015625,
|
|
186
|
+
6866455078125e-16,
|
|
187
|
+
34332275390625e-17,
|
|
188
|
+
171661376953125e-18,
|
|
189
|
+
858306884765625e-19,
|
|
190
|
+
4291534423828125e-20,
|
|
191
|
+
21457672119140625e-21,
|
|
192
|
+
10728836059570312e-21,
|
|
193
|
+
5364418029785156e-21,
|
|
194
|
+
2682209014892578e-21
|
|
195
|
+
]
|
|
196
|
+
}),
|
|
197
|
+
url: `https://t{0-7}.tianditu.gov.cn/${layerName}/wmts?tk=${tk}`
|
|
198
|
+
})
|
|
199
|
+
});
|
|
200
|
+
};
|
|
201
|
+
var getLayerByName = (name) => instance.getAllLayers().find((item) => item.getClassName() === name);
|
|
202
|
+
var removeLayerByName = (name) => {
|
|
203
|
+
const tempLayer = instance.getAllLayers().find((item) => item.getClassName() === name);
|
|
204
|
+
if (tempLayer) {
|
|
205
|
+
instance.removeLayer(tempLayer);
|
|
206
|
+
}
|
|
207
|
+
};
|
|
208
|
+
var changeLayersByNames = (activeNames, allLayerNames) => {
|
|
209
|
+
const changeLayers = instance.getAllLayers().filter((item) => allLayerNames.includes(item.getClassName()));
|
|
210
|
+
changeLayers.forEach((layer) => {
|
|
211
|
+
layer.setVisible(activeNames == null ? void 0 : activeNames.includes(layer.getClassName()));
|
|
212
|
+
});
|
|
213
|
+
};
|
|
214
|
+
|
|
215
|
+
// src/layer-utils.ts
|
|
216
|
+
import { Point } from "ol/geom";
|
|
217
|
+
import { GeoJSON } from "ol/format";
|
|
218
|
+
import { Feature, Overlay } from "ol";
|
|
219
|
+
import { Select } from "ol/interaction";
|
|
220
|
+
import VectorLayer from "ol/layer/Vector";
|
|
221
|
+
import VectorSource from "ol/source/Vector";
|
|
222
|
+
import { click } from "ol/events/condition";
|
|
223
|
+
import { Fill, Icon, Stroke, Style } from "ol/style";
|
|
224
|
+
var removeAnimationMarker = () => {
|
|
225
|
+
const overlays = instance.getOverlays().getArray().filter((overlay) => overlay.get("_isAnimationMarker"));
|
|
226
|
+
overlays.forEach((overlay) => instance.removeOverlay(overlay));
|
|
227
|
+
};
|
|
228
|
+
var createAnimationMarker = (imgUrl, data) => {
|
|
229
|
+
removeAnimationMarker();
|
|
230
|
+
const element = document.createElement("div");
|
|
231
|
+
element.innerHTML = `<img src=${imgUrl} height=${data.height} width=${data.width} alt="" />`;
|
|
232
|
+
const overlay = new Overlay({
|
|
233
|
+
element,
|
|
234
|
+
stopEvent: false,
|
|
235
|
+
positioning: "bottom-center",
|
|
236
|
+
position: [+data.lnglat[0], +data.lnglat[1]]
|
|
237
|
+
});
|
|
238
|
+
overlay.set("_isAnimationMarker", true);
|
|
239
|
+
instance.addOverlay(overlay);
|
|
240
|
+
};
|
|
241
|
+
var resetActiveVector = () => {
|
|
242
|
+
const layers = instance.getLayers();
|
|
243
|
+
layers.forEach((layer) => {
|
|
244
|
+
const interaction = layer.get("_selectInteraction");
|
|
245
|
+
if (interaction) {
|
|
246
|
+
interaction.getFeatures().clear();
|
|
247
|
+
}
|
|
248
|
+
});
|
|
249
|
+
};
|
|
250
|
+
var assembleGeoJson = (dataList, config) => {
|
|
251
|
+
const { key, isLine } = config;
|
|
252
|
+
const tempList = [];
|
|
253
|
+
dataList.forEach((item) => {
|
|
254
|
+
try {
|
|
255
|
+
const pathArray = Array.isArray(item[key]) ? item[key] : JSON.parse(item[key] || "[]");
|
|
256
|
+
if (pathArray.length) {
|
|
257
|
+
tempList.push({
|
|
258
|
+
type: "Feature",
|
|
259
|
+
properties: __spreadValues({}, item),
|
|
260
|
+
geometry: {
|
|
261
|
+
coordinates: pathArray,
|
|
262
|
+
type: isLine ? "Polyline" : "Polygon"
|
|
263
|
+
}
|
|
264
|
+
});
|
|
265
|
+
}
|
|
266
|
+
} catch (e) {
|
|
267
|
+
console.error(`\u521B\u5EFA\u7EBF\u72B6\u6570\u636E\u5931\u8D25\uFF1A${e}`);
|
|
268
|
+
}
|
|
269
|
+
});
|
|
270
|
+
return { type: "FeatureCollection", features: tempList };
|
|
271
|
+
};
|
|
272
|
+
var createGeoJsonLayer = (dataList, config) => {
|
|
273
|
+
const { isLine, layerName } = config || {};
|
|
274
|
+
const geoJson = assembleGeoJson(dataList, config);
|
|
275
|
+
const vectorLayer = new VectorLayer({
|
|
276
|
+
className: layerName ? layerName : "ol-layer",
|
|
277
|
+
source: new VectorSource({
|
|
278
|
+
features: new GeoJSON().readFeatures(geoJson)
|
|
279
|
+
}),
|
|
280
|
+
style: isLine ? new Style({
|
|
281
|
+
stroke: new Stroke({
|
|
282
|
+
color: "red",
|
|
283
|
+
lineDash: [10],
|
|
284
|
+
width: 3
|
|
285
|
+
})
|
|
286
|
+
}) : new Style({
|
|
287
|
+
stroke: new Stroke({
|
|
288
|
+
color: "red",
|
|
289
|
+
lineDash: [10],
|
|
290
|
+
width: 3
|
|
291
|
+
}),
|
|
292
|
+
fill: new Fill({
|
|
293
|
+
color: "rgba(0, 0, 255, 0.1)"
|
|
294
|
+
})
|
|
295
|
+
})
|
|
296
|
+
});
|
|
297
|
+
vectorLayer.set("_layerName", layerName);
|
|
298
|
+
return vectorLayer;
|
|
299
|
+
};
|
|
300
|
+
var createVectorFaceLayer = (dataList = [], config) => createGeoJsonLayer(dataList, Object.assign(config, { isLine: false }));
|
|
301
|
+
var createVectorLineLayer = (dataList = [], config) => createGeoJsonLayer(dataList, Object.assign(config, { isLine: true }));
|
|
302
|
+
var removeAllLayers = (isClearAll = true) => {
|
|
303
|
+
console.log(isClearAll);
|
|
304
|
+
if (instance) {
|
|
305
|
+
instance.getLayers().forEach((layer) => {
|
|
306
|
+
instance.removeLayer(layer);
|
|
307
|
+
});
|
|
308
|
+
}
|
|
309
|
+
};
|
|
310
|
+
var resetActiveMarker = () => {
|
|
311
|
+
};
|
|
312
|
+
var activeMarkerByUid = (uid, setFitView = true) => {
|
|
313
|
+
var _a;
|
|
314
|
+
console.log(setFitView);
|
|
315
|
+
const massMarksLayers = instance.getLayers().getArray().filter((layer) => layer.get("_isMassMarksLayer"));
|
|
316
|
+
if (massMarksLayers.length) {
|
|
317
|
+
const targetLayer = massMarksLayers.find(
|
|
318
|
+
(layer) => layer.get("_uuidSet").has(uid)
|
|
319
|
+
);
|
|
320
|
+
if (targetLayer) {
|
|
321
|
+
const tempList = ((_a = targetLayer.getSource()) == null ? void 0 : _a.getFeatures()) || [];
|
|
322
|
+
const targetFeature = tempList.find((feature) => feature.get("_uuid") === uid);
|
|
323
|
+
const selectInteraction = targetLayer.get("_selectInteraction");
|
|
324
|
+
if (selectInteraction) {
|
|
325
|
+
const collection = selectInteraction.getFeatures().getArray();
|
|
326
|
+
const hasFeature = collection.find((feature) => feature.get("_uuid") === uid);
|
|
327
|
+
if (!hasFeature) {
|
|
328
|
+
selectInteraction.dispatchEvent({
|
|
329
|
+
type: "select",
|
|
330
|
+
deselected: collection,
|
|
331
|
+
selected: [targetFeature],
|
|
332
|
+
mapBrowserEvent: void 0
|
|
333
|
+
});
|
|
334
|
+
selectInteraction.getFeatures().push(targetFeature);
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
};
|
|
340
|
+
var buildMassMarksStyles = (getImgUrlFn) => {
|
|
341
|
+
return (iconConfig) => {
|
|
342
|
+
const {
|
|
343
|
+
baseUrl,
|
|
344
|
+
markerIcon,
|
|
345
|
+
statusNum = 5,
|
|
346
|
+
activeScale = 1.3,
|
|
347
|
+
markerSize = [32, 32]
|
|
348
|
+
} = iconConfig;
|
|
349
|
+
const getMarkerUrl = getImgUrlFn(baseUrl);
|
|
350
|
+
const [x, y] = markerSize;
|
|
351
|
+
const massMarksStyles = new Array(statusNum * 2);
|
|
352
|
+
for (let i = 0; i < statusNum; i++) {
|
|
353
|
+
const imageUrl = getMarkerUrl(`${markerIcon}-${i}`, ".webp");
|
|
354
|
+
massMarksStyles[i] = new Style({
|
|
355
|
+
zIndex: 88 + i,
|
|
356
|
+
image: new Icon({
|
|
357
|
+
width: x,
|
|
358
|
+
height: y,
|
|
359
|
+
src: imageUrl,
|
|
360
|
+
anchor: [0.5, 1]
|
|
361
|
+
})
|
|
362
|
+
});
|
|
363
|
+
const activeImage = getMarkerUrl(`${markerIcon}-${i}-active`, ".webp");
|
|
364
|
+
massMarksStyles[i + statusNum] = new Style({
|
|
365
|
+
zIndex: 102,
|
|
366
|
+
image: new Icon({
|
|
367
|
+
width: x * activeScale,
|
|
368
|
+
height: y * activeScale,
|
|
369
|
+
anchor: [0.5, 1],
|
|
370
|
+
src: activeImage ? activeImage : imageUrl
|
|
371
|
+
})
|
|
372
|
+
});
|
|
373
|
+
}
|
|
374
|
+
return massMarksStyles;
|
|
375
|
+
};
|
|
376
|
+
};
|
|
377
|
+
var createSelectByLayer = (vectorLayer) => {
|
|
378
|
+
const interaction = new Select({
|
|
379
|
+
style: null,
|
|
380
|
+
layers: [vectorLayer],
|
|
381
|
+
condition: (evt) => {
|
|
382
|
+
let hasFeature = false;
|
|
383
|
+
instance.forEachFeatureAtPixel(
|
|
384
|
+
evt.pixel,
|
|
385
|
+
() => {
|
|
386
|
+
hasFeature = true;
|
|
387
|
+
},
|
|
388
|
+
{
|
|
389
|
+
layerFilter: (layer) => layer === vectorLayer
|
|
390
|
+
}
|
|
391
|
+
);
|
|
392
|
+
return click(evt) && hasFeature;
|
|
393
|
+
}
|
|
394
|
+
});
|
|
395
|
+
interaction.on("select", (evt) => {
|
|
396
|
+
const { selected, deselected } = evt;
|
|
397
|
+
if (selected.length) {
|
|
398
|
+
const feature = selected[0];
|
|
399
|
+
const data = feature.getProperties();
|
|
400
|
+
const { activeStyle } = data;
|
|
401
|
+
feature.setStyle(activeStyle);
|
|
402
|
+
emitter_default.emit("marker-click", data);
|
|
403
|
+
vectorLayer.set("_hasActive", true);
|
|
404
|
+
if (vectorLayer.get("_isDynamic")) {
|
|
405
|
+
const activeImage = activeStyle.getImage();
|
|
406
|
+
emitter_default.emit("dynamic-marker", Object.assign({}, data.rawData || {}, { lnglat: data.lnglat, style: data.style, width: activeImage.getWidth(), height: activeImage.getHeight() }));
|
|
407
|
+
}
|
|
408
|
+
}
|
|
409
|
+
if (deselected.length) {
|
|
410
|
+
const feature = deselected[0];
|
|
411
|
+
const data = feature.getProperties();
|
|
412
|
+
feature.setStyle(data.unActiveStyle);
|
|
413
|
+
vectorLayer.set("_hasActive", false);
|
|
414
|
+
}
|
|
415
|
+
});
|
|
416
|
+
instance.addInteraction(interaction);
|
|
417
|
+
vectorLayer.set("_selectInteraction", interaction);
|
|
418
|
+
return interaction;
|
|
419
|
+
};
|
|
420
|
+
var createMassMarksLayer = (dataList, styleList = []) => {
|
|
421
|
+
const features = dataList.map((item) => {
|
|
422
|
+
const feature = new Feature({
|
|
423
|
+
geometry: new Point([+item.lnglat[0], +item.lnglat[1]])
|
|
424
|
+
});
|
|
425
|
+
feature.setProperties(__spreadProps(__spreadValues({}, item), {
|
|
426
|
+
unActiveStyle: styleList[item.style],
|
|
427
|
+
activeStyle: styleList[item.style + styleList.length / 2]
|
|
428
|
+
}));
|
|
429
|
+
feature.setStyle(styleList[item.style]);
|
|
430
|
+
return feature;
|
|
431
|
+
});
|
|
432
|
+
const vectorLayer = new VectorLayer({
|
|
433
|
+
source: new VectorSource({
|
|
434
|
+
features
|
|
435
|
+
})
|
|
436
|
+
});
|
|
437
|
+
vectorLayer.setProperties({
|
|
438
|
+
_isCustom: true,
|
|
439
|
+
_isMassMarksLayer: true,
|
|
440
|
+
_statusNum: styleList.length / 2,
|
|
441
|
+
_dataList: dataList,
|
|
442
|
+
_uuidSet: new Set(dataList.map((item) => item._uuid) || [])
|
|
443
|
+
});
|
|
444
|
+
return vectorLayer;
|
|
445
|
+
};
|
|
446
|
+
var addMassMarksLayer = (getImgUrlFn) => {
|
|
447
|
+
return (dataList = [], iconConfig, openClick = true) => {
|
|
448
|
+
const {
|
|
449
|
+
baseUrl,
|
|
450
|
+
hasLine,
|
|
451
|
+
hasFace,
|
|
452
|
+
isDynamic,
|
|
453
|
+
statusNum,
|
|
454
|
+
markerIcon,
|
|
455
|
+
markerSize
|
|
456
|
+
} = iconConfig;
|
|
457
|
+
const massMarksStyles = buildMassMarksStyles(getImgUrlFn)({
|
|
458
|
+
baseUrl,
|
|
459
|
+
markerIcon,
|
|
460
|
+
markerSize,
|
|
461
|
+
activeScale: 1.3,
|
|
462
|
+
statusNum: statusNum || 5
|
|
463
|
+
});
|
|
464
|
+
const massMarksLayer = createMassMarksLayer(dataList, massMarksStyles);
|
|
465
|
+
if (openClick) {
|
|
466
|
+
createSelectByLayer(massMarksLayer);
|
|
467
|
+
}
|
|
468
|
+
if (hasLine) {
|
|
469
|
+
const vectorLayer = createGeoJsonLayer(dataList, {
|
|
470
|
+
key: "line",
|
|
471
|
+
isLine: true,
|
|
472
|
+
strokeColor: "rgba(29, 235, 255, 0.8)"
|
|
473
|
+
});
|
|
474
|
+
instance.addLayer(vectorLayer);
|
|
475
|
+
}
|
|
476
|
+
if (hasFace) {
|
|
477
|
+
const vectorLayer = createGeoJsonLayer(dataList, {
|
|
478
|
+
isLine: false,
|
|
479
|
+
key: "faceList",
|
|
480
|
+
fillOpacity: 0.1,
|
|
481
|
+
fillColor: "#4247DF",
|
|
482
|
+
strokeWeight: 1,
|
|
483
|
+
strokeStyle: "dashed",
|
|
484
|
+
strokeColor: "#4247DF"
|
|
485
|
+
});
|
|
486
|
+
instance.addLayer(vectorLayer);
|
|
487
|
+
}
|
|
488
|
+
massMarksLayer.setProperties({
|
|
489
|
+
_hasLine: hasLine,
|
|
490
|
+
_hasFace: hasFace,
|
|
491
|
+
_isDynamic: isDynamic
|
|
492
|
+
});
|
|
493
|
+
instance.addLayer(massMarksLayer);
|
|
494
|
+
return massMarksLayer;
|
|
495
|
+
};
|
|
496
|
+
};
|
|
497
|
+
var updateMarksLayersByStatus = (checkedStatusList = []) => {
|
|
498
|
+
console.log(checkedStatusList);
|
|
499
|
+
};
|
|
500
|
+
export {
|
|
501
|
+
activeMarkerByUid,
|
|
502
|
+
addMassMarksLayer,
|
|
503
|
+
buildMassMarksStyles,
|
|
504
|
+
createAnimationMarker,
|
|
505
|
+
createBaseLayer,
|
|
506
|
+
createGeoJsonLayer,
|
|
507
|
+
createMapInstance,
|
|
508
|
+
createMapWorldLayer,
|
|
509
|
+
createMassMarksLayer,
|
|
510
|
+
createSelectByLayer,
|
|
511
|
+
createVectorFaceLayer,
|
|
512
|
+
createVectorLineLayer,
|
|
513
|
+
disposeMap,
|
|
514
|
+
emitter_default as emitter,
|
|
515
|
+
getMapInstance,
|
|
516
|
+
instance,
|
|
517
|
+
removeAllLayers,
|
|
518
|
+
resetActiveMarker,
|
|
519
|
+
resetActiveVector,
|
|
520
|
+
resetMap,
|
|
521
|
+
resetZoomAndCenter,
|
|
522
|
+
updateMarksLayersByStatus
|
|
523
|
+
};
|