map-ol-utils 0.0.30 → 0.0.32
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 +228 -171
- package/dist/index.d.cts +15 -9
- package/dist/index.d.ts +15 -9
- package/dist/index.js +220 -164
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -67,7 +67,7 @@ var __async = (__this, __arguments, generator) => {
|
|
|
67
67
|
// src/index.ts
|
|
68
68
|
var index_exports = {};
|
|
69
69
|
__export(index_exports, {
|
|
70
|
-
|
|
70
|
+
activeFeatureByUid: () => activeFeatureByUid,
|
|
71
71
|
addMassMarksLayer: () => addMassMarksLayer,
|
|
72
72
|
buildMassMarksStyles: () => buildMassMarksStyles,
|
|
73
73
|
createAnimationMarker: () => createAnimationMarker,
|
|
@@ -82,10 +82,11 @@ __export(index_exports, {
|
|
|
82
82
|
createWmtsLayer: () => createWmtsLayer,
|
|
83
83
|
disposeMap: () => disposeMap,
|
|
84
84
|
emitter: () => emitter_default,
|
|
85
|
+
getLayersDataList: () => getLayersDataList,
|
|
85
86
|
getMapInstance: () => getMapInstance,
|
|
86
87
|
instance: () => instance,
|
|
87
88
|
removeAllLayers: () => removeAllLayers,
|
|
88
|
-
|
|
89
|
+
resetActiveFeature: () => resetActiveFeature,
|
|
89
90
|
resetActiveVector: () => resetActiveVector,
|
|
90
91
|
resetMap: () => resetMap,
|
|
91
92
|
resetZoomAndCenter: () => resetZoomAndCenter,
|
|
@@ -98,61 +99,6 @@ var import_mitt = __toESM(require("mitt"), 1);
|
|
|
98
99
|
var emitter = (0, import_mitt.default)();
|
|
99
100
|
var emitter_default = emitter;
|
|
100
101
|
|
|
101
|
-
// src/ogc-utils.ts
|
|
102
|
-
var import_source = require("ol/source");
|
|
103
|
-
var import_Tile = __toESM(require("ol/layer/Tile"), 1);
|
|
104
|
-
var import_format = require("ol/format");
|
|
105
|
-
var import_WMTS = require("ol/source/WMTS");
|
|
106
|
-
var parser = new import_format.WMTSCapabilities();
|
|
107
|
-
var capabilitiesMap = /* @__PURE__ */ new Map();
|
|
108
|
-
var getCapabilities = (url) => {
|
|
109
|
-
return new Promise((resolve) => {
|
|
110
|
-
const capabilities = capabilitiesMap.get(url);
|
|
111
|
-
if (capabilities) {
|
|
112
|
-
resolve(capabilities);
|
|
113
|
-
} else {
|
|
114
|
-
fetch(url).then((data) => data.text()).then((text) => {
|
|
115
|
-
const capabilities2 = parser.read(text);
|
|
116
|
-
capabilitiesMap.set(url, capabilities2);
|
|
117
|
-
resolve(capabilities2);
|
|
118
|
-
});
|
|
119
|
-
}
|
|
120
|
-
});
|
|
121
|
-
};
|
|
122
|
-
var createWmtsLayer = (serverUrl) => (config) => __async(void 0, null, function* () {
|
|
123
|
-
const { style, format, version, layerName, matrixSet } = config;
|
|
124
|
-
const [workspace, datastore] = layerName.split(":");
|
|
125
|
-
const capabilitiesUrl = `${serverUrl}/${workspace}/${datastore}/gwc/service/wmts?request=GetCapabilities`;
|
|
126
|
-
return new Promise((resolve, reject) => {
|
|
127
|
-
getCapabilities(capabilitiesUrl).then((data) => {
|
|
128
|
-
const options = (0, import_WMTS.optionsFromCapabilities)(data, {
|
|
129
|
-
Style: style || "",
|
|
130
|
-
layer: datastore,
|
|
131
|
-
version: version || "1.1.0",
|
|
132
|
-
format: format || "image/png",
|
|
133
|
-
matrixSet: matrixSet || "EPSG:4326"
|
|
134
|
-
});
|
|
135
|
-
if (options) {
|
|
136
|
-
resolve(
|
|
137
|
-
new import_Tile.default({
|
|
138
|
-
zIndex: 3,
|
|
139
|
-
className: layerName,
|
|
140
|
-
source: new import_source.WMTS(options)
|
|
141
|
-
})
|
|
142
|
-
);
|
|
143
|
-
} else {
|
|
144
|
-
reject(new Error("Unable to create TileLayer"));
|
|
145
|
-
}
|
|
146
|
-
});
|
|
147
|
-
});
|
|
148
|
-
});
|
|
149
|
-
|
|
150
|
-
// src/base-layer.ts
|
|
151
|
-
var import_source2 = require("ol/source");
|
|
152
|
-
var import_source3 = require("ol/source");
|
|
153
|
-
var import_tilegrid = require("ol/tilegrid");
|
|
154
|
-
var import_layer = require("ol/layer");
|
|
155
|
-
|
|
156
102
|
// src/create-map.ts
|
|
157
103
|
var import_Map = __toESM(require("ol/Map"), 1);
|
|
158
104
|
var import_View = __toESM(require("ol/View"), 1);
|
|
@@ -161,25 +107,8 @@ var import_control = require("ol/control");
|
|
|
161
107
|
// src/layer-utils.ts
|
|
162
108
|
var import_gcoord = __toESM(require("gcoord"), 1);
|
|
163
109
|
var import_geom = require("ol/geom");
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
var hexToRgba = (hex, alpha) => {
|
|
167
|
-
if (hex.startsWith("#")) {
|
|
168
|
-
let tempHex = hex.replace("#", "");
|
|
169
|
-
if (tempHex.length === 3) {
|
|
170
|
-
tempHex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
|
|
171
|
-
}
|
|
172
|
-
const r = parseInt(tempHex.substring(0, 2), 16);
|
|
173
|
-
const g = parseInt(tempHex.substring(2, 4), 16);
|
|
174
|
-
const b = parseInt(tempHex.substring(4, 6), 16);
|
|
175
|
-
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
176
|
-
} else {
|
|
177
|
-
return hex;
|
|
178
|
-
}
|
|
179
|
-
};
|
|
180
|
-
|
|
181
|
-
// src/layer-utils.ts
|
|
182
|
-
var import_format2 = require("ol/format");
|
|
110
|
+
var import_format = require("ol/format");
|
|
111
|
+
var import_extent = require("ol/extent");
|
|
183
112
|
var import_ol = require("ol");
|
|
184
113
|
var import_interaction = require("ol/interaction");
|
|
185
114
|
var import_Vector = __toESM(require("ol/layer/Vector"), 1);
|
|
@@ -210,12 +139,10 @@ var createAnimationMarker = (imgUrl, data) => {
|
|
|
210
139
|
};
|
|
211
140
|
var resetActiveVector = () => {
|
|
212
141
|
removeOverlays();
|
|
213
|
-
const layers = instance.
|
|
142
|
+
const layers = instance.getAllLayers();
|
|
214
143
|
layers.forEach((layer) => {
|
|
215
144
|
const interaction = layer.get("_selectInteraction");
|
|
216
|
-
|
|
217
|
-
interaction.getFeatures().clear();
|
|
218
|
-
}
|
|
145
|
+
interaction == null ? void 0 : interaction.getFeatures().clear();
|
|
219
146
|
});
|
|
220
147
|
};
|
|
221
148
|
var assembleGeoJson = (dataList, config) => {
|
|
@@ -238,7 +165,11 @@ var assembleGeoJson = (dataList, config) => {
|
|
|
238
165
|
console.error(`\u521B\u5EFA\u7EBF\u72B6\u6570\u636E\u5931\u8D25\uFF1A${e}`);
|
|
239
166
|
}
|
|
240
167
|
});
|
|
241
|
-
return !needTransform ? { type: "FeatureCollection", features: tempList } : import_gcoord.default.transform(
|
|
168
|
+
return !needTransform ? { type: "FeatureCollection", features: tempList } : import_gcoord.default.transform(
|
|
169
|
+
{ type: "FeatureCollection", features: tempList },
|
|
170
|
+
import_gcoord.default.GCJ02,
|
|
171
|
+
import_gcoord.default.WGS84
|
|
172
|
+
);
|
|
242
173
|
};
|
|
243
174
|
var createVectorStyle = (data, config) => {
|
|
244
175
|
const {
|
|
@@ -247,17 +178,38 @@ var createVectorStyle = (data, config) => {
|
|
|
247
178
|
fillColor,
|
|
248
179
|
colorKey,
|
|
249
180
|
strokeColor,
|
|
181
|
+
fillOpacity,
|
|
250
182
|
strokeWeight,
|
|
251
|
-
|
|
183
|
+
activeFillColor,
|
|
184
|
+
activeFillOpacity,
|
|
185
|
+
activeStrokeColor,
|
|
186
|
+
activeStrokeWeight
|
|
252
187
|
} = config || {};
|
|
253
|
-
const
|
|
188
|
+
const activeStyle = new import_style.Style({
|
|
254
189
|
stroke: new import_style.Stroke({
|
|
255
|
-
width: strokeWeight,
|
|
190
|
+
width: activeStrokeWeight || strokeWeight || 4,
|
|
191
|
+
color: activeStrokeColor || (colorKey ? (colorMap == null ? void 0 : colorMap.get(data[colorKey])) || strokeColor : strokeColor)
|
|
192
|
+
})
|
|
193
|
+
});
|
|
194
|
+
const unActiveStyle = new import_style.Style({
|
|
195
|
+
stroke: new import_style.Stroke({
|
|
196
|
+
width: strokeWeight || 2,
|
|
256
197
|
color: colorKey ? (colorMap == null ? void 0 : colorMap.get(data[colorKey])) || strokeColor : strokeColor
|
|
257
198
|
})
|
|
258
199
|
});
|
|
259
200
|
if (!isLine) {
|
|
260
|
-
|
|
201
|
+
activeStyle.setFill(
|
|
202
|
+
new import_style.Fill({
|
|
203
|
+
color: hexToRgba(
|
|
204
|
+
activeFillColor || fillColor || "",
|
|
205
|
+
activeFillOpacity || 1
|
|
206
|
+
) || hexToRgba(
|
|
207
|
+
(colorKey ? (colorMap == null ? void 0 : colorMap.get(data[colorKey])) || fillColor : fillColor) || "",
|
|
208
|
+
fillOpacity || 1
|
|
209
|
+
)
|
|
210
|
+
})
|
|
211
|
+
);
|
|
212
|
+
unActiveStyle.setFill(
|
|
261
213
|
new import_style.Fill({
|
|
262
214
|
color: hexToRgba(
|
|
263
215
|
(colorKey ? (colorMap == null ? void 0 : colorMap.get(data[colorKey])) || fillColor : fillColor) || "",
|
|
@@ -266,24 +218,34 @@ var createVectorStyle = (data, config) => {
|
|
|
266
218
|
})
|
|
267
219
|
);
|
|
268
220
|
}
|
|
269
|
-
|
|
221
|
+
Object.assign(data, {
|
|
222
|
+
activeStyle,
|
|
223
|
+
unActiveStyle
|
|
224
|
+
});
|
|
225
|
+
return unActiveStyle;
|
|
270
226
|
};
|
|
271
227
|
var createBusinessLayer = (dataList, config) => {
|
|
272
|
-
const { layerName } = config;
|
|
228
|
+
const { layerName, openClick } = config;
|
|
273
229
|
const geoJson = assembleGeoJson(dataList, config);
|
|
274
230
|
const vectorLayer = new import_Vector.default({
|
|
275
231
|
zIndex: 5,
|
|
276
232
|
className: layerName ? layerName : "ol-layer",
|
|
277
233
|
source: new import_Vector2.default({
|
|
278
|
-
features: new
|
|
234
|
+
features: new import_format.GeoJSON().readFeatures(geoJson).map((feature) => {
|
|
279
235
|
feature.setStyle(createVectorStyle(feature.getProperties(), config));
|
|
280
236
|
return feature;
|
|
281
237
|
})
|
|
282
238
|
})
|
|
283
239
|
});
|
|
240
|
+
if (openClick) {
|
|
241
|
+
createSelectByLayer(vectorLayer);
|
|
242
|
+
}
|
|
284
243
|
vectorLayer.setProperties({
|
|
244
|
+
_isCustom: true,
|
|
245
|
+
_isVectorLayer: true,
|
|
285
246
|
_layerName: layerName,
|
|
286
|
-
_dataList: [...dataList]
|
|
247
|
+
_dataList: [...dataList],
|
|
248
|
+
_uuidSet: new Set(dataList.map((item) => item._uuid) || [])
|
|
287
249
|
});
|
|
288
250
|
return vectorLayer;
|
|
289
251
|
};
|
|
@@ -300,9 +262,9 @@ var removeAllLayers = (isClearAll = true) => {
|
|
|
300
262
|
});
|
|
301
263
|
}
|
|
302
264
|
};
|
|
303
|
-
var
|
|
265
|
+
var resetActiveFeature = () => {
|
|
304
266
|
removeOverlays();
|
|
305
|
-
const massMarksLayers = instance.getAllLayers().filter((layer) => layer.get("
|
|
267
|
+
const massMarksLayers = instance.getAllLayers().filter((layer) => layer.get("_isVectorLayer"));
|
|
306
268
|
massMarksLayers.forEach((layer) => {
|
|
307
269
|
const selectInteraction = layer.get("_selectInteraction");
|
|
308
270
|
if (selectInteraction) {
|
|
@@ -316,11 +278,11 @@ var resetActiveMarker = () => {
|
|
|
316
278
|
}
|
|
317
279
|
});
|
|
318
280
|
};
|
|
319
|
-
var
|
|
281
|
+
var activeFeatureByUid = (uid) => {
|
|
320
282
|
var _a;
|
|
321
|
-
const
|
|
322
|
-
if (
|
|
323
|
-
const targetLayer =
|
|
283
|
+
const targetLayers = instance.getAllLayers().filter((layer) => layer.get("_isVectorLayer"));
|
|
284
|
+
if (targetLayers.length) {
|
|
285
|
+
const targetLayer = targetLayers.find(
|
|
324
286
|
(layer) => layer.get("_uuidSet").has(uid)
|
|
325
287
|
);
|
|
326
288
|
if (targetLayer) {
|
|
@@ -410,7 +372,7 @@ var createSelectByLayer = (vectorLayer) => {
|
|
|
410
372
|
const { activeStyle } = data;
|
|
411
373
|
feature.setStyle(activeStyle);
|
|
412
374
|
if (mapBrowserEvent) {
|
|
413
|
-
emitter_default.emit("
|
|
375
|
+
emitter_default.emit("selected-feature", data);
|
|
414
376
|
}
|
|
415
377
|
vectorLayer.set("_hasActive", true);
|
|
416
378
|
if (vectorLayer.get("_isDynamic")) {
|
|
@@ -430,8 +392,8 @@ var createSelectByLayer = (vectorLayer) => {
|
|
|
430
392
|
const view = instance.getView();
|
|
431
393
|
view.animate({
|
|
432
394
|
zoom: 12,
|
|
433
|
-
|
|
434
|
-
|
|
395
|
+
duration: 1e3,
|
|
396
|
+
center: (0, import_extent.getCenter)(feature.getGeometry().getExtent())
|
|
435
397
|
});
|
|
436
398
|
}
|
|
437
399
|
if (deselected.length) {
|
|
@@ -465,6 +427,7 @@ var createMassMarksLayer = (dataList, styleList = []) => {
|
|
|
465
427
|
});
|
|
466
428
|
vectorLayer.setProperties({
|
|
467
429
|
_isCustom: true,
|
|
430
|
+
_isVectorLayer: true,
|
|
468
431
|
_isMassMarksLayer: true,
|
|
469
432
|
_statusNum: styleList.length / 2,
|
|
470
433
|
_dataList: [...dataList],
|
|
@@ -501,6 +464,7 @@ var addMassMarksLayer = (getImgUrlFn) => {
|
|
|
501
464
|
vectorConfig || {
|
|
502
465
|
key: "line",
|
|
503
466
|
isLine: true,
|
|
467
|
+
openClick: false,
|
|
504
468
|
strokeColor: "rgba(29, 235, 255, 0.8)"
|
|
505
469
|
}
|
|
506
470
|
);
|
|
@@ -512,8 +476,9 @@ var addMassMarksLayer = (getImgUrlFn) => {
|
|
|
512
476
|
vectorConfig || {
|
|
513
477
|
isLine: false,
|
|
514
478
|
key: "faceList",
|
|
515
|
-
fillColor: "#4247DF",
|
|
516
479
|
strokeWeight: 1,
|
|
480
|
+
openClick: false,
|
|
481
|
+
fillColor: "#4247DF",
|
|
517
482
|
strokeStyle: "dashed",
|
|
518
483
|
strokeColor: "#4247DF"
|
|
519
484
|
}
|
|
@@ -524,6 +489,7 @@ var addMassMarksLayer = (getImgUrlFn) => {
|
|
|
524
489
|
_isCustom: true,
|
|
525
490
|
_hasLine: hasLine,
|
|
526
491
|
_hasFace: hasFace,
|
|
492
|
+
_isVectorLayer: true,
|
|
527
493
|
_isDynamic: isDynamic
|
|
528
494
|
});
|
|
529
495
|
instance.addLayer(massMarksLayer);
|
|
@@ -531,85 +497,39 @@ var addMassMarksLayer = (getImgUrlFn) => {
|
|
|
531
497
|
};
|
|
532
498
|
};
|
|
533
499
|
var updateMarksLayersByStatus = (checkedStatusList = []) => {
|
|
534
|
-
|
|
500
|
+
const hideStyle = new import_style.Style({});
|
|
501
|
+
const tempList = [];
|
|
502
|
+
const targetLayers = instance.getAllLayers().filter((layer) => layer.get("_isMassMarksLayer"));
|
|
503
|
+
targetLayers.forEach((layer) => {
|
|
504
|
+
const features = layer.getSource().getFeatures();
|
|
505
|
+
features.forEach((feature) => {
|
|
506
|
+
const data = feature.getProperties();
|
|
507
|
+
if (!checkedStatusList.includes(data.status)) {
|
|
508
|
+
feature.setStyle(hideStyle);
|
|
509
|
+
} else {
|
|
510
|
+
tempList.push(data);
|
|
511
|
+
feature.setStyle(data.unActiveStyle);
|
|
512
|
+
}
|
|
513
|
+
});
|
|
514
|
+
});
|
|
515
|
+
return tempList;
|
|
535
516
|
};
|
|
536
517
|
|
|
537
518
|
// src/create-map.ts
|
|
538
519
|
var import_interaction2 = require("ol/interaction");
|
|
539
|
-
var instance;
|
|
540
|
-
var mapCenter = [119.71512016971076, 30.122490541963536];
|
|
541
|
-
var createMapInstance = (config = {}) => {
|
|
542
|
-
const innerConfig = Object.assign(
|
|
543
|
-
{
|
|
544
|
-
zoom: 9.4,
|
|
545
|
-
maxZoom: 18,
|
|
546
|
-
minZoom: 9.4,
|
|
547
|
-
center: mapCenter,
|
|
548
|
-
baseLayer: "vec-layer",
|
|
549
|
-
projection: "EPSG:4326",
|
|
550
|
-
layers: [createBaseLayer()],
|
|
551
|
-
smoothExtentConstraint: false,
|
|
552
|
-
tk: "c77eddc667c5bed016fded560baf93e7"
|
|
553
|
-
},
|
|
554
|
-
config || {}
|
|
555
|
-
);
|
|
556
|
-
if (instance) {
|
|
557
|
-
return instance;
|
|
558
|
-
}
|
|
559
|
-
instance = new import_Map.default({
|
|
560
|
-
view: new import_View.default(innerConfig),
|
|
561
|
-
controls: (0, import_control.defaults)({
|
|
562
|
-
zoom: false,
|
|
563
|
-
rotate: false,
|
|
564
|
-
attribution: false
|
|
565
|
-
}),
|
|
566
|
-
interactions: (0, import_interaction2.defaults)({
|
|
567
|
-
doubleClickZoom: false
|
|
568
|
-
}),
|
|
569
|
-
layers: innerConfig.layers || [createBaseLayer()]
|
|
570
|
-
});
|
|
571
|
-
mapCenter = innerConfig.center || mapCenter;
|
|
572
|
-
instance.activeBaseLayer = innerConfig.baseLayer;
|
|
573
|
-
instance.getLayerByName = getLayerByName;
|
|
574
|
-
instance.removeLayerByName = removeLayerByName;
|
|
575
|
-
instance.changeLayersByNames = changeLayersByNames;
|
|
576
|
-
instance.on("pointermove", (evt) => {
|
|
577
|
-
instance.getTargetElement().style.cursor = instance.hasFeatureAtPixel(
|
|
578
|
-
evt.pixel
|
|
579
|
-
) ? "pointer" : "";
|
|
580
|
-
});
|
|
581
|
-
return instance;
|
|
582
|
-
};
|
|
583
|
-
var disposeMap = () => {
|
|
584
|
-
const layers = instance.getAllLayers();
|
|
585
|
-
layers.forEach((layer) => {
|
|
586
|
-
instance.removeLayer(layer);
|
|
587
|
-
});
|
|
588
|
-
instance.setTarget("");
|
|
589
|
-
instance = void 0;
|
|
590
|
-
};
|
|
591
|
-
var getMapInstance = () => instance;
|
|
592
|
-
var resetZoomAndCenter = (center = mapCenter) => {
|
|
593
|
-
const view = instance.getView();
|
|
594
|
-
view.animate({
|
|
595
|
-
zoom: 9.4,
|
|
596
|
-
center,
|
|
597
|
-
duration: 1e3
|
|
598
|
-
});
|
|
599
|
-
};
|
|
600
|
-
var resetMap = (config = { center: mapCenter, isClearAll: true }) => {
|
|
601
|
-
removeAllLayers(config.isClearAll);
|
|
602
|
-
resetZoomAndCenter(config.center || mapCenter);
|
|
603
|
-
};
|
|
604
520
|
|
|
605
521
|
// src/base-layer.ts
|
|
606
|
-
var
|
|
522
|
+
var import_source = require("ol/source");
|
|
523
|
+
var import_source2 = require("ol/source");
|
|
524
|
+
var import_tilegrid = require("ol/tilegrid");
|
|
525
|
+
var import_layer = require("ol/layer");
|
|
526
|
+
var import_WMTS = __toESM(require("ol/tilegrid/WMTS"), 1);
|
|
607
527
|
var createBaseLayer = (isDark = true) => {
|
|
608
528
|
return new import_layer.Tile({
|
|
609
529
|
zIndex: -1,
|
|
610
530
|
minZoom: 8,
|
|
611
531
|
maxZoom: 21,
|
|
612
|
-
source: new
|
|
532
|
+
source: new import_source.XYZ({
|
|
613
533
|
tileGrid: new import_tilegrid.TileGrid({
|
|
614
534
|
tileSize: 256,
|
|
615
535
|
resolutions: [
|
|
@@ -660,7 +580,7 @@ var createMapWorldLayer = (layerName, tk = "c77eddc667c5bed016fded560baf93e7") =
|
|
|
660
580
|
return new import_layer.Tile({
|
|
661
581
|
cacheSize: 20240,
|
|
662
582
|
zIndex: -1,
|
|
663
|
-
source: new
|
|
583
|
+
source: new import_source2.WMTS({
|
|
664
584
|
crossOrigin: "anonymous",
|
|
665
585
|
projection: "EPSG:4326",
|
|
666
586
|
wrapX: true,
|
|
@@ -669,7 +589,7 @@ var createMapWorldLayer = (layerName, tk = "c77eddc667c5bed016fded560baf93e7") =
|
|
|
669
589
|
version: "1.0.0",
|
|
670
590
|
format: "image/png",
|
|
671
591
|
matrixSet,
|
|
672
|
-
tileGrid: new
|
|
592
|
+
tileGrid: new import_WMTS.default({
|
|
673
593
|
origin: [-180, 90],
|
|
674
594
|
matrixIds: [
|
|
675
595
|
"1",
|
|
@@ -735,9 +655,145 @@ var changeLayersByNames = (activeNames, allLayerNames) => {
|
|
|
735
655
|
layer.setVisible(activeNames == null ? void 0 : activeNames.includes(layer.getClassName()));
|
|
736
656
|
});
|
|
737
657
|
};
|
|
658
|
+
|
|
659
|
+
// src/create-map.ts
|
|
660
|
+
var instance;
|
|
661
|
+
var mapCenter = [119.71512016971076, 30.122490541963536];
|
|
662
|
+
var createMapInstance = (config = {}) => {
|
|
663
|
+
const innerConfig = Object.assign(
|
|
664
|
+
{
|
|
665
|
+
zoom: 9.4,
|
|
666
|
+
maxZoom: 18,
|
|
667
|
+
minZoom: 9.4,
|
|
668
|
+
center: mapCenter,
|
|
669
|
+
baseLayer: "vec-layer",
|
|
670
|
+
projection: "EPSG:4326",
|
|
671
|
+
layers: [createBaseLayer()],
|
|
672
|
+
smoothExtentConstraint: false,
|
|
673
|
+
tk: "c77eddc667c5bed016fded560baf93e7"
|
|
674
|
+
},
|
|
675
|
+
config || {}
|
|
676
|
+
);
|
|
677
|
+
if (instance) {
|
|
678
|
+
return instance;
|
|
679
|
+
}
|
|
680
|
+
instance = new import_Map.default({
|
|
681
|
+
view: new import_View.default(innerConfig),
|
|
682
|
+
controls: (0, import_control.defaults)({
|
|
683
|
+
zoom: false,
|
|
684
|
+
rotate: false,
|
|
685
|
+
attribution: false
|
|
686
|
+
}),
|
|
687
|
+
interactions: (0, import_interaction2.defaults)({
|
|
688
|
+
doubleClickZoom: false
|
|
689
|
+
}),
|
|
690
|
+
layers: innerConfig.layers || [createBaseLayer()]
|
|
691
|
+
});
|
|
692
|
+
mapCenter = innerConfig.center || mapCenter;
|
|
693
|
+
instance.activeBaseLayer = innerConfig.baseLayer;
|
|
694
|
+
instance.getLayerByName = getLayerByName;
|
|
695
|
+
instance.removeLayerByName = removeLayerByName;
|
|
696
|
+
instance.changeLayersByNames = changeLayersByNames;
|
|
697
|
+
instance.on("pointermove", (evt) => {
|
|
698
|
+
instance.getTargetElement().style.cursor = instance.hasFeatureAtPixel(
|
|
699
|
+
evt.pixel
|
|
700
|
+
) ? "pointer" : "";
|
|
701
|
+
});
|
|
702
|
+
return instance;
|
|
703
|
+
};
|
|
704
|
+
var disposeMap = () => {
|
|
705
|
+
const layers = instance.getAllLayers();
|
|
706
|
+
layers.forEach((layer) => {
|
|
707
|
+
instance.removeLayer(layer);
|
|
708
|
+
});
|
|
709
|
+
instance.setTarget("");
|
|
710
|
+
instance = void 0;
|
|
711
|
+
};
|
|
712
|
+
var getMapInstance = () => instance;
|
|
713
|
+
var resetZoomAndCenter = (center = mapCenter) => {
|
|
714
|
+
const view = instance.getView();
|
|
715
|
+
view.animate({
|
|
716
|
+
zoom: 9.4,
|
|
717
|
+
center,
|
|
718
|
+
duration: 1e3
|
|
719
|
+
});
|
|
720
|
+
};
|
|
721
|
+
var resetMap = (config = { center: mapCenter, isClearAll: true }) => {
|
|
722
|
+
removeAllLayers(config.isClearAll);
|
|
723
|
+
resetZoomAndCenter(config.center || mapCenter);
|
|
724
|
+
};
|
|
725
|
+
|
|
726
|
+
// src/helper.ts
|
|
727
|
+
var hexToRgba = (hex, alpha) => {
|
|
728
|
+
if (hex.startsWith("#")) {
|
|
729
|
+
let tempHex = hex.replace("#", "");
|
|
730
|
+
if (tempHex.length === 3) {
|
|
731
|
+
tempHex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
|
|
732
|
+
}
|
|
733
|
+
const r = parseInt(tempHex.substring(0, 2), 16);
|
|
734
|
+
const g = parseInt(tempHex.substring(2, 4), 16);
|
|
735
|
+
const b = parseInt(tempHex.substring(4, 6), 16);
|
|
736
|
+
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
737
|
+
} else {
|
|
738
|
+
return hex;
|
|
739
|
+
}
|
|
740
|
+
};
|
|
741
|
+
var getLayersDataList = () => {
|
|
742
|
+
var _a;
|
|
743
|
+
return ((_a = instance) == null ? void 0 : _a.getAllLayers().map((layer) => layer.get("_dataList") || []).flat(2)) || [];
|
|
744
|
+
};
|
|
745
|
+
|
|
746
|
+
// src/ogc-utils.ts
|
|
747
|
+
var import_source3 = require("ol/source");
|
|
748
|
+
var import_Tile = __toESM(require("ol/layer/Tile"), 1);
|
|
749
|
+
var import_format2 = require("ol/format");
|
|
750
|
+
var import_WMTS2 = require("ol/source/WMTS");
|
|
751
|
+
var parser = new import_format2.WMTSCapabilities();
|
|
752
|
+
var capabilitiesMap = /* @__PURE__ */ new Map();
|
|
753
|
+
var getCapabilities = (url) => {
|
|
754
|
+
return new Promise((resolve) => {
|
|
755
|
+
const capabilities = capabilitiesMap.get(url);
|
|
756
|
+
if (capabilities) {
|
|
757
|
+
resolve(capabilities);
|
|
758
|
+
} else {
|
|
759
|
+
fetch(url).then((data) => data.text()).then((text) => {
|
|
760
|
+
const capabilities2 = parser.read(text);
|
|
761
|
+
capabilitiesMap.set(url, capabilities2);
|
|
762
|
+
resolve(capabilities2);
|
|
763
|
+
});
|
|
764
|
+
}
|
|
765
|
+
});
|
|
766
|
+
};
|
|
767
|
+
var createWmtsLayer = (serverUrl) => (config) => __async(void 0, null, function* () {
|
|
768
|
+
const { style, format, version, layerName, matrixSet } = config;
|
|
769
|
+
const [workspace, datastore] = layerName.split(":");
|
|
770
|
+
const capabilitiesUrl = `${serverUrl}/${workspace}/${datastore}/gwc/service/wmts?request=GetCapabilities`;
|
|
771
|
+
return new Promise((resolve, reject) => {
|
|
772
|
+
getCapabilities(capabilitiesUrl).then((data) => {
|
|
773
|
+
const options = (0, import_WMTS2.optionsFromCapabilities)(data, {
|
|
774
|
+
Style: style || "",
|
|
775
|
+
layer: datastore,
|
|
776
|
+
version: version || "1.1.0",
|
|
777
|
+
format: format || "image/png",
|
|
778
|
+
matrixSet: matrixSet || "EPSG:4326"
|
|
779
|
+
});
|
|
780
|
+
if (options) {
|
|
781
|
+
resolve(
|
|
782
|
+
new import_Tile.default({
|
|
783
|
+
zIndex: 3,
|
|
784
|
+
className: layerName,
|
|
785
|
+
source: new import_source3.WMTS(options)
|
|
786
|
+
})
|
|
787
|
+
);
|
|
788
|
+
} else {
|
|
789
|
+
reject(new Error("Unable to create TileLayer"));
|
|
790
|
+
}
|
|
791
|
+
});
|
|
792
|
+
});
|
|
793
|
+
});
|
|
738
794
|
// Annotate the CommonJS export names for ESM import in node:
|
|
739
795
|
0 && (module.exports = {
|
|
740
|
-
|
|
796
|
+
activeFeatureByUid,
|
|
741
797
|
addMassMarksLayer,
|
|
742
798
|
buildMassMarksStyles,
|
|
743
799
|
createAnimationMarker,
|
|
@@ -752,10 +808,11 @@ var changeLayersByNames = (activeNames, allLayerNames) => {
|
|
|
752
808
|
createWmtsLayer,
|
|
753
809
|
disposeMap,
|
|
754
810
|
emitter,
|
|
811
|
+
getLayersDataList,
|
|
755
812
|
getMapInstance,
|
|
756
813
|
instance,
|
|
757
814
|
removeAllLayers,
|
|
758
|
-
|
|
815
|
+
resetActiveFeature,
|
|
759
816
|
resetActiveVector,
|
|
760
817
|
resetMap,
|
|
761
818
|
resetZoomAndCenter,
|
package/dist/index.d.cts
CHANGED
|
@@ -33,6 +33,10 @@ type VectorConfig = {
|
|
|
33
33
|
strokeStyle?: string;
|
|
34
34
|
strokeWeight?: number;
|
|
35
35
|
needTransform?: boolean;
|
|
36
|
+
activeFillColor?: string;
|
|
37
|
+
activeStrokeColor?: string;
|
|
38
|
+
activeFillOpacity?: number;
|
|
39
|
+
activeStrokeWeight?: number;
|
|
36
40
|
colorMap?: Map<string, string>;
|
|
37
41
|
};
|
|
38
42
|
type IconConfig = {
|
|
@@ -74,6 +78,8 @@ type WmtsSourceOptions = {
|
|
|
74
78
|
|
|
75
79
|
declare const emitter: Emitter<Record<EventType, any>>;
|
|
76
80
|
|
|
81
|
+
declare const getLayersDataList: () => any[];
|
|
82
|
+
|
|
77
83
|
/**
|
|
78
84
|
* 创建WMTS图层
|
|
79
85
|
* @param serverUrl
|
|
@@ -107,33 +113,33 @@ declare const createAnimationMarker: (imgUrl: string, data: MassData) => void;
|
|
|
107
113
|
* 重置激活的矢量数据
|
|
108
114
|
*/
|
|
109
115
|
declare const resetActiveVector: () => void;
|
|
110
|
-
declare const createBusinessLayer: (dataList:
|
|
116
|
+
declare const createBusinessLayer: (dataList: MassData[], config: VectorConfig) => VectorLayer<VectorSource<Feature<ol_geom.Geometry>>, Feature<ol_geom.Geometry>>;
|
|
111
117
|
/**
|
|
112
118
|
* 创建面状数据
|
|
113
119
|
* @param dataList
|
|
114
120
|
* @param config
|
|
115
121
|
*/
|
|
116
|
-
declare const createVectorFaceLayer: (dataList:
|
|
122
|
+
declare const createVectorFaceLayer: (dataList: MassData[] | undefined, config: VectorConfig) => VectorLayer<VectorSource<Feature<ol_geom.Geometry>>, Feature<ol_geom.Geometry>>;
|
|
117
123
|
/**
|
|
118
124
|
* 创建矢量线图层
|
|
119
125
|
* @param dataList
|
|
120
126
|
* @param config
|
|
121
127
|
*/
|
|
122
|
-
declare const createVectorLineLayer: (dataList:
|
|
128
|
+
declare const createVectorLineLayer: (dataList: MassData[] | undefined, config: VectorConfig) => VectorLayer<VectorSource<Feature<ol_geom.Geometry>>, Feature<ol_geom.Geometry>>;
|
|
123
129
|
/**
|
|
124
130
|
* 移除覆盖物已经自定义图层
|
|
125
131
|
* @param isClearAll
|
|
126
132
|
*/
|
|
127
133
|
declare const removeAllLayers: (isClearAll?: boolean) => void;
|
|
128
134
|
/**
|
|
129
|
-
* 重置激活
|
|
135
|
+
* 重置激活Feature
|
|
130
136
|
*/
|
|
131
|
-
declare const
|
|
137
|
+
declare const resetActiveFeature: () => void;
|
|
132
138
|
/**
|
|
133
|
-
*
|
|
139
|
+
* 激活要素
|
|
134
140
|
* @param uid
|
|
135
141
|
*/
|
|
136
|
-
declare const
|
|
142
|
+
declare const activeFeatureByUid: (uid: string) => void;
|
|
137
143
|
/**
|
|
138
144
|
* 构建MassMarks样式数组
|
|
139
145
|
*/
|
|
@@ -158,6 +164,6 @@ declare const addMassMarksLayer: (getImgUrlFn: GetImgUrlFn) => (dataList: never[
|
|
|
158
164
|
* 更新图层根据选中状态列表
|
|
159
165
|
* @param checkedStatusList
|
|
160
166
|
*/
|
|
161
|
-
declare const updateMarksLayersByStatus: (checkedStatusList?: string[]) =>
|
|
167
|
+
declare const updateMarksLayersByStatus: (checkedStatusList?: string[]) => MassData[];
|
|
162
168
|
|
|
163
|
-
export { type CustomMap, type GetImgUrl, type GetImgUrlFn, type IconConfig, type MassData, type VectorConfig, type WmtsSourceOptions,
|
|
169
|
+
export { type CustomMap, type GetImgUrl, type GetImgUrlFn, type IconConfig, type MassData, type VectorConfig, type WmtsSourceOptions, activeFeatureByUid, addMassMarksLayer, buildMassMarksStyles, createAnimationMarker, createBaseLayer, createBusinessLayer, createMapInstance, createMapWorldLayer, createMassMarksLayer, createSelectByLayer, createVectorFaceLayer, createVectorLineLayer, createWmtsLayer, disposeMap, emitter, getLayersDataList, getMapInstance, instance, removeAllLayers, resetActiveFeature, resetActiveVector, resetMap, resetZoomAndCenter, updateMarksLayersByStatus };
|
package/dist/index.d.ts
CHANGED
|
@@ -33,6 +33,10 @@ type VectorConfig = {
|
|
|
33
33
|
strokeStyle?: string;
|
|
34
34
|
strokeWeight?: number;
|
|
35
35
|
needTransform?: boolean;
|
|
36
|
+
activeFillColor?: string;
|
|
37
|
+
activeStrokeColor?: string;
|
|
38
|
+
activeFillOpacity?: number;
|
|
39
|
+
activeStrokeWeight?: number;
|
|
36
40
|
colorMap?: Map<string, string>;
|
|
37
41
|
};
|
|
38
42
|
type IconConfig = {
|
|
@@ -74,6 +78,8 @@ type WmtsSourceOptions = {
|
|
|
74
78
|
|
|
75
79
|
declare const emitter: Emitter<Record<EventType, any>>;
|
|
76
80
|
|
|
81
|
+
declare const getLayersDataList: () => any[];
|
|
82
|
+
|
|
77
83
|
/**
|
|
78
84
|
* 创建WMTS图层
|
|
79
85
|
* @param serverUrl
|
|
@@ -107,33 +113,33 @@ declare const createAnimationMarker: (imgUrl: string, data: MassData) => void;
|
|
|
107
113
|
* 重置激活的矢量数据
|
|
108
114
|
*/
|
|
109
115
|
declare const resetActiveVector: () => void;
|
|
110
|
-
declare const createBusinessLayer: (dataList:
|
|
116
|
+
declare const createBusinessLayer: (dataList: MassData[], config: VectorConfig) => VectorLayer<VectorSource<Feature<ol_geom.Geometry>>, Feature<ol_geom.Geometry>>;
|
|
111
117
|
/**
|
|
112
118
|
* 创建面状数据
|
|
113
119
|
* @param dataList
|
|
114
120
|
* @param config
|
|
115
121
|
*/
|
|
116
|
-
declare const createVectorFaceLayer: (dataList:
|
|
122
|
+
declare const createVectorFaceLayer: (dataList: MassData[] | undefined, config: VectorConfig) => VectorLayer<VectorSource<Feature<ol_geom.Geometry>>, Feature<ol_geom.Geometry>>;
|
|
117
123
|
/**
|
|
118
124
|
* 创建矢量线图层
|
|
119
125
|
* @param dataList
|
|
120
126
|
* @param config
|
|
121
127
|
*/
|
|
122
|
-
declare const createVectorLineLayer: (dataList:
|
|
128
|
+
declare const createVectorLineLayer: (dataList: MassData[] | undefined, config: VectorConfig) => VectorLayer<VectorSource<Feature<ol_geom.Geometry>>, Feature<ol_geom.Geometry>>;
|
|
123
129
|
/**
|
|
124
130
|
* 移除覆盖物已经自定义图层
|
|
125
131
|
* @param isClearAll
|
|
126
132
|
*/
|
|
127
133
|
declare const removeAllLayers: (isClearAll?: boolean) => void;
|
|
128
134
|
/**
|
|
129
|
-
* 重置激活
|
|
135
|
+
* 重置激活Feature
|
|
130
136
|
*/
|
|
131
|
-
declare const
|
|
137
|
+
declare const resetActiveFeature: () => void;
|
|
132
138
|
/**
|
|
133
|
-
*
|
|
139
|
+
* 激活要素
|
|
134
140
|
* @param uid
|
|
135
141
|
*/
|
|
136
|
-
declare const
|
|
142
|
+
declare const activeFeatureByUid: (uid: string) => void;
|
|
137
143
|
/**
|
|
138
144
|
* 构建MassMarks样式数组
|
|
139
145
|
*/
|
|
@@ -158,6 +164,6 @@ declare const addMassMarksLayer: (getImgUrlFn: GetImgUrlFn) => (dataList: never[
|
|
|
158
164
|
* 更新图层根据选中状态列表
|
|
159
165
|
* @param checkedStatusList
|
|
160
166
|
*/
|
|
161
|
-
declare const updateMarksLayersByStatus: (checkedStatusList?: string[]) =>
|
|
167
|
+
declare const updateMarksLayersByStatus: (checkedStatusList?: string[]) => MassData[];
|
|
162
168
|
|
|
163
|
-
export { type CustomMap, type GetImgUrl, type GetImgUrlFn, type IconConfig, type MassData, type VectorConfig, type WmtsSourceOptions,
|
|
169
|
+
export { type CustomMap, type GetImgUrl, type GetImgUrlFn, type IconConfig, type MassData, type VectorConfig, type WmtsSourceOptions, activeFeatureByUid, addMassMarksLayer, buildMassMarksStyles, createAnimationMarker, createBaseLayer, createBusinessLayer, createMapInstance, createMapWorldLayer, createMassMarksLayer, createSelectByLayer, createVectorFaceLayer, createVectorLineLayer, createWmtsLayer, disposeMap, emitter, getLayersDataList, getMapInstance, instance, removeAllLayers, resetActiveFeature, resetActiveVector, resetMap, resetZoomAndCenter, updateMarksLayersByStatus };
|
package/dist/index.js
CHANGED
|
@@ -43,61 +43,6 @@ import mitt from "mitt";
|
|
|
43
43
|
var emitter = mitt();
|
|
44
44
|
var emitter_default = emitter;
|
|
45
45
|
|
|
46
|
-
// src/ogc-utils.ts
|
|
47
|
-
import { WMTS } from "ol/source";
|
|
48
|
-
import TileLayer from "ol/layer/Tile";
|
|
49
|
-
import { WMTSCapabilities } from "ol/format";
|
|
50
|
-
import { optionsFromCapabilities } from "ol/source/WMTS";
|
|
51
|
-
var parser = new WMTSCapabilities();
|
|
52
|
-
var capabilitiesMap = /* @__PURE__ */ new Map();
|
|
53
|
-
var getCapabilities = (url) => {
|
|
54
|
-
return new Promise((resolve) => {
|
|
55
|
-
const capabilities = capabilitiesMap.get(url);
|
|
56
|
-
if (capabilities) {
|
|
57
|
-
resolve(capabilities);
|
|
58
|
-
} else {
|
|
59
|
-
fetch(url).then((data) => data.text()).then((text) => {
|
|
60
|
-
const capabilities2 = parser.read(text);
|
|
61
|
-
capabilitiesMap.set(url, capabilities2);
|
|
62
|
-
resolve(capabilities2);
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
};
|
|
67
|
-
var createWmtsLayer = (serverUrl) => (config) => __async(void 0, null, function* () {
|
|
68
|
-
const { style, format, version, layerName, matrixSet } = config;
|
|
69
|
-
const [workspace, datastore] = layerName.split(":");
|
|
70
|
-
const capabilitiesUrl = `${serverUrl}/${workspace}/${datastore}/gwc/service/wmts?request=GetCapabilities`;
|
|
71
|
-
return new Promise((resolve, reject) => {
|
|
72
|
-
getCapabilities(capabilitiesUrl).then((data) => {
|
|
73
|
-
const options = optionsFromCapabilities(data, {
|
|
74
|
-
Style: style || "",
|
|
75
|
-
layer: datastore,
|
|
76
|
-
version: version || "1.1.0",
|
|
77
|
-
format: format || "image/png",
|
|
78
|
-
matrixSet: matrixSet || "EPSG:4326"
|
|
79
|
-
});
|
|
80
|
-
if (options) {
|
|
81
|
-
resolve(
|
|
82
|
-
new TileLayer({
|
|
83
|
-
zIndex: 3,
|
|
84
|
-
className: layerName,
|
|
85
|
-
source: new WMTS(options)
|
|
86
|
-
})
|
|
87
|
-
);
|
|
88
|
-
} else {
|
|
89
|
-
reject(new Error("Unable to create TileLayer"));
|
|
90
|
-
}
|
|
91
|
-
});
|
|
92
|
-
});
|
|
93
|
-
});
|
|
94
|
-
|
|
95
|
-
// src/base-layer.ts
|
|
96
|
-
import { XYZ } from "ol/source";
|
|
97
|
-
import { WMTS as WMTS2 } from "ol/source";
|
|
98
|
-
import { TileGrid } from "ol/tilegrid";
|
|
99
|
-
import { Tile } from "ol/layer";
|
|
100
|
-
|
|
101
46
|
// src/create-map.ts
|
|
102
47
|
import Map2 from "ol/Map";
|
|
103
48
|
import View from "ol/View";
|
|
@@ -106,25 +51,8 @@ import { defaults } from "ol/control";
|
|
|
106
51
|
// src/layer-utils.ts
|
|
107
52
|
import gcoord from "gcoord";
|
|
108
53
|
import { Point } from "ol/geom";
|
|
109
|
-
|
|
110
|
-
// src/helper.ts
|
|
111
|
-
var hexToRgba = (hex, alpha) => {
|
|
112
|
-
if (hex.startsWith("#")) {
|
|
113
|
-
let tempHex = hex.replace("#", "");
|
|
114
|
-
if (tempHex.length === 3) {
|
|
115
|
-
tempHex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
|
|
116
|
-
}
|
|
117
|
-
const r = parseInt(tempHex.substring(0, 2), 16);
|
|
118
|
-
const g = parseInt(tempHex.substring(2, 4), 16);
|
|
119
|
-
const b = parseInt(tempHex.substring(4, 6), 16);
|
|
120
|
-
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
121
|
-
} else {
|
|
122
|
-
return hex;
|
|
123
|
-
}
|
|
124
|
-
};
|
|
125
|
-
|
|
126
|
-
// src/layer-utils.ts
|
|
127
54
|
import { GeoJSON } from "ol/format";
|
|
55
|
+
import { getCenter } from "ol/extent";
|
|
128
56
|
import { Feature, Overlay } from "ol";
|
|
129
57
|
import { Select } from "ol/interaction";
|
|
130
58
|
import VectorLayer from "ol/layer/Vector";
|
|
@@ -155,12 +83,10 @@ var createAnimationMarker = (imgUrl, data) => {
|
|
|
155
83
|
};
|
|
156
84
|
var resetActiveVector = () => {
|
|
157
85
|
removeOverlays();
|
|
158
|
-
const layers = instance.
|
|
86
|
+
const layers = instance.getAllLayers();
|
|
159
87
|
layers.forEach((layer) => {
|
|
160
88
|
const interaction = layer.get("_selectInteraction");
|
|
161
|
-
|
|
162
|
-
interaction.getFeatures().clear();
|
|
163
|
-
}
|
|
89
|
+
interaction == null ? void 0 : interaction.getFeatures().clear();
|
|
164
90
|
});
|
|
165
91
|
};
|
|
166
92
|
var assembleGeoJson = (dataList, config) => {
|
|
@@ -183,7 +109,11 @@ var assembleGeoJson = (dataList, config) => {
|
|
|
183
109
|
console.error(`\u521B\u5EFA\u7EBF\u72B6\u6570\u636E\u5931\u8D25\uFF1A${e}`);
|
|
184
110
|
}
|
|
185
111
|
});
|
|
186
|
-
return !needTransform ? { type: "FeatureCollection", features: tempList } : gcoord.transform(
|
|
112
|
+
return !needTransform ? { type: "FeatureCollection", features: tempList } : gcoord.transform(
|
|
113
|
+
{ type: "FeatureCollection", features: tempList },
|
|
114
|
+
gcoord.GCJ02,
|
|
115
|
+
gcoord.WGS84
|
|
116
|
+
);
|
|
187
117
|
};
|
|
188
118
|
var createVectorStyle = (data, config) => {
|
|
189
119
|
const {
|
|
@@ -192,17 +122,38 @@ var createVectorStyle = (data, config) => {
|
|
|
192
122
|
fillColor,
|
|
193
123
|
colorKey,
|
|
194
124
|
strokeColor,
|
|
125
|
+
fillOpacity,
|
|
195
126
|
strokeWeight,
|
|
196
|
-
|
|
127
|
+
activeFillColor,
|
|
128
|
+
activeFillOpacity,
|
|
129
|
+
activeStrokeColor,
|
|
130
|
+
activeStrokeWeight
|
|
197
131
|
} = config || {};
|
|
198
|
-
const
|
|
132
|
+
const activeStyle = new Style({
|
|
199
133
|
stroke: new Stroke({
|
|
200
|
-
width: strokeWeight,
|
|
134
|
+
width: activeStrokeWeight || strokeWeight || 4,
|
|
135
|
+
color: activeStrokeColor || (colorKey ? (colorMap == null ? void 0 : colorMap.get(data[colorKey])) || strokeColor : strokeColor)
|
|
136
|
+
})
|
|
137
|
+
});
|
|
138
|
+
const unActiveStyle = new Style({
|
|
139
|
+
stroke: new Stroke({
|
|
140
|
+
width: strokeWeight || 2,
|
|
201
141
|
color: colorKey ? (colorMap == null ? void 0 : colorMap.get(data[colorKey])) || strokeColor : strokeColor
|
|
202
142
|
})
|
|
203
143
|
});
|
|
204
144
|
if (!isLine) {
|
|
205
|
-
|
|
145
|
+
activeStyle.setFill(
|
|
146
|
+
new Fill({
|
|
147
|
+
color: hexToRgba(
|
|
148
|
+
activeFillColor || fillColor || "",
|
|
149
|
+
activeFillOpacity || 1
|
|
150
|
+
) || hexToRgba(
|
|
151
|
+
(colorKey ? (colorMap == null ? void 0 : colorMap.get(data[colorKey])) || fillColor : fillColor) || "",
|
|
152
|
+
fillOpacity || 1
|
|
153
|
+
)
|
|
154
|
+
})
|
|
155
|
+
);
|
|
156
|
+
unActiveStyle.setFill(
|
|
206
157
|
new Fill({
|
|
207
158
|
color: hexToRgba(
|
|
208
159
|
(colorKey ? (colorMap == null ? void 0 : colorMap.get(data[colorKey])) || fillColor : fillColor) || "",
|
|
@@ -211,10 +162,14 @@ var createVectorStyle = (data, config) => {
|
|
|
211
162
|
})
|
|
212
163
|
);
|
|
213
164
|
}
|
|
214
|
-
|
|
165
|
+
Object.assign(data, {
|
|
166
|
+
activeStyle,
|
|
167
|
+
unActiveStyle
|
|
168
|
+
});
|
|
169
|
+
return unActiveStyle;
|
|
215
170
|
};
|
|
216
171
|
var createBusinessLayer = (dataList, config) => {
|
|
217
|
-
const { layerName } = config;
|
|
172
|
+
const { layerName, openClick } = config;
|
|
218
173
|
const geoJson = assembleGeoJson(dataList, config);
|
|
219
174
|
const vectorLayer = new VectorLayer({
|
|
220
175
|
zIndex: 5,
|
|
@@ -226,9 +181,15 @@ var createBusinessLayer = (dataList, config) => {
|
|
|
226
181
|
})
|
|
227
182
|
})
|
|
228
183
|
});
|
|
184
|
+
if (openClick) {
|
|
185
|
+
createSelectByLayer(vectorLayer);
|
|
186
|
+
}
|
|
229
187
|
vectorLayer.setProperties({
|
|
188
|
+
_isCustom: true,
|
|
189
|
+
_isVectorLayer: true,
|
|
230
190
|
_layerName: layerName,
|
|
231
|
-
_dataList: [...dataList]
|
|
191
|
+
_dataList: [...dataList],
|
|
192
|
+
_uuidSet: new Set(dataList.map((item) => item._uuid) || [])
|
|
232
193
|
});
|
|
233
194
|
return vectorLayer;
|
|
234
195
|
};
|
|
@@ -245,9 +206,9 @@ var removeAllLayers = (isClearAll = true) => {
|
|
|
245
206
|
});
|
|
246
207
|
}
|
|
247
208
|
};
|
|
248
|
-
var
|
|
209
|
+
var resetActiveFeature = () => {
|
|
249
210
|
removeOverlays();
|
|
250
|
-
const massMarksLayers = instance.getAllLayers().filter((layer) => layer.get("
|
|
211
|
+
const massMarksLayers = instance.getAllLayers().filter((layer) => layer.get("_isVectorLayer"));
|
|
251
212
|
massMarksLayers.forEach((layer) => {
|
|
252
213
|
const selectInteraction = layer.get("_selectInteraction");
|
|
253
214
|
if (selectInteraction) {
|
|
@@ -261,11 +222,11 @@ var resetActiveMarker = () => {
|
|
|
261
222
|
}
|
|
262
223
|
});
|
|
263
224
|
};
|
|
264
|
-
var
|
|
225
|
+
var activeFeatureByUid = (uid) => {
|
|
265
226
|
var _a;
|
|
266
|
-
const
|
|
267
|
-
if (
|
|
268
|
-
const targetLayer =
|
|
227
|
+
const targetLayers = instance.getAllLayers().filter((layer) => layer.get("_isVectorLayer"));
|
|
228
|
+
if (targetLayers.length) {
|
|
229
|
+
const targetLayer = targetLayers.find(
|
|
269
230
|
(layer) => layer.get("_uuidSet").has(uid)
|
|
270
231
|
);
|
|
271
232
|
if (targetLayer) {
|
|
@@ -355,7 +316,7 @@ var createSelectByLayer = (vectorLayer) => {
|
|
|
355
316
|
const { activeStyle } = data;
|
|
356
317
|
feature.setStyle(activeStyle);
|
|
357
318
|
if (mapBrowserEvent) {
|
|
358
|
-
emitter_default.emit("
|
|
319
|
+
emitter_default.emit("selected-feature", data);
|
|
359
320
|
}
|
|
360
321
|
vectorLayer.set("_hasActive", true);
|
|
361
322
|
if (vectorLayer.get("_isDynamic")) {
|
|
@@ -375,8 +336,8 @@ var createSelectByLayer = (vectorLayer) => {
|
|
|
375
336
|
const view = instance.getView();
|
|
376
337
|
view.animate({
|
|
377
338
|
zoom: 12,
|
|
378
|
-
|
|
379
|
-
|
|
339
|
+
duration: 1e3,
|
|
340
|
+
center: getCenter(feature.getGeometry().getExtent())
|
|
380
341
|
});
|
|
381
342
|
}
|
|
382
343
|
if (deselected.length) {
|
|
@@ -410,6 +371,7 @@ var createMassMarksLayer = (dataList, styleList = []) => {
|
|
|
410
371
|
});
|
|
411
372
|
vectorLayer.setProperties({
|
|
412
373
|
_isCustom: true,
|
|
374
|
+
_isVectorLayer: true,
|
|
413
375
|
_isMassMarksLayer: true,
|
|
414
376
|
_statusNum: styleList.length / 2,
|
|
415
377
|
_dataList: [...dataList],
|
|
@@ -446,6 +408,7 @@ var addMassMarksLayer = (getImgUrlFn) => {
|
|
|
446
408
|
vectorConfig || {
|
|
447
409
|
key: "line",
|
|
448
410
|
isLine: true,
|
|
411
|
+
openClick: false,
|
|
449
412
|
strokeColor: "rgba(29, 235, 255, 0.8)"
|
|
450
413
|
}
|
|
451
414
|
);
|
|
@@ -457,8 +420,9 @@ var addMassMarksLayer = (getImgUrlFn) => {
|
|
|
457
420
|
vectorConfig || {
|
|
458
421
|
isLine: false,
|
|
459
422
|
key: "faceList",
|
|
460
|
-
fillColor: "#4247DF",
|
|
461
423
|
strokeWeight: 1,
|
|
424
|
+
openClick: false,
|
|
425
|
+
fillColor: "#4247DF",
|
|
462
426
|
strokeStyle: "dashed",
|
|
463
427
|
strokeColor: "#4247DF"
|
|
464
428
|
}
|
|
@@ -469,6 +433,7 @@ var addMassMarksLayer = (getImgUrlFn) => {
|
|
|
469
433
|
_isCustom: true,
|
|
470
434
|
_hasLine: hasLine,
|
|
471
435
|
_hasFace: hasFace,
|
|
436
|
+
_isVectorLayer: true,
|
|
472
437
|
_isDynamic: isDynamic
|
|
473
438
|
});
|
|
474
439
|
instance.addLayer(massMarksLayer);
|
|
@@ -476,78 +441,32 @@ var addMassMarksLayer = (getImgUrlFn) => {
|
|
|
476
441
|
};
|
|
477
442
|
};
|
|
478
443
|
var updateMarksLayersByStatus = (checkedStatusList = []) => {
|
|
479
|
-
|
|
444
|
+
const hideStyle = new Style({});
|
|
445
|
+
const tempList = [];
|
|
446
|
+
const targetLayers = instance.getAllLayers().filter((layer) => layer.get("_isMassMarksLayer"));
|
|
447
|
+
targetLayers.forEach((layer) => {
|
|
448
|
+
const features = layer.getSource().getFeatures();
|
|
449
|
+
features.forEach((feature) => {
|
|
450
|
+
const data = feature.getProperties();
|
|
451
|
+
if (!checkedStatusList.includes(data.status)) {
|
|
452
|
+
feature.setStyle(hideStyle);
|
|
453
|
+
} else {
|
|
454
|
+
tempList.push(data);
|
|
455
|
+
feature.setStyle(data.unActiveStyle);
|
|
456
|
+
}
|
|
457
|
+
});
|
|
458
|
+
});
|
|
459
|
+
return tempList;
|
|
480
460
|
};
|
|
481
461
|
|
|
482
462
|
// src/create-map.ts
|
|
483
463
|
import { defaults as interactionDefaults } from "ol/interaction";
|
|
484
|
-
var instance;
|
|
485
|
-
var mapCenter = [119.71512016971076, 30.122490541963536];
|
|
486
|
-
var createMapInstance = (config = {}) => {
|
|
487
|
-
const innerConfig = Object.assign(
|
|
488
|
-
{
|
|
489
|
-
zoom: 9.4,
|
|
490
|
-
maxZoom: 18,
|
|
491
|
-
minZoom: 9.4,
|
|
492
|
-
center: mapCenter,
|
|
493
|
-
baseLayer: "vec-layer",
|
|
494
|
-
projection: "EPSG:4326",
|
|
495
|
-
layers: [createBaseLayer()],
|
|
496
|
-
smoothExtentConstraint: false,
|
|
497
|
-
tk: "c77eddc667c5bed016fded560baf93e7"
|
|
498
|
-
},
|
|
499
|
-
config || {}
|
|
500
|
-
);
|
|
501
|
-
if (instance) {
|
|
502
|
-
return instance;
|
|
503
|
-
}
|
|
504
|
-
instance = new Map2({
|
|
505
|
-
view: new View(innerConfig),
|
|
506
|
-
controls: defaults({
|
|
507
|
-
zoom: false,
|
|
508
|
-
rotate: false,
|
|
509
|
-
attribution: false
|
|
510
|
-
}),
|
|
511
|
-
interactions: interactionDefaults({
|
|
512
|
-
doubleClickZoom: false
|
|
513
|
-
}),
|
|
514
|
-
layers: innerConfig.layers || [createBaseLayer()]
|
|
515
|
-
});
|
|
516
|
-
mapCenter = innerConfig.center || mapCenter;
|
|
517
|
-
instance.activeBaseLayer = innerConfig.baseLayer;
|
|
518
|
-
instance.getLayerByName = getLayerByName;
|
|
519
|
-
instance.removeLayerByName = removeLayerByName;
|
|
520
|
-
instance.changeLayersByNames = changeLayersByNames;
|
|
521
|
-
instance.on("pointermove", (evt) => {
|
|
522
|
-
instance.getTargetElement().style.cursor = instance.hasFeatureAtPixel(
|
|
523
|
-
evt.pixel
|
|
524
|
-
) ? "pointer" : "";
|
|
525
|
-
});
|
|
526
|
-
return instance;
|
|
527
|
-
};
|
|
528
|
-
var disposeMap = () => {
|
|
529
|
-
const layers = instance.getAllLayers();
|
|
530
|
-
layers.forEach((layer) => {
|
|
531
|
-
instance.removeLayer(layer);
|
|
532
|
-
});
|
|
533
|
-
instance.setTarget("");
|
|
534
|
-
instance = void 0;
|
|
535
|
-
};
|
|
536
|
-
var getMapInstance = () => instance;
|
|
537
|
-
var resetZoomAndCenter = (center = mapCenter) => {
|
|
538
|
-
const view = instance.getView();
|
|
539
|
-
view.animate({
|
|
540
|
-
zoom: 9.4,
|
|
541
|
-
center,
|
|
542
|
-
duration: 1e3
|
|
543
|
-
});
|
|
544
|
-
};
|
|
545
|
-
var resetMap = (config = { center: mapCenter, isClearAll: true }) => {
|
|
546
|
-
removeAllLayers(config.isClearAll);
|
|
547
|
-
resetZoomAndCenter(config.center || mapCenter);
|
|
548
|
-
};
|
|
549
464
|
|
|
550
465
|
// src/base-layer.ts
|
|
466
|
+
import { XYZ } from "ol/source";
|
|
467
|
+
import { WMTS } from "ol/source";
|
|
468
|
+
import { TileGrid } from "ol/tilegrid";
|
|
469
|
+
import { Tile } from "ol/layer";
|
|
551
470
|
import WMTSTileGrid from "ol/tilegrid/WMTS";
|
|
552
471
|
var createBaseLayer = (isDark = true) => {
|
|
553
472
|
return new Tile({
|
|
@@ -605,7 +524,7 @@ var createMapWorldLayer = (layerName, tk = "c77eddc667c5bed016fded560baf93e7") =
|
|
|
605
524
|
return new Tile({
|
|
606
525
|
cacheSize: 20240,
|
|
607
526
|
zIndex: -1,
|
|
608
|
-
source: new
|
|
527
|
+
source: new WMTS({
|
|
609
528
|
crossOrigin: "anonymous",
|
|
610
529
|
projection: "EPSG:4326",
|
|
611
530
|
wrapX: true,
|
|
@@ -680,8 +599,144 @@ var changeLayersByNames = (activeNames, allLayerNames) => {
|
|
|
680
599
|
layer.setVisible(activeNames == null ? void 0 : activeNames.includes(layer.getClassName()));
|
|
681
600
|
});
|
|
682
601
|
};
|
|
602
|
+
|
|
603
|
+
// src/create-map.ts
|
|
604
|
+
var instance;
|
|
605
|
+
var mapCenter = [119.71512016971076, 30.122490541963536];
|
|
606
|
+
var createMapInstance = (config = {}) => {
|
|
607
|
+
const innerConfig = Object.assign(
|
|
608
|
+
{
|
|
609
|
+
zoom: 9.4,
|
|
610
|
+
maxZoom: 18,
|
|
611
|
+
minZoom: 9.4,
|
|
612
|
+
center: mapCenter,
|
|
613
|
+
baseLayer: "vec-layer",
|
|
614
|
+
projection: "EPSG:4326",
|
|
615
|
+
layers: [createBaseLayer()],
|
|
616
|
+
smoothExtentConstraint: false,
|
|
617
|
+
tk: "c77eddc667c5bed016fded560baf93e7"
|
|
618
|
+
},
|
|
619
|
+
config || {}
|
|
620
|
+
);
|
|
621
|
+
if (instance) {
|
|
622
|
+
return instance;
|
|
623
|
+
}
|
|
624
|
+
instance = new Map2({
|
|
625
|
+
view: new View(innerConfig),
|
|
626
|
+
controls: defaults({
|
|
627
|
+
zoom: false,
|
|
628
|
+
rotate: false,
|
|
629
|
+
attribution: false
|
|
630
|
+
}),
|
|
631
|
+
interactions: interactionDefaults({
|
|
632
|
+
doubleClickZoom: false
|
|
633
|
+
}),
|
|
634
|
+
layers: innerConfig.layers || [createBaseLayer()]
|
|
635
|
+
});
|
|
636
|
+
mapCenter = innerConfig.center || mapCenter;
|
|
637
|
+
instance.activeBaseLayer = innerConfig.baseLayer;
|
|
638
|
+
instance.getLayerByName = getLayerByName;
|
|
639
|
+
instance.removeLayerByName = removeLayerByName;
|
|
640
|
+
instance.changeLayersByNames = changeLayersByNames;
|
|
641
|
+
instance.on("pointermove", (evt) => {
|
|
642
|
+
instance.getTargetElement().style.cursor = instance.hasFeatureAtPixel(
|
|
643
|
+
evt.pixel
|
|
644
|
+
) ? "pointer" : "";
|
|
645
|
+
});
|
|
646
|
+
return instance;
|
|
647
|
+
};
|
|
648
|
+
var disposeMap = () => {
|
|
649
|
+
const layers = instance.getAllLayers();
|
|
650
|
+
layers.forEach((layer) => {
|
|
651
|
+
instance.removeLayer(layer);
|
|
652
|
+
});
|
|
653
|
+
instance.setTarget("");
|
|
654
|
+
instance = void 0;
|
|
655
|
+
};
|
|
656
|
+
var getMapInstance = () => instance;
|
|
657
|
+
var resetZoomAndCenter = (center = mapCenter) => {
|
|
658
|
+
const view = instance.getView();
|
|
659
|
+
view.animate({
|
|
660
|
+
zoom: 9.4,
|
|
661
|
+
center,
|
|
662
|
+
duration: 1e3
|
|
663
|
+
});
|
|
664
|
+
};
|
|
665
|
+
var resetMap = (config = { center: mapCenter, isClearAll: true }) => {
|
|
666
|
+
removeAllLayers(config.isClearAll);
|
|
667
|
+
resetZoomAndCenter(config.center || mapCenter);
|
|
668
|
+
};
|
|
669
|
+
|
|
670
|
+
// src/helper.ts
|
|
671
|
+
var hexToRgba = (hex, alpha) => {
|
|
672
|
+
if (hex.startsWith("#")) {
|
|
673
|
+
let tempHex = hex.replace("#", "");
|
|
674
|
+
if (tempHex.length === 3) {
|
|
675
|
+
tempHex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
|
|
676
|
+
}
|
|
677
|
+
const r = parseInt(tempHex.substring(0, 2), 16);
|
|
678
|
+
const g = parseInt(tempHex.substring(2, 4), 16);
|
|
679
|
+
const b = parseInt(tempHex.substring(4, 6), 16);
|
|
680
|
+
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
681
|
+
} else {
|
|
682
|
+
return hex;
|
|
683
|
+
}
|
|
684
|
+
};
|
|
685
|
+
var getLayersDataList = () => {
|
|
686
|
+
var _a;
|
|
687
|
+
return ((_a = instance) == null ? void 0 : _a.getAllLayers().map((layer) => layer.get("_dataList") || []).flat(2)) || [];
|
|
688
|
+
};
|
|
689
|
+
|
|
690
|
+
// src/ogc-utils.ts
|
|
691
|
+
import { WMTS as WMTS2 } from "ol/source";
|
|
692
|
+
import TileLayer from "ol/layer/Tile";
|
|
693
|
+
import { WMTSCapabilities } from "ol/format";
|
|
694
|
+
import { optionsFromCapabilities } from "ol/source/WMTS";
|
|
695
|
+
var parser = new WMTSCapabilities();
|
|
696
|
+
var capabilitiesMap = /* @__PURE__ */ new Map();
|
|
697
|
+
var getCapabilities = (url) => {
|
|
698
|
+
return new Promise((resolve) => {
|
|
699
|
+
const capabilities = capabilitiesMap.get(url);
|
|
700
|
+
if (capabilities) {
|
|
701
|
+
resolve(capabilities);
|
|
702
|
+
} else {
|
|
703
|
+
fetch(url).then((data) => data.text()).then((text) => {
|
|
704
|
+
const capabilities2 = parser.read(text);
|
|
705
|
+
capabilitiesMap.set(url, capabilities2);
|
|
706
|
+
resolve(capabilities2);
|
|
707
|
+
});
|
|
708
|
+
}
|
|
709
|
+
});
|
|
710
|
+
};
|
|
711
|
+
var createWmtsLayer = (serverUrl) => (config) => __async(void 0, null, function* () {
|
|
712
|
+
const { style, format, version, layerName, matrixSet } = config;
|
|
713
|
+
const [workspace, datastore] = layerName.split(":");
|
|
714
|
+
const capabilitiesUrl = `${serverUrl}/${workspace}/${datastore}/gwc/service/wmts?request=GetCapabilities`;
|
|
715
|
+
return new Promise((resolve, reject) => {
|
|
716
|
+
getCapabilities(capabilitiesUrl).then((data) => {
|
|
717
|
+
const options = optionsFromCapabilities(data, {
|
|
718
|
+
Style: style || "",
|
|
719
|
+
layer: datastore,
|
|
720
|
+
version: version || "1.1.0",
|
|
721
|
+
format: format || "image/png",
|
|
722
|
+
matrixSet: matrixSet || "EPSG:4326"
|
|
723
|
+
});
|
|
724
|
+
if (options) {
|
|
725
|
+
resolve(
|
|
726
|
+
new TileLayer({
|
|
727
|
+
zIndex: 3,
|
|
728
|
+
className: layerName,
|
|
729
|
+
source: new WMTS2(options)
|
|
730
|
+
})
|
|
731
|
+
);
|
|
732
|
+
} else {
|
|
733
|
+
reject(new Error("Unable to create TileLayer"));
|
|
734
|
+
}
|
|
735
|
+
});
|
|
736
|
+
});
|
|
737
|
+
});
|
|
683
738
|
export {
|
|
684
|
-
|
|
739
|
+
activeFeatureByUid,
|
|
685
740
|
addMassMarksLayer,
|
|
686
741
|
buildMassMarksStyles,
|
|
687
742
|
createAnimationMarker,
|
|
@@ -696,10 +751,11 @@ export {
|
|
|
696
751
|
createWmtsLayer,
|
|
697
752
|
disposeMap,
|
|
698
753
|
emitter_default as emitter,
|
|
754
|
+
getLayersDataList,
|
|
699
755
|
getMapInstance,
|
|
700
756
|
instance,
|
|
701
757
|
removeAllLayers,
|
|
702
|
-
|
|
758
|
+
resetActiveFeature,
|
|
703
759
|
resetActiveVector,
|
|
704
760
|
resetMap,
|
|
705
761
|
resetZoomAndCenter,
|