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.
@@ -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, c) => {
10
- c || (c = "metric");
9
+ setScaleLine: (s, i) => {
10
+ i || (i = "metric");
11
11
  const t = new ScaleLine$1({
12
- units: c
13
- }), L = document.getElementById("scale-line-container");
14
- L && (t.setTarget(L), s.addControl(t));
12
+ units: i
13
+ }), f = document.getElementById("scale-line-container");
14
+ f && (t.setTarget(f), s.addControl(t));
15
15
  }
16
- }), (s, c) => (openBlock(), createElementBlock("div", _hoisted_1$2));
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: c, getZoom: t, getInstall: L } = l.mapInstance.methods;
32
- if (!L()) return;
31
+ const { setZoom: i, getZoom: t, getInstall: f } = l.mapInstance.methods;
32
+ if (!f()) return;
33
33
  const o = t();
34
- o && c(o + 1);
34
+ o && i(o + 1);
35
35
  }, s = () => {
36
- const { setZoom: c, getZoom: t, getInstall: L } = l.mapInstance.methods;
37
- if (!L()) return;
36
+ const { setZoom: i, getZoom: t, getInstall: f } = l.mapInstance.methods;
37
+ if (!f()) return;
38
38
  const o = t();
39
- o && c(o - 1);
39
+ o && i(o - 1);
40
40
  };
