zhihao-ui 1.3.22 → 1.3.23
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/es/{Map-B9MkYv-r.js → Map-CRPS0mWA.js} +562 -569
- package/dist/es/index.js +1 -1
- package/dist/index.css +1 -1
- package/dist/umd/index.css +1 -1
- package/dist/umd/index.umd.cjs +1 -1
- package/package.json +1 -1
|
@@ -6,14 +6,14 @@ const _hoisted_1$2 = { id: "scale-line-container" }, _sfc_main$2 = /* @__PURE__
|
|
|
6
6
|
__name: "scaleLine",
|
|
7
7
|
setup(e, { expose: l }) {
|
|
8
8
|
return l({
|
|
9
|
-
setScaleLine: (s,
|
|
10
|
-
|
|
9
|
+
setScaleLine: (s, i) => {
|
|
10
|
+
i || (i = "metric");
|
|
11
11
|
const t = new ScaleLine$1({
|
|
12
|
-
units:
|
|
13
|
-
}),
|
|
14
|
-
|
|
12
|
+
units: i
|
|
13
|
+
}), f = document.getElementById("scale-line-container");
|
|
14
|
+
f && (t.setTarget(f), s.addControl(t));
|
|
15
15
|
}
|
|
16
|
-
}), (s,
|
|
16
|
+
}), (s, i) => (openBlock(), createElementBlock("div", _hoisted_1$2));
|
|
17
17
|
}
|
|
18
18
|
}), ScaleLine = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-2bc5dee8"]]), _hoisted_1$1 = { class: "zoom" }, _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
19
19
|
__name: "zoomControl",
|
|
@@ -28,17 +28,17 @@ const _hoisted_1$2 = { id: "scale-line-container" }, _sfc_main$2 = /* @__PURE__
|
|
|
28
28
|
console.log("props", l);
|
|
29
29
|
const n = () => {
|
|
30
30
|
console.log("props");
|
|
31
|
-
const { setZoom:
|
|
32
|
-
if (!
|
|
31
|
+
const { setZoom: i, getZoom: t, getInstall: f } = l.mapInstance.methods;
|
|
32
|
+
if (!f()) return;
|
|
33
33
|
const o = t();
|
|
34
|
-
o &&
|
|
34
|
+
o && i(o + 1);
|
|
35
35
|
}, s = () => {
|
|
36
|
-
const { setZoom:
|
|
37
|
-
if (!
|
|
36
|
+
const { setZoom: i, getZoom: t, getInstall: f } = l.mapInstance.methods;
|
|
37
|
+
if (!f()) return;
|
|
38
38
|
const o = t();
|
|
39
|
-
o &&
|
|
39
|
+
o && i(o - 1);
|
|
40
40
|
};
|
|
41
|
-
return (
|
|
41
|
+
return (i, t) => (openBlock(), createElementBlock("div", _hoisted_1$1, [
|
|
42
42
|
createElementVNode("div", {
|
|
43
43
|
class: "button big-button",
|
|
44
44
|
onClick: n
|
|
@@ -73,33 +73,33 @@ const _hoisted_1$2 = { id: "scale-line-container" }, _sfc_main$2 = /* @__PURE__
|
|
|
73
73
|
var BASE_MAP_LINK = ((e) => (e.vectorTile = `https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIAN_DI_TU_KEY}`, e.vectorTileMark = `https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIAN_DI_TU_KEY}`, e.satelliteImgTile = `https://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIAN_DI_TU_KEY}`, e.satelliteImgTileMark = `https://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIAN_DI_TU_KEY}`, e.greenTile = `${CDN_URL}/map/tile/{z}/{x}/{y}.png`, e))(BASE_MAP_LINK || {}), LENGTH_UNIT = /* @__PURE__ */ ((e) => (e[e.M = 1] = "M", e[e.KM = 2] = "KM", e[e.NM = 3] = "NM", e))(LENGTH_UNIT || {});
|
|
74
74
|
function useMapInitializer() {
|
|
75
75
|
const e = ref(), l = () => e.value, n = () => l().getView(), s = () => {
|
|
76
|
-
var
|
|
77
|
-
return (
|
|
78
|
-
},
|
|
79
|
-
var
|
|
80
|
-
(
|
|
81
|
-
}, t = (
|
|
76
|
+
var m;
|
|
77
|
+
return (m = n()) == null ? void 0 : m.getZoom();
|
|
78
|
+
}, i = (m) => {
|
|
79
|
+
var F;
|
|
80
|
+
(F = n()) == null || F.setZoom(m);
|
|
81
|
+
}, t = (m, F) => {
|
|
82
82
|
var $;
|
|
83
|
-
($ = n()) == null || $.setCenter(fromLonLat([
|
|
84
|
-
},
|
|
85
|
-
var
|
|
86
|
-
const
|
|
87
|
-
return toLonLat(
|
|
88
|
-
},
|
|
89
|
-
var
|
|
90
|
-
return (
|
|
91
|
-
}, o = new Map$2(), r = (
|
|
92
|
-
|
|
83
|
+
($ = n()) == null || $.setCenter(fromLonLat([m, F]));
|
|
84
|
+
}, f = () => {
|
|
85
|
+
var F;
|
|
86
|
+
const m = (F = n()) == null ? void 0 : F.getCenter();
|
|
87
|
+
return toLonLat(m);
|
|
88
|
+
}, v = () => {
|
|
89
|
+
var m;
|
|
90
|
+
return (m = l()) == null ? void 0 : m.getSize();
|
|
91
|
+
}, o = new Map$2(), r = (m, F) => {
|
|
92
|
+
L(F);
|
|
93
93
|
const $ = {
|
|
94
|
-
zoom:
|
|
95
|
-
center: fromLonLat(
|
|
94
|
+
zoom: F.zoom,
|
|
95
|
+
center: fromLonLat(F.center),
|
|
96
96
|
minZoom: MAP_ZOOM.min,
|
|
97
97
|
maxZoom: MAP_ZOOM.max,
|
|
98
98
|
constrainResolution: !0,
|
|
99
99
|
enableRotation: !1,
|
|
100
100
|
multiWorld: !0
|
|
101
|
-
},
|
|
102
|
-
target:
|
|
101
|
+
}, y = new Map$2({
|
|
102
|
+
target: m,
|
|
103
103
|
controls: defaults({
|
|
104
104
|
zoom: !1
|
|
105
105
|
}),
|
|
@@ -111,35 +111,35 @@ function useMapInitializer() {
|
|
|
111
111
|
],
|
|
112
112
|
view: new View($)
|
|
113
113
|
});
|
|
114
|
-
e.value =
|
|
115
|
-
},
|
|
114
|
+
e.value = y;
|
|
115
|
+
}, L = (m) => {
|
|
116
116
|
o.set("vectorTile", new TileLayer({
|
|
117
117
|
source: new XYZ({ url: BASE_MAP_LINK.vectorTile }),
|
|
118
|
-
visible:
|
|
118
|
+
visible: m.layerType === "vector",
|
|
119
119
|
zIndex: 0,
|
|
120
120
|
preload: 1,
|
|
121
121
|
className: "vector"
|
|
122
122
|
})), o.set("vectorTileMark", new TileLayer({
|
|
123
123
|
source: new XYZ({ url: BASE_MAP_LINK.vectorTileMark }),
|
|
124
|
-
visible:
|
|
124
|
+
visible: m.layerType === "vector",
|
|
125
125
|
zIndex: 1,
|
|
126
126
|
preload: 1,
|
|
127
127
|
className: "vector"
|
|
128
128
|
})), o.set("satelliteImgTile", new TileLayer({
|
|
129
129
|
source: new XYZ({ url: BASE_MAP_LINK.satelliteImgTile }),
|
|
130
|
-
visible:
|
|
130
|
+
visible: m.layerType === "satellite",
|
|
131
131
|
zIndex: 0,
|
|
132
132
|
preload: 1,
|
|
133
133
|
className: "satellite"
|
|
134
134
|
})), o.set("satelliteImgTileMark", new TileLayer({
|
|
135
135
|
source: new XYZ({ url: BASE_MAP_LINK.satelliteImgTileMark }),
|
|
136
|
-
visible:
|
|
136
|
+
visible: m.layerType === "satellite",
|
|
137
137
|
zIndex: 1,
|
|
138
138
|
preload: 1,
|
|
139
139
|
className: "satellite"
|
|
140
140
|
})), o.set("greenMark", new TileLayer({
|
|
141
141
|
source: new XYZ({ url: BASE_MAP_LINK.greenTile }),
|
|
142
|
-
visible:
|
|
142
|
+
visible: m.showGreenLayer,
|
|
143
143
|
zIndex: 2,
|
|
144
144
|
className: "greenTile"
|
|
145
145
|
}));
|
|
@@ -148,24 +148,24 @@ function useMapInitializer() {
|
|
|
148
148
|
getInstall: l,
|
|
149
149
|
getView: n,
|
|
150
150
|
getZoom: s,
|
|
151
|
-
setZoom:
|
|
151
|
+
setZoom: i,
|
|
152
152
|
setCenter: t,
|
|
153
|
-
getCenter:
|
|
154
|
-
getSize:
|
|
153
|
+
getCenter: f,
|
|
154
|
+
getSize: v,
|
|
155
155
|
initMap: r,
|
|
156
|
-
setBaseLayerMap:
|
|
156
|
+
setBaseLayerMap: L
|
|
157
157
|
};
|
|
158
158
|
}
|
|
159
159
|
const convertSixHundredThousandToLatLng = function(e, l) {
|
|
160
160
|
const n = Number(l) / 6e5;
|
|
161
161
|
return [Number(e) / 6e5, n];
|
|
162
162
|
}, calculateCirclePoints = (e, l) => {
|
|
163
|
-
const n = fromLonLat(e), s = l * 1e3,
|
|
163
|
+
const n = fromLonLat(e), s = l * 1e3, i = [
|
|
164
164
|
n[0] - s,
|
|
165
165
|
n[1] - s,
|
|
166
166
|
n[0] + s,
|
|
167
167
|
n[1] + s
|
|
168
|
-
], t = transformExtent(
|
|
168
|
+
], t = transformExtent(i, projection.mercator, projection.data);
|
|
169
169
|
return {
|
|
170
170
|
leftTopPoint: { lng: t[0], lat: t[3] },
|
|
171
171
|
rightTopPoint: { lng: t[2], lat: t[3] },
|
|
@@ -174,19 +174,19 @@ const convertSixHundredThousandToLatLng = function(e, l) {
|
|
|
174
174
|
};
|
|
175
175
|
}, formatLength = function(e, l) {
|
|
176
176
|
const s = getLength(e);
|
|
177
|
-
let
|
|
177
|
+
let i = "";
|
|
178
178
|
switch (console.log(l, LENGTH_UNIT), l) {
|
|
179
179
|
case LENGTH_UNIT.M:
|
|
180
|
-
|
|
180
|
+
i = Math.round(s * 100) / 100 + " m";
|
|
181
181
|
break;
|
|
182
182
|
case LENGTH_UNIT.KM:
|
|
183
|
-
|
|
183
|
+
i = Math.round(s / 1e3 * 100) / 100 + " km";
|
|
184
184
|
break;
|
|
185
185
|
case LENGTH_UNIT.NM:
|
|
186
|
-
|
|
186
|
+
i = (Math.round(s / 1e3 * 100) / 100 / 1.852).toFixed(2) + " nm";
|
|
187
187
|
break;
|
|
188
188
|
}
|
|
189
|
-
return
|
|
189
|
+
return i;
|
|
190
190
|
};
|
|
191
191
|
function lonLatToMercator(e) {
|
|
192
192
|
const l = e[0] * equatorialCircumference / 180;
|
|
@@ -209,22 +209,22 @@ const getIconStyle = (e) => {
|
|
|
209
209
|
});
|
|
210
210
|
}, mercatorToLonLat = (e, l = "lonlat") => {
|
|
211
211
|
const n = { lon: 0, lat: 0 }, s = e[0] / equatorialCircumference * 180;
|
|
212
|
-
let
|
|
213
|
-
return
|
|
212
|
+
let i = e[1] / equatorialCircumference * 180;
|
|
213
|
+
return i = 180 / Math.PI * (2 * Math.atan(Math.exp(i * Math.PI / 180)) - Math.PI / 2), n.lon = s, n.lat = i, l === "lonlat" ? n : [s, i];
|
|
214
214
|
}, formatMinutesToDDHHMM = (e) => {
|
|
215
|
-
const l = hooks.duration(e, "minutes"), n = Math.floor(l.asDays()), s = l.hours(),
|
|
216
|
-
let t = `${String(
|
|
215
|
+
const l = hooks.duration(e, "minutes"), n = Math.floor(l.asDays()), s = l.hours(), i = l.minutes();
|
|
216
|
+
let t = `${String(i).padStart(2, "0")}分`;
|
|
217
217
|
return s !== 0 && (t = `${String(s).padStart(2, "0")}时${t}`), n !== 0 && (t = `${String(n).padStart(2, "0")}天${t}`), t;
|
|
218
218
|
}, useCarTrackManager = (e, l) => {
|
|
219
219
|
let n = null;
|
|
220
|
-
const s = async (
|
|
221
|
-
if (!e || (console.log("vehicleInfo",
|
|
222
|
-
const
|
|
223
|
-
|
|
224
|
-
const
|
|
225
|
-
|
|
226
|
-
},
|
|
227
|
-
const
|
|
220
|
+
const s = async (L) => {
|
|
221
|
+
if (!e || (console.log("vehicleInfo", L), !(L != null && L.lon && (L != null && L.lat)))) return;
|
|
222
|
+
const m = Math.abs(Number(L.lon)) > 180 ? convertSixHundredThousandToLatLng(L.lon, L.lat) : [L.lon, L.lat];
|
|
223
|
+
i(L, fromLonLat(m));
|
|
224
|
+
const F = e == null ? void 0 : e.getView(), $ = new Point(m);
|
|
225
|
+
F.setCenter(transform($.getCoordinates(), projection.data, projection.mercator));
|
|
226
|
+
}, i = (L, m) => {
|
|
227
|
+
const F = `${CDN_URL}map/car-icon.gif`;
|
|
228
228
|
n || (n = new Overlay({
|
|
229
229
|
element: document.createElement("div"),
|
|
230
230
|
positioning: "center-center",
|
|
@@ -232,27 +232,27 @@ const getIconStyle = (e) => {
|
|
|
232
232
|
// 允许交互事件穿透
|
|
233
233
|
}), e.addOverlay(n));
|
|
234
234
|
const $ = n.getElement();
|
|
235
|
-
$.style.backgroundImage = `url(${
|
|
236
|
-
const
|
|
237
|
-
$.style.transform = `rotate(${
|
|
235
|
+
$.style.backgroundImage = `url(${F})`, $.style.width = "80px", $.style.height = "80px";
|
|
236
|
+
const y = (L == null ? void 0 : L.drc) || "";
|
|
237
|
+
$.style.transform = `rotate(${y}deg)`, $.style.backgroundSize = "cover", n == null || n.setPosition(m);
|
|
238
238
|
};
|
|
239
239
|
return {
|
|
240
240
|
location: s,
|
|
241
241
|
remove: () => {
|
|
242
|
-
const
|
|
243
|
-
|
|
242
|
+
const L = n == null ? void 0 : n.getElement();
|
|
243
|
+
L && (L.innerHTML = "");
|
|
244
244
|
},
|
|
245
|
-
renderTrack: (
|
|
246
|
-
l.render(
|
|
245
|
+
renderTrack: (L, m, F) => {
|
|
246
|
+
l.render(L, m, F, "truck", 1e3);
|
|
247
247
|
},
|
|
248
|
-
setCenter: (
|
|
249
|
-
l.setCenter(
|
|
248
|
+
setCenter: (L) => {
|
|
249
|
+
l.setCenter(L);
|
|
250
250
|
},
|
|
251
251
|
closeTrack: () => {
|
|
252
252
|
l.close();
|
|
253
253
|
},
|
|
254
|
-
playTrack: (
|
|
255
|
-
l.play(
|
|
254
|
+
playTrack: (L, m) => {
|
|
255
|
+
l.play(L, m);
|
|
256
256
|
}
|
|
257
257
|
};
|
|
258
258
|
};
|
|
@@ -260,30 +260,30 @@ var SHIP_SAIL_STATUS = /* @__PURE__ */ ((e) => (e[e.发动机使用中 = 0] = "
|
|
|
260
260
|
const useTrackManager = (e) => {
|
|
261
261
|
const l = /* @__PURE__ */ new Map(), n = {};
|
|
262
262
|
let s = null;
|
|
263
|
-
const
|
|
263
|
+
const i = "--";
|
|
264
264
|
let t = null;
|
|
265
|
-
const
|
|
266
|
-
element:
|
|
265
|
+
const f = document.createElement("div"), v = new Overlay({
|
|
266
|
+
element: f,
|
|
267
267
|
positioning: "top-left",
|
|
268
268
|
stopEvent: !1,
|
|
269
269
|
className: "track-label-popup"
|
|
270
270
|
});
|
|
271
|
-
let o, r,
|
|
272
|
-
const H = 5, B = [], W = (
|
|
271
|
+
let o, r, L, m, F, $ = !1, y = Date.now(), w, k = 0, p = null, C = 20, A = !1;
|
|
272
|
+
const H = 5, B = [], W = (a) => {
|
|
273
273
|
var u;
|
|
274
|
-
for (B.unshift(
|
|
274
|
+
for (B.unshift(a); B.length > H; ) {
|
|
275
275
|
const g = B.pop(), b = l.get(g);
|
|
276
276
|
b && ((u = b.getSource()) == null || u.clear(), e == null || e.removeLayer(b), l.delete(g), delete n[g]);
|
|
277
277
|
}
|
|
278
278
|
};
|
|
279
279
|
let d = "";
|
|
280
|
-
const
|
|
280
|
+
const x = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"], c = debounce(() => {
|
|
281
281
|
if (s && n[s] && l.get(s).getVisible() && A) {
|
|
282
282
|
console.log("reRenderTrackLine------------");
|
|
283
|
-
const
|
|
284
|
-
|
|
283
|
+
const a = cloneDeep(M(s, n[s]));
|
|
284
|
+
ce(s, a);
|
|
285
285
|
}
|
|
286
|
-
}, 300), M = (
|
|
286
|
+
}, 300), M = (a, u) => {
|
|
287
287
|
let g = [];
|
|
288
288
|
const b = Math.max(1, Math.floor(u.length / C));
|
|
289
289
|
return g = u.filter((T, _) => _ % b === 0).map((T, _) => {
|
|
@@ -291,107 +291,107 @@ const useTrackManager = (e) => {
|
|
|
291
291
|
const [D, z] = convertSixHundredThousandToLatLng(T.lon, T.lat);
|
|
292
292
|
T.lon = D, T.lat = z;
|
|
293
293
|
}
|
|
294
|
-
return T.center = [T.lon, T.lat], T.centerPoint = lonLatToMercator(T.center), T.time = hooks(T.createdAt).format("YYYY-MM-DD HH:mm:ss"), T.id =
|
|
294
|
+
return T.center = [T.lon, T.lat], T.centerPoint = lonLatToMercator(T.center), T.time = hooks(T.createdAt).format("YYYY-MM-DD HH:mm:ss"), T.id = a, T.index = _, T;
|
|
295
295
|
}), g;
|
|
296
|
-
},
|
|
297
|
-
if (!e || (u = u == null ? void 0 : u.reverse(),
|
|
296
|
+
}, N = async (a, u, g, b = "ship", E = 200) => {
|
|
297
|
+
if (!e || (u = u == null ? void 0 : u.reverse(), v && b === "ship" && (e != null && e.getOverlays().getArray().includes(v) || e.addOverlay(v)), (u == null ? void 0 : u.length) < 2))
|
|
298
298
|
return;
|
|
299
|
-
W(
|
|
300
|
-
const T = Object.keys(n).findIndex((_) => _ ===
|
|
301
|
-
d = g ||
|
|
302
|
-
}, V = (
|
|
299
|
+
W(a), s = a, n[a] = u, C = E;
|
|
300
|
+
const T = Object.keys(n).findIndex((_) => _ === a) || 0;
|
|
301
|
+
d = g || x[T > 10 ? 10 : T], A = !0, await R(), await se(s);
|
|
302
|
+
}, V = (a) => {
|
|
303
303
|
const u = new VectorSource();
|
|
304
304
|
return new VectorLayer({
|
|
305
305
|
source: u,
|
|
306
306
|
visible: !1,
|
|
307
307
|
// 默认隐藏
|
|
308
|
-
className: `track-layer-${
|
|
308
|
+
className: `track-layer-${a}`,
|
|
309
309
|
renderBuffer: 1024
|
|
310
310
|
// 增大渲染缓冲区
|
|
311
311
|
});
|
|
312
|
-
}, O = (
|
|
312
|
+
}, O = (a) => {
|
|
313
313
|
l.forEach((u, g) => {
|
|
314
314
|
var E;
|
|
315
|
-
const b = g ===
|
|
315
|
+
const b = g === a;
|
|
316
316
|
u.getVisible() !== b && (u.setVisible(b), e.getLayers().getArray().includes(u) || e.addLayer(u), b || (E = u.getSource()) == null || E.clear());
|
|
317
|
-
}), s =
|
|
317
|
+
}), s = a;
|
|
318
318
|
}, R = async () => {
|
|
319
|
-
const
|
|
320
|
-
if (!l.has(
|
|
321
|
-
const T = V(
|
|
322
|
-
l.set(
|
|
319
|
+
const a = s;
|
|
320
|
+
if (!l.has(a)) {
|
|
321
|
+
const T = V(a);
|
|
322
|
+
l.set(a, T);
|
|
323
323
|
}
|
|
324
|
-
await O(
|
|
325
|
-
const u = d || "", g = n[
|
|
324
|
+
await O(a);
|
|
325
|
+
const u = d || "", g = n[a] || [];
|
|
326
326
|
if (!(g && g.length > 1)) return [];
|
|
327
327
|
let b = [];
|
|
328
|
-
b = M(
|
|
328
|
+
b = M(a, g);
|
|
329
329
|
const E = b.map((T) => T.centerPoint);
|
|
330
|
-
b.length >= 2 && await P(
|
|
331
|
-
}, P = (
|
|
332
|
-
const b = new LineString(u), E = l.get(
|
|
330
|
+
b.length >= 2 && await P(a, E, u);
|
|
331
|
+
}, P = (a, u, g) => {
|
|
332
|
+
const b = new LineString(u), E = l.get(a).getSource(), T = E.getFeatureById(a);
|
|
333
333
|
if (T)
|
|
334
|
-
T.setGeometry(b), T.setId(
|
|
334
|
+
T.setGeometry(b), T.setId(a), T.setStyle(Z(g)), p = T;
|
|
335
335
|
else {
|
|
336
336
|
const _ = new Feature({ geometry: b });
|
|
337
|
-
_.setId(
|
|
337
|
+
_.setId(a), _.set("type", "line"), _.setStyle(Z(g)), E.addFeature(_), p = _;
|
|
338
338
|
}
|
|
339
|
-
return
|
|
340
|
-
}, Z = (
|
|
339
|
+
return p;
|
|
340
|
+
}, Z = (a) => new Style({
|
|
341
341
|
stroke: new Stroke({
|
|
342
|
-
color:
|
|
342
|
+
color: a,
|
|
343
343
|
width: 2
|
|
344
344
|
})
|
|
345
|
-
}), K = (
|
|
346
|
-
const b =
|
|
347
|
-
if (
|
|
345
|
+
}), K = (a, u, g) => {
|
|
346
|
+
const b = a == null ? void 0 : a.get("trackId");
|
|
347
|
+
if (a && b && u === "hover") {
|
|
348
348
|
e.getTargetElement().style.cursor = b ? "pointer" : "";
|
|
349
|
-
const E =
|
|
350
|
-
_ && (
|
|
349
|
+
const E = a.get("data"), T = Q(E), _ = g == null ? void 0 : g.coordinate;
|
|
350
|
+
_ && (f.querySelector(".popup-content"), f.innerHTML = T, v == null || v.setPosition(_));
|
|
351
351
|
} else
|
|
352
|
-
|
|
353
|
-
}, Q = (
|
|
354
|
-
if (!(
|
|
352
|
+
v && v.setPosition(void 0);
|
|
353
|
+
}, Q = (a) => {
|
|
354
|
+
if (!(a != null && a.time)) return;
|
|
355
355
|
let u = "";
|
|
356
|
-
return
|
|
356
|
+
return a != null && a.stayTime && (u = `
|
|
357
357
|
<div class="item w-100">
|
|
358
358
|
<div class="item-label">停泊时间约</div>
|
|
359
|
-
<div class="item-item">${formatMinutesToDDHHMM(Number(
|
|
359
|
+
<div class="item-item">${formatMinutesToDDHHMM(Number(a.stayTime))}</div>
|
|
360
360
|
</div>
|
|
361
361
|
`), `
|
|
362
362
|
<div class="track-point-popup">
|
|
363
363
|
<div class="item">
|
|
364
364
|
<div class="item-label">状态</div>
|
|
365
|
-
<div class="item-item">${
|
|
365
|
+
<div class="item-item">${a != null && a.sailStatus ? SHIP_SAIL_STATUS[a.sailStatus] : i}</div>
|
|
366
366
|
</div>
|
|
367
367
|
<div class="item">
|
|
368
368
|
<div class="item-label">航速</div>
|
|
369
|
-
<div class="item-item">${
|
|
369
|
+
<div class="item-item">${a.speed || i}</div>
|
|
370
370
|
</div>
|
|
371
371
|
<div class="item">
|
|
372
372
|
<div class="item-label">艏向</div>
|
|
373
|
-
<div class="item-item">${
|
|
373
|
+
<div class="item-item">${a.hdg || i}</div>
|
|
374
374
|
</div>
|
|
375
375
|
<div class="item">
|
|
376
376
|
<div class="item-label">航向</div>
|
|
377
|
-
<div class="item-item">${
|
|
377
|
+
<div class="item-item">${a.cog || i}</div>
|
|
378
378
|
</div>
|
|
379
379
|
<div class="item">
|
|
380
380
|
<div class="item-label">经度</div>
|
|
381
|
-
<div class="item-item">${
|
|
381
|
+
<div class="item-item">${a.lon || i}</div>
|
|
382
382
|
</div>
|
|
383
383
|
<div class="item">
|
|
384
384
|
<div class="item-label">纬度</div>
|
|
385
|
-
<div class="item-item">${
|
|
385
|
+
<div class="item-item">${a.lat || i}</div>
|
|
386
386
|
</div>
|
|
387
387
|
<div class="item w-100">
|
|
388
388
|
<div class="item-label">时间</div>
|
|
389
|
-
<div class="item-item">${
|
|
389
|
+
<div class="item-item">${a.time}</div>
|
|
390
390
|
</div>
|
|
391
391
|
${u ?? u}
|
|
392
392
|
</div>`;
|
|
393
|
-
}, U = (
|
|
394
|
-
const g =
|
|
393
|
+
}, U = (a) => {
|
|
394
|
+
const g = a.map((D) => {
|
|
395
395
|
const z = e.getPixelFromCoordinate(fromLonLat(D.center));
|
|
396
396
|
return {
|
|
397
397
|
...D,
|
|
@@ -438,9 +438,9 @@ const useTrackManager = (e) => {
|
|
|
438
438
|
distance: D.distance
|
|
439
439
|
}));
|
|
440
440
|
};
|
|
441
|
-
function J(
|
|
442
|
-
for (let g = 1; g <
|
|
443
|
-
const b =
|
|
441
|
+
function J(a, u) {
|
|
442
|
+
for (let g = 1; g < a.length; g++) {
|
|
443
|
+
const b = a[g - 1], E = a[g];
|
|
444
444
|
if (u >= b.distance && u <= E.distance) {
|
|
445
445
|
const T = (u - b.distance) / (E.distance - b.distance), _ = b.pixel[0] + T * (E.pixel[0] - b.pixel[0]), D = b.pixel[1] + T * (E.pixel[1] - b.pixel[1]), z = e == null ? void 0 : e.getCoordinateFromPixel([_, D]);
|
|
446
446
|
return {
|
|
@@ -456,24 +456,24 @@ const useTrackManager = (e) => {
|
|
|
456
456
|
}
|
|
457
457
|
return null;
|
|
458
458
|
}
|
|
459
|
-
const
|
|
460
|
-
await le(), await ge(
|
|
459
|
+
const ce = async (a, u) => {
|
|
460
|
+
await le(), await ge(a);
|
|
461
461
|
const g = U(u), b = g.map((T) => de(T));
|
|
462
|
-
l.get(
|
|
463
|
-
const _ = ue(
|
|
462
|
+
l.get(a).getSource().addFeatures(b), me(a, g, u, d), g.forEach((T) => {
|
|
463
|
+
const _ = ue(a, d, T);
|
|
464
464
|
e.addOverlay(_);
|
|
465
465
|
});
|
|
466
|
-
}, de = (
|
|
466
|
+
}, de = (a) => {
|
|
467
467
|
const u = new Feature({
|
|
468
|
-
geometry: new Point(
|
|
469
|
-
data:
|
|
468
|
+
geometry: new Point(a.centerPoint),
|
|
469
|
+
data: a
|
|
470
470
|
});
|
|
471
|
-
u.set("type", "track_point"), u.set("trackId",
|
|
471
|
+
u.set("type", "track_point"), u.set("trackId", a.id), u.set("data", a);
|
|
472
472
|
let g = [
|
|
473
|
-
...fe(
|
|
473
|
+
...fe(a, d)
|
|
474
474
|
];
|
|
475
|
-
return (
|
|
476
|
-
}, ue = (
|
|
475
|
+
return (a.index === 0 || a.index === n[a.id].length - 1) && (g = [...ve(a)], u.set("type", "track_begin")), a.state !== void 0 && a.state !== null && (g = [...ye(a)], u.set("type", "track_icon")), u.setStyle(g), u;
|
|
476
|
+
}, ue = (a, u, g) => {
|
|
477
477
|
const b = document.createElement("div");
|
|
478
478
|
b.className = "track-overlay-label", b.style.position = "relative", b.style.backgroundColor = "rgba(255,255,255,0.8)", b.style.border = `1px solid ${u}`, b.style.fontSize = "12px", b.innerHTML = `
|
|
479
479
|
<span>${g.time}</span>
|
|
@@ -496,18 +496,18 @@ const useTrackManager = (e) => {
|
|
|
496
496
|
stopEvent: !1,
|
|
497
497
|
className: "track-label-time-overlay"
|
|
498
498
|
});
|
|
499
|
-
return E.set("class", "track-label-overlay"), E.set("trackId",
|
|
499
|
+
return E.set("class", "track-label-overlay"), E.set("trackId", a), E;
|
|
500
500
|
}, le = () => {
|
|
501
|
-
const
|
|
501
|
+
const a = e == null ? void 0 : e.getOverlays().getArray(), u = a == null ? void 0 : a.filter((g) => g.get("class") === "track-label-overlay");
|
|
502
502
|
u && u.length > 0 && u.forEach((g) => {
|
|
503
503
|
g.setPosition(void 0), g.dispose();
|
|
504
504
|
});
|
|
505
|
-
}, ge = (
|
|
506
|
-
const u = l.get(
|
|
505
|
+
}, ge = (a) => {
|
|
506
|
+
const u = l.get(a).getSource();
|
|
507
507
|
u.forEachFeature((g) => {
|
|
508
508
|
g.get("type") !== "line" && u.removeFeature(g);
|
|
509
509
|
});
|
|
510
|
-
}, fe = (
|
|
510
|
+
}, fe = (a, u) => (`${a.time}`, [
|
|
511
511
|
new Style({
|
|
512
512
|
// 扩大交互热区
|
|
513
513
|
image: new CircleStyle({
|
|
@@ -524,20 +524,20 @@ const useTrackManager = (e) => {
|
|
|
524
524
|
})
|
|
525
525
|
})
|
|
526
526
|
// textStyle,
|
|
527
|
-
]), ye = (
|
|
527
|
+
]), ye = (a) => {
|
|
528
528
|
const u = "#E31818", g = "#1890FF", b = "", E = new Style({
|
|
529
529
|
text: new Text({
|
|
530
530
|
font: "Normal 22px map-iconfont",
|
|
531
531
|
text: getIconFont(b),
|
|
532
532
|
offsetY: -10,
|
|
533
533
|
fill: new Fill({
|
|
534
|
-
color: Number(
|
|
534
|
+
color: Number(a.state) === 0 ? u : Number(a.state) === 1 ? g : ""
|
|
535
535
|
})
|
|
536
536
|
}),
|
|
537
537
|
zIndex: 99
|
|
538
538
|
}), _ = getIconStyle(""), z = getIconStyle(""), Y = [];
|
|
539
|
-
return Number(
|
|
540
|
-
}, me = (
|
|
539
|
+
return Number(a.state) === 0 ? Y.push(_) : Number(a.state) === 1 && Y.push(z), Y.push(E), Y;
|
|
540
|
+
}, me = (a, u, g, b) => {
|
|
541
541
|
const E = u || [], T = u.length;
|
|
542
542
|
T || (E.push(g[0]), E.push(g[g.length - 1]));
|
|
543
543
|
const _ = [];
|
|
@@ -573,11 +573,11 @@ const useTrackManager = (e) => {
|
|
|
573
573
|
), _.push(G);
|
|
574
574
|
}
|
|
575
575
|
}
|
|
576
|
-
const D = l.get(
|
|
576
|
+
const D = l.get(a).getSource();
|
|
577
577
|
D == null || D.addFeatures(_);
|
|
578
|
-
}, se = (
|
|
578
|
+
}, se = (a) => {
|
|
579
579
|
var T, _;
|
|
580
|
-
const u = e.getView(), g = (T = l == null ? void 0 : l.get(
|
|
580
|
+
const u = e.getView(), g = (T = l == null ? void 0 : l.get(a)) == null ? void 0 : T.getSource(), b = p || (a ? g == null ? void 0 : g.getFeatureById(a) : null);
|
|
581
581
|
if (!b) return;
|
|
582
582
|
const E = (_ = b == null ? void 0 : b.getGeometry()) == null ? void 0 : _.getExtent();
|
|
583
583
|
if (E != null && E.length)
|
|
@@ -587,8 +587,8 @@ const useTrackManager = (e) => {
|
|
|
587
587
|
} catch (D) {
|
|
588
588
|
console.log(D);
|
|
589
589
|
}
|
|
590
|
-
}, ve = (
|
|
591
|
-
const u = "", E =
|
|
590
|
+
}, ve = (a) => {
|
|
591
|
+
const u = "", E = a.index === 0 ? "#fcdc3f" : "#ff0000";
|
|
592
592
|
return [new Style({
|
|
593
593
|
text: new Text({
|
|
594
594
|
font: "Normal 14px map-iconfont",
|
|
@@ -604,8 +604,8 @@ const useTrackManager = (e) => {
|
|
|
604
604
|
}), Object.keys(n).forEach((u) => {
|
|
605
605
|
l.delete(u), delete n[u];
|
|
606
606
|
}), A = !1, le();
|
|
607
|
-
}, we = (
|
|
608
|
-
const u = l.get(
|
|
607
|
+
}, we = (a) => {
|
|
608
|
+
const u = l.get(a || s);
|
|
609
609
|
u == null || u.setVisible(!1);
|
|
610
610
|
const g = e.getOverlays().getArray();
|
|
611
611
|
for (let b = 0; b < g.length; ) {
|
|
@@ -613,18 +613,18 @@ const useTrackManager = (e) => {
|
|
|
613
613
|
E.get("class") === "track-label-overlay" ? (E.setPosition(void 0), e.removeOverlay(E)) : b++;
|
|
614
614
|
}
|
|
615
615
|
I();
|
|
616
|
-
}, Le = (
|
|
616
|
+
}, Le = (a, u = LENGTH_UNIT.NM) => {
|
|
617
617
|
const g = {
|
|
618
|
-
id:
|
|
618
|
+
id: a,
|
|
619
619
|
length: "--"
|
|
620
|
-
}, E = (n[
|
|
620
|
+
}, E = (n[a] || []).map(
|
|
621
621
|
(_) => transform([_.lon, _.lat], projection.data, projection.mercator)
|
|
622
622
|
), T = new LineString(E);
|
|
623
623
|
return g.length = formatLength(T, u) || "--", g;
|
|
624
|
-
}, pe = (
|
|
625
|
-
xe(String(
|
|
626
|
-
}, xe = (
|
|
627
|
-
const g = n[String(
|
|
624
|
+
}, pe = (a, u) => {
|
|
625
|
+
xe(String(a), u);
|
|
626
|
+
}, xe = (a, u) => {
|
|
627
|
+
const g = n[String(a)], b = g == null ? void 0 : g.map((E) => [E.lon, E.lat]);
|
|
628
628
|
b && ke(b, u);
|
|
629
629
|
}, re = new Style({
|
|
630
630
|
text: new Text({
|
|
@@ -634,10 +634,10 @@ const useTrackManager = (e) => {
|
|
|
634
634
|
rotation: 0
|
|
635
635
|
// 初始旋转角度
|
|
636
636
|
})
|
|
637
|
-
}), be = (
|
|
637
|
+
}), be = (a, u) => {
|
|
638
638
|
var S, G;
|
|
639
|
-
const g = Number(50 * u), b = ((S =
|
|
640
|
-
if (k = (k + g * E / 1e6) % 2,
|
|
639
|
+
const g = Number(50 * u), b = ((S = a.frameState) == null ? void 0 : S.time) ?? Date.now(), E = b - y;
|
|
640
|
+
if (k = (k + g * E / 1e6) % 2, y = b, k >= 1) {
|
|
641
641
|
I();
|
|
642
642
|
return;
|
|
643
643
|
}
|
|
@@ -651,37 +651,37 @@ const useTrackManager = (e) => {
|
|
|
651
651
|
mercatorToLonLat(_, "array"),
|
|
652
652
|
mercatorToLonLat(D, "array")
|
|
653
653
|
) * Math.PI / 180;
|
|
654
|
-
(G = re.getText()) == null || G.setRotation(Y),
|
|
655
|
-
const X = getVectorContext(
|
|
656
|
-
X.setStyle(re), X.drawGeometry(
|
|
654
|
+
(G = re.getText()) == null || G.setRotation(Y), m.setCoordinates(T);
|
|
655
|
+
const X = getVectorContext(a);
|
|
656
|
+
X.setStyle(re), X.drawGeometry(m), e == null || e.render();
|
|
657
657
|
}, Me = () => {
|
|
658
|
-
var
|
|
659
|
-
$ = !0,
|
|
658
|
+
var a;
|
|
659
|
+
$ = !0, y = Date.now(), k = 0, m = ((a = L.getGeometry()) == null ? void 0 : a.clone()) || new Point([0, 0]), t && (w == null || w.on("postrender", t)), F == null || F.setGeometry(void 0);
|
|
660
660
|
}, I = () => {
|
|
661
|
-
$ && ($ = !1,
|
|
662
|
-
}, ke = (
|
|
661
|
+
$ && ($ = !1, F == null || F.setGeometry(void 0), t && w && w.un("postrender", t), w && (e == null || e.removeLayer(w)), w = null, F = null);
|
|
662
|
+
}, ke = (a, u) => {
|
|
663
663
|
$ && I(), o = new Polyline({
|
|
664
664
|
factor: 1e6
|
|
665
|
-
}).writeGeometry(new LineString(
|
|
665
|
+
}).writeGeometry(new LineString(a)), r = new Polyline({
|
|
666
666
|
factor: 1e6
|
|
667
667
|
}).readGeometry(o, {
|
|
668
668
|
dataProjection: projection.data,
|
|
669
669
|
featureProjection: projection.mercator
|
|
670
|
-
}),
|
|
670
|
+
}), L = new Feature({
|
|
671
671
|
type: "icon",
|
|
672
672
|
geometry: new Point(r.getFirstCoordinate())
|
|
673
673
|
});
|
|
674
|
-
const g =
|
|
675
|
-
|
|
674
|
+
const g = L.getGeometry();
|
|
675
|
+
m = g ? g.clone() : new Point([0, 0]), F = new Feature({
|
|
676
676
|
type: "geoMarker",
|
|
677
677
|
style: re,
|
|
678
|
-
geometry:
|
|
679
|
-
}),
|
|
678
|
+
geometry: m
|
|
679
|
+
}), w = new VectorLayer({
|
|
680
680
|
source: new VectorSource({
|
|
681
|
-
features: [
|
|
681
|
+
features: [F]
|
|
682
682
|
})
|
|
683
|
-
}), e == null || e.addLayer(
|
|
684
|
-
}, ie = (
|
|
683
|
+
}), e == null || e.addLayer(w), t = (b) => be(b, u), Me();
|
|
684
|
+
}, ie = (a, u, g) => {
|
|
685
685
|
function b(S) {
|
|
686
686
|
return 180 * (S % (2 * Math.PI)) / Math.PI;
|
|
687
687
|
}
|
|
@@ -707,7 +707,7 @@ const useTrackManager = (e) => {
|
|
|
707
707
|
return function(Te, Se) {
|
|
708
708
|
return (_(Se, Te) + 180) % 360;
|
|
709
709
|
}(S, G);
|
|
710
|
-
const q = T(S), ee = T(G), te = E(q[0]), oe = E(ee[0]),
|
|
710
|
+
const q = T(S), ee = T(G), te = E(q[0]), oe = E(ee[0]), ae = E(q[1]), ne = E(ee[1]), Ce = Math.sin(oe - te) * Math.cos(ne), Ee = Math.cos(ae) * Math.sin(ne) - Math.sin(ae) * Math.cos(ne) * Math.cos(oe - te);
|
|
711
711
|
return b(Math.atan2(Ce, Ee));
|
|
712
712
|
}
|
|
713
713
|
function D(S) {
|
|
@@ -726,18 +726,18 @@ const useTrackManager = (e) => {
|
|
|
726
726
|
};
|
|
727
727
|
return j.id !== void 0 && (q.id = j.id), j.bbox && (q.bbox = j.bbox), q.properties = G, q.geometry = S, q;
|
|
728
728
|
}
|
|
729
|
-
const X = _(z(
|
|
729
|
+
const X = _(z(a), z(u), g);
|
|
730
730
|
return X < 0 ? 360 + X : X;
|
|
731
731
|
};
|
|
732
732
|
return {
|
|
733
|
-
render:
|
|
733
|
+
render: N,
|
|
734
734
|
remove: he,
|
|
735
735
|
play: pe,
|
|
736
736
|
setCenter: se,
|
|
737
737
|
close: we,
|
|
738
738
|
getLength: Le,
|
|
739
739
|
handleTrackMapEvent: K,
|
|
740
|
-
reRenderTrackLine:
|
|
740
|
+
reRenderTrackLine: c
|
|
741
741
|
};
|
|
742
742
|
};
|
|
743
743
|
function useShipOverlay(e) {
|
|
@@ -768,7 +768,7 @@ function useShipOverlay(e) {
|
|
|
768
768
|
"align-items": "center",
|
|
769
769
|
animation: e.selected ? e.colors && e.colors.length >= 2 ? "blink-dual 2s ease-in-out infinite" : "blink-single 1.5s ease-in-out infinite" : "none"
|
|
770
770
|
// "animation": props.selected ? 'blink 1.5s ease-in-out infinite' : 'none', // 动画开关
|
|
771
|
-
})),
|
|
771
|
+
})), i = computed(() => ({
|
|
772
772
|
width: "14px",
|
|
773
773
|
height: "14px",
|
|
774
774
|
margin: "1px 5px 1px 1px",
|
|
@@ -798,7 +798,7 @@ function useShipOverlay(e) {
|
|
|
798
798
|
},
|
|
799
799
|
[
|
|
800
800
|
h("div", {
|
|
801
|
-
style: e.selected ?
|
|
801
|
+
style: e.selected ? i.value : {}
|
|
802
802
|
}, ""),
|
|
803
803
|
h("div", {
|
|
804
804
|
class: "text",
|
|
@@ -855,7 +855,7 @@ function useShipOverlay(e) {
|
|
|
855
855
|
ref([]);
|
|
856
856
|
function addOverlay(e, l, n, s) {
|
|
857
857
|
if (l) {
|
|
858
|
-
const
|
|
858
|
+
const i = new Overlay({
|
|
859
859
|
element: n,
|
|
860
860
|
positioning: "top-left",
|
|
861
861
|
id: "label-" + (s == null ? void 0 : s.id),
|
|
@@ -864,32 +864,32 @@ function addOverlay(e, l, n, s) {
|
|
|
864
864
|
position: l,
|
|
865
865
|
className: s.blinking ? "ship-label-overlay-blinking" : "ship-label-overlay"
|
|
866
866
|
});
|
|
867
|
-
|
|
867
|
+
i.set("class", "zh-map-ship-overlay"), e.addOverlay(i);
|
|
868
868
|
}
|
|
869
869
|
}
|
|
870
870
|
const getShipDirectPath = (e) => {
|
|
871
871
|
const { spd: l, hdg: n, cog: s } = e;
|
|
872
872
|
return l ? n !== null && +n != 511 && s !== null ? s - +n >= 3 ? SHIP_DIRECT.right : s - +n <= -3 ? SHIP_DIRECT.left : SHIP_DIRECT.front : SHIP_DIRECT.front : "";
|
|
873
873
|
}, createShipStyle = (e, l) => {
|
|
874
|
-
const { shipData: n } = l.getProperties(), s = getShipType(e),
|
|
875
|
-
return initShipStyle(l,
|
|
874
|
+
const { shipData: n } = l.getProperties(), s = getShipType(e), i = getShipScale(e, n, s);
|
|
875
|
+
return initShipStyle(l, i, s);
|
|
876
876
|
}, getShipType = (e) => {
|
|
877
877
|
const l = e == null ? void 0 : e.getView().getZoom();
|
|
878
878
|
return l <= MAP_ZOOM.shipModelMax && l >= MAP_ZOOM.shipTriggleMin ? "ship" : "triangle";
|
|
879
879
|
}, getShipScale = (e, l, n) => {
|
|
880
880
|
if (n === "ship") {
|
|
881
|
-
const { len: s, wid:
|
|
882
|
-
return
|
|
881
|
+
const { len: s, wid: i } = l, t = 97, f = 20, o = 1 / (e == null ? void 0 : e.getView().getResolution()), r = s * o / t, L = i * o / f, m = Math.min(r, L);
|
|
882
|
+
return m < 0.2 ? 0.2 : m > 2 ? 2 : m;
|
|
883
883
|
}
|
|
884
884
|
return MAP_ZOOM.scaleNum;
|
|
885
885
|
}, initShipStyle = (e, l, n) => {
|
|
886
|
-
const { color: s, direct:
|
|
886
|
+
const { color: s, direct: i, isHighlight: t, shipData: f } = e.getProperties(), v = ((f == null ? void 0 : f.cog) - 90 + 360) % 360;
|
|
887
887
|
return new Style({
|
|
888
888
|
image: new Icon({
|
|
889
889
|
src: o(),
|
|
890
890
|
scale: l || MAP_ZOOM.scaleNum,
|
|
891
891
|
anchor: [0.5, 0.5],
|
|
892
|
-
rotation:
|
|
892
|
+
rotation: v * Math.PI / 180,
|
|
893
893
|
rotateWithView: !1
|
|
894
894
|
})
|
|
895
895
|
});
|
|
@@ -903,20 +903,20 @@ const getShipDirectPath = (e) => {
|
|
|
903
903
|
<path d="M30.8843 12.6777L2.21343 21.7067C1.75559 21.8509 1.28947 21.509 1.28947 21.029L1.28947 2.97103C1.28947 2.49102 1.75558 2.14913 2.21342 2.29331L30.8843 11.3223C31.5471 11.531 31.5471 12.469 30.8843 12.6777Z"
|
|
904
904
|
fill="${s}" stroke="${t ? "#FF2424" : "black"}" stroke-width="${t ? "2" : "0.578947"}" />
|
|
905
905
|
<!--path船航向左边或者向前-->
|
|
906
|
-
${
|
|
906
|
+
${i === SHIP_DIRECT.left && `<path d="M30 12L40 12L40 8" stroke="${t ? "#FF2424" : "black"}" stroke-width="2"/>`}
|
|
907
907
|
<!--path船航向右边-->
|
|
908
|
-
${
|
|
908
|
+
${i === SHIP_DIRECT.right && `<path d="M30 12L40 12L40 16" stroke="${t ? "#FF2424" : "black"}" stroke-width="2"/>`}
|
|
909
909
|
<!--path黑线无左右-->
|
|
910
|
-
${
|
|
910
|
+
${i === SHIP_DIRECT.front && `<path d="M30 12L40 12" stroke="${t ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
|
|
911
911
|
</svg>
|
|
912
912
|
`;
|
|
913
913
|
case "ship":
|
|
914
914
|
return `<svg width="97" height="20" viewBox="0 0 97 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
915
915
|
<path d="M0.289474 17.3433L0.289474 2.65655C0.289474 2.28572 0.574654 1.97725 0.944343 1.9482L22.0544 0.289473L67.5204 0.289473C67.6295 0.289473 67.7372 0.314613 67.835 0.362943L86.0565 9.3629C86.5844 9.6236 86.5844 10.3763 86.0565 10.637L67.835 19.6371C67.7372 19.6854 67.6295 19.7105 67.5203 19.7105L22.0544 19.7105L0.944343 18.0517C0.574653 18.0226 0.289474 17.7142 0.289474 17.3433Z"
|
|
916
916
|
fill="${s}" stroke="${t ? "#FF2424" : "black"}" stroke-width="${t ? "4" : "0.578947"}"/>
|
|
917
|
-
${
|
|
918
|
-
${
|
|
919
|
-
${
|
|
917
|
+
${i === SHIP_DIRECT.left && `<path d="M86 10L96 10L96 6" stroke="${t ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
|
|
918
|
+
${i === SHIP_DIRECT.right && `<path d="M86 10L96 10L96 14" stroke="${t ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
|
|
919
|
+
${i === SHIP_DIRECT.front && `<path d="M86 10L96 10" stroke="${t ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
|
|
920
920
|
</svg>
|
|
921
921
|
`;
|
|
922
922
|
default:
|
|
@@ -924,35 +924,35 @@ const getShipDirectPath = (e) => {
|
|
|
924
924
|
}
|
|
925
925
|
}
|
|
926
926
|
}, selectedShipStyle = (e, l) => {
|
|
927
|
-
const n = selectedShipElement(e, l), s = l.id, { lon:
|
|
927
|
+
const n = selectedShipElement(e, l), s = l.id, { lon: i, lat: t } = l, f = new Overlay({
|
|
928
928
|
element: n,
|
|
929
|
-
position: fromLonLat([
|
|
929
|
+
position: fromLonLat([i, t]),
|
|
930
930
|
id: "selected-" + s,
|
|
931
931
|
positioning: "center-center",
|
|
932
932
|
offset: [0, 5],
|
|
933
933
|
className: "ship-selected-overlay"
|
|
934
934
|
});
|
|
935
|
-
return
|
|
935
|
+
return f.set("class", "ship-overlay-selected"), f;
|
|
936
936
|
}, selectedShipElement = (e, l) => {
|
|
937
|
-
const n = getShipType(e), s = getShipScale(e, l, n),
|
|
938
|
-
<svg style="transform:scale(${s});" xmlns="http://www.w3.org/2000/svg" width="${
|
|
937
|
+
const n = getShipType(e), s = getShipScale(e, l, n), i = n === "ship" ? 109 : 49, t = `
|
|
938
|
+
<svg style="transform:scale(${s});" xmlns="http://www.w3.org/2000/svg" width="${i}" height="${i}" viewBox="0 0 49 49" fill="none">
|
|
939
939
|
<path d="M1.99982 46.9998L1.99982 1.99982L46.9998 1.99982L46.9998 46.9998L1.99982 46.9998Z" fill="#FF2424" fill-opacity="0.2"/>
|
|
940
940
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9998 0.5V3.5L3.49976 3.5V20H0.499756V0.500002L19.9998 0.5ZM45.4998 3.5H28.9998V0.5H48.4998V20H45.4998V3.5ZM48.4998 29L48.4998 48.5H28.9998V45.5H45.4998L45.4998 29H48.4998ZM3.49976 45.5L3.49976 29H0.499756L0.499758 48.5L19.9998 48.5V45.5L3.49976 45.5Z" fill="#FF2424"/>
|
|
941
941
|
</svg>
|
|
942
|
-
`,
|
|
943
|
-
return
|
|
942
|
+
`, f = document.createElement("div");
|
|
943
|
+
return f.className = "ship-overlay-selected", f.innerHTML = t, f;
|
|
944
944
|
}, createLabelStyle = (e, l) => {
|
|
945
|
-
const { lon: n, lat: s, blinking:
|
|
946
|
-
n && s && addOverlay(e, fromLonLat([n, s]), t, { ...l, blinking:
|
|
945
|
+
const { lon: n, lat: s, blinking: i } = l, t = createLabelElement(l);
|
|
946
|
+
n && s && addOverlay(e, fromLonLat([n, s]), t, { ...l, blinking: i });
|
|
947
947
|
}, createLabelElement = (e) => {
|
|
948
948
|
const l = document.createElement("div");
|
|
949
949
|
l.className = "ship-overlay-box", l.style.position = "relative";
|
|
950
|
-
const { lon: n, lat: s, blinking:
|
|
950
|
+
const { lon: n, lat: s, blinking: i, blinkingColors: t, name: f } = e, v = createVNode({
|
|
951
951
|
setup() {
|
|
952
952
|
return useShipOverlay({
|
|
953
953
|
position: [n + 2e-3, s + 2e-3],
|
|
954
|
-
selected:
|
|
955
|
-
name:
|
|
954
|
+
selected: i,
|
|
955
|
+
name: f,
|
|
956
956
|
colors: t || [],
|
|
957
957
|
existDevice: e == null ? void 0 : e.existDevice,
|
|
958
958
|
existMobile: e == null ? void 0 : e.existMobile,
|
|
@@ -960,7 +960,7 @@ const getShipDirectPath = (e) => {
|
|
|
960
960
|
});
|
|
961
961
|
}
|
|
962
962
|
});
|
|
963
|
-
return render(
|
|
963
|
+
return render(v, l), l;
|
|
964
964
|
}, getRightIcons = (e) => {
|
|
965
965
|
const l = [];
|
|
966
966
|
return e.existDevice && l.push(""), e.existMobile && l.push(""), e.existWaterGauge && l.push(""), l;
|
|
@@ -978,116 +978,111 @@ function getRandomLineDirection() {
|
|
|
978
978
|
}
|
|
979
979
|
const devicePixelRatio = window.devicePixelRatio || 1;
|
|
980
980
|
function generateBase64Icon(e, l, n = "left-bottom", s = 2) {
|
|
981
|
-
const
|
|
981
|
+
const i = document.createElement("canvas"), t = i.getContext("2d");
|
|
982
982
|
if (!t) return "";
|
|
983
|
-
const
|
|
983
|
+
const f = 2, v = 16, o = window.devicePixelRatio || 1, r = "500 12px Arial", L = "14px map-iconfont";
|
|
984
984
|
t.font = r;
|
|
985
|
-
const
|
|
986
|
-
t.font =
|
|
987
|
-
const $ = l.map((V) => ({ width: t.measureText(getIconFont(V)).width, height: 14 })),
|
|
988
|
-
let C, A, H = 0, B = 0, W = 0, d = 0,
|
|
989
|
-
switch (C =
|
|
985
|
+
const F = t.measureText(e).width;
|
|
986
|
+
t.font = L;
|
|
987
|
+
const $ = l.map((V) => ({ width: t.measureText(getIconFont(V)).width, height: 14 })), y = $.reduce((V, O) => V + O.width, 0), w = (l.length - 1) * s, k = f + F + y + w + f * 2, p = f + 16 + f;
|
|
988
|
+
let C, A, H = 0, B = 0, W = 0, d = 0, x = 0, c = 0;
|
|
989
|
+
switch (C = v + k, n) {
|
|
990
990
|
case "right-top":
|
|
991
|
-
A =
|
|
991
|
+
A = v + p, H = 0, B = v + p, W = v, d = 0, x = v, c = 0;
|
|
992
992
|
break;
|
|
993
993
|
case "right-middle":
|
|
994
|
-
A =
|
|
994
|
+
A = p, H = 0, B = p / 2, W = v, d = p / 2, x = v, c = 0;
|
|
995
995
|
break;
|
|
996
996
|
case "right-bottom":
|
|
997
|
-
A =
|
|
997
|
+
A = v + p, H = 0, B = 0, W = v, d = v, x = v, c = v;
|
|
998
998
|
break;
|
|
999
999
|
case "left-top":
|
|
1000
|
-
A =
|
|
1000
|
+
A = v + p, H = k, B = v, W = k + v, d = p + v, x = 0, c = 0;
|
|
1001
1001
|
break;
|
|
1002
1002
|
case "left-middle":
|
|
1003
|
-
A =
|
|
1003
|
+
A = p, H = k, B = p / 2, W = k + v, d = p / 2, x = 0, c = 0;
|
|
1004
1004
|
break;
|
|
1005
1005
|
case "left-bottom":
|
|
1006
|
-
A =
|
|
1006
|
+
A = v + p, H = k, B = p, W = k + v, d = 0, x = 0, c = v;
|
|
1007
1007
|
break;
|
|
1008
1008
|
}
|
|
1009
|
-
|
|
1010
|
-
const M =
|
|
1011
|
-
t.strokeStyle = "#ffffff", t.lineWidth = 1, t.strokeText(e,
|
|
1012
|
-
let
|
|
1009
|
+
i.width = Math.round(C * o), i.height = Math.round(A * o), i.style.width = `${C}px`, i.style.height = `${A}px`, t.scale(o, o), t.clearRect(0, 0, C, A), t.beginPath(), t.moveTo(H, B), t.lineTo(W, d), t.strokeStyle = "#FFF", t.lineWidth = 1, t.stroke(), t.fillStyle = "#FFF", t.fillRect(x, c, k, p), t.font = r, t.textBaseline = "middle";
|
|
1010
|
+
const M = c + f + p / 2;
|
|
1011
|
+
t.strokeStyle = "#ffffff", t.lineWidth = 1, t.strokeText(e, x + f, M), t.fillStyle = "#000000", t.fillText(e, x + f, M), t.font = L, t.fillStyle = "#3370ff";
|
|
1012
|
+
let N = x + f + F + s;
|
|
1013
1013
|
return l.forEach((V, O) => {
|
|
1014
|
-
const R =
|
|
1015
|
-
t.fillText(getIconFont(V),
|
|
1016
|
-
}),
|
|
1014
|
+
const R = c + f + p / 2;
|
|
1015
|
+
t.fillText(getIconFont(V), N, R), N += $[O].width + s;
|
|
1016
|
+
}), i.toDataURL("image/png");
|
|
1017
1017
|
}
|
|
1018
1018
|
const createLabelFeatureStyle = (e) => {
|
|
1019
|
-
const { name: l, rightIcons: n } = e.getProperties(),
|
|
1020
|
-
let
|
|
1021
|
-
switch (
|
|
1019
|
+
const { name: l, rightIcons: n, selected: s } = e.getProperties(), i = getRandomLineDirection(), t = generateBase64Icon(l, n, i);
|
|
1020
|
+
let f = [0, 0];
|
|
1021
|
+
switch (i) {
|
|
1022
1022
|
case "right-top":
|
|
1023
|
-
|
|
1023
|
+
f = [0, 1];
|
|
1024
1024
|
break;
|
|
1025
1025
|
case "right-middle":
|
|
1026
|
-
|
|
1026
|
+
f = [0, 0.5];
|
|
1027
1027
|
break;
|
|
1028
1028
|
case "right-bottom":
|
|
1029
|
-
|
|
1029
|
+
f = [0, 0];
|
|
1030
1030
|
break;
|
|
1031
1031
|
case "left-top":
|
|
1032
|
-
|
|
1032
|
+
f = [1, 1];
|
|
1033
1033
|
break;
|
|
1034
1034
|
case "left-middle":
|
|
1035
|
-
|
|
1035
|
+
f = [1, 0.5];
|
|
1036
1036
|
break;
|
|
1037
1037
|
case "left-bottom":
|
|
1038
|
-
|
|
1038
|
+
f = [1, 0];
|
|
1039
1039
|
break;
|
|
1040
1040
|
}
|
|
1041
1041
|
return new Style({
|
|
1042
1042
|
image: new Icon({
|
|
1043
|
-
src:
|
|
1044
|
-
anchor:
|
|
1043
|
+
src: t,
|
|
1044
|
+
anchor: f,
|
|
1045
1045
|
displacement: [0, 0],
|
|
1046
1046
|
scale: 1 / devicePixelRatio,
|
|
1047
1047
|
anchorXUnits: "fraction",
|
|
1048
1048
|
anchorYUnits: "fraction"
|
|
1049
|
-
})
|
|
1049
|
+
}),
|
|
1050
|
+
zIndex: s ? 100 : 10
|
|
1050
1051
|
});
|
|
1051
1052
|
}, useShipManager = (e) => {
|
|
1052
1053
|
let l = null, n = null;
|
|
1053
|
-
const s = new VectorSource(),
|
|
1054
|
+
const s = new VectorSource(), i = new VectorImageLayer({
|
|
1054
1055
|
source: s,
|
|
1055
1056
|
className: "zh-map--ship-layer",
|
|
1056
1057
|
renderBuffer: 300,
|
|
1057
1058
|
zIndex: 101
|
|
1058
|
-
}), t = new VectorSource(),
|
|
1059
|
+
}), t = new VectorSource(), f = new VectorLayer({
|
|
1059
1060
|
source: t,
|
|
1060
1061
|
className: "zh-map--ship-label-layer",
|
|
1061
1062
|
zIndex: 102,
|
|
1062
1063
|
updateWhileInteracting: !1,
|
|
1063
1064
|
updateWhileAnimating: !1,
|
|
1064
|
-
declutter:
|
|
1065
|
-
try {
|
|
1066
|
-
return !(w && (w != null && w.get("selected")));
|
|
1067
|
-
} catch (a) {
|
|
1068
|
-
return console.log(a), !0;
|
|
1069
|
-
}
|
|
1070
|
-
}
|
|
1065
|
+
declutter: !0
|
|
1071
1066
|
});
|
|
1072
|
-
e == null || e.addLayer(
|
|
1073
|
-
let
|
|
1074
|
-
const
|
|
1067
|
+
e == null || e.addLayer(i), e == null || e.addLayer(f);
|
|
1068
|
+
let v = "", o = {}, r = {};
|
|
1069
|
+
const L = (d) => {
|
|
1075
1070
|
if (!d || !e) return;
|
|
1076
|
-
const
|
|
1071
|
+
const x = (n == null ? void 0 : n.id) || (l == null ? void 0 : l.get("id"));
|
|
1077
1072
|
if (n) {
|
|
1078
|
-
const
|
|
1079
|
-
|
|
1073
|
+
const c = d.filter((M) => M.id === x);
|
|
1074
|
+
c.length === 0 ? d.push(n) : n = c[0];
|
|
1080
1075
|
}
|
|
1081
|
-
$(),
|
|
1082
|
-
},
|
|
1076
|
+
$(), y(!0), W(d), F();
|
|
1077
|
+
}, m = (d) => {
|
|
1083
1078
|
var P;
|
|
1084
|
-
const
|
|
1085
|
-
geometry: new Point(
|
|
1079
|
+
const x = (n == null ? void 0 : n.id) || (l == null ? void 0 : l.get("id")), c = fromLonLat([d == null ? void 0 : d.lon, d == null ? void 0 : d.lat]), M = ((P = r[d.id]) == null ? void 0 : P.blinkColors) || [], V = M[M.length - 1] || d.fill || "#04C900", O = getShipDirectPath(d), R = new Feature({
|
|
1080
|
+
geometry: new Point(c),
|
|
1086
1081
|
// 船舶数据
|
|
1087
1082
|
shipData: d,
|
|
1088
1083
|
id: d.id,
|
|
1089
1084
|
name: d.cnname || d.enname || d.id || "未命名船舶",
|
|
1090
|
-
selected: d.id ===
|
|
1085
|
+
selected: d.id === x,
|
|
1091
1086
|
// 图标
|
|
1092
1087
|
rightIcons: getRightIcons(d),
|
|
1093
1088
|
// 是否闪烁
|
|
@@ -1101,55 +1096,55 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1101
1096
|
// 高亮
|
|
1102
1097
|
isHighlight: !1
|
|
1103
1098
|
});
|
|
1104
|
-
return R.set("clickGeometry", new Circle(
|
|
1105
|
-
},
|
|
1099
|
+
return R.set("clickGeometry", new Circle(c)), R;
|
|
1100
|
+
}, F = async () => {
|
|
1106
1101
|
if (!n || !e) return;
|
|
1107
|
-
let
|
|
1108
|
-
if (console.log("selectedOverlay----------",
|
|
1109
|
-
const
|
|
1110
|
-
await
|
|
1102
|
+
let x = e.getOverlays().getArray().find((c) => c.get("class") == "ship-overlay-selected");
|
|
1103
|
+
if (console.log("selectedOverlay----------", x), x) {
|
|
1104
|
+
const c = selectedShipElement(e, n);
|
|
1105
|
+
await x.setElement(c), await x.setPosition(fromLonLat([n.lon, n.lat]));
|
|
1111
1106
|
} else
|
|
1112
|
-
|
|
1107
|
+
x = selectedShipStyle(e, n), x && e.addOverlay(x);
|
|
1113
1108
|
setTimeout(() => {
|
|
1114
|
-
var
|
|
1115
|
-
|
|
1109
|
+
var c;
|
|
1110
|
+
x && ((c = x.get("element")) != null && c.parentElement) && (x.get("element").parentElement.style.display = "block");
|
|
1116
1111
|
}, 20);
|
|
1117
1112
|
}, $ = () => {
|
|
1118
|
-
e && s && (s.clear(), t.clear(),
|
|
1119
|
-
},
|
|
1120
|
-
const
|
|
1121
|
-
if (
|
|
1122
|
-
for (let
|
|
1123
|
-
if (!d &&
|
|
1124
|
-
const M =
|
|
1113
|
+
e && s && (s.clear(), t.clear(), y());
|
|
1114
|
+
}, y = (d) => {
|
|
1115
|
+
const x = e.getOverlays().getArray().filter((c) => c.get("class") == "zh-map-ship-overlay");
|
|
1116
|
+
if (x && x.length > 0) {
|
|
1117
|
+
for (let c = 0; c < x.length; c++)
|
|
1118
|
+
if (!d && x[c].get("class") !== "ship-overlay-selected") {
|
|
1119
|
+
const M = x[c];
|
|
1125
1120
|
M.setPosition(void 0), e.removeOverlay(M), M.dispose();
|
|
1126
1121
|
}
|
|
1127
1122
|
}
|
|
1128
|
-
},
|
|
1129
|
-
o = d, r =
|
|
1130
|
-
const
|
|
1131
|
-
for (const
|
|
1132
|
-
const V = o[
|
|
1123
|
+
}, w = (d, x) => {
|
|
1124
|
+
o = d, r = x;
|
|
1125
|
+
const c = e.getOverlays().getArray(), M = s.getFeatures();
|
|
1126
|
+
for (const N in o) {
|
|
1127
|
+
const V = o[N], O = c.find((P) => P.getId() === "label-" + N), R = M.find((P) => N === P.get("id"));
|
|
1133
1128
|
if (O && R) {
|
|
1134
|
-
const P =
|
|
1129
|
+
const P = x[N].blinkColors, { shipData: Z, name: K } = R == null ? void 0 : R.getProperties();
|
|
1135
1130
|
R.set("color", P[P.length - 1] || ""), R.set("blinking", V);
|
|
1136
1131
|
const Q = {
|
|
1137
1132
|
...Z,
|
|
1138
1133
|
blinking: V,
|
|
1139
1134
|
blinkingColors: P || [],
|
|
1140
|
-
name: K + "(" +
|
|
1135
|
+
name: K + "(" + x[N].shipState + ")"
|
|
1141
1136
|
}, U = O.getElement(), J = createLabelElement(Q);
|
|
1142
1137
|
U && U !== J && O.setElement(J);
|
|
1143
1138
|
}
|
|
1144
1139
|
}
|
|
1145
1140
|
}, k = (d) => {
|
|
1146
1141
|
if (!e) return;
|
|
1147
|
-
const
|
|
1142
|
+
const x = s.getFeatures(), c = t.getFeatures(), M = l ? l.get("id") : "", N = x.filter((P) => P.get("id") !== M), V = c == null ? void 0 : c.filter((P) => P.get("id") !== M), O = /* @__PURE__ */ new Map();
|
|
1148
1143
|
d.forEach((P) => {
|
|
1149
1144
|
O.set(P.id, !0);
|
|
1150
1145
|
});
|
|
1151
1146
|
const R = e.getOverlays().getArray();
|
|
1152
|
-
|
|
1147
|
+
N.forEach((P) => {
|
|
1153
1148
|
const Z = P.get("id");
|
|
1154
1149
|
if (!O.has(Z))
|
|
1155
1150
|
P.setStyle([]);
|
|
@@ -1168,82 +1163,80 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1168
1163
|
(K == null ? void 0 : K.length) == 0 && P.setStyle(createLabelFeatureStyle(P));
|
|
1169
1164
|
}
|
|
1170
1165
|
});
|
|
1171
|
-
},
|
|
1166
|
+
}, p = (d) => {
|
|
1172
1167
|
if (d) {
|
|
1173
1168
|
console.log("选中", d);
|
|
1174
|
-
const
|
|
1175
|
-
|
|
1169
|
+
const x = s.getFeatures().find((M) => M.get("id") === d.id), c = t.getFeatures().find((M) => M.get("id") === d.id);
|
|
1170
|
+
x && (l = x), c && c.set("selected", !0), n = d, F();
|
|
1176
1171
|
} else
|
|
1177
1172
|
console.log("取消选中"), n = null, l = null, H();
|
|
1178
|
-
}, C = debounce((d,
|
|
1173
|
+
}, C = debounce((d, x, c) => {
|
|
1179
1174
|
if (d) {
|
|
1180
|
-
const M = d.get("shipData"),
|
|
1181
|
-
if (e.getTargetElement().style.cursor =
|
|
1182
|
-
|
|
1183
|
-
const V = s.getFeatures().find((O) => O.get("id") ===
|
|
1175
|
+
const M = d.get("shipData"), N = d.get("id");
|
|
1176
|
+
if (e.getTargetElement().style.cursor = N ? "pointer" : "", x === "click" && (p(M), c && c(N)), x === "hover") {
|
|
1177
|
+
v && v !== N && A(), v = N;
|
|
1178
|
+
const V = s.getFeatures().find((O) => O.get("id") === v);
|
|
1184
1179
|
V == null || V.set("isHighlight", !0), V == null || V.setStyle(createShipStyle(e, V));
|
|
1185
1180
|
}
|
|
1186
1181
|
} else
|
|
1187
1182
|
e.getTargetElement().style.cursor = "", A();
|
|
1188
1183
|
}, 10), A = () => {
|
|
1189
|
-
const d =
|
|
1190
|
-
|
|
1184
|
+
const d = v ? s.getFeatures().find((x) => x.get("id") === v) : null;
|
|
1185
|
+
v = null, d == null || d.set("isHighlight", !1), d == null || d.setStyle(createShipStyle(e, d));
|
|
1191
1186
|
}, H = () => {
|
|
1192
1187
|
try {
|
|
1193
|
-
const
|
|
1194
|
-
|
|
1188
|
+
const x = e.getOverlays().getArray().find((c) => c.get("class") == "ship-overlay-selected");
|
|
1189
|
+
x && x.setPosition(void 0);
|
|
1195
1190
|
} catch (d) {
|
|
1196
1191
|
console.log(d);
|
|
1197
1192
|
}
|
|
1198
1193
|
}, B = (d) => {
|
|
1199
|
-
const
|
|
1200
|
-
geometry: new Point(
|
|
1194
|
+
const x = fromLonLat([d == null ? void 0 : d.lon, d == null ? void 0 : d.lat]), c = new Feature({
|
|
1195
|
+
geometry: new Point(x),
|
|
1201
1196
|
name: d.cnname || d.enname || d.id || "未命名船舶",
|
|
1202
1197
|
// 图标
|
|
1203
1198
|
rightIcons: getRightIcons(d),
|
|
1204
1199
|
selected: (d == null ? void 0 : d.id) === (n == null ? void 0 : n.id),
|
|
1205
1200
|
shipData: d
|
|
1206
1201
|
});
|
|
1207
|
-
|
|
1208
|
-
const M = createLabelFeatureStyle(
|
|
1209
|
-
return
|
|
1202
|
+
c.set("id", d.id);
|
|
1203
|
+
const M = createLabelFeatureStyle(c);
|
|
1204
|
+
return c.setStyle(M), c;
|
|
1210
1205
|
}, W = (d) => {
|
|
1211
|
-
const
|
|
1212
|
-
d.forEach((
|
|
1213
|
-
const M =
|
|
1214
|
-
if (M.setStyle(createShipStyle(e, M)), s.addFeature(M), (n == null ? void 0 : n.id) ==
|
|
1215
|
-
if (o[
|
|
1216
|
-
if (
|
|
1217
|
-
const
|
|
1218
|
-
|
|
1219
|
-
const V = (F == null ? void 0 : F.blinkColors) || [], O = (F == null ? void 0 : F.shipState) || "", R = (a.cnname || a.enname || a.id || "未命名船舶") + "(" + O + ")", P = {
|
|
1220
|
-
...a,
|
|
1206
|
+
const x = e.getView().getZoom();
|
|
1207
|
+
d.forEach((c) => {
|
|
1208
|
+
const M = m(c);
|
|
1209
|
+
if (M.setStyle(createShipStyle(e, M)), s.addFeature(M), (n == null ? void 0 : n.id) == c.id || x >= MAP_ZOOM.shipModelMin)
|
|
1210
|
+
if (o[c.id]) {
|
|
1211
|
+
if (c.id && r[c == null ? void 0 : c.id]) {
|
|
1212
|
+
const N = r[c == null ? void 0 : c.id] || {}, V = (N == null ? void 0 : N.blinkColors) || [], O = (N == null ? void 0 : N.shipState) || "", R = (c.cnname || c.enname || c.id || "未命名船舶") + "(" + O + ")", P = {
|
|
1213
|
+
...c,
|
|
1221
1214
|
name: R,
|
|
1222
|
-
blinking: o[
|
|
1215
|
+
blinking: o[c.id],
|
|
1223
1216
|
blinkingColors: V || []
|
|
1224
1217
|
};
|
|
1225
1218
|
createLabelStyle(e, P);
|
|
1226
1219
|
}
|
|
1227
1220
|
} else {
|
|
1228
|
-
const
|
|
1229
|
-
t.addFeature(
|
|
1221
|
+
const N = B(c);
|
|
1222
|
+
t.addFeature(N);
|
|
1230
1223
|
}
|
|
1231
1224
|
});
|
|
1232
1225
|
};
|
|
1233
1226
|
return {
|
|
1234
|
-
render:
|
|
1235
|
-
selected:
|
|
1227
|
+
render: L,
|
|
1228
|
+
selected: p,
|
|
1236
1229
|
filter: k,
|
|
1237
|
-
blinking:
|
|
1230
|
+
blinking: w,
|
|
1238
1231
|
clear: $,
|
|
1239
1232
|
handleShipMapEvent: C
|
|
1240
1233
|
};
|
|
1241
1234
|
}, useLayerManager = (e) => {
|
|
1242
|
-
const l = () => e == null ? void 0 : e.getLayers(), n = ref("vector"), s = () => n.value,
|
|
1235
|
+
const l = () => e == null ? void 0 : e.getLayers(), n = ref("vector"), s = () => n.value, i = (o) => {
|
|
1243
1236
|
n.value = o;
|
|
1244
1237
|
const r = l();
|
|
1245
|
-
r && (r == null || r.getArray().forEach((
|
|
1246
|
-
(
|
|
1238
|
+
r && (r == null || r.getArray().forEach((L) => {
|
|
1239
|
+
(L.className_ === "vector" || L.className_ === "satellite") && L.setVisible(L.className_ === o);
|
|
1247
1240
|
}));
|
|
1248
1241
|
}, t = ref(!1);
|
|
1249
1242
|
return {
|
|
@@ -1253,24 +1246,24 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1253
1246
|
if (o !== t.value) {
|
|
1254
1247
|
if (o) {
|
|
1255
1248
|
const r = l();
|
|
1256
|
-
if (!r.getArray().find((
|
|
1257
|
-
const
|
|
1249
|
+
if (!r.getArray().find((m) => m.className_ === "greenTile")) {
|
|
1250
|
+
const m = new TileLayer({
|
|
1258
1251
|
source: new XYZ({ url: BASE_MAP_LINK.greenTile }),
|
|
1259
1252
|
visible: o,
|
|
1260
1253
|
zIndex: 2,
|
|
1261
1254
|
className: "greenTile"
|
|
1262
1255
|
});
|
|
1263
|
-
r.push(
|
|
1256
|
+
r.push(m);
|
|
1264
1257
|
}
|
|
1265
1258
|
} else {
|
|
1266
|
-
const r = l(),
|
|
1267
|
-
|
|
1259
|
+
const r = l(), L = r.getArray().find((m) => m.className_ === "greenTile");
|
|
1260
|
+
L && r.remove(L);
|
|
1268
1261
|
}
|
|
1269
1262
|
t.value = o;
|
|
1270
1263
|
}
|
|
1271
1264
|
},
|
|
1272
1265
|
getShowLayerType: s,
|
|
1273
|
-
setShowLayerType:
|
|
1266
|
+
setShowLayerType: i
|
|
1274
1267
|
};
|
|
1275
1268
|
}, usePropsManager = () => {
|
|
1276
1269
|
const e = ref();
|
|
@@ -1282,35 +1275,35 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1282
1275
|
};
|
|
1283
1276
|
}, usePositionManager = (e) => {
|
|
1284
1277
|
const l = "zh-map-location-layer";
|
|
1285
|
-
let n, s,
|
|
1286
|
-
const
|
|
1287
|
-
if (!(!
|
|
1278
|
+
let n, s, i = null, t = null;
|
|
1279
|
+
const f = (y) => {
|
|
1280
|
+
if (!(!y || y.length === 0)) {
|
|
1288
1281
|
if (s || (s = new VectorSource()), s.clear(), t) {
|
|
1289
|
-
const
|
|
1290
|
-
|
|
1282
|
+
const w = y.find((k) => k.id === t.id);
|
|
1283
|
+
w ? t = w : y.push(t);
|
|
1291
1284
|
}
|
|
1292
|
-
|
|
1293
|
-
|
|
1285
|
+
y.forEach((w) => {
|
|
1286
|
+
v(w);
|
|
1294
1287
|
}), n || (n = new VectorLayer({
|
|
1295
1288
|
className: l,
|
|
1296
1289
|
source: s,
|
|
1297
1290
|
zIndex: 100
|
|
1298
1291
|
}), e == null || e.addLayer(n));
|
|
1299
1292
|
}
|
|
1300
|
-
},
|
|
1301
|
-
const
|
|
1302
|
-
geometry: new Point(fromLonLat([Number(k), Number(
|
|
1293
|
+
}, v = (y) => {
|
|
1294
|
+
const w = e == null ? void 0 : e.getView().getZoom(), [k, p] = y.latLon.split(","), C = new Feature({
|
|
1295
|
+
geometry: new Point(fromLonLat([Number(k), Number(p)]))
|
|
1303
1296
|
});
|
|
1304
|
-
C.setStyle(o(
|
|
1305
|
-
}, o = (
|
|
1306
|
-
const
|
|
1297
|
+
C.setStyle(o(y, w, y.id === (t == null ? void 0 : t.id))), C.set("loactionData", y), s.addFeature(C);
|
|
1298
|
+
}, o = (y, w, k) => {
|
|
1299
|
+
const p = {
|
|
1307
1300
|
image: new Icon({
|
|
1308
|
-
src: k &&
|
|
1309
|
-
scale: 0.5 *
|
|
1301
|
+
src: k && y.selectedPath || y.defaultPath,
|
|
1302
|
+
scale: 0.5 * w / 10
|
|
1310
1303
|
})
|
|
1311
1304
|
};
|
|
1312
|
-
return
|
|
1313
|
-
text:
|
|
1305
|
+
return y.name && (p.text = new Text({
|
|
1306
|
+
text: y.name,
|
|
1314
1307
|
font: "12px sans-serif",
|
|
1315
1308
|
fill: new Fill({
|
|
1316
1309
|
color: "#000000"
|
|
@@ -1319,37 +1312,37 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1319
1312
|
color: "#FFFFFF"
|
|
1320
1313
|
}),
|
|
1321
1314
|
offsetY: 30
|
|
1322
|
-
})), new Style(
|
|
1315
|
+
})), new Style(p);
|
|
1323
1316
|
}, r = () => {
|
|
1324
|
-
if (
|
|
1325
|
-
const
|
|
1326
|
-
s.getFeatures().forEach((
|
|
1327
|
-
|
|
1317
|
+
if (i) {
|
|
1318
|
+
const y = i.get("loactionData").id;
|
|
1319
|
+
s.getFeatures().forEach((w) => {
|
|
1320
|
+
w.get("loactionData").id !== y && s.removeFeature(w);
|
|
1328
1321
|
});
|
|
1329
1322
|
} else
|
|
1330
1323
|
s.clear();
|
|
1331
|
-
},
|
|
1332
|
-
var
|
|
1333
|
-
const
|
|
1324
|
+
}, L = () => {
|
|
1325
|
+
var p;
|
|
1326
|
+
const y = i.get("loactionData"), w = (p = e == null ? void 0 : e.getView()) == null ? void 0 : p.getZoom();
|
|
1334
1327
|
s.getFeatures().forEach((C) => {
|
|
1335
|
-
C.get("loactionData").id ===
|
|
1336
|
-
}), t = null,
|
|
1337
|
-
},
|
|
1338
|
-
|
|
1339
|
-
},
|
|
1340
|
-
var
|
|
1341
|
-
if (
|
|
1342
|
-
const
|
|
1343
|
-
|
|
1328
|
+
C.get("loactionData").id === y.id && (C == null || C.setStyle(o(y, w, !1)));
|
|
1329
|
+
}), t = null, i = null;
|
|
1330
|
+
}, m = (y) => {
|
|
1331
|
+
y ? (F(), $(y)) : clearSelectedPort();
|
|
1332
|
+
}, F = () => {
|
|
1333
|
+
var y;
|
|
1334
|
+
if (i) {
|
|
1335
|
+
const w = i.get("loactionData"), k = (y = e == null ? void 0 : e.getView()) == null ? void 0 : y.getZoom();
|
|
1336
|
+
i.setStyle(o(w, k, !1));
|
|
1344
1337
|
}
|
|
1345
|
-
}, $ = (
|
|
1346
|
-
const
|
|
1347
|
-
t =
|
|
1338
|
+
}, $ = (y) => {
|
|
1339
|
+
const w = s.getFeatures();
|
|
1340
|
+
t = y, i = w.find((k) => k.get("loactionData").id === y.id);
|
|
1348
1341
|
};
|
|
1349
1342
|
return {
|
|
1350
|
-
render:
|
|
1351
|
-
selected:
|
|
1352
|
-
clearSelected:
|
|
1343
|
+
render: f,
|
|
1344
|
+
selected: m,
|
|
1345
|
+
clearSelected: L,
|
|
1353
1346
|
clear: r
|
|
1354
1347
|
};
|
|
1355
1348
|
}, disableDoubleClickZoom = (e) => {
|
|
@@ -1364,17 +1357,17 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1364
1357
|
const n = e.getViewport();
|
|
1365
1358
|
n && (n.style.cursor = l);
|
|
1366
1359
|
}, useDrawLineManager = (e, l) => {
|
|
1367
|
-
const n = ref([]), s = ref("km"),
|
|
1368
|
-
s.value =
|
|
1360
|
+
const n = ref([]), s = ref("km"), i = (c) => {
|
|
1361
|
+
s.value = c;
|
|
1369
1362
|
};
|
|
1370
1363
|
let t;
|
|
1371
|
-
const
|
|
1372
|
-
|
|
1364
|
+
const f = ref(!1), v = () => {
|
|
1365
|
+
L(), disableDoubleClickZoom(e), changeCursor(e, "crosshair"), e.on("pointermove", $), e.getViewport().addEventListener("mouseout", () => {
|
|
1373
1366
|
t && t.classList.add("hidden");
|
|
1374
|
-
}),
|
|
1367
|
+
}), w(), f.value = !0;
|
|
1375
1368
|
};
|
|
1376
1369
|
let o, r;
|
|
1377
|
-
const
|
|
1370
|
+
const L = () => {
|
|
1378
1371
|
o = new VectorSource(), r = new VectorLayer({
|
|
1379
1372
|
source: o,
|
|
1380
1373
|
zIndex: 1e3,
|
|
@@ -1387,16 +1380,16 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1387
1380
|
}
|
|
1388
1381
|
}), e == null || e.addLayer(r);
|
|
1389
1382
|
};
|
|
1390
|
-
let
|
|
1391
|
-
const $ = (
|
|
1392
|
-
if (
|
|
1383
|
+
let m, F;
|
|
1384
|
+
const $ = (c) => {
|
|
1385
|
+
if (c.dragging)
|
|
1393
1386
|
return;
|
|
1394
1387
|
let M = "点击选择起点";
|
|
1395
|
-
|
|
1388
|
+
m && (M = "单击继续,双击结束"), t && (t.innerHTML = M, F.setPosition(c.coordinate), t.classList.remove("hidden"));
|
|
1396
1389
|
};
|
|
1397
|
-
let
|
|
1398
|
-
const
|
|
1399
|
-
|
|
1390
|
+
let y;
|
|
1391
|
+
const w = () => {
|
|
1392
|
+
y = new Draw({
|
|
1400
1393
|
source: o,
|
|
1401
1394
|
type: "LineString",
|
|
1402
1395
|
style: new Style({
|
|
@@ -1420,107 +1413,107 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1420
1413
|
}),
|
|
1421
1414
|
// 添加条件函数,判断是否应该出发点绘制
|
|
1422
1415
|
condition: (M) => M.originalEvent.target.tagName !== "DIV"
|
|
1423
|
-
}), e == null || e.addInteraction(
|
|
1424
|
-
let
|
|
1425
|
-
|
|
1416
|
+
}), e == null || e.addInteraction(y), A(), H();
|
|
1417
|
+
let c;
|
|
1418
|
+
y.on("drawstart", function(M) {
|
|
1426
1419
|
var V;
|
|
1427
|
-
|
|
1428
|
-
let
|
|
1429
|
-
|
|
1420
|
+
m = M.feature, m.set("randomId", k());
|
|
1421
|
+
let N;
|
|
1422
|
+
c = (V = m.getGeometry()) == null ? void 0 : V.on("change", function(O) {
|
|
1430
1423
|
const R = O.target, P = computedDistance(R, s.value);
|
|
1431
|
-
|
|
1424
|
+
N = R.getLastCoordinate(), p && P && (p.innerHTML = P), C.setPosition(N);
|
|
1432
1425
|
});
|
|
1433
|
-
}),
|
|
1434
|
-
var M,
|
|
1435
|
-
if (
|
|
1436
|
-
const O = (
|
|
1437
|
-
n.value.push({ id: O, value:
|
|
1426
|
+
}), y.on("drawend", function() {
|
|
1427
|
+
var M, N, V;
|
|
1428
|
+
if (p && (p.className = "ol-tooltip ol-tooltip-static ol-tooltip-measure"), p != null && p.innerHTML) {
|
|
1429
|
+
const O = (m == null ? void 0 : m.get("randomId")) || k();
|
|
1430
|
+
n.value.push({ id: O, value: p == null ? void 0 : p.innerHTML }), p.innerHTML = `${p.innerHTML}<div class="ol-tooltip-delete-button" data-id="${O}"><i class="map-iconfont icon-delete"></i></div>`;
|
|
1438
1431
|
}
|
|
1439
1432
|
(M = document.querySelector(".ol-selectable:has(.ol-tooltip-delete-button):last-child .ol-tooltip-delete-button")) == null || M.addEventListener("click", (O) => {
|
|
1440
1433
|
var P;
|
|
1441
1434
|
O.preventDefault(), O.stopPropagation();
|
|
1442
1435
|
const R = (P = O.target) == null ? void 0 : P.getAttribute("data-id");
|
|
1443
1436
|
R && W(R);
|
|
1444
|
-
}), C.setOffset([0, -7]),
|
|
1437
|
+
}), C.setOffset([0, -7]), m = null, p = null, A(), c && unByKey(c), (V = (N = l.getProps()) == null ? void 0 : N.lineDrawEnd) == null || V.call(N, n.value);
|
|
1445
1438
|
});
|
|
1446
1439
|
}, k = () => Math.random().toString(36).substring(2, 9);
|
|
1447
|
-
let
|
|
1440
|
+
let p, C;
|
|
1448
1441
|
const A = () => {
|
|
1449
|
-
|
|
1450
|
-
element:
|
|
1442
|
+
p != null && p.parentNode && p.parentNode.removeChild(p), p = document.createElement("div"), p.className = "ol-tooltip ol-tooltip-measure", C = new Overlay({
|
|
1443
|
+
element: p,
|
|
1451
1444
|
offset: [0, -15],
|
|
1452
1445
|
positioning: "bottom-center",
|
|
1453
1446
|
stopEvent: !1,
|
|
1454
1447
|
insertFirst: !1
|
|
1455
1448
|
}), e == null || e.addOverlay(C);
|
|
1456
1449
|
}, H = () => {
|
|
1457
|
-
t != null && t.parentNode && t.parentNode.removeChild(t), t = document.createElement("div"), t.className = "ol-tooltip hidden",
|
|
1450
|
+
t != null && t.parentNode && t.parentNode.removeChild(t), t = document.createElement("div"), t.className = "ol-tooltip hidden", F = new Overlay({
|
|
1458
1451
|
element: t,
|
|
1459
1452
|
offset: [15, 0],
|
|
1460
1453
|
positioning: "center-left"
|
|
1461
|
-
}), e == null || e.addOverlay(
|
|
1454
|
+
}), e == null || e.addOverlay(F);
|
|
1462
1455
|
}, B = () => {
|
|
1463
|
-
n.value.forEach((
|
|
1456
|
+
n.value.forEach((c, M) => {
|
|
1464
1457
|
var O, R;
|
|
1465
|
-
const
|
|
1466
|
-
|
|
1458
|
+
const N = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
|
|
1459
|
+
N[M] && ((R = (O = N[M]) == null ? void 0 : O.parentNode) == null || R.removeChild(N[M]));
|
|
1467
1460
|
const V = o.getFeatures();
|
|
1468
1461
|
V[M] && o.removeFeature(V[M]);
|
|
1469
|
-
}), d(), enableDoubleClickZoom(e),
|
|
1470
|
-
}, W = (
|
|
1471
|
-
var
|
|
1472
|
-
const M = n.value.findIndex((P) => P.id ===
|
|
1462
|
+
}), d(), enableDoubleClickZoom(e), f.value = !1, changeCursor(e, "pointer");
|
|
1463
|
+
}, W = (c) => {
|
|
1464
|
+
var N, V, O, R;
|
|
1465
|
+
const M = n.value.findIndex((P) => P.id === c);
|
|
1473
1466
|
if (M !== -1) {
|
|
1474
1467
|
n.value.splice(M, 1);
|
|
1475
1468
|
const P = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
|
|
1476
|
-
P[M] && ((V = (
|
|
1469
|
+
P[M] && ((V = (N = P[M]) == null ? void 0 : N.parentNode) == null || V.removeChild(P[M]));
|
|
1477
1470
|
const Z = o.getFeatures();
|
|
1478
1471
|
Z[M] && o.removeFeature(Z[M]);
|
|
1479
1472
|
}
|
|
1480
1473
|
(R = (O = l.getProps()) == null ? void 0 : O.lineDrawEnd) == null || R.call(O, n.value);
|
|
1481
1474
|
}, d = () => {
|
|
1482
|
-
if (n.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((
|
|
1475
|
+
if (n.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((c) => {
|
|
1483
1476
|
var M;
|
|
1484
|
-
(M =
|
|
1485
|
-
}), o.clear(),
|
|
1486
|
-
const
|
|
1487
|
-
|
|
1477
|
+
(M = c == null ? void 0 : c.parentNode) == null || M.removeChild(c);
|
|
1478
|
+
}), o.clear(), y) {
|
|
1479
|
+
const c = e.getInteractions().getArray().find((M) => getUid(M) === getUid(y));
|
|
1480
|
+
c && e.removeInteraction(c);
|
|
1488
1481
|
}
|
|
1489
|
-
e.removeLayer(r), t != null && t.parentNode && t.parentNode.removeChild(t),
|
|
1482
|
+
e.removeLayer(r), t != null && t.parentNode && t.parentNode.removeChild(t), p != null && p.parentNode && p.parentNode.removeChild(p);
|
|
1490
1483
|
};
|
|
1491
1484
|
return {
|
|
1492
|
-
open:
|
|
1485
|
+
open: v,
|
|
1493
1486
|
close: B,
|
|
1494
1487
|
deleteLine: W,
|
|
1495
|
-
setUnit:
|
|
1496
|
-
getState: () =>
|
|
1488
|
+
setUnit: i,
|
|
1489
|
+
getState: () => f.value
|
|
1497
1490
|
};
|
|
1498
1491
|
}, computedDistance = (e, l) => {
|
|
1499
1492
|
const s = getLength(e);
|
|
1500
|
-
let
|
|
1493
|
+
let i = "";
|
|
1501
1494
|
switch (l) {
|
|
1502
1495
|
case "m":
|
|
1503
|
-
|
|
1496
|
+
i = `${Math.round(s * 100) / 100} m`;
|
|
1504
1497
|
break;
|
|
1505
1498
|
case "km":
|
|
1506
|
-
|
|
1499
|
+
i = `${Math.round(s / 1e3 * 100) / 100} km`;
|
|
1507
1500
|
break;
|
|
1508
1501
|
case "nm":
|
|
1509
|
-
|
|
1502
|
+
i = `${Math.round(s / 1.852 * 100) / 100} nm`;
|
|
1510
1503
|
break;
|
|
1511
1504
|
}
|
|
1512
|
-
return
|
|
1505
|
+
return i;
|
|
1513
1506
|
}, useDrawPolygonManager = (e, l) => {
|
|
1514
1507
|
let n, s;
|
|
1515
|
-
const
|
|
1508
|
+
const i = () => {
|
|
1516
1509
|
t(), changeCursor(e, "crosshair");
|
|
1517
1510
|
}, t = () => {
|
|
1518
|
-
o(),
|
|
1511
|
+
o(), p(), H(), $();
|
|
1519
1512
|
};
|
|
1520
|
-
let
|
|
1513
|
+
let f = null, v = null;
|
|
1521
1514
|
const o = () => {
|
|
1522
|
-
if (
|
|
1523
|
-
const d = new VectorSource(),
|
|
1515
|
+
if (f && v) return;
|
|
1516
|
+
const d = new VectorSource(), x = new VectorLayer({
|
|
1524
1517
|
source: d,
|
|
1525
1518
|
style: new Style({
|
|
1526
1519
|
stroke: new Stroke({
|
|
@@ -1529,29 +1522,29 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1529
1522
|
})
|
|
1530
1523
|
})
|
|
1531
1524
|
});
|
|
1532
|
-
|
|
1533
|
-
|
|
1525
|
+
f = x, v = d, e.on("pointermove", L), e.addLayer(x), e.on(["dblclick"], function(c) {
|
|
1526
|
+
m && (c.stopPropagation(), c.preventDefault());
|
|
1534
1527
|
});
|
|
1535
1528
|
};
|
|
1536
1529
|
let r;
|
|
1537
|
-
const
|
|
1530
|
+
const L = (d) => {
|
|
1538
1531
|
if (d.dragging) return;
|
|
1539
|
-
const
|
|
1540
|
-
C && (C.innerHTML =
|
|
1532
|
+
const x = r ? "单击继续,双击结束" : "点击选择起点";
|
|
1533
|
+
C && (C.innerHTML = x, A.setPosition(d.coordinate));
|
|
1541
1534
|
};
|
|
1542
|
-
let
|
|
1535
|
+
let m, F = !1;
|
|
1543
1536
|
const $ = () => {
|
|
1544
1537
|
if (n) {
|
|
1545
1538
|
C != null && C.parentNode && C.parentNode.removeChild(C);
|
|
1546
1539
|
const d = n.getGeometry();
|
|
1547
1540
|
if (!d) return;
|
|
1548
|
-
const
|
|
1549
|
-
|
|
1550
|
-
<span class="text">面积:${
|
|
1551
|
-
`),
|
|
1552
|
-
const
|
|
1553
|
-
if (k.setPosition(M),
|
|
1554
|
-
const V =
|
|
1541
|
+
const x = y(d, "nm");
|
|
1542
|
+
w && (w.innerHTML = `
|
|
1543
|
+
<span class="text">面积:${x}${F ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
|
|
1544
|
+
`), w && (w.innerHTML += '<span class="delete-icon" ><i class="map-iconfont icon-delete" /></div>');
|
|
1545
|
+
const c = d.getCoordinates(), M = c[0][c[0].length - 2];
|
|
1546
|
+
if (k.setPosition(M), f) {
|
|
1547
|
+
const V = f.getSource();
|
|
1555
1548
|
V && n && (V.clear(), V.addFeature(n));
|
|
1556
1549
|
}
|
|
1557
1550
|
setTimeout(() => {
|
|
@@ -1561,13 +1554,13 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1561
1554
|
console.log("delete"), B(), (R = (O = l.getProps()) == null ? void 0 : O.areaDrawEnd) == null || R.call(O, []);
|
|
1562
1555
|
});
|
|
1563
1556
|
}, 0);
|
|
1564
|
-
const
|
|
1565
|
-
e == null || e.getView().setCenter(
|
|
1557
|
+
const N = getCenter(n.getGeometry().getExtent());
|
|
1558
|
+
e == null || e.getView().setCenter(N);
|
|
1566
1559
|
return;
|
|
1567
1560
|
}
|
|
1568
|
-
|
|
1561
|
+
m = new Draw({
|
|
1569
1562
|
type: "Polygon",
|
|
1570
|
-
source:
|
|
1563
|
+
source: v,
|
|
1571
1564
|
trace: !0,
|
|
1572
1565
|
style: [new Style({
|
|
1573
1566
|
stroke: new Stroke({
|
|
@@ -1586,28 +1579,28 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1586
1579
|
})
|
|
1587
1580
|
}),
|
|
1588
1581
|
geometry: function(d) {
|
|
1589
|
-
const
|
|
1590
|
-
return new MultiPoint(
|
|
1582
|
+
const x = d.getGeometry().getCoordinates();
|
|
1583
|
+
return new MultiPoint(x);
|
|
1591
1584
|
}
|
|
1592
1585
|
})]
|
|
1593
|
-
}), e == null || e.addInteraction(
|
|
1594
|
-
var
|
|
1595
|
-
r = d.feature, s = (
|
|
1596
|
-
const M =
|
|
1597
|
-
if (
|
|
1586
|
+
}), e == null || e.addInteraction(m), m.on("drawstart", (d) => {
|
|
1587
|
+
var x;
|
|
1588
|
+
r = d.feature, s = (x = r.getGeometry()) == null ? void 0 : x.on("change", (c) => {
|
|
1589
|
+
const M = c.target, N = y(M, "nm"), O = M.getCoordinates()[0], R = new LineString([O[O.length - 2], O[O.length - 1]]), P = computedDistance(R, "nm");
|
|
1590
|
+
if (F = Number(getLength(R) / 1e3) > 150, !N) return;
|
|
1598
1591
|
const Z = '<span class="error pl-4">超出可以绘画的距离</span>';
|
|
1599
|
-
|
|
1592
|
+
w && (w.innerHTML = `
|
|
1600
1593
|
<div class="text">
|
|
1601
|
-
面积:${
|
|
1602
|
-
${
|
|
1594
|
+
面积:${N}
|
|
1595
|
+
${F ? Z : ""}
|
|
1603
1596
|
</div>
|
|
1604
1597
|
`), C && (C.innerHTML = `
|
|
1605
1598
|
<div class="text">
|
|
1606
|
-
面积:${
|
|
1599
|
+
面积:${N}
|
|
1607
1600
|
</div>
|
|
1608
|
-
<div class="text ${
|
|
1601
|
+
<div class="text ${F ? "error" : ""}">
|
|
1609
1602
|
线段 ${O.length - 2}: ${P}
|
|
1610
|
-
${
|
|
1603
|
+
${F ? Z : ""}
|
|
1611
1604
|
|
|
1612
1605
|
</div>
|
|
1613
1606
|
<div>
|
|
@@ -1615,35 +1608,35 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1615
1608
|
</div>
|
|
1616
1609
|
`);
|
|
1617
1610
|
});
|
|
1618
|
-
}),
|
|
1619
|
-
var
|
|
1611
|
+
}), m.on("drawend", (d) => {
|
|
1612
|
+
var N, V, O, R;
|
|
1620
1613
|
if (!d.feature.getGeometry()) return;
|
|
1621
|
-
n = d.feature,
|
|
1622
|
-
const
|
|
1623
|
-
if (k.setPosition(M), C != null && C.parentNode && C.parentNode.removeChild(C), (
|
|
1624
|
-
const P =
|
|
1614
|
+
n = d.feature, w && (w.innerHTML += '<span class="delete-icon"><i class="map-iconfont icon-delete" /></div>'), k.setOffset([10, 0]);
|
|
1615
|
+
const c = d.feature.getGeometry().getCoordinates(), M = c[0][c[0].length - 2];
|
|
1616
|
+
if (k.setPosition(M), C != null && C.parentNode && C.parentNode.removeChild(C), (N = l.getProps()) != null && N.areaDrawEnd) {
|
|
1617
|
+
const P = c[0].map((Z) => transform(Z, projection.mercator, projection.data));
|
|
1625
1618
|
(O = (V = l.getProps()) == null ? void 0 : V.areaDrawEnd) == null || O.call(V, P);
|
|
1626
1619
|
}
|
|
1627
|
-
|
|
1620
|
+
m && (m.setActive(!1), e == null || e.removeInteraction(m), (e == null ? void 0 : e.getInteractions()).forEach((Z) => {
|
|
1628
1621
|
Z instanceof Draw && (Z.setActive(!1), e == null || e.removeInteraction(Z));
|
|
1629
1622
|
})), s && unByKey(s), (R = document.querySelector(".delete-icon")) == null || R.addEventListener("click", () => {
|
|
1630
1623
|
var P, Z;
|
|
1631
1624
|
B(), (Z = (P = l.getProps()) == null ? void 0 : P.areaDrawEnd) == null || Z.call(P, []);
|
|
1632
1625
|
});
|
|
1633
1626
|
});
|
|
1634
|
-
},
|
|
1635
|
-
const
|
|
1636
|
-
switch (
|
|
1627
|
+
}, y = (d, x) => {
|
|
1628
|
+
const c = getArea(d);
|
|
1629
|
+
switch (x) {
|
|
1637
1630
|
case "km":
|
|
1638
|
-
return
|
|
1631
|
+
return c > 1e4 ? Math.round(c / 1e6 * 100) / 100 + " km<sup>2</sup>" : Math.round(c * 100) / 100 + " m<sup>2</sup>";
|
|
1639
1632
|
case "nm":
|
|
1640
|
-
return
|
|
1633
|
+
return c > 1e4 ? Math.round(c / 1e6 / Math.pow(1.852, 2) * 100) / 100 + " nm<sup>2</sup>" : Math.round(c * 100) / 100 + " m<sup>2</sup>";
|
|
1641
1634
|
}
|
|
1642
1635
|
};
|
|
1643
|
-
let
|
|
1644
|
-
const
|
|
1645
|
-
|
|
1646
|
-
element:
|
|
1636
|
+
let w, k;
|
|
1637
|
+
const p = () => {
|
|
1638
|
+
w != null && w.parentNode && w.parentNode.removeChild(w), w = document.createElement("div"), w.style.display = "flex", w.className = "ol-tooltip ol-tooltip-draw-polygon", k = new Overlay({
|
|
1639
|
+
element: w,
|
|
1647
1640
|
offset: [0, -15],
|
|
1648
1641
|
positioning: "bottom-center",
|
|
1649
1642
|
stopEvent: !1,
|
|
@@ -1658,40 +1651,40 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1658
1651
|
positioning: "center-left"
|
|
1659
1652
|
}), e == null || e.addOverlay(A);
|
|
1660
1653
|
}, B = () => {
|
|
1661
|
-
|
|
1654
|
+
v == null || v.clear(), n = null, p(), H(), $();
|
|
1662
1655
|
};
|
|
1663
1656
|
return {
|
|
1664
|
-
open:
|
|
1657
|
+
open: i,
|
|
1665
1658
|
close: () => {
|
|
1666
|
-
|
|
1667
|
-
|
|
1668
|
-
}),
|
|
1659
|
+
v == null || v.clear(), v = null, f && (e.removeLayer(f), f = null), r = null, m && (m.setActive(!1), (e == null ? void 0 : e.getInteractions()).forEach((x) => {
|
|
1660
|
+
x instanceof Draw && (x.setActive(!1), e == null || e.removeInteraction(x));
|
|
1661
|
+
}), m = null), s && unByKey(s), C != null && C.parentElement && C.parentElement.removeChild(C), w != null && w.parentElement && w.parentElement.removeChild(w), A && e.removeOverlay(A), k && e.removeOverlay(k), changeCursor(e, "pointer");
|
|
1669
1662
|
},
|
|
1670
1663
|
reset: B
|
|
1671
1664
|
};
|
|
1672
1665
|
}, PORT_LAYER_CLASS_NAME = "zh-map-port-layer", usePortManager = (e) => {
|
|
1673
1666
|
const l = e.getInstall();
|
|
1674
|
-
let n, s,
|
|
1675
|
-
const
|
|
1676
|
-
if (!(!
|
|
1667
|
+
let n, s, i = null, t = null;
|
|
1668
|
+
const f = (y, w = !0) => {
|
|
1669
|
+
if (!(!y || y.length === 0)) {
|
|
1677
1670
|
if (s || (s = new VectorSource()), s.clear(), t) {
|
|
1678
|
-
const k =
|
|
1679
|
-
k ? t = k :
|
|
1671
|
+
const k = y.find((p) => p.id === t.id);
|
|
1672
|
+
k ? t = k : y.push(t);
|
|
1680
1673
|
}
|
|
1681
|
-
|
|
1682
|
-
|
|
1674
|
+
y.forEach((k) => {
|
|
1675
|
+
v(k, w);
|
|
1683
1676
|
}), n || (n = new VectorLayer({
|
|
1684
1677
|
className: PORT_LAYER_CLASS_NAME,
|
|
1685
1678
|
source: s,
|
|
1686
1679
|
zIndex: 100
|
|
1687
1680
|
}), l.addLayer(n));
|
|
1688
1681
|
}
|
|
1689
|
-
},
|
|
1690
|
-
const k = e.getZoom(), [
|
|
1691
|
-
geometry: new Point(fromLonLat([Number(
|
|
1682
|
+
}, v = (y, w = !0) => {
|
|
1683
|
+
const k = e.getZoom(), [p, C] = y.latLon.split(","), A = new Feature({
|
|
1684
|
+
geometry: new Point(fromLonLat([Number(p), Number(C)]))
|
|
1692
1685
|
});
|
|
1693
|
-
A.setStyle(o(
|
|
1694
|
-
}, o = (
|
|
1686
|
+
A.setStyle(o(y, k, y.id === (t == null ? void 0 : t.id), w)), A.set("portData", y), s.addFeature(A);
|
|
1687
|
+
}, o = (y, w, k, p = !0) => {
|
|
1695
1688
|
const C = (H) => `<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1696
1689
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.6563 44.9304C22.5453 44.8844 22.4445 44.817 22.3595 44.7321C22.3595 44.7321 9.36986 31.7424 9.32952 31.6913C7.09059 29.0791 5.64794 25.8802 5.17255 22.4736C4.69716 19.0671 5.20896 15.5957 6.64728 12.471C8.08561 9.34625 10.3902 6.69909 13.2878 4.84325C16.1855 2.98741 19.5548 2.00068 22.9965 2C26.4381 1.99932 29.8078 2.98473 32.7062 4.83943C35.6046 6.69414 37.9102 9.34039 39.3498 12.4646C40.7893 15.5888 41.3025 19.0599 40.8284 22.4666C40.3544 25.8734 38.913 29.0729 36.6751 31.686C36.6401 31.737 23.6531 44.7321 23.6531 44.7321C23.5682 44.817 23.4674 44.8844 23.3564 44.9304C23.2454 44.9763 23.1265 45 23.0063 45C22.8862 45 22.7673 44.9763 22.6563 44.9304Z" fill="${H}"/>
|
|
1697
1690
|
<g clip-path="url(#clip0_10059_122082)">
|
|
@@ -1704,15 +1697,15 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1704
1697
|
</defs>
|
|
1705
1698
|
</svg>
|
|
1706
1699
|
`, A = () => `data:image/svg+xml;utf8,${encodeURIComponent(C(k ? "#FF5733" : "#3370FF"))}`;
|
|
1707
|
-
return !
|
|
1700
|
+
return !p && !k ? new Style({
|
|
1708
1701
|
image: new Icon({
|
|
1709
1702
|
src: A(),
|
|
1710
|
-
scale: 0.5 *
|
|
1703
|
+
scale: 0.5 * w / 10
|
|
1711
1704
|
}),
|
|
1712
1705
|
zIndex: k ? 110 : 100
|
|
1713
1706
|
}) : new Style({
|
|
1714
1707
|
text: new Text({
|
|
1715
|
-
text:
|
|
1708
|
+
text: y.shortName,
|
|
1716
1709
|
font: "12px sans-serif",
|
|
1717
1710
|
fill: new Fill({
|
|
1718
1711
|
color: k ? "#ffffff" : "#000000"
|
|
@@ -1724,58 +1717,58 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1724
1717
|
}),
|
|
1725
1718
|
image: new Icon({
|
|
1726
1719
|
src: A(),
|
|
1727
|
-
scale: 0.5 *
|
|
1720
|
+
scale: 0.5 * w / 10
|
|
1728
1721
|
}),
|
|
1729
1722
|
zIndex: k ? 110 : 100
|
|
1730
1723
|
});
|
|
1731
1724
|
}, r = () => {
|
|
1732
|
-
if (
|
|
1725
|
+
if (i) {
|
|
1733
1726
|
console.log("清除非选中的港口");
|
|
1734
|
-
const
|
|
1735
|
-
s.getFeatures().forEach((
|
|
1736
|
-
|
|
1727
|
+
const y = i.get("portData").id;
|
|
1728
|
+
s.getFeatures().forEach((w) => {
|
|
1729
|
+
w.get("portData").id !== y && s.removeFeature(w);
|
|
1737
1730
|
});
|
|
1738
1731
|
} else
|
|
1739
1732
|
console.log("清除所有港口", s), s == null || s.clear();
|
|
1740
|
-
},
|
|
1741
|
-
if (!
|
|
1742
|
-
return
|
|
1743
|
-
(
|
|
1744
|
-
},
|
|
1745
|
-
if (
|
|
1746
|
-
const
|
|
1747
|
-
s.getFeatures().forEach((
|
|
1748
|
-
|
|
1733
|
+
}, L = (y) => {
|
|
1734
|
+
if (!y)
|
|
1735
|
+
return m();
|
|
1736
|
+
(i == null ? void 0 : i.get("portData").id) !== y.id && (m(), F(y));
|
|
1737
|
+
}, m = () => {
|
|
1738
|
+
if (i) {
|
|
1739
|
+
const y = i == null ? void 0 : i.get("portData"), w = e.getZoom();
|
|
1740
|
+
s.getFeatures().forEach((p) => {
|
|
1741
|
+
p.get("portData").id === y.id && (p.setStyle(o(p.get("portData"), w, !1)), i = null);
|
|
1749
1742
|
});
|
|
1750
1743
|
}
|
|
1751
|
-
},
|
|
1752
|
-
const
|
|
1753
|
-
t =
|
|
1744
|
+
}, F = (y) => {
|
|
1745
|
+
const w = s.getFeatures();
|
|
1746
|
+
t = y, i = w.find((k) => k.get("portData").id === y.id), i == null || i.setStyle(o(y, e.getZoom(), !0));
|
|
1754
1747
|
};
|
|
1755
1748
|
return {
|
|
1756
|
-
render:
|
|
1749
|
+
render: f,
|
|
1757
1750
|
clear: r,
|
|
1758
|
-
selected:
|
|
1759
|
-
handlePortHover: (
|
|
1760
|
-
const
|
|
1761
|
-
|
|
1751
|
+
selected: L,
|
|
1752
|
+
handlePortHover: (y) => {
|
|
1753
|
+
const w = l == null ? void 0 : l.getTargetElement();
|
|
1754
|
+
y && y.get("portData") && w && (w.style.cursor = "pointer");
|
|
1762
1755
|
}
|
|
1763
1756
|
};
|
|
1764
|
-
}, useEventManager = (e, l, n, s,
|
|
1765
|
-
const
|
|
1766
|
-
|
|
1757
|
+
}, useEventManager = (e, l, n, s, i, t) => {
|
|
1758
|
+
const f = e.getInstall();
|
|
1759
|
+
f.on("moveend", () => {
|
|
1767
1760
|
var o, r;
|
|
1768
|
-
const
|
|
1769
|
-
(r = (o = l.getProps()).mapMoveEnd) == null || r.call(o,
|
|
1770
|
-
}),
|
|
1771
|
-
const o =
|
|
1772
|
-
s.handleShipMapEvent(r, "hover"), n.handleTrackMapEvent(r, "hover",
|
|
1773
|
-
}),
|
|
1761
|
+
const v = e.getZoom();
|
|
1762
|
+
(r = (o = l.getProps()).mapMoveEnd) == null || r.call(o, v), n.reRenderTrackLine();
|
|
1763
|
+
}), f.on("pointermove", (v) => {
|
|
1764
|
+
const o = f.getEventPixel(v.originalEvent), r = f.forEachFeatureAtPixel(o, (L) => L);
|
|
1765
|
+
s.handleShipMapEvent(r, "hover"), n.handleTrackMapEvent(r, "hover", v), r && i.handlePortHover(r);
|
|
1766
|
+
}), f.on("movestart", () => {
|
|
1774
1767
|
console.log("movestart-----------------------");
|
|
1775
|
-
}),
|
|
1776
|
-
var
|
|
1768
|
+
}), f.on("click", debounce((v) => {
|
|
1769
|
+
var L, m, F;
|
|
1777
1770
|
if (console.log("1", t.getState()), t.getState()) return;
|
|
1778
|
-
const o =
|
|
1771
|
+
const o = f.getEventPixel(v.originalEvent), r = f.forEachFeatureAtPixel(
|
|
1779
1772
|
o,
|
|
1780
1773
|
($) => {
|
|
1781
1774
|
if ($ != null && $.get("shipData") || $ != null && $.get("portData"))
|
|
@@ -1783,48 +1776,48 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1783
1776
|
}
|
|
1784
1777
|
);
|
|
1785
1778
|
if (console.log("2", r), !!r) {
|
|
1786
|
-
if (
|
|
1787
|
-
s.handleShipMapEvent(r, "click", (
|
|
1779
|
+
if (v.preventDefault(), v.stopPropagation(), r.get("shipData"))
|
|
1780
|
+
s.handleShipMapEvent(r, "click", (L = l.getProps()) == null ? void 0 : L.selectShip);
|
|
1788
1781
|
else if (r.get("portData")) {
|
|
1789
1782
|
const $ = r.get("portData");
|
|
1790
|
-
|
|
1783
|
+
i.selected($), (F = (m = l.getProps()) == null ? void 0 : m.selectPort) == null || F.call(m, $);
|
|
1791
1784
|
}
|
|
1792
1785
|
}
|
|
1793
1786
|
}, 150));
|
|
1794
1787
|
}, useMapController = () => {
|
|
1795
1788
|
const e = reactive([]);
|
|
1796
1789
|
return {
|
|
1797
|
-
createInstance: (s,
|
|
1790
|
+
createInstance: (s, i) => {
|
|
1798
1791
|
const t = useMapInitializer();
|
|
1799
|
-
t.initMap(s,
|
|
1800
|
-
const
|
|
1801
|
-
o.setProps(
|
|
1802
|
-
const r = useTrackManager(
|
|
1803
|
-
useEventManager(t, o, r,
|
|
1792
|
+
t.initMap(s, i);
|
|
1793
|
+
const f = t.getInstall(), v = useLayerManager(f), o = usePropsManager();
|
|
1794
|
+
o.setProps(i), v.setShowLayerType(i.layerType), v.setGreenTileVisible(i.showGreenLayer);
|
|
1795
|
+
const r = useTrackManager(f), L = useCarTrackManager(f, r), m = useShipManager(f), F = usePositionManager(f), $ = useDrawLineManager(f, o), y = useDrawPolygonManager(f, o), w = usePortManager(t);
|
|
1796
|
+
useEventManager(t, o, r, m, w, $);
|
|
1804
1797
|
const k = () => {
|
|
1805
|
-
const C =
|
|
1798
|
+
const C = f.getView().calculateExtent(t.getSize()), A = transform([C[0], C[1]], projection.mercator, projection.data), H = transform([C[2], C[3]], projection.mercator, projection.data);
|
|
1806
1799
|
return [A[0], A[1], H[0], H[1]];
|
|
1807
|
-
},
|
|
1800
|
+
}, p = {
|
|
1808
1801
|
id: Symbol("map-instance"),
|
|
1809
1802
|
innerMap: null,
|
|
1810
1803
|
map: t.getInstall(),
|
|
1811
1804
|
destroy: () => {
|
|
1812
|
-
e.splice(e.indexOf(
|
|
1805
|
+
e.splice(e.indexOf(p), 1);
|
|
1813
1806
|
},
|
|
1814
1807
|
methods: {
|
|
1815
1808
|
...t,
|
|
1816
|
-
layer:
|
|
1817
|
-
ship:
|
|
1809
|
+
layer: v,
|
|
1810
|
+
ship: m,
|
|
1818
1811
|
track: r,
|
|
1819
|
-
carTrack:
|
|
1812
|
+
carTrack: L,
|
|
1820
1813
|
port: {
|
|
1821
|
-
render:
|
|
1822
|
-
clear:
|
|
1823
|
-
selected:
|
|
1814
|
+
render: w.render,
|
|
1815
|
+
clear: w.clear,
|
|
1816
|
+
selected: w.selected
|
|
1824
1817
|
},
|
|
1825
|
-
position:
|
|
1818
|
+
position: F,
|
|
1826
1819
|
drawLine: $,
|
|
1827
|
-
drawPolygon:
|
|
1820
|
+
drawPolygon: y,
|
|
1828
1821
|
// 子模块
|
|
1829
1822
|
utils: {
|
|
1830
1823
|
getCalculateExtent: k,
|
|
@@ -1833,11 +1826,11 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1833
1826
|
}
|
|
1834
1827
|
}
|
|
1835
1828
|
};
|
|
1836
|
-
return e.push(
|
|
1829
|
+
return e.push(p), p;
|
|
1837
1830
|
},
|
|
1838
1831
|
destroyInstance: (s) => {
|
|
1839
|
-
const
|
|
1840
|
-
|
|
1832
|
+
const i = e.findIndex((t) => t.id === s);
|
|
1833
|
+
i > -1 && (e[i].destroy(), e.splice(i, 1));
|
|
1841
1834
|
},
|
|
1842
1835
|
destroyAll: () => {
|
|
1843
1836
|
e.forEach((s) => s.destroy()), e.splice(0, e.length);
|
|
@@ -1864,16 +1857,16 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1864
1857
|
} }
|
|
1865
1858
|
},
|
|
1866
1859
|
setup(e, { expose: l }) {
|
|
1867
|
-
const n = ref(), s = ref(),
|
|
1860
|
+
const n = ref(), s = ref(), i = useMapController(), t = ref(), f = e, v = ref({
|
|
1868
1861
|
getInstall() {
|
|
1869
1862
|
}
|
|
1870
1863
|
});
|
|
1871
1864
|
return onMounted(() => {
|
|
1872
1865
|
var o;
|
|
1873
|
-
t.value =
|
|
1866
|
+
t.value = i.createInstance(n.value, f), console.log(" instance.value?.methods", t.value.map), v.value = t.value.methods, (o = s.value) == null || o.setScaleLine(t.value.map, f.scaleLineUnit);
|
|
1874
1867
|
}), onUnmounted(() => {
|
|
1875
1868
|
var o, r;
|
|
1876
|
-
|
|
1869
|
+
i.destroyInstance((o = t == null ? void 0 : t.value) == null ? void 0 : o.id), (r = t.value) == null || r.destroy();
|
|
1877
1870
|
}), l({
|
|
1878
1871
|
getZoom: () => {
|
|
1879
1872
|
var o;
|
|
@@ -1892,16 +1885,16 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1892
1885
|
return (o = t.value) == null ? void 0 : o.methods.getView();
|
|
1893
1886
|
},
|
|
1894
1887
|
setCenter: (o, r) => {
|
|
1895
|
-
var
|
|
1896
|
-
return (
|
|
1888
|
+
var L;
|
|
1889
|
+
return (L = t.value) == null ? void 0 : L.methods.setCenter(o, r);
|
|
1897
1890
|
},
|
|
1898
1891
|
getSize: () => {
|
|
1899
1892
|
var o;
|
|
1900
1893
|
return (o = t.value) == null ? void 0 : o.methods.getSize();
|
|
1901
1894
|
},
|
|
1902
1895
|
getCenter: (o, r) => {
|
|
1903
|
-
var
|
|
1904
|
-
return (
|
|
1896
|
+
var L;
|
|
1897
|
+
return (L = t.value) == null ? void 0 : L.methods.getCenter();
|
|
1905
1898
|
},
|
|
1906
1899
|
layer: {
|
|
1907
1900
|
setGreenTileVisible: (o) => {
|
|
@@ -1997,8 +1990,8 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1997
1990
|
},
|
|
1998
1991
|
port: {
|
|
1999
1992
|
render: (o, r) => {
|
|
2000
|
-
var
|
|
2001
|
-
return (
|
|
1993
|
+
var L;
|
|
1994
|
+
return (L = t.value) == null ? void 0 : L.methods.port.render(o, r);
|
|
2002
1995
|
},
|
|
2003
1996
|
clear: () => {
|
|
2004
1997
|
var o;
|
|
@@ -2074,8 +2067,8 @@ const createLabelFeatureStyle = (e) => {
|
|
|
2074
2067
|
return (r = t.value) == null ? void 0 : r.methods.utils.convertSixHundredThousandToLatLng(...o);
|
|
2075
2068
|
},
|
|
2076
2069
|
calculateCirclePoints: (o, r) => {
|
|
2077
|
-
var
|
|
2078
|
-
return (
|
|
2070
|
+
var L;
|
|
2071
|
+
return (L = t.value) == null ? void 0 : L.methods.utils.calculateCirclePoints(o, r);
|
|
2079
2072
|
}
|
|
2080
2073
|
}
|
|
2081
2074
|
}), (o, r) => (openBlock(), createElementBlock("div", _hoisted_1, [
|