41
- return (c, t) => (openBlock(), createElementBlock("div", _hoisted_1$1, [
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 y;
77
- return (y = n()) == null ? void 0 : y.getZoom();
78
- }, c = (y) => {
79
- var N;
80
- (N = n()) == null || N.setZoom(y);
81
- }, t = (y, N) => {
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([y, N]));
84
- }, L = () => {
85
- var N;
86
- const y = (N = n()) == null ? void 0 : N.getCenter();
87
- return toLonLat(y);
88
- }, m = () => {
89
- var y;
90
- return (y = l()) == null ? void 0 : y.getSize();
91
- }, o = new Map$2(), r = (y, N) => {
92
- p(N);
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: N.zoom,
95
- center: fromLonLat(N.center),
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
- }, f = new Map$2({
102
- target: y,
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 = f;
115
- }, p = (y) => {
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: y.layerType === "vector",
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: y.layerType === "vector",
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: y.layerType === "satellite",
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: y.layerType === "satellite",
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: y.showGreenLayer,
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: c,
151
+ setZoom: i,
152
152
  setCenter: t,
153
- getCenter: L,
154
- getSize: m,
153
+ getCenter: f,
154
+ getSize: v,
155
155
  initMap: r,
156
- setBaseLayerMap: p
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, c = [
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(c, projection.mercator, projection.data);
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 c = "";
177
+ let i = "";
178
178
  switch (console.log(l, LENGTH_UNIT), l) {
179
179
  case LENGTH_UNIT.M:
180
- c = Math.round(s * 100) / 100 + " m";
180
+ i = Math.round(s * 100) / 100 + " m";
181
181
  break;
182
182
  case LENGTH_UNIT.KM:
183
- c = Math.round(s / 1e3 * 100) / 100 + " km";
183
+ i = Math.round(s / 1e3 * 100) / 100 + " km";
184
184
  break;
185
185
  case LENGTH_UNIT.NM:
186
- c = (Math.round(s / 1e3 * 100) / 100 / 1.852).toFixed(2) + " nm";
186
+ i = (Math.round(s / 1e3 * 100) / 100 / 1.852).toFixed(2) + " nm";
187
187
  break;
188
188
  }
189
- return c;
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 c = e[1] / equatorialCircumference * 180;
213
- return c = 180 / Math.PI * (2 * Math.atan(Math.exp(c * Math.PI / 180)) - Math.PI / 2), n.lon = s, n.lat = c, l === "lonlat" ? n : [s, c];
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(), c = l.minutes();
216
- let t = `${String(c).padStart(2, "0")}分`;
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 (p) => {
221
- if (!e || (console.log("vehicleInfo", p), !(p != null && p.lon && (p != null && p.lat)))) return;
222
- const y = Math.abs(Number(p.lon)) > 180 ? convertSixHundredThousandToLatLng(p.lon, p.lat) : [p.lon, p.lat];
223
- c(p, fromLonLat(y));
224
- const N = e == null ? void 0 : e.getView(), $ = new Point(y);
225
- N.setCenter(transform($.getCoordinates(), projection.data, projection.mercator));
226
- }, c = (p, y) => {
227
- const N = `${CDN_URL}map/car-icon.gif`;
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(${N})`, $.style.width = "80px", $.style.height = "80px";
236
- const f = (p == null ? void 0 : p.drc) || "";
237
- $.style.transform = `rotate(${f}deg)`, $.style.backgroundSize = "cover", n == null || n.setPosition(y);
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 p = n == null ? void 0 : n.getElement();
243
- p && (p.innerHTML = "");
242
+ const L = n == null ? void 0 : n.getElement();
243
+ L && (L.innerHTML = "");
244
244
  },
245
- renderTrack: (p, y, N) => {
246
- l.render(p, y, N, "truck", 1e3);
245
+ renderTrack: (L, m, F) => {
246
+ l.render(L, m, F, "truck", 1e3);
247
247
  },
248
- setCenter: (p) => {
249
- l.setCenter(p);
248
+ setCenter: (L) => {
249
+ l.setCenter(L);
250
250
  },
251
251
  closeTrack: () => {
252
252
  l.close();
253
253
  },
254
- playTrack: (p, y) => {
255
- l.play(p, y);
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 c = "--";
263
+ const i = "--";
264
264
  let t = null;
265
- const L = document.createElement("div"), m = new Overlay({
266
- element: L,
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, p, y, N, $ = !1, f = Date.now(), v, k = 0, x = null, C = 20, A = !1;
272
- const H = 5, B = [], W = (i) => {
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(i); B.length > H; ) {
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 w = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"], a = debounce(() => {
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 i = cloneDeep(M(s, n[s]));
284
- ae(s, i);
283
+ const a = cloneDeep(M(s, n[s]));
284
+ ce(s, a);
285
285
  }
286
- }, 300), M = (i, u) => {
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 = i, T.index = _, T;
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
- }, F = async (i, u, g, b = "ship", E = 200) => {
297
- if (!e || (u = u == null ? void 0 : u.reverse(), m && b === "ship" && (e != null && e.getOverlays().getArray().includes(m) || e.addOverlay(m)), (u == null ? void 0 : u.length) < 2))
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(i), s = i, n[i] = u, C = E;
300
- const T = Object.keys(n).findIndex((_) => _ === i) || 0;
301
- d = g || w[T > 10 ? 10 : T], A = !0, await R(), await se(s);
302
- }, V = (i) => {
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-${i}`,
308
+ className: `track-layer-${a}`,
309
309
  renderBuffer: 1024
310
310
  // 增大渲染缓冲区
311
311
  });
312
- }, O = (i) => {
312
+ }, O = (a) => {
313
313
  l.forEach((u, g) => {
314
314
  var E;
315
- const b = g === i;
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 = i;
317
+ }), s = a;
318
318
  }, R = async () => {
319
- const i = s;
320
- if (!l.has(i)) {
321
- const T = V(i);
322
- l.set(i, T);
319
+ const a = s;
320
+ if (!l.has(a)) {
321
+ const T = V(a);
322
+ l.set(a, T);
323
323
  }
324
- await O(i);
325
- const u = d || "", g = n[i] || [];
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(i, g);
328
+ b = M(a, g);
329
329
  const E = b.map((T) => T.centerPoint);
330
- b.length >= 2 && await P(i, E, u);
331
- }, P = (i, u, g) => {
332
- const b = new LineString(u), E = l.get(i).getSource(), T = E.getFeatureById(i);
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(i), T.setStyle(Z(g)), x = T;
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(i), _.set("type", "line"), _.setStyle(Z(g)), E.addFeature(_), x = _;
337
+ _.setId(a), _.set("type", "line"), _.setStyle(Z(g)), E.addFeature(_), p = _;
338
338
  }
339
- return x;
340
- }, Z = (i) => new Style({
339
+ return p;
340
+ }, Z = (a) => new Style({
341
341
  stroke: new Stroke({
342
- color: i,
342
+ color: a,
343
343
  width: 2
344
344
  })
345
- }), K = (i, u, g) => {
346
- const b = i == null ? void 0 : i.get("trackId");
347
- if (i && b && u === "hover") {
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 = i.get("data"), T = Q(E), _ = g == null ? void 0 : g.coordinate;
350
- _ && (L.querySelector(".popup-content"), L.innerHTML = T, m == null || m.setPosition(_));
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
- m && m.setPosition(void 0);
353
- }, Q = (i) => {
354
- if (!(i != null && i.time)) return;
352
+ v && v.setPosition(void 0);
353
+ }, Q = (a) => {
354
+ if (!(a != null && a.time)) return;
355
355
  let u = "";
356
- return i != null && i.stayTime && (u = `
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(i.stayTime))}</div>
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">${i != null && i.sailStatus ? SHIP_SAIL_STATUS[i.sailStatus] : c}</div>
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">${i.speed || c}</div>
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">${i.hdg || c}</div>
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">${i.cog || c}</div>
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">${i.lon || c}</div>
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">${i.lat || c}</div>
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">${i.time}</div>
389
+ <div class="item-item">${a.time}</div>
390
390
  </div>
391
391
  ${u ?? u}
392
392
  </div>`;
393
- }, U = (i) => {
394
- const g = i.map((D) => {
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(i, u) {
442
- for (let g = 1; g < i.length; g++) {
443
- const b = i[g - 1], E = i[g];
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 ae = async (i, u) => {
460
- await le(), await ge(i);
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(i).getSource().addFeatures(b), me(i, g, u, d), g.forEach((T) => {
463
- const _ = ue(i, d, T);
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 = (i) => {
466
+ }, de = (a) => {
467
467
  const u = new Feature({
468
- geometry: new Point(i.centerPoint),
469
- data: i
468
+ geometry: new Point(a.centerPoint),
469
+ data: a
470
470
  });
471
- u.set("type", "track_point"), u.set("trackId", i.id), u.set("data", i);
471
+ u.set("type", "track_point"), u.set("trackId", a.id), u.set("data", a);
472
472
  let g = [
473
- ...fe(i, d)
473
+ ...fe(a, d)
474
474
  ];
475
- return (i.index === 0 || i.index === n[i.id].length - 1) && (g = [...ve(i)], u.set("type", "track_begin")), i.state !== void 0 && i.state !== null && (g = [...ye(i)], u.set("type", "track_icon")), u.setStyle(g), u;
476
- }, ue = (i, u, g) => {
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", i), E;
499
+ return E.set("class", "track-label-overlay"), E.set("trackId", a), E;
500
500
  }, le = () => {
501
- const i = e == null ? void 0 : e.getOverlays().getArray(), u = i == null ? void 0 : i.filter((g) => g.get("class") === "track-label-overlay");
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 = (i) => {
506
- const u = l.get(i).getSource();
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 = (i, u) => (`${i.time}`, [
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 = (i) => {
527
+ ]), ye = (a) => {
528
528
  const u = "#E31818", g = "#1890FF", b = "&#xe6d2", 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(i.state) === 0 ? u : Number(i.state) === 1 ? g : ""
534
+ color: Number(a.state) === 0 ? u : Number(a.state) === 1 ? g : ""
535
535
  })
536
536
  }),
537
537
  zIndex: 99
538
538
  }), _ = getIconStyle("&#xe6e2;"), z = getIconStyle("&#xe703;"), Y = [];
539
- return Number(i.state) === 0 ? Y.push(_) : Number(i.state) === 1 && Y.push(z), Y.push(E), Y;
540
- }, me = (i, u, g, b) => {
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(i).getSource();
576
+ const D = l.get(a).getSource();
577
577
  D == null || D.addFeatures(_);
578
- }, se = (i) => {
578
+ }, se = (a) => {
579
579
  var T, _;
580
- const u = e.getView(), g = (T = l == null ? void 0 : l.get(i)) == null ? void 0 : T.getSource(), b = x || (i ? g == null ? void 0 : g.getFeatureById(i) : null);
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 = (i) => {
591
- const u = "&#xe69b;", E = i.index === 0 ? "#fcdc3f" : "#ff0000";
590
+ }, ve = (a) => {
591
+ const u = "&#xe69b;", 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 = (i) => {
608
- const u = l.get(i || s);
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 = (i, u = LENGTH_UNIT.NM) => {
616
+ }, Le = (a, u = LENGTH_UNIT.NM) => {
617
617
  const g = {
618
- id: i,
618
+ id: a,
619
619
  length: "--"
620
- }, E = (n[i] || []).map(
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 = (i, u) => {
625
- xe(String(i), u);
626
- }, xe = (i, u) => {
627
- const g = n[String(i)], b = g == null ? void 0 : g.map((E) => [E.lon, E.lat]);
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 = (i, u) => {
637
+ }), be = (a, u) => {
638
638
  var S, G;
639
- const g = Number(50 * u), b = ((S = i.frameState) == null ? void 0 : S.time) ?? Date.now(), E = b - f;
640
- if (k = (k + g * E / 1e6) % 2, f = b, k >= 1) {
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), y.setCoordinates(T);
655
- const X = getVectorContext(i);
656
- X.setStyle(re), X.drawGeometry(y), e == null || e.render();
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 i;
659
- $ = !0, f = Date.now(), k = 0, y = ((i = p.getGeometry()) == null ? void 0 : i.clone()) || new Point([0, 0]), t && (v == null || v.on("postrender", t)), N == null || N.setGeometry(void 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, N == null || N.setGeometry(void 0), t && v && v.un("postrender", t), v && (e == null || e.removeLayer(v)), v = null, N = null);
662
- }, ke = (i, u) => {
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(i)), r = new Polyline({
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
- }), p = new Feature({
670
+ }), L = new Feature({
671
671
  type: "icon",
672
672
  geometry: new Point(r.getFirstCoordinate())
673
673
  });
674
- const g = p.getGeometry();
675
- y = g ? g.clone() : new Point([0, 0]), N = new Feature({
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: y
679
- }), v = new VectorLayer({
678
+ geometry: m
679
+ }), w = new VectorLayer({
680
680
  source: new VectorSource({
681
- features: [N]
681
+ features: [F]
682
682
  })
683
- }), e == null || e.addLayer(v), t = (b) => be(b, u), Me();
684
- }, ie = (i, u, g) => {
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]), ce = E(q[1]), ne = E(ee[1]), Ce = Math.sin(oe - te) * Math.cos(ne), Ee = Math.cos(ce) * Math.sin(ne) - Math.sin(ce) * Math.cos(ne) * Math.cos(oe - te);
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(i), z(u), g);
729
+ const X = _(z(a), z(u), g);
730
730
  return X < 0 ? 360 + X : X;
731
731
  };
732
732
  return {
733
- render: F,
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: a
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
- })), c = computed(() => ({
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 ? c.value : {}
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 c = new Overlay({
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
- c.set("class", "zh-map-ship-overlay"), e.addOverlay(c);
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), c = getShipScale(e, n, s);
875
- return initShipStyle(l, c, s);
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: c } = l, t = 97, L = 20, o = 1 / (e == null ? void 0 : e.getView().getResolution()), r = s * o / t, p = c * o / L, y = Math.min(r, p);
882
- return y < 0.2 ? 0.2 : y > 2 ? 2 : y;
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: c, isHighlight: t, shipData: L } = e.getProperties(), m = ((L == null ? void 0 : L.cog) - 90 + 360) % 360;
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: m * Math.PI / 180,
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
- ${c === SHIP_DIRECT.left && `<path d="M30 12L40 12L40 8" stroke="${t ? "#FF2424" : "black"}" stroke-width="2"/>`}
906
+ ${i === SHIP_DIRECT.left && `<path d="M30 12L40 12L40 8" stroke="${t ? "#FF2424" : "black"}" stroke-width="2"/>`}
907
907
  <!--path船航向右边-->
908
- ${c === SHIP_DIRECT.right && `<path d="M30 12L40 12L40 16" stroke="${t ? "#FF2424" : "black"}" stroke-width="2"/>`}
908
+ ${i === SHIP_DIRECT.right && `<path d="M30 12L40 12L40 16" stroke="${t ? "#FF2424" : "black"}" stroke-width="2"/>`}
909
909
  <!--path黑线无左右-->
910
- ${c === SHIP_DIRECT.front && `<path d="M30 12L40 12" stroke="${t ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
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
- ${c === SHIP_DIRECT.left && `<path d="M86 10L96 10L96 6" stroke="${t ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
918
- ${c === SHIP_DIRECT.right && `<path d="M86 10L96 10L96 14" stroke="${t ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
919
- ${c === SHIP_DIRECT.front && `<path d="M86 10L96 10" stroke="${t ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
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: c, lat: t } = l, L = new Overlay({
927
+ const n = selectedShipElement(e, l), s = l.id, { lon: i, lat: t } = l, f = new Overlay({
928
928
  element: n,
929
- position: fromLonLat([c, t]),
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 L.set("class", "ship-overlay-selected"), L;
935
+ return f.set("class", "ship-overlay-selected"), f;
936
936
  }, selectedShipElement = (e, l) => {
937
- const n = getShipType(e), s = getShipScale(e, l, n), c = n === "ship" ? 109 : 49, t = `
938
- <svg style="transform:scale(${s});" xmlns="http://www.w3.org/2000/svg" width="${c}" height="${c}" viewBox="0 0 49 49" fill="none">
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
- `, L = document.createElement("div");
943
- return L.className = "ship-overlay-selected", L.innerHTML = t, L;
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: c } = l, t = createLabelElement(l);
946
- n && s && addOverlay(e, fromLonLat([n, s]), t, { ...l, blinking: c });
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: c, blinkingColors: t, name: L } = e, m = createVNode({
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: c,
955
- name: L,
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(m, l), l;
963
+ return render(v, l), l;
964
964
  }, getRightIcons = (e) => {
965
965
  const l = [];
966
966
  return e.existDevice && l.push("&#xe687;"), e.existMobile && l.push("&#xe688;"), e.existWaterGauge && l.push("&#xe686;"), 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 c = document.createElement("canvas"), t = c.getContext("2d");
981
+ const i = document.createElement("canvas"), t = i.getContext("2d");
982
982
  if (!t) return "";
983
- const L = 2, m = 16, o = window.devicePixelRatio || 1, r = "500 12px Arial", p = "14px map-iconfont";
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 N = t.measureText(e).width;
986
- t.font = p;
987
- const $ = l.map((V) => ({ width: t.measureText(getIconFont(V)).width, height: 14 })), f = $.reduce((V, O) => V + O.width, 0), v = (l.length - 1) * s, k = L + N + f + v + L * 2, x = L + 16 + L;
988
- let C, A, H = 0, B = 0, W = 0, d = 0, w = 0, a = 0;
989
- switch (C = m + k, n) {
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 = m + x, H = 0, B = m + x, W = m, d = 0, w = m, a = 0;
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 = x, H = 0, B = x / 2, W = m, d = x / 2, w = m, a = 0;
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 = m + x, H = 0, B = 0, W = m, d = m, w = m, a = m;
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 = m + x, H = k, B = m, W = k + m, d = x + m, w = 0, a = 0;
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 = x, H = k, B = x / 2, W = k + m, d = x / 2, w = 0, a = 0;
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 = m + x, H = k, B = x, W = k + m, d = 0, w = 0, a = m;
1006
+ A = v + p, H = k, B = p, W = k + v, d = 0, x = 0, c = v;
1007
1007
  break;
1008
1008
  }
1009
- c.width = Math.round(C * o), c.height = Math.round(A * o), c.style.width = `${C}px`, c.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(w, a, k, x), t.font = r, t.textBaseline = "middle";
1010
- const M = a + L + x / 2;
1011
- t.strokeStyle = "#ffffff", t.lineWidth = 1, t.strokeText(e, w + L, M), t.fillStyle = "#000000", t.fillText(e, w + L, M), t.font = p, t.fillStyle = "#3370ff";
1012
- let F = w + L + N + s;
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 = a + L + x / 2;
1015
- t.fillText(getIconFont(V), F, R), F += $[O].width + s;
1016
- }), c.toDataURL("image/png");
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(), s = getRandomLineDirection(), c = generateBase64Icon(l, n, s);
1020
- let t = [0, 0];
1021
- switch (s) {
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
- t = [0, 1];
1023
+ f = [0, 1];
1024
1024
  break;
1025
1025
  case "right-middle":
1026
- t = [0, 0.5];
1026
+ f = [0, 0.5];
1027
1027
  break;
1028
1028
  case "right-bottom":
1029
- t = [0, 0];
1029
+ f = [0, 0];
1030
1030
  break;
1031
1031
  case "left-top":
1032
- t = [1, 1];
1032
+ f = [1, 1];
1033
1033
  break;
1034
1034
  case "left-middle":
1035
- t = [1, 0.5];
1035
+ f = [1, 0.5];
1036
1036
  break;
1037
1037
  case "left-bottom":
1038
- t = [1, 0];
1038
+ f = [1, 0];
1039
1039
  break;
1040
1040
  }
1041
1041
  return new Style({
1042
1042
  image: new Icon({
1043
- src: c,
1044
- anchor: t,
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(), c = new VectorImageLayer({
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(), L = new VectorLayer({
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: function(d, w) {
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(c), e == null || e.addLayer(L);
1073
- let m = "", o = {}, r = {};
1074
- const p = (d) => {
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 w = (n == null ? void 0 : n.id) || (l == null ? void 0 : l.get("id"));
1071
+ const x = (n == null ? void 0 : n.id) || (l == null ? void 0 : l.get("id"));
1077
1072
  if (n) {
1078
- const a = d.filter((M) => M.id === w);
1079
- a.length === 0 ? d.push(n) : n = a[0];
1073
+ const c = d.filter((M) => M.id === x);
1074
+ c.length === 0 ? d.push(n) : n = c[0];
1080
1075
  }
1081
- $(), f(!0), W(d), N();
1082
- }, y = (d) => {
1076
+ $(), y(!0), W(d), F();
1077
+ }, m = (d) => {
1083
1078
  var P;
1084
- const w = (n == null ? void 0 : n.id) || (l == null ? void 0 : l.get("id")), a = 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({
1085
- geometry: new Point(a),
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 === w,
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(a)), R;
1105
- }, N = async () => {
1099
+ return R.set("clickGeometry", new Circle(c)), R;
1100
+ }, F = async () => {
1106
1101
  if (!n || !e) return;
1107
- let w = e.getOverlays().getArray().find((a) => a.get("class") == "ship-overlay-selected");
1108
- if (console.log("selectedOverlay----------", w), w) {
1109
- const a = selectedShipElement(e, n);
1110
- await w.setElement(a), await w.setPosition(fromLonLat([n.lon, n.lat]));
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
- w = selectedShipStyle(e, n), w && e.addOverlay(w);
1107
+ x = selectedShipStyle(e, n), x && e.addOverlay(x);
1113
1108
  setTimeout(() => {
1114
- var a;
1115
- w && ((a = w.get("element")) != null && a.parentElement) && (w.get("element").parentElement.style.display = "block");
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(), f());
1119
- }, f = (d) => {
1120
- const w = e.getOverlays().getArray().filter((a) => a.get("class") == "zh-map-ship-overlay");
1121
- if (w && w.length > 0) {
1122
- for (let a = 0; a < w.length; a++)
1123
- if (!d && w[a].get("class") !== "ship-overlay-selected") {
1124
- const M = w[a];
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
- }, v = (d, w) => {
1129
- o = d, r = w;
1130
- const a = e.getOverlays().getArray(), M = s.getFeatures();
1131
- for (const F in o) {
1132
- const V = o[F], O = a.find((P) => P.getId() === "label-" + F), R = M.find((P) => F === P.get("id"));
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 = w[F].blinkColors, { shipData: Z, name: K } = R == null ? void 0 : R.getProperties();
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 + "(" + w[F].shipState + ")"
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 w = s.getFeatures(), a = t.getFeatures(), M = l ? l.get("id") : "", F = w.filter((P) => P.get("id") !== M), V = a == null ? void 0 : a.filter((P) => P.get("id") !== M), O = /* @__PURE__ */ new Map();
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
- F.forEach((P) => {
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
- }, x = (d) => {
1166
+ }, p = (d) => {
1172
1167
  if (d) {
1173
1168
  console.log("选中", d);
1174
- const w = s.getFeatures().find((M) => M.get("id") === d.id), a = t.getFeatures().find((M) => M.get("id") === d.id);
1175
- w && (l = w), a && a.set("selected", !0), n = d, N();
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, w, a) => {
1173
+ }, C = debounce((d, x, c) => {
1179
1174
  if (d) {
1180
- const M = d.get("shipData"), F = d.get("id");
1181
- if (e.getTargetElement().style.cursor = F ? "pointer" : "", w === "click" && (x(M), a && a(F)), w === "hover") {
1182
- m && m !== F && A(), m = F;
1183
- const V = s.getFeatures().find((O) => O.get("id") === m);
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 = m ? s.getFeatures().find((w) => w.get("id") === m) : null;
1190
- m = null, d == null || d.set("isHighlight", !1), d == null || d.setStyle(createShipStyle(e, d));
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 w = e.getOverlays().getArray().find((a) => a.get("class") == "ship-overlay-selected");
1194
- w && w.setPosition(void 0);
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 w = fromLonLat([d == null ? void 0 : d.lon, d == null ? void 0 : d.lat]), a = new Feature({
1200
- geometry: new Point(w),
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
- a.set("id", d.id);
1208
- const M = createLabelFeatureStyle(a);
1209
- return a.setStyle(M), a;
1202
+ c.set("id", d.id);
1203
+ const M = createLabelFeatureStyle(c);
1204
+ return c.setStyle(M), c;
1210
1205
  }, W = (d) => {
1211
- const w = e.getView().getZoom();
1212
- d.forEach((a) => {
1213
- const M = y(a);
1214
- if (M.setStyle(createShipStyle(e, M)), s.addFeature(M), (n == null ? void 0 : n.id) == a.id || w >= MAP_ZOOM.shipModelMin)
1215
- if (o[a.id]) {
1216
- if (a.id && r[a == null ? void 0 : a.id]) {
1217
- const F = r[a == null ? void 0 : a.id] || {};
1218
- console.log(F);
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[a.id],
1215
+ blinking: o[c.id],
1223
1216
  blinkingColors: V || []
1224
1217
  };
1225
1218
  createLabelStyle(e, P);
1226
1219
  }
1227
1220
  } else {
1228
- const F = B(a);
1229
- t.addFeature(F);
1221
+ const N = B(c);
1222
+ t.addFeature(N);
1230
1223
  }
1231
1224
  });
1232
1225
  };
1233
1226
  return {
1234
- render: p,
1235
- selected: x,
1227
+ render: L,
1228
+ selected: p,
1236
1229
  filter: k,
1237
- blinking: v,
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, c = (o) => {
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((p) => {
1246
- (p.className_ === "vector" || p.className_ === "satellite") && p.setVisible(p.className_ === o);
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((y) => y.className_ === "greenTile")) {
1257
- const y = new TileLayer({
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(y);
1256
+ r.push(m);
1264
1257
  }
1265
1258
  } else {
1266
- const r = l(), p = r.getArray().find((y) => y.className_ === "greenTile");
1267
- p && r.remove(p);
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: c
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, c = null, t = null;
1286
- const L = (f) => {
1287
- if (!(!f || f.length === 0)) {
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 v = f.find((k) => k.id === t.id);
1290
- v ? t = v : f.push(t);
1282
+ const w = y.find((k) => k.id === t.id);
1283
+ w ? t = w : y.push(t);
1291
1284
  }
1292
- f.forEach((v) => {
1293
- m(v);
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
- }, m = (f) => {
1301
- const v = e == null ? void 0 : e.getView().getZoom(), [k, x] = f.latLon.split(","), C = new Feature({
1302
- geometry: new Point(fromLonLat([Number(k), Number(x)]))
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(f, v, f.id === (t == null ? void 0 : t.id))), C.set("loactionData", f), s.addFeature(C);
1305
- }, o = (f, v, k) => {
1306
- const x = {
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 && f.selectedPath || f.defaultPath,
1309
- scale: 0.5 * v / 10
1301
+ src: k && y.selectedPath || y.defaultPath,
1302
+ scale: 0.5 * w / 10
1310
1303
  })
1311
1304
  };
1312
- return f.name && (x.text = new Text({
1313
- text: f.name,
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(x);
1315
+ })), new Style(p);
1323
1316
  }, r = () => {
1324
- if (c) {
1325
- const f = c.get("loactionData").id;
1326
- s.getFeatures().forEach((v) => {
1327
- v.get("loactionData").id !== f && s.removeFeature(v);
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
- }, p = () => {
1332
- var x;
1333
- const f = c.get("loactionData"), v = (x = e == null ? void 0 : e.getView()) == null ? void 0 : x.getZoom();
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 === f.id && (C == null || C.setStyle(o(f, v, !1)));
1336
- }), t = null, c = null;
1337
- }, y = (f) => {
1338
- f ? (N(), $(f)) : clearSelectedPort();
1339
- }, N = () => {
1340
- var f;
1341
- if (c) {
1342
- const v = c.get("loactionData"), k = (f = e == null ? void 0 : e.getView()) == null ? void 0 : f.getZoom();
1343
- c.setStyle(o(v, k, !1));
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
- }, $ = (f) => {
1346
- const v = s.getFeatures();
1347
- t = f, c = v.find((k) => k.get("loactionData").id === f.id);
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: L,
1351
- selected: y,
1352
- clearSelected: p,
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"), c = (a) => {
1368
- s.value = a;
1360
+ const n = ref([]), s = ref("km"), i = (c) => {
1361
+ s.value = c;
1369
1362
  };
1370
1363
  let t;
1371
- const L = ref(!1), m = () => {
1372
- p(), disableDoubleClickZoom(e), changeCursor(e, "crosshair"), e.on("pointermove", $), e.getViewport().addEventListener("mouseout", () => {
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
- }), v(), L.value = !0;
1367
+ }), w(), f.value = !0;
1375
1368
  };
1376
1369
  let o, r;
1377
- const p = () => {
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 y, N;
1391
- const $ = (a) => {
1392
- if (a.dragging)
1383
+ let m, F;
1384
+ const $ = (c) => {
1385
+ if (c.dragging)
1393
1386
  return;
1394
1387
  let M = "点击选择起点";
1395
- y && (M = "单击继续,双击结束"), t && (t.innerHTML = M, N.setPosition(a.coordinate), t.classList.remove("hidden"));
1388
+ m && (M = "单击继续,双击结束"), t && (t.innerHTML = M, F.setPosition(c.coordinate), t.classList.remove("hidden"));
1396
1389
  };
1397
- let f;
1398
- const v = () => {
1399
- f = new Draw({
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(f), A(), H();
1424
- let a;
1425
- f.on("drawstart", function(M) {
1416
+ }), e == null || e.addInteraction(y), A(), H();
1417
+ let c;
1418
+ y.on("drawstart", function(M) {
1426
1419
  var V;
1427
- y = M.feature, y.set("randomId", k());
1428
- let F;
1429
- a = (V = y.getGeometry()) == null ? void 0 : V.on("change", function(O) {
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
- F = R.getLastCoordinate(), x && P && (x.innerHTML = P), C.setPosition(F);
1424
+ N = R.getLastCoordinate(), p && P && (p.innerHTML = P), C.setPosition(N);
1432
1425
  });
1433
- }), f.on("drawend", function() {
1434
- var M, F, V;
1435
- if (x && (x.className = "ol-tooltip ol-tooltip-static ol-tooltip-measure"), x != null && x.innerHTML) {
1436
- const O = (y == null ? void 0 : y.get("randomId")) || k();
1437
- n.value.push({ id: O, value: x == null ? void 0 : x.innerHTML }), x.innerHTML = `${x.innerHTML}<div class="ol-tooltip-delete-button" data-id="${O}"><i class="map-iconfont icon-delete"></i></div>`;
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]), y = null, x = null, A(), a && unByKey(a), (V = (F = l.getProps()) == null ? void 0 : F.lineDrawEnd) == null || V.call(F, n.value);
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 x, C;
1440
+ let p, C;
1448
1441
  const A = () => {
1449
- x != null && x.parentNode && x.parentNode.removeChild(x), x = document.createElement("div"), x.className = "ol-tooltip ol-tooltip-measure", C = new Overlay({
1450
- element: x,
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", N = new Overlay({
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(N);
1454
+ }), e == null || e.addOverlay(F);
1462
1455
  }, B = () => {
1463
- n.value.forEach((a, M) => {
1456
+ n.value.forEach((c, M) => {
1464
1457
  var O, R;
1465
- const F = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
1466
- F[M] && ((R = (O = F[M]) == null ? void 0 : O.parentNode) == null || R.removeChild(F[M]));
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), L.value = !1, changeCursor(e, "pointer");
1470
- }, W = (a) => {
1471
- var F, V, O, R;
1472
- const M = n.value.findIndex((P) => P.id === a);
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 = (F = P[M]) == null ? void 0 : F.parentNode) == null || V.removeChild(P[M]));
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((a) => {
1475
+ if (n.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((c) => {
1483
1476
  var M;
1484
- (M = a == null ? void 0 : a.parentNode) == null || M.removeChild(a);
1485
- }), o.clear(), f) {
1486
- const a = e.getInteractions().getArray().find((M) => getUid(M) === getUid(f));
1487
- a && e.removeInteraction(a);
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), x != null && x.parentNode && x.parentNode.removeChild(x);
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: m,
1485
+ open: v,
1493
1486
  close: B,
1494
1487
  deleteLine: W,
1495
- setUnit: c,
1496
- getState: () => L.value
1488
+ setUnit: i,
1489
+ getState: () => f.value
1497
1490
  };
1498
1491
  }, computedDistance = (e, l) => {
1499
1492
  const s = getLength(e);
1500
- let c = "";
1493
+ let i = "";
1501
1494
  switch (l) {
1502
1495
  case "m":
1503
- c = `${Math.round(s * 100) / 100} m`;
1496
+ i = `${Math.round(s * 100) / 100} m`;
1504
1497
  break;
1505
1498
  case "km":
1506
- c = `${Math.round(s / 1e3 * 100) / 100} km`;
1499
+ i = `${Math.round(s / 1e3 * 100) / 100} km`;
1507
1500
  break;
1508
1501
  case "nm":
1509
- c = `${Math.round(s / 1.852 * 100) / 100} nm`;
1502
+ i = `${Math.round(s / 1.852 * 100) / 100} nm`;
1510
1503
  break;
1511
1504
  }
1512
- return c;
1505
+ return i;
1513
1506
  }, useDrawPolygonManager = (e, l) => {
1514
1507
  let n, s;
1515
- const c = () => {
1508
+ const i = () => {
1516
1509
  t(), changeCursor(e, "crosshair");
1517
1510
  }, t = () => {
1518
- o(), x(), H(), $();
1511
+ o(), p(), H(), $();
1519
1512
  };
1520
- let L = null, m = null;
1513
+ let f = null, v = null;
1521
1514
  const o = () => {
1522
- if (L && m) return;
1523
- const d = new VectorSource(), w = new VectorLayer({
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
- L = w, m = d, e.on("pointermove", p), e.addLayer(w), e.on(["dblclick"], function(a) {
1533
- y && (a.stopPropagation(), a.preventDefault());
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 p = (d) => {
1530
+ const L = (d) => {
1538
1531
  if (d.dragging) return;
1539
- const w = r ? "单击继续,双击结束" : "点击选择起点";
1540
- C && (C.innerHTML = w, A.setPosition(d.coordinate));
1532
+ const x = r ? "单击继续,双击结束" : "点击选择起点";
1533
+ C && (C.innerHTML = x, A.setPosition(d.coordinate));
1541
1534
  };
1542
- let y, N = !1;
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 w = f(d, "nm");
1549
- v && (v.innerHTML = `
1550
- <span class="text">面积:${w}${N ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
1551
- `), v && (v.innerHTML += '<span class="delete-icon" ><i class="map-iconfont icon-delete" /></div>');
1552
- const a = d.getCoordinates(), M = a[0][a[0].length - 2];
1553
- if (k.setPosition(M), L) {
1554
- const V = L.getSource();
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 F = getCenter(n.getGeometry().getExtent());
1565
- e == null || e.getView().setCenter(F);
1557
+ const N = getCenter(n.getGeometry().getExtent());
1558
+ e == null || e.getView().setCenter(N);
1566
1559
  return;
1567
1560
  }
1568
- y = new Draw({
1561
+ m = new Draw({
1569
1562
  type: "Polygon",
1570
- source: m,
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 w = d.getGeometry().getCoordinates();
1590
- return new MultiPoint(w);
1582
+ const x = d.getGeometry().getCoordinates();
1583
+ return new MultiPoint(x);
1591
1584
  }
1592
1585
  })]
1593
- }), e == null || e.addInteraction(y), y.on("drawstart", (d) => {
1594
- var w;
1595
- r = d.feature, s = (w = r.getGeometry()) == null ? void 0 : w.on("change", (a) => {
1596
- const M = a.target, F = f(M, "nm"), O = M.getCoordinates()[0], R = new LineString([O[O.length - 2], O[O.length - 1]]), P = computedDistance(R, "nm");
1597
- if (N = Number(getLength(R) / 1e3) > 150, !F) return;
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
- v && (v.innerHTML = `
1592
+ w && (w.innerHTML = `
1600
1593
  <div class="text">
1601
- 面积:${F}
1602
- ${N ? Z : ""}
1594
+ 面积:${N}
1595
+ ${F ? Z : ""}
1603
1596
  </div>
1604
1597
  `), C && (C.innerHTML = `
1605
1598
  <div class="text">
1606
- 面积:${F}
1599
+ 面积:${N}
1607
1600
  </div>
1608
- <div class="text ${N ? "error" : ""}">
1601
+ <div class="text ${F ? "error" : ""}">
1609
1602
  线段 ${O.length - 2}: ${P}
1610
- ${N ? Z : ""}
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
- }), y.on("drawend", (d) => {
1619
- var F, V, O, R;
1611
+ }), m.on("drawend", (d) => {
1612
+ var N, V, O, R;
1620
1613
  if (!d.feature.getGeometry()) return;
1621
- n = d.feature, v && (v.innerHTML += '<span class="delete-icon"><i class="map-iconfont icon-delete" /></div>'), k.setOffset([10, 0]);
1622
- const a = d.feature.getGeometry().getCoordinates(), M = a[0][a[0].length - 2];
1623
- if (k.setPosition(M), C != null && C.parentNode && C.parentNode.removeChild(C), (F = l.getProps()) != null && F.areaDrawEnd) {
1624
- const P = a[0].map((Z) => transform(Z, projection.mercator, projection.data));
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
- y && (y.setActive(!1), e == null || e.removeInteraction(y), (e == null ? void 0 : e.getInteractions()).forEach((Z) => {
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
- }, f = (d, w) => {
1635
- const a = getArea(d);
1636
- switch (w) {
1627
+ }, y = (d, x) => {
1628
+ const c = getArea(d);
1629
+ switch (x) {
1637
1630
  case "km":
1638
- return a > 1e4 ? Math.round(a / 1e6 * 100) / 100 + " km<sup>2</sup>" : Math.round(a * 100) / 100 + " m<sup>2</sup>";
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 a > 1e4 ? Math.round(a / 1e6 / Math.pow(1.852, 2) * 100) / 100 + " nm<sup>2</sup>" : Math.round(a * 100) / 100 + " m<sup>2</sup>";
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 v, k;
1644
- const x = () => {
1645
- v != null && v.parentNode && v.parentNode.removeChild(v), v = document.createElement("div"), v.style.display = "flex", v.className = "ol-tooltip ol-tooltip-draw-polygon", k = new Overlay({
1646
- element: v,
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
- m == null || m.clear(), n = null, x(), H(), $();
1654
+ v == null || v.clear(), n = null, p(), H(), $();
1662
1655
  };
1663
1656
  return {
1664
- open: c,
1657
+ open: i,
1665
1658
  close: () => {
1666
- m == null || m.clear(), m = null, L && (e.removeLayer(L), L = null), r = null, y && (y.setActive(!1), (e == null ? void 0 : e.getInteractions()).forEach((w) => {
1667
- w instanceof Draw && (w.setActive(!1), e == null || e.removeInteraction(w));
1668
- }), y = null), s && unByKey(s), C != null && C.parentElement && C.parentElement.removeChild(C), v != null && v.parentElement && v.parentElement.removeChild(v), A && e.removeOverlay(A), k && e.removeOverlay(k), changeCursor(e, "pointer");
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, c = null, t = null;
1675
- const L = (f, v = !0) => {
1676
- if (!(!f || f.length === 0)) {
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 = f.find((x) => x.id === t.id);
1679
- k ? t = k : f.push(t);
1671
+ const k = y.find((p) => p.id === t.id);
1672
+ k ? t = k : y.push(t);
1680
1673
  }
1681
- f.forEach((k) => {
1682
- m(k, v);
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
- }, m = (f, v = !0) => {
1690
- const k = e.getZoom(), [x, C] = f.latLon.split(","), A = new Feature({
1691
- geometry: new Point(fromLonLat([Number(x), Number(C)]))
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(f, k, f.id === (t == null ? void 0 : t.id), v)), A.set("portData", f), s.addFeature(A);
1694
- }, o = (f, v, k, x = !0) => {
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 !x && !k ? new Style({
1700
+ return !p && !k ? new Style({
1708
1701
  image: new Icon({
1709
1702
  src: A(),
1710
- scale: 0.5 * v / 10
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: f.shortName,
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 * v / 10
1720
+ scale: 0.5 * w / 10
1728
1721
  }),
1729
1722
  zIndex: k ? 110 : 100
1730
1723
  });
1731
1724
  }, r = () => {
1732
- if (c) {
1725
+ if (i) {
1733
1726
  console.log("清除非选中的港口");
1734
- const f = c.get("portData").id;
1735
- s.getFeatures().forEach((v) => {
1736
- v.get("portData").id !== f && s.removeFeature(v);
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
- }, p = (f) => {
1741
- if (!f)
1742
- return y();
1743
- (c == null ? void 0 : c.get("portData").id) !== f.id && (y(), N(f));
1744
- }, y = () => {
1745
- if (c) {
1746
- const f = c == null ? void 0 : c.get("portData"), v = e.getZoom();
1747
- s.getFeatures().forEach((x) => {
1748
- x.get("portData").id === f.id && (x.setStyle(o(x.get("portData"), v, !1)), c = null);
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
- }, N = (f) => {
1752
- const v = s.getFeatures();
1753
- t = f, c = v.find((k) => k.get("portData").id === f.id), c == null || c.setStyle(o(f, e.getZoom(), !0));
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: L,
1749
+ render: f,
1757
1750
  clear: r,
1758
- selected: p,
1759
- handlePortHover: (f) => {
1760
- const v = l == null ? void 0 : l.getTargetElement();
1761
- f && f.get("portData") && v && (v.style.cursor = "pointer");
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, c, t) => {
1765
- const L = e.getInstall();
1766
- L.on("moveend", () => {
1757
+ }, useEventManager = (e, l, n, s, i, t) => {
1758
+ const f = e.getInstall();
1759
+ f.on("moveend", () => {
1767
1760
  var o, r;
1768
- const m = e.getZoom();
1769
- (r = (o = l.getProps()).mapMoveEnd) == null || r.call(o, m), n.reRenderTrackLine();
1770
- }), L.on("pointermove", (m) => {
1771
- const o = L.getEventPixel(m.originalEvent), r = L.forEachFeatureAtPixel(o, (p) => p);
1772
- s.handleShipMapEvent(r, "hover"), n.handleTrackMapEvent(r, "hover", m), r && c.handlePortHover(r);
1773
- }), L.on("movestart", () => {
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
- }), L.on("click", debounce((m) => {
1776
- var p, y, N;
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 = L.getEventPixel(m.originalEvent), r = L.forEachFeatureAtPixel(
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 (m.preventDefault(), m.stopPropagation(), r.get("shipData"))
1787
- s.handleShipMapEvent(r, "click", (p = l.getProps()) == null ? void 0 : p.selectShip);
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
- c.selected($), (N = (y = l.getProps()) == null ? void 0 : y.selectPort) == null || N.call(y, $);
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, c) => {
1790
+ createInstance: (s, i) => {
1798
1791
  const t = useMapInitializer();
1799
- t.initMap(s, c);
1800
- const L = t.getInstall(), m = useLayerManager(L), o = usePropsManager();
1801
- o.setProps(c), m.setShowLayerType(c.layerType), m.setGreenTileVisible(c.showGreenLayer);
1802
- const r = useTrackManager(L), p = useCarTrackManager(L, r), y = useShipManager(L), N = usePositionManager(L), $ = useDrawLineManager(L, o), f = useDrawPolygonManager(L, o), v = usePortManager(t);
1803
- useEventManager(t, o, r, y, v, $);
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 = L.getView().calculateExtent(t.getSize()), A = transform([C[0], C[1]], projection.mercator, projection.data), H = transform([C[2], C[3]], projection.mercator, projection.data);
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
- }, x = {
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(x), 1);
1805
+ e.splice(e.indexOf(p), 1);
1813
1806
  },
1814
1807
  methods: {
1815
1808
  ...t,
1816
- layer: m,
1817
- ship: y,
1809
+ layer: v,
1810
+ ship: m,
1818
1811
  track: r,
1819
- carTrack: p,
1812
+ carTrack: L,
1820
1813
  port: {
1821
- render: v.render,
1822
- clear: v.clear,
1823
- selected: v.selected
1814
+ render: w.render,
1815
+ clear: w.clear,
1816
+ selected: w.selected
1824
1817
  },
1825
- position: N,
1818
+ position: F,
1826
1819
  drawLine: $,
1827
- drawPolygon: f,
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(x), x;
1829
+ return e.push(p), p;
1837
1830
  },
1838
1831
  destroyInstance: (s) => {
1839
- const c = e.findIndex((t) => t.id === s);
1840
- c > -1 && (e[c].destroy(), e.splice(c, 1));
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(), c = useMapController(), t = ref(), L = e, m = 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 = c.createInstance(n.value, L), console.log(" instance.value?.methods", t.value.map), m.value = t.value.methods, (o = s.value) == null || o.setScaleLine(t.value.map, L.scaleLineUnit);
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
- c.destroyInstance((o = t == null ? void 0 : t.value) == null ? void 0 : o.id), (r = t.value) == null || r.destroy();
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 p;
1896
- return (p = t.value) == null ? void 0 : p.methods.setCenter(o, r);
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 p;
1904
- return (p = t.value) == null ? void 0 : p.methods.getCenter();
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 p;
2001
- return (p = t.value) == null ? void 0 : p.methods.port.render(o, r);
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 p;
2078
- return (p = t.value) == null ? void 0 : p.methods.utils.calculateCirclePoints(o, r);
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, [