zhihao-ui 1.3.59-alpha.1 → 1.3.59

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.
Files changed (36) hide show
  1. package/dist/es/{BaseInfo-DaDoreNB.js → BaseInfo-D-Mw1tTN.js} +2 -2
  2. package/dist/es/{BaseItem-DHr6xiRz.js → BaseItem-BbqMOHus.js} +3 -3
  3. package/dist/es/{Button--IRouC-m.js → Button-CeZhW1QC.js} +2 -2
  4. package/dist/es/{CascaderLoadMore-DW1quv56.js → CascaderLoadMore-CCflOhPX.js} +2 -2
  5. package/dist/es/{DatePicker-B7GaL7D8.js → DatePicker-DMtsF75M.js} +3 -3
  6. package/dist/es/{DetailHeader-D_uT7fLw.js → DetailHeader-Cny3MSRT.js} +3 -3
  7. package/dist/es/{DetailSubTitle-DPfEUhER.js → DetailSubTitle-BaYkpGpn.js} +2 -2
  8. package/dist/es/{Dialog-BKeaywfZ.js → Dialog-wslff2i5.js} +3 -3
  9. package/dist/es/{DiyDataTable-D4X3Ixq_.js → DiyDataTable-DxhbDTeX.js} +4 -4
  10. package/dist/es/{EditInfoPair-CN6A_w7j.js → EditInfoPair-BjkWUWdC.js} +3 -3
  11. package/dist/es/{FileWrapper-8wV_GgkE.js → FileWrapper-CACEIzz1.js} +4 -4
  12. package/dist/es/{Grid-CsgjlECD.js → Grid-DUbA9lXj.js} +2 -2
  13. package/dist/es/{InfoPair-B6bcuiFb.js → InfoPair-Cc7jd_QY.js} +3 -3
  14. package/dist/es/{Input-Ci9uGpQw.js → Input-CPgzYhQB.js} +3 -3
  15. package/dist/es/{Loading-DQaaQvum.js → Loading-C6gDlpzy.js} +2 -2
  16. package/dist/es/Map-DWbVaRRC.js +2451 -0
  17. package/dist/es/{MessageBox-ChxrBE84.js → MessageBox-C7mSYITB.js} +2 -2
  18. package/dist/es/{MoneyInput-5A8-HgJE.js → MoneyInput-3Er5p9I5.js} +5 -5
  19. package/dist/es/{PageHeadPanel-B6UefYlT.js → PageHeadPanel-BUKAi2go.js} +2 -2
  20. package/dist/es/{Table-BaAiw6Qx.js → Table-C2uGAC4q.js} +6 -6
  21. package/dist/es/{ToolTips-DfVGMM7i.js → ToolTips-CDOUTy7Q.js} +3 -3
  22. package/dist/es/index.js +23 -23
  23. package/dist/es/{utils-Bmap-qTk.js → utils-mwRDbm3z.js} +1 -1
  24. package/dist/es/{vendor-CCGasbEJ.js → vendor-BcKYsh5g.js} +28 -29
  25. package/dist/index.css +1 -1
  26. package/dist/types/components/Map/Map.vue.d.ts +0 -16
  27. package/dist/types/components/Map/function/drawPolygon.d.ts +1 -13
  28. package/dist/types/components/Map/function/event.d.ts +1 -3
  29. package/dist/types/components/Map/function/renderPolygon.d.ts +1 -2
  30. package/dist/types/components/Map/index.d.ts +0 -60
  31. package/dist/types/components/Map/interface/mapProps.d.ts +0 -2
  32. package/dist/types/components/Map/utils/animation.d.ts +2 -3
  33. package/dist/umd/index.css +1 -1
  34. package/dist/umd/index.umd.cjs +56 -56
  35. package/package.json +2 -2
  36. package/dist/es/Map-Xk0dJths.js +0 -2961
@@ -1,2961 +0,0 @@
1
- var Kt = Object.defineProperty;
2
- var _t = (e, s, l) => s in e ? Kt(e, s, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[s] = l;
3
- var Ae = (e, s, l) => _t(e, typeof s != "symbol" ? s + "" : s, l);
4
- import { defineComponent as ht, openBlock as yt, createElementBlock as vt, createElementVNode as ut, ref as me, computed as et, h as Le, createVNode as gt, render as Qt, reactive as Ut, onMounted as Jt, onUnmounted as It } from "vue";
5
- import { S as eo, M as Lt, T as He, X as Ze, t as de, V as to, u as oo, D as mt, v as zt, j as Ot, w as wt, x as no, y as De, F as he, z as se, O as Ee, P as fe, A as Ke, B as xt, L as Be, G as ro, H as Mt, I as ae, J as ke, K as we, N as Pe, Q as nt, R as Ce, U as io, W as ot, Y as ft, Z as Pt, _ as so, $ as lo, a0 as co, a1 as ao, a2 as uo, a3 as At, a4 as Et } from "./vendor-CCGasbEJ.js";
6
- import { _ as bt } from "./Button--IRouC-m.js";
7
- import { w as go } from "./utils-Bmap-qTk.js";
8
- const fo = { id: "scale-line-container" }, ho = /* @__PURE__ */ ht({
9
- __name: "scaleLine",
10
- setup(e, { expose: s }) {
11
- return s({
12
- setScaleLine: (i, a) => {
13
- a || (a = "metric");
14
- const c = new eo({
15
- units: a
16
- }), t = document.getElementById("scale-line-container");
17
- t && (c.setTarget(t), i.addControl(c));
18
- }
19
- }), (i, a) => (yt(), vt("div", fo));
20
- }
21
- }), yo = /* @__PURE__ */ bt(ho, [["__scopeId", "data-v-2bc5dee8"]]), vo = { class: "zoom" }, mo = /* @__PURE__ */ ht({
22
- __name: "zoomControl",
23
- props: {
24
- mapInstance: {
25
- type: Object,
26
- default: () => null
27
- }
28
- },
29
- setup(e) {
30
- const s = e;
31
- console.log("props", s);
32
- const l = () => {
33
- console.log("props");
34
- const { setZoom: a, getZoom: c, getInstall: t } = s.mapInstance.methods;
35
- if (!t()) return;
36
- const M = c();
37
- M && a(M + 1);
38
- }, i = () => {
39
- const { setZoom: a, getZoom: c, getInstall: t } = s.mapInstance.methods;
40
- if (!t()) return;
41
- const M = c();
42
- M && a(M - 1);
43
- };
44
- return (a, c) => (yt(), vt("div", vo, [
45
- ut("div", {
46
- class: "button big-button",
47
- onClick: l
48
- }, " + "),
49
- ut("div", {
50
- class: "button small-button",
51
- onClick: i
52
- }, " - ")
53
- ]));
54
- }
55
- }), wo = /* @__PURE__ */ bt(mo, [["__scopeId", "data-v-78a81741"]]), tt = "a6e8f78974f2581f2ca00485b40c948f", ve = {
56
- // 地图默认层级
57
- default: 13,
58
- // 地图缩放最小层级
59
- min: 3,
60
- // 地图缩放最大层级
61
- max: 18,
62
- // 船形图标最小渲染层级
63
- shipModelMin: 13,
64
- // 船形图标最小渲染层级
65
- shipTriggleMin: 16,
66
- // 船形图标最大渲染层级
67
- shipModelMax: 18,
68
- //根据原系统canvas图片转换svg长宽比例计算缩放值
69
- scaleNum: 0.555
70
- }, ye = {
71
- // 经纬度 源数据 地理坐标 WGS84
72
- data: "EPSG:4326",
73
- // 墨卡托投影坐标 渲染坐标
74
- mercator: "EPSG:3857"
75
- }, xo = [114.84, 30.52], Wt = "https://static.zhihaoscm.cn/", rt = 2003750834e-2;
76
- var Ne = ((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=${tt}`, 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=${tt}`, 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=${tt}`, 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=${tt}`, e.greenTile = `${Wt}/map/tile/{z}/{x}/{y}.png`, e))(Ne || {}), Ge = /* @__PURE__ */ ((e) => (e[e.M = 1] = "M", e[e.KM = 2] = "KM", e[e.NM = 3] = "NM", e))(Ge || {}), ce = /* @__PURE__ */ ((e) => (e.PORT = "port", e.SHIP = "ship", e.TRACK = "track", e.DELETE = "delete", e.PATH = "path", e))(ce || {});
77
- function bo() {
78
- const e = me(), s = me(!0), l = () => e.value, i = () => l().getView(), a = (E) => {
79
- s.value = E;
80
- }, c = () => s.value, t = () => {
81
- var E;
82
- return (E = i()) == null ? void 0 : E.getZoom();
83
- }, L = (E) => {
84
- var r;
85
- (r = i()) == null || r.setZoom(E);
86
- }, M = (E, r) => {
87
- var u;
88
- (u = i()) == null || u.setCenter(de([E, r]));
89
- }, v = () => {
90
- var r;
91
- const E = (r = i()) == null ? void 0 : r.getCenter();
92
- return zt(E);
93
- }, o = () => {
94
- var E;
95
- return (E = l()) == null ? void 0 : E.getSize();
96
- }, n = () => {
97
- const E = window.navigator.userAgent, r = /iPad|iPhone|iPod/.test(E), u = /Safari/.test(E) && !/CriOS/.test(E), x = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(E);
98
- return r && (u || x);
99
- }, N = new Lt(), X = (E, r) => {
100
- A(r);
101
- const u = {
102
- zoom: r.zoom,
103
- center: de(r.center),
104
- minZoom: ve.min,
105
- maxZoom: ve.max,
106
- constrainResolution: !0,
107
- enableRotation: !1,
108
- multiWorld: !0
109
- };
110
- let x = {
111
- target: E,
112
- controls: oo({
113
- zoom: !1
114
- }),
115
- layers: [
116
- N.get("vectorTile"),
117
- N.get("vectorTileMark"),
118
- N.get("satelliteImgTile"),
119
- N.get("satelliteImgTileMark")
120
- ],
121
- view: new to(u)
122
- };
123
- const w = new Lt(x);
124
- if (n()) {
125
- const y = new mt({
126
- handleEvent: function(S) {
127
- if (S.type === "dblclick") {
128
- console.log("IOS Browser---dblclick"), S.originalEvent.preventDefault();
129
- const P = w.getView(), k = P.getZoom();
130
- return P.setZoom(k + 1), !1;
131
- }
132
- return !0;
133
- }
134
- });
135
- w.addInteraction(y);
136
- }
137
- e.value = w;
138
- }, A = (E) => {
139
- N.set("vectorTile", new He({
140
- source: new Ze({ url: Ne.vectorTile }),
141
- visible: E.layerType === "vector",
142
- zIndex: 0,
143
- preload: 1,
144
- className: "vector"
145
- })), N.set("vectorTileMark", new He({
146
- source: new Ze({ url: Ne.vectorTileMark }),
147
- visible: E.layerType === "vector",
148
- zIndex: 1,
149
- preload: 1,
150
- className: "vector"
151
- })), N.set("satelliteImgTile", new He({
152
- source: new Ze({ url: Ne.satelliteImgTile }),
153
- visible: E.layerType === "satellite",
154
- zIndex: 0,
155
- preload: 1,
156
- className: "satellite"
157
- })), N.set("satelliteImgTileMark", new He({
158
- source: new Ze({ url: Ne.satelliteImgTileMark }),
159
- visible: E.layerType === "satellite",
160
- zIndex: 1,
161
- preload: 1,
162
- className: "satellite"
163
- })), N.set("greenMark", new He({
164
- source: new Ze({ url: Ne.greenTile }),
165
- visible: E.showGreenLayer,
166
- zIndex: 2,
167
- className: "greenTile"
168
- }));
169
- };
170
- return {
171
- getInstall: l,
172
- getView: i,
173
- getZoom: t,
174
- setZoom: L,
175
- setCenter: M,
176
- getCenter: v,
177
- getSize: o,
178
- initMap: X,
179
- setBaseLayerMap: A,
180
- setMapClick: a,
181
- getMapClick: c
182
- };
183
- }
184
- const pt = function(e, s) {
185
- const l = Number(s) / 6e5;
186
- return [Number(e) / 6e5, l];
187
- }, po = (e, s) => {
188
- const l = de(e), i = s * 1e3, a = [
189
- l[0] - i,
190
- l[1] - i,
191
- l[0] + i,
192
- l[1] + i
193
- ], c = no(a, ye.mercator, ye.data);
194
- return {
195
- leftTopPoint: { lng: c[0], lat: c[3] },
196
- rightTopPoint: { lng: c[2], lat: c[3] },
197
- rightBottomPoint: { lng: c[2], lat: c[1] },
198
- leftBottomPoint: { lng: c[0], lat: c[1] }
199
- };
200
- }, Co = function(e, s) {
201
- const i = wt(e);
202
- let a = "";
203
- switch (console.log(s, Ge), s) {
204
- case Ge.M:
205
- a = Math.round(i * 100) / 100 + " m";
206
- break;
207
- case Ge.KM:
208
- a = Math.round(i / 1e3 * 100) / 100 + " km";
209
- break;
210
- case Ge.NM:
211
- a = (Math.round(i / 1e3 * 100) / 100 / 1.852).toFixed(2) + " nm";
212
- break;
213
- }
214
- return a;
215
- };
216
- function ko(e) {
217
- const s = e[0] * rt / 180;
218
- let l = Math.log(Math.tan((90 + e[1]) * Math.PI / 360)) / (Math.PI / 180);
219
- return l = l * rt / 180, [s, l];
220
- }
221
- function Ve(e = "") {
222
- let s = e.replace(/&?/g, "&");
223
- return s = s.replace(/&#x([0-9a-fA-F]+);?/g, (l, i) => {
224
- const a = parseInt(i, 16);
225
- return String.fromCodePoint(a);
226
- }), s;
227
- }
228
- const Tt = (e) => {
229
- const s = new De({
230
- font: "Normal 14px map-iconfont",
231
- text: Ve(e),
232
- fill: new he({ color: "#fff" }),
233
- offsetY: -14
234
- });
235
- return new se({
236
- text: s,
237
- zIndex: 100
238
- });
239
- }, St = (e, s = "lonlat") => {
240
- const l = { lon: 0, lat: 0 }, i = e[0] / rt * 180;
241
- let a = e[1] / rt * 180;
242
- return a = 180 / Math.PI * (2 * Math.atan(Math.exp(a * Math.PI / 180)) - Math.PI / 2), l.lon = i, l.lat = a, s === "lonlat" ? l : [i, a];
243
- }, Lo = (e) => {
244
- const s = Ot.duration(e, "minutes"), l = Math.floor(s.asDays()), i = s.hours(), a = s.minutes();
245
- let c = `${String(a).padStart(2, "0")}分`;
246
- return i !== 0 && (c = `${String(i).padStart(2, "0")}时${c}`), l !== 0 && (c = `${String(l).padStart(2, "0")}天${c}`), c;
247
- }, Mo = (e, s) => {
248
- let l = null;
249
- const i = async (o) => {
250
- if (!e || (console.log("vehicleInfo", o), !(o != null && o.lon && (o != null && o.lat)))) return;
251
- const n = Math.abs(Number(o.lon)) > 180 ? pt(o.lon, o.lat) : [o.lon, o.lat];
252
- a(o, de(n));
253
- const N = e == null ? void 0 : e.getView(), X = new fe(n);
254
- N.setCenter(Ke(X.getCoordinates(), ye.data, ye.mercator));
255
- }, a = (o, n) => {
256
- const N = `${Wt}map/car-icon.gif`;
257
- l || (l = new Ee({
258
- element: document.createElement("div"),
259
- positioning: "center-center",
260
- stopEvent: !1
261
- // 允许交互事件穿透
262
- }), e.addOverlay(l));
263
- const X = l.getElement();
264
- X.style.backgroundImage = `url(${N})`, X.style.width = "80px", X.style.height = "80px";
265
- const A = (o == null ? void 0 : o.drc) || "";
266
- X.style.transform = `rotate(${A}deg)`, X.style.backgroundSize = "cover", l == null || l.setPosition(n);
267
- };
268
- return {
269
- location: i,
270
- remove: () => {
271
- const o = l == null ? void 0 : l.getElement();
272
- o && (o.innerHTML = "");
273
- },
274
- renderTrack: (o, n, N) => {
275
- s.render(o, n, N, "truck", 1e3);
276
- },
277
- setCenter: (o) => {
278
- s.setCenter(o);
279
- },
280
- closeTrack: () => {
281
- s.close();
282
- },
283
- playTrack: (o, n) => {
284
- s.play(o, n);
285
- }
286
- };
287
- };
288
- var Ht = /* @__PURE__ */ ((e) => (e[e.发动机使用中 = 0] = "发动机使用中", e[e.锚泊 = 1] = "锚泊", e[e.未操作 = 2] = "未操作", e[e.操纵能力受限 = 3] = "操纵能力受限", e[e.吃水受限 = 4] = "吃水受限", e[e.系泊 = 5] = "系泊", e[e.搁浅 = 6] = "搁浅", e[e.从事捕捞 = 7] = "从事捕捞", e[e.航行中 = 8] = "航行中", e[e.留作将来修正导航状态 = 9] = "留作将来修正导航状态", e[e.高速船留用 = 10] = "高速船留用", e[e.机动船尾推作业 = 11] = "机动船尾推作业", e[e.机动船顶推或侧推作业 = 12] = "机动船顶推或侧推作业", e[e.飞翼船留用 = 13] = "飞翼船留用", e[e.现行的 = 14] = "现行的", e[e.未定义 = 15] = "未定义", e))(Ht || {}), pe = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.front = "front", e.up = "up", e.down = "down", e.back = "back", e))(pe || {});
289
- const Po = (e) => {
290
- const s = /* @__PURE__ */ new Map(), l = {};
291
- let i = null;
292
- const a = "--";
293
- let c = null;
294
- const t = document.createElement("div"), L = new Ee({
295
- element: t,
296
- positioning: "top-left",
297
- className: "track-label-popup"
298
- });
299
- let M, v, o, n, N, X = !1, A = Date.now(), E, r = 0, u = null, x = 20;
300
- const w = 8, y = [], S = (g) => {
301
- var m;
302
- for (y.unshift(g); y.length > w; ) {
303
- const p = y.pop(), $ = s.get(p);
304
- $ && ((m = $.getSource()) == null || m.clear(), e == null || e.removeLayer($), s.delete(p), delete l[p]);
305
- }
306
- };
307
- let P = "";
308
- const k = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"], te = xt(async () => {
309
- if (i && l[i] && s.get(i).getVisible()) {
310
- console.log("reRenderTrackLine------------"), await ie(i);
311
- const g = G(i, l[i]);
312
- q(i, g);
313
- }
314
- }, 100), _ = () => i && l[i] && s.get(i).getVisible(), G = (g, m) => {
315
- let p = [];
316
- const $ = Math.max(1, Math.floor(m.length / x));
317
- return p = m.filter((D, O) => O % $ === 0).map((D, O) => {
318
- if (Number(D.lon) > 180 || Number(D.lat) > 180) {
319
- const [U, ee] = pt(D.lon, D.lat);
320
- D.lon = U, D.lat = ee;
321
- }
322
- return D.center = [D.lon, D.lat], D.centerPoint = ko(D.center) || [], D.time = Ot(D.createdAt).format("YYYY-MM-DD HH:mm:ss"), D.id = g, D.index = O, D;
323
- }), p.filter(
324
- (D, O, U) => O === U.findIndex(
325
- (ee) => Math.abs(ee.lon - D.lon) < 1e-6 && Math.abs(ee.lat - D.lat) < 1e-6
326
- )
327
- );
328
- }, Q = async (g, m, p, $ = "ship", C = 200) => {
329
- if (!e || JSON.stringify(l[g]) === JSON.stringify(m) && i === g || (m = m == null ? void 0 : m.reverse(), L && $ === "ship" && (e != null && e.getOverlays().getArray().includes(L) || e.addOverlay(L)), (m == null ? void 0 : m.length) < 2))
330
- return;
331
- S(g), i = g, l[g] = m, x = C;
332
- const K = Object.keys(l).findIndex((D) => D === g) || 0;
333
- P = p || k[K > 10 ? 10 : K], await j(), await be(i);
334
- }, re = (g) => {
335
- const m = new we();
336
- return new ke({
337
- source: m,
338
- visible: !1,
339
- // 默认隐藏
340
- className: `track-layer-${g}`,
341
- renderBuffer: 1024,
342
- properties: { layerType: ce.TRACK },
343
- zIndex: 10
344
- });
345
- }, W = (g) => {
346
- s.forEach((m, p) => {
347
- var C;
348
- const $ = p === g;
349
- m.getVisible() !== $ && (m.setVisible($), e.getLayers().getArray().includes(m) || e.addLayer(m), $ || (C = m.getSource()) == null || C.clear());
350
- }), i = g;
351
- }, j = async () => {
352
- const g = i;
353
- if (!s.has(g)) {
354
- const K = re(g);
355
- s.set(g, K);
356
- }
357
- await W(g);
358
- const m = P || "", p = l[g] || [];
359
- if (!(p && p.length > 1)) return [];
360
- let $ = [];
361
- $ = G(g, p);
362
- const C = $.map((K) => K == null ? void 0 : K.centerPoint);
363
- $.length >= 2 && await h(g, C, m);
364
- }, h = (g, m, p) => {
365
- const $ = new Be(m), C = s.get(g).getSource(), K = C.getFeatureById(g);
366
- if (K)
367
- K.setGeometry($), K.setId(g), K.setStyle(f(p)), u = K;
368
- else {
369
- const D = new ae({ geometry: $ });
370
- D.setId(g), D.set("type", "line"), D.setStyle(f(p)), C.addFeature(D), u = D;
371
- }
372
- return u;
373
- }, f = (g) => new se({
374
- stroke: new Pe({
375
- color: g,
376
- width: 2
377
- })
378
- }), b = (g, m, p) => {
379
- try {
380
- const $ = g == null ? void 0 : g.get("data");
381
- if (g && $ && m === "hover") {
382
- e.getTargetElement().style.cursor = $ ? "pointer" : "";
383
- const C = H($), K = p == null ? void 0 : p.coordinate;
384
- K && (t.querySelector(".popup-content"), t.innerHTML = C, L == null || L.setPosition(K));
385
- } else
386
- L && L.setPosition(void 0);
387
- } catch ($) {
388
- console.error("handleTrackMapEvent", $);
389
- }
390
- }, H = (g) => {
391
- if (!(g != null && g.time)) return;
392
- let m = "";
393
- return g != null && g.stayTime && (m = `
394
- <div class="item w-100">
395
- <div class="item-label">停泊时间约</div>
396
- <div class="item-item">${Lo(Number(g.stayTime))}</div>
397
- </div>
398
- `), `
399
- <div class="track-point-popup">
400
- <div class="item">
401
- <div class="item-label">状态</div>
402
- <div class="item-item">${g != null && g.sailStatus ? Ht[g.sailStatus] : a}</div>
403
- </div>
404
- <div class="item">
405
- <div class="item-label">航速</div>
406
- <div class="item-item">${g.speed || a}</div>
407
- </div>
408
- <div class="item">
409
- <div class="item-label">艏向</div>
410
- <div class="item-item">${g.hdg || a}</div>
411
- </div>
412
- <div class="item">
413
- <div class="item-label">航向</div>
414
- <div class="item-item">${g.cog || a}</div>
415
- </div>
416
- <div class="item">
417
- <div class="item-label">经度</div>
418
- <div class="item-item">${g.lon || a}</div>
419
- </div>
420
- <div class="item">
421
- <div class="item-label">纬度</div>
422
- <div class="item-item">${g.lat || a}</div>
423
- </div>
424
- <div class="item w-100">
425
- <div class="item-label">时间</div>
426
- <div class="item-item">${g.time}</div>
427
- </div>
428
- ${m ?? m}
429
- </div>`;
430
- }, V = (g) => {
431
- const p = g.map((O) => {
432
- const U = e.getPixelFromCoordinate(de(O.center));
433
- return {
434
- ...O,
435
- original: O,
436
- pixel: U,
437
- distance: 0
438
- // 先初始化,后续计算
439
- };
440
- });
441
- let $ = 0;
442
- p[0].distance = 0;
443
- for (let O = 1; O < p.length; O++) {
444
- const U = p[O - 1].pixel, ee = p[O].pixel, ge = ee[0] - U[0], z = ee[1] - U[1];
445
- $ += Math.sqrt(ge * ge + z * z), p[O].distance = $;
446
- }
447
- const C = p.filter(
448
- (O, U) => U === 0 || U === p.length - 1
449
- ), K = [];
450
- for (let O = 0; O < C.length; O++) {
451
- const U = C[O];
452
- if (K.push(U), O < C.length - 1) {
453
- const ee = C[O + 1], ge = ee.distance - U.distance, z = Math.floor(ge / 100);
454
- for (let ne = 1; ne <= z; ne++) {
455
- const le = U.distance + ne * 100;
456
- if (le >= ee.distance) break;
457
- const ue = F(
458
- p,
459
- le
460
- );
461
- ue && K.push(ue);
462
- }
463
- }
464
- }
465
- return Array.from(
466
- new Map(K.map((O) => [O.distance.toFixed(2), O])).values()
467
- ).map((O) => ({
468
- ...O.original,
469
- // 优先保留原始数据
470
- ...O,
471
- // 覆盖坐标等计算属性
472
- coord: O.coord,
473
- // 确保使用插值后的坐标
474
- pixel: O.pixel,
475
- distance: O.distance
476
- }));
477
- };
478
- function F(g, m) {
479
- for (let p = 1; p < g.length; p++) {
480
- const $ = g[p - 1], C = g[p];
481
- if (m >= $.distance && m <= C.distance) {
482
- const K = (m - $.distance) / (C.distance - $.distance), D = $.pixel[0] + K * (C.pixel[0] - $.pixel[0]), O = $.pixel[1] + K * (C.pixel[1] - $.pixel[1]), U = e == null ? void 0 : e.getCoordinateFromPixel([D, O]);
483
- return {
484
- ...$,
485
- // 继承前一个点的属性(可调整)
486
- coord: U,
487
- pixel: [D, O],
488
- distance: m,
489
- original: void 0
490
- // 明确标记为插值生成点
491
- };
492
- }
493
- }
494
- return null;
495
- }
496
- const q = async (g, m) => {
497
- const p = V(m);
498
- console.log("simplifiedPoints", p.length, "list", m.length);
499
- const $ = p.map((O) => Z(O)), C = p.map((O) => oe(O, P)), K = xe(g, p, m, P);
500
- s.get(g).getSource().addFeatures([...$, ...C, ...K]);
501
- }, Z = (g) => {
502
- const m = new ae({
503
- geometry: new fe(g == null ? void 0 : g.centerPoint),
504
- data: g
505
- });
506
- m.set("type", "track_point"), m.set("trackId", g.id), m.set("data", g);
507
- let p = [
508
- ...I(g, P)
509
- ];
510
- return (g.index === 0 || g.index === l[g.id].length - 1) && (p = [...Me(g)], m.set("type", "track_begin")), g.state !== void 0 && g.state !== null && (p = [...Y(g)], m.set("type", "track_icon")), m.setStyle(p), m;
511
- }, d = window.devicePixelRatio || 1, T = /* @__PURE__ */ new Map();
512
- let R = null, B = null;
513
- function J(g, m) {
514
- const p = `${g}`;
515
- if (T.has(p))
516
- return T.get(p);
517
- if (!R) {
518
- R = document.createElement("canvas");
519
- try {
520
- B = R.getContext("2d", {
521
- willReadFrequently: !0
522
- });
523
- } catch (kt) {
524
- console.log("e", kt), B = R.getContext("2d");
525
- }
526
- }
527
- const $ = R, C = B;
528
- if (!C) return "";
529
- $.width = 0, $.height = 0;
530
- const K = 2, D = 8, O = 16, U = window.devicePixelRatio || 1, ee = "500 12px Arial";
531
- C.font = ee;
532
- const z = C.measureText(g).width, ne = D + z + D, le = K + 14 + K;
533
- let ue = 0, Te = 0, Fe = 0, Re = 0, Ye = 0, ze = 0, $e = 0, Oe = 0;
534
- ue = O + ne, Te = O + le, Fe = ne, Re = le, Ye = ne + O, ze = 0, $e = 0, Oe = O, $.width = Math.round(ue * U), $.height = Math.round(Te * U), C.scale(U, U), C.clearRect(0, 0, ue, Te), C.beginPath(), C.moveTo(Fe, Re), C.lineTo(Ye, ze), C.strokeStyle = m || "#FFF", C.lineWidth = 1, C.stroke(), C.fillStyle = "#FFF", C.fillRect($e, Oe, ne, le), C.strokeStyle = m || "#FFF", C.lineWidth = 1, C.strokeRect($e, Oe, ne, le), C.font = ee, C.textBaseline = "middle";
535
- const Je = Oe + K / 2 + le / 2;
536
- C.strokeStyle = "#ffffff", C.lineWidth = 1, C.strokeText(g, $e + D, Je), C.fillStyle = "#000000", C.fillText(g, $e + D, Je);
537
- const Ie = $.toDataURL("image/png");
538
- return T.set(p, Ie), Ie;
539
- }
540
- const oe = (g, m) => {
541
- const p = J(g.time, m), $ = new ae({
542
- geometry: new fe(g == null ? void 0 : g.centerPoint),
543
- data: g
544
- });
545
- $.set("type", "track_point_label");
546
- const C = new se({
547
- image: new Ce({
548
- src: p,
549
- anchor: [1, 0],
550
- displacement: [0, 0],
551
- scale: 1 / d,
552
- anchorXUnits: "fraction",
553
- anchorYUnits: "fraction"
554
- }),
555
- zIndex: 100
556
- });
557
- return $.setStyle(C), $;
558
- }, ie = (g) => {
559
- const m = s.get(g).getSource();
560
- m.forEachFeature((p) => {
561
- p.get("type") !== "line" && m.removeFeature(p);
562
- });
563
- }, I = (g, m) => [
564
- new se({
565
- // 扩大交互热区
566
- image: new nt({
567
- stroke: new Pe({ color: "rgba(0, 0, 0, 0.01)", width: 20 }),
568
- radius: 3
569
- })
570
- }),
571
- // 轨迹点样式
572
- new se({
573
- image: new nt({
574
- fill: new he({ color: m }),
575
- stroke: new Pe({ color: "#fff", width: 2 }),
576
- radius: 3
577
- })
578
- })
579
- // textStyle,
580
- ], Y = (g) => {
581
- const m = "#E31818", p = "#1890FF", $ = "&#xe6d2", C = new se({
582
- text: new De({
583
- font: "Normal 22px map-iconfont",
584
- text: Ve($),
585
- offsetY: -10,
586
- fill: new he({
587
- color: Number(g.state) === 0 ? m : Number(g.state) === 1 ? p : ""
588
- })
589
- }),
590
- zIndex: 99
591
- }), D = Tt("&#xe6e2;"), U = Tt("&#xe703;"), ee = [];
592
- return Number(g.state) === 0 ? ee.push(D) : Number(g.state) === 1 && ee.push(U), ee.push(C), ee;
593
- }, xe = (g, m, p, $) => {
594
- const C = m || [], K = m.length;
595
- K || (C.push(p[0]), C.push(p[p.length - 1]));
596
- const D = new Set(m.map((U) => `${U.centerPoint[0]},${U.centerPoint[1]}`)), O = [];
597
- for (let U = 0; U < K - 1; U++) {
598
- let ee;
599
- const ge = m[U], z = (m[U + 1].index + ge.index) / 2;
600
- if (z % 2 === 0)
601
- ee = p[z].centerPoint;
602
- else {
603
- const ne = p[Math.floor(z)], le = p[Math.ceil(z)];
604
- if (ne && le) {
605
- const [ue, Te] = ne.centerPoint, [Fe, Re] = le.centerPoint;
606
- ee = [(ue + Fe) / 2, (Te + Re) / 2];
607
- }
608
- }
609
- if (ee) {
610
- const ne = `${ee[0]},${ee[1]}`;
611
- if (!D.has(ne)) {
612
- const le = new ae({
613
- geometry: new fe(ee)
614
- });
615
- le.set("type", "track_arrow"), le.setStyle(
616
- new se({
617
- text: new De({
618
- font: "700 12px map-iconfont",
619
- text: Ve("&#xe6bc;"),
620
- fill: new he({ color: $ }),
621
- rotation: Ct(
622
- m[U].center,
623
- m[U + 1].center
624
- ) * (Math.PI / 180)
625
- })
626
- })
627
- ), O.push(le), D.add(ne);
628
- }
629
- }
630
- }
631
- return O;
632
- }, be = (g) => {
633
- var K, D;
634
- const m = e.getView(), p = (K = s == null ? void 0 : s.get(g)) == null ? void 0 : K.getSource(), $ = u || (g ? p == null ? void 0 : p.getFeatureById(g) : null);
635
- if (!$) return;
636
- const C = (D = $ == null ? void 0 : $.getGeometry()) == null ? void 0 : D.getExtent();
637
- if (!C || C[0] === C[2] || C[1] === C[3]) {
638
- console.warn("Invalid track extent");
639
- return;
640
- }
641
- try {
642
- const O = C[2] - C[0], U = C[3] - C[1], ee = 1e-4;
643
- if (O < ee || U < ee) {
644
- const z = [(C[0] + C[2]) / 2, (C[1] + C[3]) / 2];
645
- m.setCenter(z);
646
- return;
647
- }
648
- const ge = ro(C, Math.max(O, U) * 0.1);
649
- m.fit(ge, {
650
- maxZoom: ve.max,
651
- padding: [30, 30, 30, 30]
652
- // 添加边距
653
- });
654
- } catch (O) {
655
- console.error("setTrackViewCenter error:", O);
656
- }
657
- }, Me = (g) => {
658
- const m = "&#xe69b;", C = g.index === 0 ? "#fcdc3f" : "#ff0000";
659
- return [new se({
660
- text: new De({
661
- font: "Normal 14px map-iconfont",
662
- text: Ve(m),
663
- fill: new he({ color: C })
664
- }),
665
- zIndex: 101
666
- })];
667
- }, lt = () => {
668
- console.log("清除所有的轨迹-----"), Ue(), s.forEach((m) => {
669
- var p;
670
- (p = m.getSource()) == null || p.clear(), e == null || e.removeLayer(m);
671
- }), Object.keys(l).forEach((m) => {
672
- s.delete(m), delete l[m];
673
- });
674
- }, _e = (g) => {
675
- const m = s.get(g || i);
676
- m == null || m.setVisible(!1);
677
- const p = e.getOverlays().getArray();
678
- for (let $ = 0; $ < p.length; ) {
679
- const C = p[$];
680
- C.get("class") === "track-label-overlay" ? (C.setPosition(void 0), C.dispose()) : $++;
681
- }
682
- Ue();
683
- }, Qe = (g, m = Ge.NM) => {
684
- const p = {
685
- id: g,
686
- length: "--"
687
- }, C = (l[g] || []).map(
688
- (D) => Ke([D.lon, D.lat], ye.data, ye.mercator)
689
- ), K = new Be(C);
690
- return p.length = Co(K, m) || "--", p;
691
- }, Bt = (g, m) => {
692
- Yt(String(g), m);
693
- }, Yt = (g, m) => {
694
- const p = l[String(g)], $ = p == null ? void 0 : p.map((C) => [C.lon, C.lat]);
695
- $ && jt($, m);
696
- }, ct = new se({
697
- text: new De({
698
- font: "700 20px map-iconfont",
699
- text: Ve("&#xe657;"),
700
- fill: new he({ color: "#ff0000" }),
701
- rotation: 0
702
- // 初始旋转角度
703
- })
704
- }), qt = (g, m) => {
705
- var z, ne;
706
- const p = Number(50 * m), $ = ((z = g.frameState) == null ? void 0 : z.time) ?? Date.now(), C = $ - A;
707
- if (r = (r + p * C / 1e6) % 2, A = $, r >= 1) {
708
- Ue();
709
- return;
710
- }
711
- const K = v.getCoordinateAt(
712
- r > 1 ? 2 - r : r
713
- ), D = v.getCoordinateAt(
714
- r > 1 ? r - 0.01 : r
715
- ), O = v.getCoordinateAt(
716
- r > 1 ? 2 - r : r + 0.01
717
- ), ee = Ct(
718
- St(D, "array"),
719
- St(O, "array")
720
- ) * Math.PI / 180;
721
- (ne = ct.getText()) == null || ne.setRotation(ee), n.setCoordinates(K);
722
- const ge = io(g);
723
- ge.setStyle(ct), ge.drawGeometry(n), e == null || e.render();
724
- }, Xt = () => {
725
- var g;
726
- X = !0, A = Date.now(), r = 0, n = ((g = o.getGeometry()) == null ? void 0 : g.clone()) || new fe([0, 0]), c && (E == null || E.on("postrender", c)), N == null || N.setGeometry(void 0);
727
- }, Ue = () => {
728
- X && (X = !1, N == null || N.setGeometry(void 0), c && E && E.un("postrender", c), E && (e == null || e.removeLayer(E)), E = null, N = null);
729
- }, jt = (g, m) => {
730
- X && Ue(), M = new Mt({
731
- factor: 1e6
732
- }).writeGeometry(new Be(g)), v = new Mt({
733
- factor: 1e6
734
- }).readGeometry(M, {
735
- dataProjection: ye.data,
736
- featureProjection: ye.mercator
737
- }), o = new ae({
738
- type: "icon",
739
- geometry: new fe(v.getFirstCoordinate())
740
- });
741
- const p = o.getGeometry();
742
- n = p ? p.clone() : new fe([0, 0]), N = new ae({
743
- type: "geoMarker",
744
- style: ct,
745
- geometry: n
746
- }), E = new ke({
747
- source: new we({
748
- features: [N]
749
- })
750
- }), e == null || e.addLayer(E), c = ($) => qt($, m), Xt();
751
- }, Ct = (g, m, p) => {
752
- function $(z) {
753
- return 180 * (z % (2 * Math.PI)) / Math.PI;
754
- }
755
- function C(z) {
756
- return z % 360 * Math.PI / 180;
757
- }
758
- function K(z) {
759
- var ne;
760
- if (!z) throw new Error("Coordinate is required");
761
- if (!Array.isArray(z)) {
762
- if ((z == null ? void 0 : z.type) === "Feature" && (z == null ? void 0 : z.geometry) !== null && ((ne = z == null ? void 0 : z.geometry) == null ? void 0 : ne.type) === "Point")
763
- return z == null ? void 0 : z.geometry.coordinates;
764
- if (z.type === "Point") return (z == null ? void 0 : z.coordinates) || [];
765
- }
766
- if (Array.isArray(z) && z.length >= 2 && !Array.isArray(z[0]) && !Array.isArray(z[1]))
767
- return z;
768
- throw new Error(
769
- "Coordinate must be GeoJSON Point or an Array of numbers"
770
- );
771
- }
772
- function D(z, ne, le = {}) {
773
- if (le.final)
774
- return function(Je, Ie) {
775
- return (D(Ie, Je) + 180) % 360;
776
- }(z, ne);
777
- const ue = K(z), Te = K(ne), Fe = C(ue[0]), Re = C(Te[0]), Ye = C(ue[1]), ze = C(Te[1]), $e = Math.sin(Re - Fe) * Math.cos(ze), Oe = Math.cos(Ye) * Math.sin(ze) - Math.sin(Ye) * Math.cos(ze) * Math.cos(Re - Fe);
778
- return $(Math.atan2($e, Oe));
779
- }
780
- function O(z) {
781
- return !isNaN(z) && z !== null && !Array.isArray(z);
782
- }
783
- function U(z, ne = {}, le = {}) {
784
- return z || console.log("Coordinates are required"), Array.isArray(z) || console.log("Coordinates must be an Array"), z.length < 2 && console.log("Coordinates must be at least 2 numbers long"), (!O(z[0]) || !O(z[1])) && console.log("Coordinates must contain numbers"), ee({ type: "Point", coordinates: z }, ne, le);
785
- }
786
- function ee(z, ne = {}, le = {}) {
787
- const ue = {
788
- type: "Feature",
789
- id: "",
790
- properties: {},
791
- bbox: {},
792
- geometry: {}
793
- };
794
- return le.id !== void 0 && (ue.id = le.id), le.bbox && (ue.bbox = le.bbox), ue.properties = ne, ue.geometry = z, ue;
795
- }
796
- const ge = D(U(g), U(m), p);
797
- return ge < 0 ? 360 + ge : ge;
798
- };
799
- return {
800
- render: Q,
801
- remove: lt,
802
- play: Bt,
803
- setCenter: be,
804
- close: _e,
805
- getLength: Qe,
806
- handleTrackMapEvent: b,
807
- reRenderTrackLine: te,
808
- getTrackStatus: _
809
- };
810
- }, Eo = () => {
811
- const e = me();
812
- return {
813
- setProps: (i) => {
814
- e.value = i;
815
- },
816
- getProps: () => e.value
817
- };
818
- };
819
- function To(e) {
820
- const s = me(null), l = et(() => ({
821
- "--overlay-color": "#FFF",
822
- "--bg-color1": e.colors && e.colors[0] ? e.colors[0] : "#ffffff",
823
- // 默认第一个颜色
824
- "--bg-color2": e.colors && e.colors[1] ? e.colors[1] : "#ffffff",
825
- "--bg-color": "#ffffff",
826
- position: "relative",
827
- "pointer-events": "none"
828
- })), i = et(() => {
829
- var t;
830
- return {
831
- position: "relative",
832
- "border-radius": "1px",
833
- "background-color": "var(--content-bg)",
834
- color: "#000",
835
- padding: "2px 5px 2px 0px",
836
- font: "500 Normal 12px",
837
- "font-size": "12px",
838
- "box-shadow": "0 2px 10px rgba(0, 0, 0, 0.2)",
839
- "white-space": "nowrap",
840
- border: "1px solid #FFF",
841
- "pointer-events": "auto",
842
- // 'transition': 'background-color 0.5s ease, border 0.5s ease',
843
- "z-index": "1",
844
- display: "flex",
845
- "align-items": "center",
846
- animation: e.selected ? e.colors && ((t = e.colors) == null ? void 0 : t.length) >= 2 ? "blink-dual 2s ease-in-out infinite" : "blink-single 1.5s ease-in-out infinite" : "none"
847
- // "animation": props.selected ? 'blink 1.5s ease-in-out infinite' : 'none', // 动画开关
848
- };
849
- }), a = et(() => ({
850
- width: "14px",
851
- height: "14px",
852
- margin: "1px 5px 1px 1px",
853
- "background-color": "var(--attention-bg)"
854
- })), c = et(() => ({
855
- position: "absolute",
856
- top: "0px",
857
- color: "var(--overlay-color)",
858
- "pointer-events": "none",
859
- transform: "translateY(-1px)",
860
- "z-index": "0",
861
- width: "20px",
862
- height: "20px",
863
- overflow: "visible",
864
- left: "-20px"
865
- }));
866
- return () => Le("div", {
867
- ref: s,
868
- class: "ship-overlay-container",
869
- "data-id": e.id,
870
- style: l.value
871
- }, [
872
- Le(
873
- "div",
874
- {
875
- class: "ship-overlay-content",
876
- style: i.value,
877
- "data-id": e.id
878
- },
879
- [
880
- Le("div", {
881
- "data-id": e.id,
882
- style: e.selected ? a.value : {}
883
- }, ""),
884
- Le("div", {
885
- class: "text",
886
- "data-id": e.id,
887
- style: {
888
- fontSize: "12px",
889
- fontWeight: 500,
890
- fontFamily: "Arial"
891
- }
892
- }, e.name || "未命名船舶"),
893
- Le("div", {
894
- class: "icons",
895
- "data-id": e.id,
896
- style: {
897
- color: "#3370ff",
898
- marginLeft: "6px"
899
- }
900
- }, [
901
- e.existDevice ? Le("i", {
902
- class: "map-iconfont icon-camera",
903
- "data-id": e.id,
904
- style: {
905
- fontSize: "12px",
906
- marginRight: "6px"
907
- }
908
- }) : "",
909
- e.existMobile ? Le("i", {
910
- "data-id": e.id,
911
- class: "map-iconfont icon-tele",
912
- style: {
913
- fontSize: "12px",
914
- marginRight: "6px"
915
- }
916
- }) : "",
917
- e.existWaterGauge ? Le("i", {
918
- "data-id": e.id,
919
- class: "map-iconfont icon-ruler",
920
- style: {
921
- fontSize: "12px",
922
- marginRight: "6px"
923
- }
924
- }) : ""
925
- ])
926
- ]
927
- ),
928
- Le("svg", {
929
- class: "ship-overlay-line",
930
- style: c.value,
931
- viewBox: "0 0 20 20",
932
- xmlns: "http://www.w3.org/2000/svg"
933
- }, [
934
- Le("line", {
935
- x1: "0",
936
- y1: "20",
937
- x2: "20",
938
- y2: "4",
939
- stroke: "white",
940
- "stroke-width": "1"
941
- })
942
- ])
943
- ]);
944
- }
945
- const Zt = (e) => {
946
- const { spd: s, hdg: l, cog: i } = e;
947
- return s ? l !== null && +l != 511 && i !== null ? i - +l >= 3 ? pe.right : i - +l <= -3 ? pe.left : pe.front : pe.front : "";
948
- };
949
- function So(e, s) {
950
- const { isHighlight: l, shipData: i, color: a } = e.getProperties(), c = it(s), t = st(s, i, c), L = ((i == null ? void 0 : i.cog) - 90 + 360) % 360, M = Zt(i);
951
- return {
952
- featureId: i.id,
953
- shipType: c,
954
- isHighlight: !!l,
955
- scale: t,
956
- fill: a,
957
- deg: L,
958
- direct: M
959
- };
960
- }
961
- const Xe = /* @__PURE__ */ new Map();
962
- function Fo(e) {
963
- return `${e.featureId}_${e.shipType}_${e.isHighlight}_${e.scale}_${e.fill}_${e.deg}_${e.direct}`;
964
- }
965
- const We = (e, s) => {
966
- const l = So(s, e), i = Fo(l);
967
- if (Xe.has(i))
968
- return Xe.get(i);
969
- const { shipData: a } = s.getProperties(), c = it(e), t = st(e, a, c), L = Ro(s, t, c);
970
- return Xe.set(i, L), L;
971
- }, it = (e) => {
972
- const s = e == null ? void 0 : e.getView().getZoom();
973
- return s && s <= ve.shipModelMax && s >= ve.shipTriggleMin ? "ship" : "triangle";
974
- };
975
- let Ft = null;
976
- const st = (e, s, l) => {
977
- if (l === "triangle")
978
- return ve.scaleNum;
979
- const i = e == null ? void 0 : e.getView().getResolution();
980
- if (Ft === i && l === "triangle")
981
- return ve.scaleNum;
982
- if (Ft = i, l === "ship") {
983
- const { len: a, wid: c } = s, t = 97, L = 20, M = 1 / i, v = a * M / t, o = c * M / L, n = Math.min(v, o);
984
- return Math.max(0.2, Math.min(2, n));
985
- }
986
- return ve.scaleNum;
987
- }, Ro = (e, s, l) => {
988
- const { color: i, direct: a, isHighlight: c, shipData: t } = e.getProperties(), L = ((t == null ? void 0 : t.cog) - 90 + 360) % 360;
989
- return new se({
990
- image: new Ce({
991
- src: M(),
992
- scale: s || ve.scaleNum,
993
- anchor: [0.5, 0.5],
994
- rotation: L * Math.PI / 180,
995
- rotateWithView: !1
996
- })
997
- });
998
- function M() {
999
- return `data:image/svg+xml;utf8,${encodeURIComponent(v())}`;
1000
- }
1001
- function v() {
1002
- switch (l) {
1003
- case "triangle":
1004
- return `<svg width="41" height="24" viewBox="0 0 41 24" fill="none" xmlns="http://www.w3.org/2000/svg">
1005
- <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"
1006
- fill="${i}" stroke="${c ? "#FF2424" : "black"}" stroke-width="${c ? "2" : "0.578947"}" />
1007
- <!--path船航向左边或者向前-->
1008
- ${a === pe.left && `<path d="M30 12L40 12L40 8" stroke="${c ? "#FF2424" : "black"}" stroke-width="2"/>`}
1009
- <!--path船航向右边-->
1010
- ${a === pe.right && `<path d="M30 12L40 12L40 16" stroke="${c ? "#FF2424" : "black"}" stroke-width="2"/>`}
1011
- <!--path黑线无左右-->
1012
- ${a === pe.front && `<path d="M30 12L40 12" stroke="${c ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
1013
- </svg>
1014
- `;
1015
- case "ship":
1016
- return `<svg width="97" height="20" viewBox="0 0 97 20" fill="none" xmlns="http://www.w3.org/2000/svg">
1017
- <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"
1018
- fill="${i}" stroke="${c ? "#FF2424" : "black"}" stroke-width="${c ? "4" : "0.578947"}"/>
1019
- ${a === pe.left && `<path d="M86 10L96 10L96 6" stroke="${c ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
1020
- ${a === pe.right && `<path d="M86 10L96 10L96 14" stroke="${c ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
1021
- ${a === pe.front && `<path d="M86 10L96 10" stroke="${c ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
1022
- </svg>
1023
- `;
1024
- default:
1025
- return "";
1026
- }
1027
- }
1028
- }, je = /* @__PURE__ */ new Map();
1029
- function $o(e, s) {
1030
- const l = it(s), i = st(s, e, l);
1031
- return `${l}_${i}_${l === "ship" ? 109 : 49}`;
1032
- }
1033
- const Rt = (e, s) => {
1034
- const l = $o(s, e);
1035
- if (je.has(l))
1036
- return je.get(l);
1037
- const i = it(e), a = st(e, s, i), c = i === "ship" ? 109 : 49, t = `
1038
- <svg xmlns="http://www.w3.org/2000/svg" width="${c}" height="${c}" viewBox="0 0 49 49" fill="none">
1039
- <path d="M1.99982 46.9998L1.99982 1.99982L46.9998 1.99982L46.9998 46.9998L1.99982 46.9998Z" fill="#FF2424" fill-opacity="0.2"/>
1040
- <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"/>
1041
- </svg>
1042
- `, L = new se({
1043
- image: new Ce({
1044
- src: `data:image/svg+xml;utf8,${encodeURIComponent(t)}`,
1045
- scale: a,
1046
- anchorXUnits: "fraction",
1047
- anchorYUnits: "fraction"
1048
- })
1049
- });
1050
- return je.set(l, L), L;
1051
- };
1052
- function No(e, s, l, i) {
1053
- if (s) {
1054
- const a = new Ee({
1055
- element: l,
1056
- positioning: "top-left",
1057
- id: "label-" + (i == null ? void 0 : i.id),
1058
- offset: [20, -20],
1059
- autoPan: !1,
1060
- position: s,
1061
- stopEvent: !1,
1062
- className: i != null && i.blinking ? "ship-label-overlay-blinking" : "ship-label-overlay"
1063
- });
1064
- a.set("class", "zh-map-ship-overlay"), e.addOverlay(a);
1065
- }
1066
- }
1067
- const Vo = (e, s) => {
1068
- const { lon: l, lat: i, blinking: a } = s, c = Dt(s);
1069
- l && i && No(e, de([l, i]), c, { ...s, blinking: a });
1070
- }, Dt = (e) => {
1071
- const s = document.createElement("div");
1072
- s.className = "ship-overlay-box", s.style.position = "relative";
1073
- const { lon: l, lat: i, blinking: a, blinkingColors: c, name: t } = e, L = gt({
1074
- setup() {
1075
- return To({
1076
- id: e == null ? void 0 : e.id,
1077
- selected: a,
1078
- name: t,
1079
- colors: c || [],
1080
- existDevice: e == null ? void 0 : e.existDevice,
1081
- existMobile: e == null ? void 0 : e.existMobile,
1082
- existWaterGauge: e == null ? void 0 : e.existWaterGauge
1083
- });
1084
- }
1085
- });
1086
- return Qt(L, s), s;
1087
- }, $t = (e) => {
1088
- const s = [];
1089
- return e.existDevice && s.push("&#xe687;"), e.existMobile && s.push("&#xe688;"), e.existWaterGauge && s.push("&#xe686;"), s;
1090
- };
1091
- function zo() {
1092
- const e = [
1093
- "left-top",
1094
- "left-middle",
1095
- "left-bottom",
1096
- "right-top",
1097
- "right-middle",
1098
- "right-bottom"
1099
- ];
1100
- return e[Math.floor(Math.random() * e.length)];
1101
- }
1102
- const Oo = window.devicePixelRatio || 1, at = /* @__PURE__ */ new Map();
1103
- let qe = null, dt = null;
1104
- function Ao(e, s, l = "left-bottom", i = 10) {
1105
- const a = `${e}-${s.join(",")}-${l}-${i}`;
1106
- if (at.has(a))
1107
- return at.get(a);
1108
- if (!qe) {
1109
- qe = document.createElement("canvas");
1110
- try {
1111
- dt = qe.getContext("2d", {
1112
- willReadFrequently: !0
1113
- });
1114
- } catch {
1115
- dt = qe.getContext("2d");
1116
- }
1117
- }
1118
- const c = qe, t = dt;
1119
- if (!t) return "";
1120
- c.width = 0, c.height = 0;
1121
- const L = 2, M = 4, v = 16, o = window.devicePixelRatio || 1, n = "500 12px Arial", N = "12px map-iconfont";
1122
- t.font = n;
1123
- const A = t.measureText(e).width;
1124
- t.font = N;
1125
- const E = s.map((f) => ({ width: t.measureText(Ve(f)).width, height: 14 })), r = E.reduce((f, b) => f + b.width, 0), u = s.length * i, x = M + A + r + u + M, w = L + 14 + L * 2;
1126
- let y, S, P = 0, k = 0, te = 0, _ = 0, G = 0, Q = 0;
1127
- switch (y = v + x, l) {
1128
- case "right-top":
1129
- S = v + w, P = 0, k = v + w, te = v, _ = 0, G = v, Q = 0;
1130
- break;
1131
- case "right-middle":
1132
- S = w, P = 0, k = w / 2, te = v, _ = w / 2, G = v, Q = 0;
1133
- break;
1134
- case "right-bottom":
1135
- S = v + w, P = 0, k = 0, te = v, _ = v, G = v, Q = v;
1136
- break;
1137
- case "left-top":
1138
- S = v + w, P = x, k = v, te = x + v, _ = w + v, G = 0, Q = 0;
1139
- break;
1140
- case "left-middle":
1141
- S = w, P = x, k = w / 2, te = x + v, _ = w / 2, G = 0, Q = 0;
1142
- break;
1143
- case "left-bottom":
1144
- S = v + w, P = x, k = w, te = x + v, _ = 0, G = 0, Q = v;
1145
- break;
1146
- }
1147
- S = S + L, c.width = Math.round(y * o), c.height = Math.round(S * o), t.scale(o, o), t.clearRect(0, 0, y, S), t.beginPath(), t.moveTo(P, k), t.lineTo(te, _), t.strokeStyle = "#FFF", t.lineWidth = 1, t.stroke(), t.fillStyle = "#FFF", t.fillRect(G, Q, x, w), t.font = n, t.textBaseline = "middle";
1148
- const re = Q + L / 2 + w / 2;
1149
- t.strokeStyle = "#ffffff", t.lineWidth = 1, t.strokeText(e, G + M, re), t.fillStyle = "#000000", t.fillText(e, G + M, re), t.font = N, t.fillStyle = "#3370ff";
1150
- let W = G + M + A + i;
1151
- const j = Q + w / 2;
1152
- s.length > 0 && s.forEach((f, b) => {
1153
- t.fillText(Ve(f), W, j), W += E[b].width + i;
1154
- });
1155
- const h = c.toDataURL("image/png");
1156
- return at.set(a, h), h;
1157
- }
1158
- const Nt = (e, s) => {
1159
- const { name: l, rightIcons: i, selected: a } = e.getProperties(), c = s !== 1 ? zo() : "right-top", t = Ao(l, i, c);
1160
- let L = [0, 0];
1161
- switch (c) {
1162
- case "right-top":
1163
- L = [0, 1];
1164
- break;
1165
- case "right-middle":
1166
- L = [0, 0.5];
1167
- break;
1168
- case "right-bottom":
1169
- L = [0, 0];
1170
- break;
1171
- case "left-top":
1172
- L = [1, 1];
1173
- break;
1174
- case "left-middle":
1175
- L = [1, 0.5];
1176
- break;
1177
- case "left-bottom":
1178
- L = [1, 0];
1179
- break;
1180
- }
1181
- return new se({
1182
- image: new Ce({
1183
- src: t,
1184
- anchor: L,
1185
- displacement: [0, 0],
1186
- scale: 1 / Oo,
1187
- anchorXUnits: "fraction",
1188
- anchorYUnits: "fraction"
1189
- }),
1190
- zIndex: a ? 100 : 10
1191
- });
1192
- }, Wo = (e) => {
1193
- e.getInteractions().forEach((s) => {
1194
- s instanceof mt && s.setActive(!1);
1195
- });
1196
- }, Ho = (e) => {
1197
- e.getInteractions().forEach((s) => {
1198
- s instanceof mt && s.setActive(!0);
1199
- });
1200
- }, Se = (e, s) => {
1201
- const l = e.getViewport();
1202
- l && (l.style.cursor = s);
1203
- }, Zo = (e, s) => {
1204
- const l = me([]), i = me("km"), a = (_) => {
1205
- i.value = _;
1206
- };
1207
- let c, t = "close";
1208
- const L = () => {
1209
- Se(e, "crosshair"), o(), Wo(e), e.on("pointermove", X), e.getViewport().addEventListener("mouseout", () => {
1210
- c && c.classList.add("hidden");
1211
- }), E(), t = "open";
1212
- };
1213
- let M, v;
1214
- const o = () => {
1215
- M = new we(), v = new ke({
1216
- source: M,
1217
- zIndex: 1e3,
1218
- style: {
1219
- "fill-color": "rgba(255, 255, 255, 0.2)",
1220
- "stroke-color": "#ffcc33",
1221
- "stroke-width": 2,
1222
- "circle-radius": 7,
1223
- "circle-fill-color": "#ffcc33"
1224
- }
1225
- }), e == null || e.addLayer(v);
1226
- };
1227
- let n, N;
1228
- const X = (_) => {
1229
- if (_.dragging)
1230
- return;
1231
- let G = "点击选择起点";
1232
- n && (G = "单击继续,双击结束"), c && (c.innerHTML = G, N.setPosition(_.coordinate), c.classList.remove("hidden"));
1233
- };
1234
- let A;
1235
- const E = () => {
1236
- A = new ot({
1237
- source: M,
1238
- type: "LineString",
1239
- style: new se({
1240
- fill: new he({
1241
- color: "rgba(255, 255, 255, 0.2)"
1242
- }),
1243
- stroke: new Pe({
1244
- color: "rgba(255,204,51)",
1245
- lineDash: [10, 10],
1246
- width: 2
1247
- }),
1248
- image: new nt({
1249
- radius: 5,
1250
- stroke: new Pe({
1251
- color: "rgba(0, 0, 0, 0.7)"
1252
- }),
1253
- fill: new he({
1254
- color: "rgba(255, 255, 255, 0.2)"
1255
- })
1256
- })
1257
- }),
1258
- // 添加条件函数,判断是否应该出发点绘制
1259
- condition: (G) => {
1260
- const Q = G.originalEvent.target;
1261
- return Q.className !== "ol-tooltip-measure" && Q.className !== "ol-tooltip-delete-button";
1262
- }
1263
- }), e == null || e.addInteraction(A), w(), y();
1264
- let _;
1265
- A.on("drawstart", function(G) {
1266
- var re;
1267
- n = G.feature, n.set("randomId", r());
1268
- let Q;
1269
- _ = (re = n.getGeometry()) == null ? void 0 : re.on("change", function(W) {
1270
- const j = W.target, h = Gt(j, i.value);
1271
- Q = j.getLastCoordinate(), u && h && (u.innerHTML = h), x.setPosition(Q);
1272
- });
1273
- }), A.on("drawend", function() {
1274
- var G, Q, re;
1275
- if (u && (u.className = "ol-tooltip ol-tooltip-static ol-tooltip-measure"), u != null && u.innerHTML) {
1276
- const W = (n == null ? void 0 : n.get("randomId")) || r();
1277
- l.value.push({ id: W, value: u == null ? void 0 : u.innerHTML }), u.innerHTML = `${u.innerHTML}<div class="ol-tooltip-delete-button" data-id="${W}"><i class="map-iconfont icon-delete"></i></div>`;
1278
- }
1279
- (G = document.querySelector(".ol-selectable:has(.ol-tooltip-delete-button):last-child .ol-tooltip-delete-button")) == null || G.addEventListener("click", (W) => {
1280
- var h;
1281
- W.preventDefault(), W.stopPropagation();
1282
- const j = (h = W.target) == null ? void 0 : h.getAttribute("data-id");
1283
- j && P(j);
1284
- }), x.setOffset([0, -7]), n = null, u = null, w(), _ && ft(_), (re = (Q = s.getProps()) == null ? void 0 : Q.lineDrawEnd) == null || re.call(Q, l.value), c.innerHTML = "";
1285
- });
1286
- }, r = () => Math.random().toString(36).substring(2, 9);
1287
- let u, x;
1288
- const w = () => {
1289
- u != null && u.parentNode && u.parentNode.removeChild(u), u = document.createElement("div"), u.className = "ol-tooltip ol-tooltip-measure", x = new Ee({
1290
- element: u,
1291
- offset: [0, -15],
1292
- positioning: "bottom-center",
1293
- stopEvent: !1,
1294
- insertFirst: !1
1295
- }), e == null || e.addOverlay(x);
1296
- }, y = () => {
1297
- c != null && c.parentNode && c.parentNode.removeChild(c), c = document.createElement("div"), c.className = "ol-tooltip hidden", N = new Ee({
1298
- element: c,
1299
- offset: [15, 0],
1300
- positioning: "center-left",
1301
- stopEvent: !1
1302
- }), e == null || e.addOverlay(N);
1303
- }, S = () => {
1304
- l.value.forEach((_, G) => {
1305
- var W, j;
1306
- const Q = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
1307
- Q[G] && ((j = (W = Q[G]) == null ? void 0 : W.parentNode) == null || j.removeChild(Q[G]));
1308
- const re = M.getFeatures();
1309
- re[G] && M.removeFeature(re[G]);
1310
- }), k(), Ho(e), t = "close", Se(e, "grab");
1311
- }, P = (_) => {
1312
- var Q, re, W, j;
1313
- const G = l.value.findIndex((h) => h.id === _);
1314
- if (G !== -1) {
1315
- l.value.splice(G, 1);
1316
- const h = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
1317
- h[G] && ((re = (Q = h[G]) == null ? void 0 : Q.parentNode) == null || re.removeChild(h[G]));
1318
- const f = M.getFeatures();
1319
- f[G] && M.removeFeature(f[G]);
1320
- }
1321
- (j = (W = s.getProps()) == null ? void 0 : W.lineDrawEnd) == null || j.call(W, l.value);
1322
- }, k = () => {
1323
- if (l.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((_) => {
1324
- var G;
1325
- (G = _ == null ? void 0 : _.parentNode) == null || G.removeChild(_);
1326
- }), M == null || M.clear(), A) {
1327
- const _ = e.getInteractions().getArray().find((G) => Pt(G) === Pt(A));
1328
- _ && e.removeInteraction(_);
1329
- }
1330
- e.removeLayer(v), c != null && c.parentNode && c.parentNode.removeChild(c), u != null && u.parentNode && u.parentNode.removeChild(u);
1331
- };
1332
- return {
1333
- open: L,
1334
- close: S,
1335
- deleteLine: P,
1336
- setUnit: a,
1337
- getState: () => t
1338
- };
1339
- }, Gt = (e, s) => {
1340
- const i = wt(e);
1341
- let a = "";
1342
- switch (s) {
1343
- case "m":
1344
- a = `${Math.round(i * 100) / 100} m`;
1345
- break;
1346
- case "km":
1347
- a = `${Math.round(i / 1e3 * 100) / 100} km`;
1348
- break;
1349
- case "nm":
1350
- a = (Math.round(i / 1e3 * 100) / 100 / 1.852).toFixed(2) + " nm";
1351
- break;
1352
- }
1353
- return a;
1354
- }, Do = (e, s) => {
1355
- let l, i, a = "close", c = "area", t;
1356
- const L = {
1357
- stokeColor: "rgba(255, 255, 255, 1)",
1358
- stokeWidth: 1.5,
1359
- stokeDash: [10, 10],
1360
- fillColor: "rgba(255, 255, 255, 0.25)",
1361
- circleRadius: 5,
1362
- circleFill: "rgb(51,112,255, 1)"
1363
- };
1364
- let M = L;
1365
- const v = (W, j) => {
1366
- W != null && W.type && (c = W == null ? void 0 : W.type), W != null && W.options ? M = Object.assign({}, L, W == null ? void 0 : W.options) : M = L, t = j, Q(), a = "open", o(), Se(e, "crosshair");
1367
- }, o = () => {
1368
- X(), P(), _(), x();
1369
- };
1370
- let n = null, N = null;
1371
- const X = () => {
1372
- if (n && N) return;
1373
- const W = new we(), j = new ke({
1374
- source: W,
1375
- style: new se({
1376
- stroke: new Pe({
1377
- color: "#fbcc33",
1378
- width: 2
1379
- })
1380
- }),
1381
- zIndex: 1e3
1382
- });
1383
- n = j, N = W, e.on("pointermove", E), e.addLayer(j), e.on(["dblclick"], function(h) {
1384
- r && (h.stopPropagation(), h.preventDefault());
1385
- });
1386
- };
1387
- let A;
1388
- const E = (W) => {
1389
- if (W.dragging) return;
1390
- const j = A ? "单击继续,双击结束" : "点击选择起点";
1391
- k && (k.innerHTML = j, te.setPosition(W.coordinate));
1392
- };
1393
- let r, u = !1;
1394
- const x = () => {
1395
- if (l) {
1396
- k != null && k.parentNode && k.parentNode.removeChild(k);
1397
- const j = l.getGeometry();
1398
- if (!j) return;
1399
- const h = w(j, "nm");
1400
- y && (y.innerHTML = `
1401
- <span class="text">面积:${h}${u ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
1402
- `), y && (y.innerHTML += '<span class="delete-icon" ><i class="map-iconfont icon-delete" /></div>');
1403
- const f = j.getCoordinates(), b = f[0][f[0].length - 2];
1404
- if (S.setPosition(b), n) {
1405
- const V = n.getSource();
1406
- V && l && (V.clear(), V.addFeature(l));
1407
- }
1408
- setTimeout(() => {
1409
- var V;
1410
- (V = document.querySelector(".delete-icon")) == null || V.addEventListener("click", () => {
1411
- var F, q;
1412
- G(), (q = (F = s.getProps()) == null ? void 0 : F.areaDrawEnd) == null || q.call(F, []);
1413
- });
1414
- }, 0);
1415
- const H = lo(l.getGeometry().getExtent());
1416
- e == null || e.getView().setCenter(H);
1417
- return;
1418
- }
1419
- const W = {
1420
- type: "Polygon",
1421
- trace: !0,
1422
- style: [new se({
1423
- stroke: new Pe({
1424
- color: M.stokeColor,
1425
- width: M.stokeWidth,
1426
- lineDash: M.stokeDash
1427
- }),
1428
- fill: new he({
1429
- color: M.fillColor
1430
- })
1431
- }), new se({
1432
- image: new nt({
1433
- radius: M.circleRadius,
1434
- fill: new he({
1435
- color: M.circleFill
1436
- })
1437
- }),
1438
- geometry: function(j) {
1439
- const h = j.getGeometry().getCoordinates();
1440
- return new co(h);
1441
- }
1442
- })]
1443
- };
1444
- c !== "fence" && (W.source = N), r = new ot(W), e == null || e.addInteraction(r), r.on("drawstart", (j) => {
1445
- var h;
1446
- A = j.feature, i = (h = A.getGeometry()) == null ? void 0 : h.on("change", (f) => {
1447
- const b = f.target, H = w(b, "nm"), F = b.getCoordinates()[0], q = new Be([F[F.length - 2], F[F.length - 1]]), Z = Gt(q, "nm");
1448
- if (u = Number(wt(q) / 1e3) > 150, !H) return;
1449
- const d = '<span class="error pl-4">超出可以绘画的距离</span>';
1450
- y && (y.innerHTML = `
1451
- <div class="text">
1452
- 面积:${H}
1453
- ${u ? d : ""}
1454
- </div>
1455
- `), k && (k.innerHTML = `
1456
- <div class="text">
1457
- 面积:${H}
1458
- </div>
1459
- <div class="text ${u ? "error" : ""}">
1460
- 线段 ${F.length - 2}: ${Z}
1461
- ${u ? d : ""}
1462
- </div>
1463
- <div>
1464
- <span class="text">单击继续,双击结束</span>
1465
- </div>
1466
- `);
1467
- });
1468
- }), r.on("drawend", (j) => {
1469
- var Z, d, T, R;
1470
- const h = j.feature.getGeometry();
1471
- if (!h) return;
1472
- const H = h.getCoordinates()[0].map((B) => zt(B)).map((B) => ({
1473
- lng: B[0],
1474
- lat: B[1]
1475
- }));
1476
- if (c === "fence")
1477
- return t && t(H), H;
1478
- y && !l && (y.innerHTML += '<span class="delete-icon"><i class="map-iconfont icon-delete" /></div>'), l = j.feature, S.setOffset([10, 0]);
1479
- const F = j.feature.getGeometry().getCoordinates(), q = F[0][F[0].length - 2];
1480
- if (S.setPosition(q), k != null && k.parentNode && k.parentNode.removeChild(k), (Z = s.getProps()) != null && Z.areaDrawEnd) {
1481
- const B = F[0].map((J) => Ke(J, ye.mercator, ye.data));
1482
- (T = (d = s.getProps()) == null ? void 0 : d.areaDrawEnd) == null || T.call(d, B);
1483
- }
1484
- r && (r.setActive(!1), e == null || e.removeInteraction(r), (e == null ? void 0 : e.getInteractions()).forEach((J) => {
1485
- J instanceof ot && (J.setActive(!1), e == null || e.removeInteraction(J));
1486
- })), i && ft(i), (R = document.querySelector(".delete-icon")) == null || R.addEventListener("click", () => {
1487
- var B, J;
1488
- G(), (J = (B = s.getProps()) == null ? void 0 : B.areaDrawEnd) == null || J.call(B, []);
1489
- });
1490
- });
1491
- }, w = (W, j) => {
1492
- const h = so(W);
1493
- switch (j) {
1494
- case "km":
1495
- return h > 1e4 ? Math.round(h / 1e6 * 100) / 100 + " km<sup>2</sup>" : Math.round(h * 100) / 100 + " m<sup>2</sup>";
1496
- case "nm": {
1497
- if (h < 0.01)
1498
- return "0 nm<sup>2</sup>";
1499
- const f = h / (1852 * 1852);
1500
- return f >= 0.01 ? (Math.round(f * 100) / 100).toFixed(2) + " nm<sup>2</sup>" : h >= 1 ? (Math.round(h * 100) / 100).toFixed(2) + " m<sup>2</sup>" : (Math.round(h * 1e4) / 100).toFixed(2) + " cm<sup>2</sup>";
1501
- }
1502
- }
1503
- };
1504
- let y, S;
1505
- const P = () => {
1506
- y != null && y.parentNode && y.parentNode.removeChild(y), y = document.createElement("div"), y.style.display = "flex", y.className = "ol-tooltip ol-tooltip-draw-polygon", S = new Ee({
1507
- element: y,
1508
- offset: [0, -15],
1509
- positioning: "bottom-center",
1510
- stopEvent: !1,
1511
- insertFirst: !1
1512
- }), e == null || e.addOverlay(S);
1513
- };
1514
- let k, te;
1515
- const _ = () => {
1516
- k != null && k.parentNode && (k.parentNode.removeChild(k), k.parentNode.addEventListener("click", (W) => {
1517
- W.preventDefault(), W.stopPropagation();
1518
- })), k = document.createElement("div"), k.className = "ol-tooltip ol-help-tooltip pointer-none", te = new Ee({
1519
- element: k,
1520
- offset: [15, 0],
1521
- positioning: "center-left",
1522
- stopEvent: !1
1523
- }), e == null || e.addOverlay(te);
1524
- }, G = () => {
1525
- l = null, v();
1526
- }, Q = () => {
1527
- a = "close", e.un("pointermove", E), A = null, r && (r.abortDrawing(), console.log("abortDrawing"), r.setActive(!1), (e == null ? void 0 : e.getInteractions()).forEach((j) => {
1528
- j instanceof ot && (j.setActive(!1), e == null || e.removeInteraction(j));
1529
- }), r = null), i && ft(i), i = void 0, N == null || N.clear(), N = null, n && e.getAllLayers().includes(n) && (e.removeLayer(n), n = null), k != null && k.parentElement && (k.innerHTML = "", k.parentElement.removeChild(k), k = null), y != null && y.parentElement && (y.innerHTML = "", y.parentElement.removeChild(y), y = null), te && e.removeOverlay(te), S && e.removeOverlay(S), Se(e, "grab");
1530
- };
1531
- return {
1532
- open: v,
1533
- close: Q,
1534
- reset: G,
1535
- getState: () => a
1536
- };
1537
- }, Go = (e, s, l, i, a) => {
1538
- let c = null, t = null;
1539
- const L = new we(), M = new ao({
1540
- source: L,
1541
- className: "zh-map--ship-layer",
1542
- renderBuffer: 300,
1543
- zIndex: 101,
1544
- properties: { layerType: ce.SHIP }
1545
- }), v = new we(), o = new ke({
1546
- source: v,
1547
- className: "zh-map--ship-label-layer",
1548
- zIndex: 102,
1549
- updateWhileInteracting: !1,
1550
- updateWhileAnimating: !1,
1551
- properties: { layerType: ce.SHIP },
1552
- declutter: !0
1553
- }), n = new we(), N = new ke({
1554
- source: n,
1555
- className: "zh-map--ship-selected-layer",
1556
- zIndex: 999
1557
- });
1558
- e == null || e.addLayer(M), e == null || e.addLayer(o), e == null || e.addLayer(N);
1559
- let X = null, A = null, E = null, r = "", u = {}, x = {};
1560
- const w = (d) => {
1561
- if (!d || !e) return;
1562
- const T = (t == null ? void 0 : t.id) || (c == null ? void 0 : c.get("id"));
1563
- if (t) {
1564
- const R = d.filter((B) => B.id === T);
1565
- R.length === 0 ? d.push(t) : t = R[0];
1566
- }
1567
- _(), V(d), k(), y(d);
1568
- }, y = (d) => {
1569
- Array.from(Xe.keys()).forEach((T) => {
1570
- const R = T.split("_")[0];
1571
- d.find((J) => J.id === R) || Xe.delete(T);
1572
- });
1573
- }, S = () => {
1574
- Array.from(je.keys()).forEach((d) => {
1575
- je.delete(d);
1576
- });
1577
- }, P = (d) => {
1578
- var Y;
1579
- const T = (t == null ? void 0 : t.id) || (c == null ? void 0 : c.get("id")), R = de([d == null ? void 0 : d.lon, d == null ? void 0 : d.lat]), B = ((Y = x[d.id]) == null ? void 0 : Y.blinkColors) || [], oe = B[B.length - 1] || d.fill || "#04C900", ie = Zt(d), I = new ae({
1580
- geometry: new fe(R),
1581
- // 船舶数据
1582
- shipData: d,
1583
- id: d.id,
1584
- name: d.cnname || d.enname || d.name || d.id || "未命名船舶",
1585
- selected: d.id === T,
1586
- // 图标
1587
- rightIcons: $t(d),
1588
- // 船舶颜色
1589
- color: oe,
1590
- // 船艏向的方向
1591
- direct: ie,
1592
- // 高亮
1593
- isHighlight: !1
1594
- });
1595
- return I.set("clickGeometry", new At(R)), I;
1596
- }, k = () => {
1597
- if (t && e && t) {
1598
- n.getFeatures().length > 0 && n.clear();
1599
- const d = de([t == null ? void 0 : t.lon, t == null ? void 0 : t.lat]), T = new ae({
1600
- geometry: new fe(d),
1601
- id: t.id
1602
- });
1603
- T.setStyle(Rt(e, t)), n.addFeature(T);
1604
- }
1605
- }, te = () => {
1606
- const d = L.getFeatures(), T = 100;
1607
- let R = 0;
1608
- const B = () => {
1609
- const ie = Math.min(R + T, d.length);
1610
- for (; R < ie; R++) {
1611
- const I = d[R], Y = We(e, I);
1612
- I.setStyle(Y);
1613
- }
1614
- R < d.length && requestAnimationFrame(B);
1615
- };
1616
- B();
1617
- const oe = n.getFeatures()[0];
1618
- if (oe && t) {
1619
- const ie = Rt(e, t);
1620
- oe.setStyle(ie);
1621
- }
1622
- }, _ = () => {
1623
- e && L && (G(), L.clear(), v.clear(), n.clear());
1624
- }, G = () => {
1625
- const d = e.getOverlays().getArray().filter((T) => T.get("class") == "zh-map-ship-overlay");
1626
- if (d && d.length > 0)
1627
- for (let T = 0; T < d.length; T++) {
1628
- const R = d[T];
1629
- R.setPosition(void 0), e.removeOverlay(R), R.dispose();
1630
- }
1631
- }, Q = (d, T) => {
1632
- u = d, x = T;
1633
- const R = e.getOverlays().getArray(), B = L.getFeatures();
1634
- for (const J in u) {
1635
- const oe = u[J], ie = R.find((Y) => (Y == null ? void 0 : Y.getId()) === "label-" + J), I = B.find((Y) => J === Y.get("id"));
1636
- if (ie && I) {
1637
- const Y = T[J].blinkColors || [], { shipData: xe, name: be, color: Me } = I.getProperties();
1638
- I.set("blinking", oe), Y[(Y == null ? void 0 : Y.length) - 1] && Me !== Y[(Y == null ? void 0 : Y.length) - 1] && (I.set("color", Y[(Y == null ? void 0 : Y.length) - 1] || ""), I.setStyle(We(e, I)));
1639
- const lt = {
1640
- ...xe,
1641
- blinking: oe,
1642
- blinkingColors: Y || [],
1643
- name: be + "(" + T[J].shipState + ")"
1644
- }, _e = ie.getElement(), Qe = Dt(lt);
1645
- _e && _e !== Qe && ie.setElement(Qe);
1646
- }
1647
- }
1648
- }, re = (d) => {
1649
- if (!e) return;
1650
- const T = L.getFeatures(), R = v.getFeatures(), B = c ? c.get("id") : "", J = T.filter((Y) => Y.get("id") !== B), oe = R == null ? void 0 : R.filter((Y) => Y.get("id") !== B), ie = /* @__PURE__ */ new Map();
1651
- d.forEach((Y) => {
1652
- ie.set(Y.id, !0);
1653
- });
1654
- const I = e.getOverlays().getArray();
1655
- J.forEach((Y) => {
1656
- const xe = Y.get("id");
1657
- if (!ie.has(xe))
1658
- Y.setStyle([]);
1659
- else {
1660
- const Me = Y.getStyle();
1661
- (Me == null ? void 0 : Me.length) == 0 && Y.setStyle(We(e, Y));
1662
- }
1663
- const be = I.find((Me) => Me.getId() === "label-" + xe);
1664
- be && be.setPosition(void 0);
1665
- }), oe.forEach((Y) => {
1666
- const xe = Y.get("id");
1667
- if (!ie.has(xe))
1668
- Y.setStyle([]);
1669
- else {
1670
- const be = Y.getStyle();
1671
- (be == null ? void 0 : be.length) == 0 && Y.setStyle(Nt(Y, d.length));
1672
- }
1673
- });
1674
- }, W = (d) => {
1675
- if (d) {
1676
- console.log("选中", d);
1677
- const T = L.getFeatures().find((B) => B.get("id") === d.id), R = v.getFeatures().find((B) => B.get("id") === d.id);
1678
- T && (c = T), R && R.set("selected", !0), t = d, k();
1679
- } else
1680
- console.log("取消选中"), t = null, c = null, b(), S();
1681
- }, j = (d, T, R) => {
1682
- A = d, E = T, X = R;
1683
- }, h = uo((d, T, R) => {
1684
- try {
1685
- if (d) {
1686
- const B = d.get("shipData"), J = d.get("id");
1687
- if (T === "click" && (W(B), R && R(J)), T === "hover") {
1688
- r && r !== J && f(), r = J;
1689
- const oe = L.getFeatures().find((ie) => ie.get("id") === r);
1690
- oe == null || oe.set("isHighlight", !0), oe == null || oe.setStyle(We(e, oe));
1691
- }
1692
- } else
1693
- f();
1694
- } catch (B) {
1695
- console.log("handleShipMapEvent", B);
1696
- }
1697
- }, 10), f = () => {
1698
- const d = r ? L.getFeatures().find((T) => T.get("id") === r) : null;
1699
- r = null, d == null || d.set("isHighlight", !1), d == null || d.setStyle(We(e, d));
1700
- }, b = () => {
1701
- try {
1702
- n.clear();
1703
- } catch (d) {
1704
- console.log(d);
1705
- }
1706
- }, H = (d, T) => {
1707
- const R = de([d == null ? void 0 : d.lon, d == null ? void 0 : d.lat]), B = new ae({
1708
- geometry: new fe(R),
1709
- name: d.cnname || d.enname || d.name || d.id || "未命名船舶",
1710
- // 图标
1711
- rightIcons: $t(d),
1712
- selected: (d == null ? void 0 : d.id) === (t == null ? void 0 : t.id),
1713
- shipData: d
1714
- });
1715
- B.set("id", d.id);
1716
- const J = Nt(B, T);
1717
- return B.setStyle(J), B;
1718
- }, V = (d) => {
1719
- const T = e.getView().getZoom(), R = [], B = [];
1720
- d.forEach((I) => {
1721
- const Y = P(I);
1722
- Y.setStyle(We(e, Y)), L.addFeature(Y), u[I.id] && R.push(I), (t == null ? void 0 : t.id) == I.id && (t = I), !u[I.id] && (t == null ? void 0 : t.id) !== I.id && B.push(I);
1723
- }), (E !== null ? E : (t == null ? void 0 : t.id) && u[t == null ? void 0 : t.id] || T && T >= ve.shipModelMin) && R.map((I) => {
1724
- Z(I);
1725
- }), t && (X !== null ? X : !0) && !u[t == null ? void 0 : t.id] && F(t, d), (A !== null ? A : T && T >= ve.shipModelMin) && B.map((I) => {
1726
- F(I, d);
1727
- });
1728
- }, F = (d, T) => {
1729
- const R = H(d, T.length);
1730
- v.addFeature(R);
1731
- }, q = (d) => {
1732
- var R;
1733
- const T = L.getFeatures().find((B) => B.get("id") === d);
1734
- T && h(T, "click", (R = s.getProps()) == null ? void 0 : R.selectShip);
1735
- }, Z = (d) => {
1736
- var T;
1737
- if (d.id && x[d == null ? void 0 : d.id]) {
1738
- const R = x[d == null ? void 0 : d.id] || {}, B = (R == null ? void 0 : R.blinkColors) || [], J = (R == null ? void 0 : R.shipState) || "", oe = (d.cnname || d.enname || d.name || d.id || "未命名船舶") + "(" + J + ")", ie = {
1739
- ...d,
1740
- name: oe,
1741
- blinking: u[d.id],
1742
- blinkingColors: B || []
1743
- };
1744
- Vo(e, ie), (T = document.querySelector(".ship-label-overlay-blinking")) == null || T.addEventListener("click", (I) => {
1745
- var xe;
1746
- if (i.getState() === "open" || a.getState() === "open" || !l.getMapClick()) return;
1747
- const Y = (xe = I.target) == null ? void 0 : xe.getAttribute("data-id");
1748
- I.preventDefault(), Y && q(Y);
1749
- });
1750
- }
1751
- };
1752
- return {
1753
- render: w,
1754
- selected: W,
1755
- filter: re,
1756
- blinking: Q,
1757
- clear: _,
1758
- setLableStatus: j,
1759
- handleShipMapEvent: h,
1760
- changeShipScale: te
1761
- };
1762
- }, Bo = (e) => {
1763
- const s = () => e == null ? void 0 : e.getLayers(), l = me("vector"), i = () => l.value, a = (M) => {
1764
- l.value = M;
1765
- const v = s();
1766
- v && (v == null || v.getArray().forEach((o) => {
1767
- (o.className_ === "vector" || o.className_ === "satellite") && o.setVisible(o.className_ === M);
1768
- }));
1769
- }, c = me(!1);
1770
- return {
1771
- getLayers: s,
1772
- getGreenTileVisible: () => c.value,
1773
- setGreenTileVisible: (M) => {
1774
- if (M !== c.value) {
1775
- if (M) {
1776
- const v = s();
1777
- if (!v.getArray().find((n) => n.className_ === "greenTile")) {
1778
- const n = new He({
1779
- source: new Ze({ url: Ne.greenTile }),
1780
- visible: M,
1781
- zIndex: 2,
1782
- className: "greenTile"
1783
- });
1784
- v.push(n);
1785
- }
1786
- } else {
1787
- const v = s(), o = v.getArray().find((n) => n.className_ === "greenTile");
1788
- o && v.remove(o);
1789
- }
1790
- c.value = M;
1791
- }
1792
- },
1793
- getShowLayerType: i,
1794
- setShowLayerType: a
1795
- };
1796
- }, Yo = (e) => {
1797
- const s = "zh-map-location-layer";
1798
- let l;
1799
- const i = new we();
1800
- let a = null, c = null;
1801
- const t = (r) => {
1802
- if (!(!r || r.length === 0)) {
1803
- if (i.clear(), c) {
1804
- const u = r.find((x) => x.id === (c == null ? void 0 : c.id));
1805
- u ? c = u : r.push(c);
1806
- }
1807
- r.forEach((u) => {
1808
- L(u);
1809
- }), l || (l = new ke({
1810
- className: s,
1811
- source: i,
1812
- zIndex: 100
1813
- }), e == null || e.addLayer(l));
1814
- }
1815
- }, L = (r) => {
1816
- const u = e == null ? void 0 : e.getView().getZoom(), [x, w] = r.latLon.split(","), y = new ae({
1817
- geometry: new fe(de([Number(x), Number(w)]))
1818
- });
1819
- y.setStyle(M(r, u, r.id === (c == null ? void 0 : c.id))), y.set("loactionData", r), i.addFeature(y);
1820
- }, M = (r, u, x) => {
1821
- let w = {
1822
- src: x && r.selectedPath || r.defaultPath
1823
- };
1824
- r != null && r.width && (r != null && r.height) ? w = {
1825
- ...w,
1826
- width: r.width,
1827
- height: r.height
1828
- } : w = {
1829
- ...w,
1830
- scale: 0.5 * u / 10
1831
- };
1832
- let y = {
1833
- image: new Ce(w)
1834
- };
1835
- return r.name && (y = {
1836
- ...y,
1837
- text: new De({
1838
- text: r.name,
1839
- font: "12px sans-serif",
1840
- fill: new he({
1841
- color: "#000000"
1842
- }),
1843
- backgroundFill: new he({
1844
- color: "#FFFFFF"
1845
- }),
1846
- offsetY: 30
1847
- })
1848
- }), new se(y);
1849
- }, v = () => {
1850
- if (a) {
1851
- const r = a.get("loactionData").id;
1852
- i.getFeatures().forEach((u) => {
1853
- u.get("loactionData").id !== r && i.removeFeature(u);
1854
- });
1855
- } else
1856
- i.clear();
1857
- }, o = () => {
1858
- var w;
1859
- const r = a == null ? void 0 : a.get("loactionData"), u = (w = e == null ? void 0 : e.getView()) == null ? void 0 : w.getZoom();
1860
- i.getFeatures().forEach((y) => {
1861
- y.get("loactionData").id === r.id && (y == null || y.setStyle(M(r, u, !1)));
1862
- }), c = null, a = null;
1863
- }, n = (r) => {
1864
- r ? (N(), X(r)) : o();
1865
- }, N = () => {
1866
- var r;
1867
- if (a) {
1868
- const u = a.get("loactionData"), x = (r = e == null ? void 0 : e.getView()) == null ? void 0 : r.getZoom();
1869
- a.setStyle(M(u, x, !1));
1870
- }
1871
- }, X = (r) => {
1872
- const u = i.getFeatures();
1873
- c = r, a = u.find((x) => x.get("loactionData").id === r.id);
1874
- };
1875
- return {
1876
- render: t,
1877
- renderHtml: (r, u, x, w) => {
1878
- const y = document.createElement("div");
1879
- y.innerHTML = x;
1880
- let S = {
1881
- element: y,
1882
- // 覆盖层的DOM元素
1883
- positioning: "top-center",
1884
- // 相对于位置点的定位
1885
- stopEvent: !1,
1886
- // 是否阻止事件传播
1887
- offset: [0, -20],
1888
- id: "position-" + r
1889
- };
1890
- w && (S = {
1891
- ...S,
1892
- ...w
1893
- });
1894
- const P = new Ee(S);
1895
- P.setPosition(de(u)), e.addOverlay(P);
1896
- },
1897
- removeHtml: (r) => {
1898
- const u = e.getOverlays().getArray().find((x) => x.getId() === "position-" + r);
1899
- u && (u.setPosition(void 0), e.removeOverlay(u));
1900
- },
1901
- selected: n,
1902
- clearSelected: o,
1903
- clear: v
1904
- };
1905
- }, qo = "zh-map-port-layer", Xo = (e) => {
1906
- const s = new we(), l = new ke({
1907
- className: qo,
1908
- source: s,
1909
- zIndex: 100,
1910
- updateWhileInteracting: !0,
1911
- updateWhileAnimating: !0,
1912
- properties: { layerType: ce.PORT }
1913
- });
1914
- e == null || e.addLayer(l);
1915
- let i = null, a = null;
1916
- const c = (r, u = !0) => {
1917
- if (!r || r.length === 0) return;
1918
- if (s.clear(), a) {
1919
- const w = r.find((y) => y.id === (a == null ? void 0 : a.id));
1920
- w ? a = w : r.push(a);
1921
- }
1922
- const x = [];
1923
- r.forEach((w) => {
1924
- const [y, S] = w.latLon.split(","), P = new ae({
1925
- geometry: new fe(de([Number(y), Number(S)])),
1926
- portData: w,
1927
- id: w.id,
1928
- select: w.id === (a == null ? void 0 : a.id),
1929
- showTitle: w.id === (a == null ? void 0 : a.id) || u
1930
- }), k = o(P);
1931
- P.setStyle(k), x.push(P);
1932
- }), s.addFeatures(x);
1933
- };
1934
- let t = null, L = null;
1935
- const M = /* @__PURE__ */ new Map(), v = (r, u) => {
1936
- t || (t = document.createElement("canvas"), L = t.getContext("2d", {
1937
- willReadFrequently: !0
1938
- }));
1939
- const x = `${r}-${u}`;
1940
- if (M.has(x))
1941
- return M.get(x);
1942
- const w = t, y = L;
1943
- if (!y) return "";
1944
- w.width = 0, w.height = 0;
1945
- const S = 2, P = 8, k = window.devicePixelRatio || 1, te = "12px sans-serif";
1946
- y.font = te;
1947
- const G = y.measureText(r).width, Q = P + G + P, re = S + 12 + S * 2;
1948
- w.width = Math.round(Q * k), w.height = Math.round(re * k), y.scale(k, k), y.clearRect(0, 0, Q, re), y.fillStyle = u ? "#F32D2D" : "#FFF", y.beginPath(), y.roundRect(0, 0, Q, re, 4), y.fill(), y.font = te, y.textBaseline = "middle";
1949
- const W = re / 2;
1950
- y.strokeStyle = u ? "#000" : "#ffffff", y.lineWidth = 1, y.strokeText(r, P, W), y.fillStyle = u ? "#FFF" : "#000000", y.fillText(r, P, W);
1951
- const j = w.toDataURL("image/png");
1952
- return M.set(x, j), j;
1953
- }, o = (r) => {
1954
- const { select: u, showTitle: x } = r.getProperties(), w = (G) => `<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
1955
- <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="${G}"/>
1956
- <g clip-path="url(#clip0_10059_122082)">
1957
- <path d="M34.8624 22.8687L32.5874 25.6313L33.4812 25.7125C33.4812 25.7125 30.5562 28.0687 27.9562 28.2312C25.3562 28.3937 24.1374 24.9 24.1374 24.9V19.1312H27.6312V17.425H24.2999V15.15C25.7624 14.6625 26.7374 13.2812 26.7374 11.6562C26.7374 9.625 25.1124 8 23.0812 8H22.9999C20.9687 8 19.3437 9.625 19.3437 11.6562C19.3437 13.2812 20.3999 14.6625 21.7812 15.15V17.425H18.4499V19.1312H21.9437V24.9C21.9437 24.9 20.6437 28.3125 18.0437 28.2312C15.4437 28.0687 12.5187 25.7125 12.5187 25.7125L13.4124 25.6313L11.0562 22.8687L10.2437 26.2812L11.2187 26.0375C11.2187 26.0375 13.1687 29.5313 16.1749 30.8313C19.1812 32.2125 22.1874 33.9187 22.8374 34C23.4874 33.9187 26.4937 32.2125 29.4187 30.8313C32.3437 29.45 34.3749 26.0375 34.3749 26.0375L35.3499 26.2812L34.8624 22.8687ZM23.0812 13.6875C21.9437 13.6875 21.0499 12.7937 21.0499 11.6562C21.0499 10.6 21.9437 9.70625 22.9999 9.70625H23.0812C24.1374 9.70625 25.0312 10.6 25.0312 11.6562C25.1124 12.7937 24.1374 13.6875 23.0812 13.6875Z" fill="white"/>
1958
- </g>
1959
- <defs>
1960
- <clipPath id="clip0_10059_122082">
1961
- <rect width="26" height="26" fill="white" transform="translate(10 8)"/>
1962
- </clipPath>
1963
- </defs>
1964
- </svg>
1965
- `, y = () => `data:image/svg+xml;utf8,${encodeURIComponent(w(u ? "#F32D2D" : "#3370FF"))}`, S = e.getView().getZoom(), P = r.get("portData"), k = window.devicePixelRatio || 1, te = new se({
1966
- image: new Ce({
1967
- src: y(),
1968
- scale: 0.5 * S / 10
1969
- }),
1970
- zIndex: u ? 110 : 100
1971
- }), _ = new se({
1972
- image: new Ce({
1973
- src: v(P.shortName, u),
1974
- anchor: [0.5, 0.5],
1975
- displacement: [0, -30],
1976
- scale: 1 / k,
1977
- anchorXUnits: "fraction",
1978
- anchorYUnits: "fraction"
1979
- }),
1980
- zIndex: u ? 110 : 100
1981
- // text: new Text({
1982
- // text: port.shortName,
1983
- // font: '12px sans-serif',
1984
- // fill: new Fill({
1985
- // color: select ? "#ffffff" : "#000000"
1986
- // }),
1987
- // backgroundFill: new Fill({
1988
- // color: "#FFF",
1989
- // }),
1990
- // offsetY: 30,
1991
- // }),
1992
- });
1993
- return !x && !u ? te : [te, _];
1994
- }, n = () => {
1995
- if (s)
1996
- if (i) {
1997
- console.log("清除非选中的港口");
1998
- const r = i.get("portData").id;
1999
- s.getFeatures().forEach((u) => {
2000
- u.get("portData").id !== r && s.removeFeature(u);
2001
- });
2002
- } else
2003
- console.log("清除所有港口", s), s == null || s.clear();
2004
- }, N = (r) => {
2005
- if (s) {
2006
- if (!r)
2007
- return X();
2008
- (i == null ? void 0 : i.get("portData").id) !== r.id && (X(), A(r));
2009
- }
2010
- }, X = () => {
2011
- var r;
2012
- if (i) {
2013
- const u = i == null ? void 0 : i.get("portData"), x = (r = s.getFeatures()) == null ? void 0 : r.find((w) => w.get("portData").id === u.id);
2014
- x && (x.set("select", !1), x.setStyle(o(x)), i = null, a = null);
2015
- }
2016
- }, A = (r) => {
2017
- if (!s) return;
2018
- const u = s.getFeatures();
2019
- a = r, i = u.find((x) => x.get("portData").id === r.id), i && (i.set("select", !0), i.setStyle(o(i)));
2020
- };
2021
- return {
2022
- render: c,
2023
- clear: n,
2024
- selected: N,
2025
- handlePortHover: (r) => {
2026
- r && r.get("portData") ? Se(e, "pointer") : Se(e, "grab");
2027
- }
2028
- };
2029
- }, jo = (e, s) => {
2030
- const l = new ke({
2031
- source: new we(),
2032
- zIndex: 99
2033
- }), i = new ke({
2034
- source: new we(),
2035
- properties: { layerType: ce.DELETE },
2036
- zIndex: 99
2037
- }), a = '<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m241.28 673.066667a56.96 56.96 0 0 1-80.213333 80.213333L512 592.213333l-161.066667 161.066667a56.96 56.96 0 0 1-80.213333-80.213333L431.786667 512l-161.066667-161.066667a56.96 56.96 0 0 1 80.213333-80.213333L512 431.786667l161.066667-161.066667a56.96 56.96 0 0 1 80.213333 80.213333L592.213333 512z" fill="#000000a6" ></path></svg>';
2038
- e.addLayer(l), e.addLayer(i);
2039
- const c = (r) => new se({
2040
- fill: new he({
2041
- color: (r == null ? void 0 : r.fillColor) || "#e8f2ff99"
2042
- }),
2043
- stroke: new Pe({
2044
- color: (r == null ? void 0 : r.stokeColor) || "#1c5bffcc",
2045
- width: 1.5,
2046
- lineDash: [4, 4]
2047
- })
2048
- });
2049
- function t(r) {
2050
- const u = r.getCoordinates()[0];
2051
- let x = -1 / 0, w = [];
2052
- for (const S of u)
2053
- S[0] > x ? (x = S[0], w = [S]) : S[0] === x && w.push(S);
2054
- let y = w[0];
2055
- for (const S of w)
2056
- S[1] > y[1] && (y = S);
2057
- return y;
2058
- }
2059
- function L(r, u) {
2060
- const x = Math.PI / 4;
2061
- return [
2062
- r[0] + u * Math.cos(x),
2063
- r[1] + u * Math.sin(x)
2064
- ];
2065
- }
2066
- const M = () => new se({
2067
- image: new Ce({
2068
- src: `data:image/svg+xml;utf8,${encodeURIComponent(a)}`,
2069
- anchor: [0.5, 0.5],
2070
- anchorXUnits: "fraction",
2071
- anchorYUnits: "fraction",
2072
- offset: [0, 0]
2073
- })
2074
- }), v = (r) => {
2075
- var y;
2076
- let u;
2077
- const x = (y = r.coordinates) == null ? void 0 : y.map((S) => de([S.lng, S.lat]));
2078
- if (r != null && r.radius)
2079
- u = L(x[0], r.radius);
2080
- else {
2081
- const S = new Et([x]), P = S.getExtent(), k = [P[2], P[3]];
2082
- u = k, S.intersectsCoordinate(k) || (u = t(S));
2083
- }
2084
- return new ae({
2085
- geometry: new fe(u),
2086
- id: "poly-delete-" + r.id,
2087
- polygonData: r
2088
- });
2089
- }, o = (r, u) => {
2090
- var S, P;
2091
- const x = (S = r.coordinates) == null ? void 0 : S.map((k) => de([k.lng, k.lat])), w = new Et([x]), y = new ae({
2092
- geometry: w,
2093
- id: r.id
2094
- });
2095
- console.log(y), y.setStyle(c(u)), (P = l.getSource()) == null || P.addFeature(y), r.isEdit && n(r);
2096
- }, n = (r) => {
2097
- var x;
2098
- const u = v(r);
2099
- u.setStyle(M()), (x = i.getSource()) == null || x.addFeature(u);
2100
- };
2101
- function N(r, u) {
2102
- var S;
2103
- const x = de([r.coordinates[0].lng, r.coordinates[0].lat]), w = new At(
2104
- x,
2105
- r.radius
2106
- // 半径(米)
2107
- ), y = new ae({
2108
- geometry: w,
2109
- id: r.id
2110
- });
2111
- y.setStyle(c(u)), (S = l.getSource()) == null || S.addFeature(y), r.isEdit && n(r);
2112
- }
2113
- return {
2114
- createPolygon: o,
2115
- createCircle: N,
2116
- deletePolygon: (r) => {
2117
- var w, y, S, P, k, te;
2118
- const u = (w = l.getSource()) == null ? void 0 : w.getFeatures().find((_) => _.getProperties().id === r), x = (y = i.getSource()) == null ? void 0 : y.getFeatures().find((_) => _.getProperties().id === "poly-delete-" + r);
2119
- (S = l.getSource()) == null || S.removeFeature(u), (P = i.getSource()) == null || P.removeFeature(x), (k = s.getProps()) != null && k.deletePolygon && ((te = s.getProps()) == null || te.deletePolygon(r));
2120
- },
2121
- updatePolygon: (r) => {
2122
- var u;
2123
- r.isEdit ? n(r) : (u = i.getSource()) == null || u.getFeatures().forEach((x) => {
2124
- x.id === "poly-delete-" + r.id && !r.isEdit && i.getSource().removeFeature(x);
2125
- });
2126
- },
2127
- clear: () => {
2128
- var r, u;
2129
- (r = l.getSource()) == null || r.clear(), (u = i.getSource()) == null || u.clear();
2130
- }
2131
- };
2132
- };
2133
- class Vt {
2134
- constructor(s, l, i, a = 500) {
2135
- Ae(this, "animationId", null);
2136
- Ae(this, "interval", 500);
2137
- // 闪烁间隔(ms)
2138
- Ae(this, "routeLayer");
2139
- Ae(this, "routeOverlay");
2140
- Ae(this, "features");
2141
- this.routeLayer = s || [], this.routeOverlay = l || [], this.features = i, this.interval = a;
2142
- }
2143
- start() {
2144
- if (this.animationId) return;
2145
- let s = 0;
2146
- const l = (i) => {
2147
- i - s >= this.interval && (this.toggleVisibility(), s = i), this.animationId = requestAnimationFrame(l);
2148
- };
2149
- this.animationId = requestAnimationFrame(l);
2150
- }
2151
- stop() {
2152
- var s, l, i;
2153
- if (this.animationId && (cancelAnimationFrame(this.animationId), this.animationId = null), (s = this.routeLayer) == null || s.forEach((a) => {
2154
- a.setVisible(!0);
2155
- }), (l = this.routeOverlay) == null || l.forEach((a) => {
2156
- a.getElement().style.visibility = "visible";
2157
- }), this.features) {
2158
- const a = (i = this.features.getStyle()) == null ? void 0 : i.getImage();
2159
- this.features.set("visible", !0), a && a.setOpacity(1);
2160
- }
2161
- }
2162
- toggleVisibility() {
2163
- var s, l, i;
2164
- if ((s = this.routeLayer) == null || s.forEach((a) => {
2165
- const c = a == null ? void 0 : a.getVisible();
2166
- a == null || a.setVisible(!c);
2167
- }), (l = this.routeOverlay) == null || l.forEach((a) => {
2168
- var c;
2169
- a.getElement().style.visibility = ((c = a.getElement()) == null ? void 0 : c.style.visibility) !== "hidden" ? "hidden" : "visible";
2170
- }), this.features) {
2171
- const a = this.features.get("visible"), c = (i = this.features.getStyle()) == null ? void 0 : i.getImage();
2172
- this.features.set("visible", !a), c && c.setOpacity(a ? 1 : 0);
2173
- }
2174
- }
2175
- }
2176
- const Ko = (e, s) => {
2177
- const l = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map(), c = {}, t = [], L = {
2178
- arrowInterval: 50,
2179
- pathColor: "#0091FF",
2180
- pathWidth: 12,
2181
- pathStrokeWidth: 1,
2182
- pathStrokeColor: "transparent",
2183
- arrowHeight: 10,
2184
- arrowAngle: 60,
2185
- arrowColor: "#fff",
2186
- arrowWidth: 4,
2187
- imgSrc: "",
2188
- imgWidth: 80,
2189
- imgHeight: 80,
2190
- imgSrc: 1,
2191
- imgPosition: 1 / 3,
2192
- clickAnimation: !0
2193
- }, M = {
2194
- pointWidth: 40,
2195
- pointHeight: 40,
2196
- anchor: [0.5, 1],
2197
- rotation: 0,
2198
- zIndex: 99,
2199
- clickAnimation: !0
2200
- };
2201
- let v = 500;
2202
- const o = async (h) => {
2203
- if (!e) return;
2204
- const f = h.id;
2205
- v = h.animationInterval || 500, c[f] = h;
2206
- const b = c[f].pathList || [];
2207
- if (b && (b == null ? void 0 : b.length) > 2) {
2208
- if (!l.has(f)) {
2209
- const V = N(`line-layer-${f}`);
2210
- Object.assign({}, L, c[f].pathConfig).clickAnimation && (V == null || V.setProperties({ layerType: ce.PATH })), l.set(f, V), e.getLayers().getArray().includes(V) || e == null || e.addLayer(V);
2211
- }
2212
- X(f);
2213
- }
2214
- const H = c[f].pointList || [];
2215
- if (H && H.length > 0) {
2216
- if (!i.has(f)) {
2217
- const V = N(`point-layer-${f}`), F = N(`spoint-layer-${f}`);
2218
- Object.assign({}, M, c[f].pointConfig).clickAnimation && (V == null || V.setProperties({ layerType: ce.PATH }), F == null || F.setProperties({ layerType: ce.PATH })), i.set(f, V), a.set(f, F), e.getLayers().getArray().includes(V) || e == null || e.addLayer(V), e.getLayers().getArray().includes(F) || e == null || e.addLayer(F);
2219
- }
2220
- te(f);
2221
- }
2222
- }, n = xt(async () => {
2223
- Object.keys(c).map((h) => {
2224
- r(h);
2225
- });
2226
- }, 100), N = (h) => {
2227
- const f = new we();
2228
- return new ke({
2229
- source: f,
2230
- className: h,
2231
- renderBuffer: 1024,
2232
- zIndex: 10
2233
- });
2234
- };
2235
- function X(h) {
2236
- const f = l.get(h).getSource();
2237
- f.clear();
2238
- const b = c[h].pathList || [], H = Object.assign({}, L, c[h].pathConfig), V = b.map((Z) => de(Z.coordinate)), F = new Be(V), q = new ae({
2239
- type: "route",
2240
- geometry: F,
2241
- pathData: h
2242
- });
2243
- q.setStyle(A(H)), f.addFeature(q), r(h), console.log("pathConfig", H), H.imgSrc && (H.imgSrc.includes("gif") && y(h, F, H.imgSrc, H.imgPosition, [H.imgWidth, H.imgHeight]), w(h, F, H.imgSrc, H.imgPosition, [H.imgWidth, H.imgHeight]));
2244
- }
2245
- function A(h) {
2246
- return new se({
2247
- fill: new he({
2248
- color: h.pathStrokeColor,
2249
- width: h.pathStrokeWidth
2250
- }),
2251
- stroke: new Pe({
2252
- color: h.pathColor,
2253
- width: h.pathWidth
2254
- })
2255
- });
2256
- }
2257
- function E(h, f) {
2258
- const b = x(h);
2259
- return new se({
2260
- image: new Ce({
2261
- img: b,
2262
- imgSize: [b.width, b.height],
2263
- rotation: f,
2264
- displacement: [0, 0],
2265
- rotateWithView: !1
2266
- })
2267
- });
2268
- }
2269
- function r(h) {
2270
- const f = h;
2271
- if (c[f].pathList.length < 2)
2272
- return;
2273
- const b = l.get(f).getSource(), V = (c[f].pathList || []).map((d) => de(d.coordinate));
2274
- b.getFeatures().forEach((d) => {
2275
- d.getProperties().type === "arrow" && b.removeFeature(d);
2276
- });
2277
- const F = new Be(V), q = Object.assign({}, L, c[f].pathConfig);
2278
- u(
2279
- F,
2280
- q.arrowInterval
2281
- ).forEach((d) => {
2282
- const T = new ae({
2283
- geometry: new fe(d.coordinate),
2284
- type: "arrow",
2285
- rotation: d.rotation
2286
- });
2287
- T.setStyle(E(q, d.rotation)), b.addFeature(T);
2288
- });
2289
- }
2290
- function u(h, f) {
2291
- const b = h.getCoordinates(), H = [];
2292
- if (b.length < 2) return H;
2293
- const V = b.map((Z) => e.getPixelFromCoordinate(Z));
2294
- let F = 0, q = V[0];
2295
- for (let Z = 1; Z < V.length; Z++) {
2296
- const d = V[Z], T = [
2297
- d[0] - q[0],
2298
- d[1] - q[1]
2299
- ], R = Math.sqrt(T[0] ** 2 + T[1] ** 2), B = Math.atan2(T[1], T[0]), J = [
2300
- T[0] / R,
2301
- T[1] / R
2302
- ];
2303
- for (; F + f <= R; ) {
2304
- F += f;
2305
- const oe = [
2306
- q[0] + J[0] * F,
2307
- q[1] + J[1] * F
2308
- ], ie = e.getCoordinateFromPixel(oe);
2309
- H.push({
2310
- coordinate: ie,
2311
- rotation: B
2312
- });
2313
- }
2314
- F -= R, q = d;
2315
- }
2316
- return H;
2317
- }
2318
- function x(h) {
2319
- const f = {
2320
- color: h.arrowColor,
2321
- lineWidth: h.arrowWidth,
2322
- arrowHeight: h.arrowHeight,
2323
- angle: h.arrowAngle
2324
- };
2325
- if (f.angle >= 180 || f.angle <= 0)
2326
- throw new Error("箭头夹角取值范围为0-180");
2327
- const b = f.arrowHeight / 2, H = 1 / Math.tan(f.angle * Math.PI / 360), V = Math.ceil(H * b), F = V + f.lineWidth, q = document.createElement("canvas");
2328
- q.width = F, q.height = f.arrowHeight;
2329
- const Z = q.getContext("2d");
2330
- return Z.fillStyle = f.color, Z.strokeStyle = f.color, Z.beginPath(), Z.lineTo(0, 0), Z.lineTo(f.lineWidth, 0), Z.lineTo(F, b), Z.lineTo(f.lineWidth, f.arrowHeight), Z.lineTo(0, f.arrowHeight), Z.lineTo(V, b), Z.closePath(), Z.fill(), q;
2331
- }
2332
- function w(h, f, b, H = 1 / 3, V = [80, 80]) {
2333
- var R;
2334
- const F = S(f, H), q = P(f, F);
2335
- console.log("rotation", h, q);
2336
- const Z = new fe(F), d = new ae(Z);
2337
- d.set("pathData", h), d.set("type", "line"), d.setStyle(new se({
2338
- image: new Ce({
2339
- src: b,
2340
- width: V[0] || 40,
2341
- height: V[1] || 40,
2342
- rotation: q,
2343
- rotateWithView: !0,
2344
- anchor: [0.5, 0.5],
2345
- anchorXUnits: "fraction",
2346
- anchorYUnits: "fraction",
2347
- opacity: b.includes("gif") ? 0 : 1
2348
- }),
2349
- zIndex: 99
2350
- }));
2351
- const T = (R = l.get(h)) == null ? void 0 : R.getSource();
2352
- console.log(h, T, l.get(h)), T.addFeature(d);
2353
- }
2354
- function y(h, f, b, H = 1 / 3, V = [80, 80]) {
2355
- const F = S(f, H), q = P(f, F), Z = document.createElement("div");
2356
- Z.className = "dynamic-icon-container", Z.style.width = `${V[0]}px`, Z.style.height = `${V[1]}px`;
2357
- const d = document.createElement("img");
2358
- d.src = b, d.style.width = "100%", d.style.height = "100%";
2359
- const T = q * 180 / Math.PI;
2360
- d.style.transform = `rotate(${T}deg)`, d.style.transformOrigin = "center center", Z.appendChild(d);
2361
- const R = new Ee({
2362
- position: F,
2363
- positioning: "center-center",
2364
- element: Z,
2365
- stopEvent: !1
2366
- });
2367
- R.set("type", h), e == null || e.addOverlay(R);
2368
- }
2369
- function S(h, f) {
2370
- const b = h.getCoordinates(), V = h.getLength() * f;
2371
- let F = 0;
2372
- for (let q = 0; q < b.length - 1; q++) {
2373
- const Z = b[q], d = b[q + 1], T = Math.sqrt(
2374
- Math.pow(d[0] - Z[0], 2) + Math.pow(d[1] - Z[1], 2)
2375
- );
2376
- if (F + T >= V) {
2377
- const R = (V - F) / T;
2378
- return [
2379
- Z[0] + (d[0] - Z[0]) * R,
2380
- Z[1] + (d[1] - Z[1]) * R
2381
- ];
2382
- }
2383
- F += T;
2384
- }
2385
- return b[b.length - 1];
2386
- }
2387
- function P(h, f) {
2388
- const b = h.getCoordinates(), H = 1e-6, V = b[0], F = b[b.length - 1], q = F[0] - V[0], Z = F[1] - V[1];
2389
- for (let J = 0; J < b.length - 1; J++) {
2390
- const oe = b[J], ie = b[J + 1];
2391
- if (!k(f, oe, ie, H)) continue;
2392
- const I = ie[0] - oe[0], Y = ie[1] - oe[1];
2393
- return Math.abs(I) < H ? Z > 0 ? 0 : 180 : Math.abs(Y) < H ? (console.log(q, q > 0), q > 0 ? 90 : -90) : Math.atan2(Y, I);
2394
- }
2395
- const d = b[b.length - 2], T = b[b.length - 1], R = T[0] - d[0], B = T[1] - d[1];
2396
- return Math.atan2(B, R);
2397
- }
2398
- function k(h, f, b, H) {
2399
- const V = (h[1] - f[1]) * (b[0] - f[0]) - (h[0] - f[0]) * (b[1] - f[1]);
2400
- if (Math.abs(V) > H) return !1;
2401
- const F = (h[0] - f[0]) * (b[0] - f[0]) + (h[1] - f[1]) * (b[1] - f[1]);
2402
- if (F < 0) return !1;
2403
- const q = Math.pow(b[0] - f[0], 2) + Math.pow(b[1] - f[1], 2);
2404
- return F <= q;
2405
- }
2406
- function te(h) {
2407
- const f = c[h].pointList || [], b = Object.assign({}, M, c[h].pointConfig), H = i.get(h).getSource(), V = a.get(h).getSource();
2408
- f.forEach((F) => {
2409
- if (F.img && F.coordinate) {
2410
- const q = new fe(de(F.coordinate)), Z = new ae(q);
2411
- Z.set("pathData", h), Z.set("type", "point"), Z.set("pointData", F), Z.set("singleclick", F == null ? void 0 : F.singleclick);
2412
- const d = F.img.includes("svg") ? `data:image/svg+xml;utf8,${encodeURIComponent(F.img)}` : F.img || "";
2413
- Z.setStyle(new se({
2414
- image: new Ce({
2415
- src: d,
2416
- width: b.pointWidth || 40,
2417
- height: b.pointHeight || 40,
2418
- anchor: b.anchor || [0.5, 1],
2419
- rotation: b.rotation || 0
2420
- }),
2421
- zIndex: b.zIndex || 10
2422
- })), F != null && F.singleclick ? V.addFeature(Z) : H.addFeature(Z);
2423
- }
2424
- });
2425
- }
2426
- const _ = (h) => {
2427
- var b, H;
2428
- re();
2429
- const f = [];
2430
- h.forEach((V) => {
2431
- const F = V.get("singleclick"), q = V.get("pathData"), Z = V.get("type"), d = V.get("pointData");
2432
- f.push({
2433
- id: q,
2434
- point: [d]
2435
- }), Z === "point" && F ? G(V) : Q(q);
2436
- }), (b = s.getProps()) != null && b.selectPath && ((H = s.getProps()) == null || H.selectPath(f));
2437
- };
2438
- function G(h) {
2439
- const f = new Vt(null, null, h, v);
2440
- f.start(), t == null || t.push(f);
2441
- }
2442
- function Q(h) {
2443
- var V;
2444
- const f = (V = e.getOverlays().getArray()) == null ? void 0 : V.filter((F) => F.get("type") === h), b = [];
2445
- l.get(h) && b.push(l.get(h)), i.get(h) && b.push(i.get(h));
2446
- const H = new Vt(b, f, null, v);
2447
- H.start(), t == null || t.push(H);
2448
- }
2449
- function re() {
2450
- t && t.length > 0 && t.forEach((h) => {
2451
- h.stop(), h = null;
2452
- });
2453
- }
2454
- return {
2455
- reRenderLine: n,
2456
- handleClick: _,
2457
- render: o,
2458
- blinking: Q,
2459
- stopBlink: re,
2460
- clear: () => {
2461
- l.forEach((f) => {
2462
- var b;
2463
- (b = f.getSource()) == null || b.clear(), e == null || e.removeLayer(f);
2464
- }), i.forEach((f) => {
2465
- var b;
2466
- (b = f.getSource()) == null || b.clear(), e == null || e.removeLayer(f);
2467
- }), a.forEach((f) => {
2468
- var b;
2469
- (b = f.getSource()) == null || b.clear(), e == null || e.removeLayer(f);
2470
- }), Object.keys(c).forEach((f) => {
2471
- l.delete(f), i.delete(f), a.delete(f), delete c[f];
2472
- });
2473
- },
2474
- close: (h) => {
2475
- const f = l.get(h), b = i.get(h), H = a.get(h);
2476
- f == null || f.setVisible(!1), b.setVisible(!1), H.setVisible(!1);
2477
- }
2478
- };
2479
- }, _o = (e, s, l, i, a, c, t, L, M) => {
2480
- const v = e.getInstall();
2481
- v.on("moveend", () => {
2482
- var X, A;
2483
- try {
2484
- const E = e.getZoom();
2485
- (A = (X = s.getProps()).mapMoveEnd) == null || A.call(X, E), E >= ve.min && E <= ve.max && l.reRenderTrackLine(), M.reRenderLine(), i.changeShipScale();
2486
- } catch (E) {
2487
- console.log("moveend---catch", E);
2488
- }
2489
- });
2490
- const o = {
2491
- [ce.PORT]: null,
2492
- [ce.SHIP]: null,
2493
- [ce.TRACK]: null,
2494
- [ce.DELETE]: null
2495
- }, n = (X, A, E) => {
2496
- switch (X) {
2497
- case ce.SHIP:
2498
- i == null || i.handleShipMapEvent(A, "hover");
2499
- break;
2500
- case ce.PORT:
2501
- break;
2502
- case ce.TRACK:
2503
- l == null || l.handleTrackMapEvent(A, "hover", E);
2504
- break;
2505
- }
2506
- }, N = (X) => {
2507
- switch (X) {
2508
- case ce.PORT:
2509
- break;
2510
- case ce.SHIP:
2511
- i == null || i.handleShipMapEvent(null, "hover");
2512
- break;
2513
- case ce.TRACK:
2514
- l == null || l.handleTrackMapEvent(null, "hover");
2515
- break;
2516
- }
2517
- };
2518
- v.on("pointermove", (X) => {
2519
- if (!(!v || v.getTarget() === void 0) && t.getState() !== "open" && c.getState() !== "open" && e.getMapClick() && !v.getView().getAnimating())
2520
- try {
2521
- let A = !1, E = !1;
2522
- const r = v.getLayers().getArray().filter((u) => u.get("layerType")) || [];
2523
- try {
2524
- r && r.length > 0 && r.forEach((u) => {
2525
- var y, S;
2526
- if (E) return;
2527
- const x = v == null ? void 0 : v.getEventPixel(X.originalEvent), w = u == null ? void 0 : u.get("layerType");
2528
- if (((S = (y = u == null ? void 0 : u.getSource()) == null ? void 0 : y.getFeatures()) == null ? void 0 : S.length) > 0) {
2529
- const P = v == null ? void 0 : v.forEachFeatureAtPixel(x, (k) => k, {
2530
- layerFilter: (k) => k === u,
2531
- // 严格图层过滤
2532
- hitTolerance: 5
2533
- });
2534
- P !== o[w] && (o[w] && N(w, o[w]), o[w] = P, P && (n(w, P, X), E = !0)), P && (A = !0);
2535
- }
2536
- }), A ? Se(v, "pointer") : Se(v, "grab");
2537
- } catch (u) {
2538
- console.log("pointermove----", u);
2539
- }
2540
- } catch (A) {
2541
- console.log("pointermove----", A);
2542
- }
2543
- }), v.on("click", xt((X) => {
2544
- if (!(!v || v.getTarget() === void 0) && t.getState() !== "open" && c.getState() !== "open" && e.getMapClick() && !v.getView().getAnimating())
2545
- try {
2546
- let A = !1;
2547
- const E = v.getLayers().getArray().filter((r) => r.get("layerType")) || [];
2548
- if (E && E.length > 0) {
2549
- const r = [];
2550
- E.forEach((u) => {
2551
- var x, w, y;
2552
- if (!A)
2553
- try {
2554
- if (u.getSource().getFeatures().length > 0) {
2555
- const S = v == null ? void 0 : v.getEventPixel(X.originalEvent), P = v == null ? void 0 : v.forEachFeatureAtPixel(S, (k) => {
2556
- if (k.get("shipData") || k.get("portData") || k.get("polygonData") || k.get("pathData"))
2557
- return k;
2558
- }, {
2559
- layerFilter: (k) => k === u,
2560
- // 严格图层过滤
2561
- hitTolerance: 10
2562
- });
2563
- if (console.log("clickFeature", P), P != null && P.get("shipData"))
2564
- l.getTrackStatus() || i.handleShipMapEvent(P, "click", (x = s.getProps()) == null ? void 0 : x.selectShip), A = !0;
2565
- else if (P != null && P.get("portData")) {
2566
- const k = P == null ? void 0 : P.get("portData");
2567
- a.selected(k), (y = (w = s.getProps()) == null ? void 0 : w.selectPort) == null || y.call(w, k), A = !0;
2568
- } else if (P != null && P.get("polygonData")) {
2569
- const k = P.get("polygonData");
2570
- L.deletePolygon(k == null ? void 0 : k.id), A = !0;
2571
- } else P != null && P.get("pathData") && r.push(P);
2572
- }
2573
- } catch (S) {
2574
- console.log("click--", S);
2575
- }
2576
- }), r.length > 0 && M.handleClick(r);
2577
- }
2578
- } catch (A) {
2579
- console.log("click----", A);
2580
- }
2581
- }, 150)), v.getView().on("change:resolution", () => {
2582
- i.changeShipScale();
2583
- });
2584
- }, Qo = () => {
2585
- const e = Ut([]);
2586
- return {
2587
- createInstance: (i, a) => {
2588
- const c = bo();
2589
- c.initMap(i, a);
2590
- const t = c.getInstall(), L = Bo(t), M = Eo();
2591
- M.setProps(a), L.setShowLayerType(a.layerType), L.setGreenTileVisible(a.showGreenLayer);
2592
- const v = Po(t), o = Mo(t, v), n = Zo(t, M), N = Do(t, M), X = Go(t, M, c, N, n), A = Yo(t), E = Xo(t), r = jo(t, M), u = Ko(t, M);
2593
- _o(c, M, v, X, E, n, N, r, u);
2594
- const x = () => {
2595
- const y = t.getView().calculateExtent(c.getSize()), S = Ke([y[0], y[1]], ye.mercator, ye.data), P = Ke([y[2], y[3]], ye.mercator, ye.data);
2596
- return [S[0], S[1], P[0], P[1]];
2597
- }, w = {
2598
- id: Symbol("map-instance"),
2599
- innerMap: null,
2600
- map: c.getInstall(),
2601
- destroy: () => {
2602
- e.splice(e.indexOf(w), 1);
2603
- },
2604
- methods: {
2605
- ...c,
2606
- layer: L,
2607
- ship: X,
2608
- track: v,
2609
- carTrack: o,
2610
- port: {
2611
- render: E.render,
2612
- clear: E.clear,
2613
- selected: E.selected
2614
- },
2615
- position: A,
2616
- drawLine: n,
2617
- drawPolygon: N,
2618
- renderPolygon: r,
2619
- pathLine: u,
2620
- // 子模块
2621
- utils: {
2622
- getCalculateExtent: x,
2623
- convertSixHundredThousandToLatLng: pt,
2624
- calculateCirclePoints: po
2625
- }
2626
- }
2627
- };
2628
- return e.push(w), w;
2629
- },
2630
- destroyInstance: (i) => {
2631
- const a = e.findIndex((c) => c.id === i);
2632
- a > -1 && (e[a].destroy(), e.splice(a, 1));
2633
- },
2634
- destroyAll: () => {
2635
- e.forEach((i) => i.destroy()), e.splice(0, e.length);
2636
- },
2637
- getAllInstances: () => [...e]
2638
- };
2639
- }, Uo = { class: "zh-map-box" }, Jo = /* @__PURE__ */ ht({
2640
- __name: "Map",
2641
- props: {
2642
- zoom: { default: ve.default },
2643
- center: { default: xo },
2644
- layerType: { default: "vector" },
2645
- showGreenLayer: { type: Boolean, default: !1 },
2646
- showScale: { type: Boolean, default: !0 },
2647
- scaleLineUnit: { default: "metric" },
2648
- mapMoveEnd: { type: Function, default: () => {
2649
- } },
2650
- lineDrawEnd: {},
2651
- areaDrawEnd: { type: Function, default: () => {
2652
- } },
2653
- selectShip: { type: Function, default: () => {
2654
- } },
2655
- selectPort: { type: Function, default: () => {
2656
- } },
2657
- selectPath: { type: Function, default: () => {
2658
- } },
2659
- deletePolygon: { type: Function, default: () => {
2660
- } }
2661
- },
2662
- setup(e, { expose: s }) {
2663
- function l() {
2664
- return new Promise((o) => {
2665
- document.fonts ? document.fonts.load("12px map-iconfont").then(o) : setTimeout(o, 300);
2666
- });
2667
- }
2668
- l();
2669
- const i = me(), a = me(), c = Qo(), t = me(), L = e, M = me({
2670
- getInstall() {
2671
- }
2672
- });
2673
- Jt(() => {
2674
- var o;
2675
- console.log("props", L), t.value = c.createInstance(i.value, L), M.value = t.value.methods, (o = a.value) == null || o.setScaleLine(t.value.map, L.scaleLineUnit), window.addEventListener("nativeDoubleTap", function() {
2676
- v();
2677
- });
2678
- });
2679
- function v() {
2680
- var n, N, X, A, E;
2681
- if (((n = t.value) == null ? void 0 : n.methods.drawPolygon.getState()) === "open" || ((N = t.value) == null ? void 0 : N.methods.drawLine.getState()) === "open" || !((X = t.value) != null && X.methods.getMapClick()))
2682
- return;
2683
- let o = (A = t.value) == null ? void 0 : A.methods.getZoom();
2684
- (E = t.value) == null || E.methods.setZoom(o + 1);
2685
- }
2686
- return It(() => {
2687
- var o, n;
2688
- c.destroyInstance((o = t == null ? void 0 : t.value) == null ? void 0 : o.id), (n = t.value) == null || n.destroy();
2689
- }), s({
2690
- getZoom: () => {
2691
- var o;
2692
- return (o = t.value) == null ? void 0 : o.methods.getZoom();
2693
- },
2694
- setZoom: (o) => {
2695
- var n;
2696
- return (n = t.value) == null ? void 0 : n.methods.setZoom(o);
2697
- },
2698
- getInstall: () => {
2699
- var o;
2700
- return (o = t.value) == null ? void 0 : o.methods.getInstall();
2701
- },
2702
- setMapClick: (...o) => {
2703
- var n;
2704
- return (n = t.value) == null ? void 0 : n.methods.setMapClick(...o);
2705
- },
2706
- getMapClick: () => {
2707
- var o;
2708
- return (o = t.value) == null ? void 0 : o.methods.getMapClick();
2709
- },
2710
- getView: () => {
2711
- var o;
2712
- return (o = t.value) == null ? void 0 : o.methods.getView();
2713
- },
2714
- setCenter: (o, n) => {
2715
- var N;
2716
- return (N = t.value) == null ? void 0 : N.methods.setCenter(o, n);
2717
- },
2718
- getSize: () => {
2719
- var o;
2720
- return (o = t.value) == null ? void 0 : o.methods.getSize();
2721
- },
2722
- getCenter: () => {
2723
- var o;
2724
- return (o = t.value) == null ? void 0 : o.methods.getCenter();
2725
- },
2726
- layer: {
2727
- setGreenTileVisible: (o) => {
2728
- var n;
2729
- return (n = t.value) == null ? void 0 : n.methods.layer.setGreenTileVisible(o);
2730
- },
2731
- getGreenTileVisible: () => {
2732
- var o;
2733
- return (o = t.value) == null ? void 0 : o.methods.layer.getGreenTileVisible();
2734
- },
2735
- getShowLayerType: () => {
2736
- var o;
2737
- return (o = t.value) == null ? void 0 : o.methods.layer.getShowLayerType();
2738
- },
2739
- setShowLayerType: (o) => {
2740
- var n;
2741
- return (n = t.value) == null ? void 0 : n.methods.layer.setShowLayerType(o);
2742
- }
2743
- },
2744
- ship: {
2745
- render: (...o) => {
2746
- var n;
2747
- return (n = t.value) == null ? void 0 : n.methods.ship.render(...o);
2748
- },
2749
- selected: (...o) => {
2750
- var n;
2751
- return (n = t.value) == null ? void 0 : n.methods.ship.selected(...o);
2752
- },
2753
- filter: (...o) => {
2754
- var n;
2755
- return (n = t.value) == null ? void 0 : n.methods.ship.filter(...o);
2756
- },
2757
- blinking: (...o) => {
2758
- var n;
2759
- return (n = t.value) == null ? void 0 : n.methods.ship.blinking(...o);
2760
- },
2761
- clear: () => {
2762
- var o;
2763
- return (o = t.value) == null ? void 0 : o.methods.ship.clear();
2764
- },
2765
- setLableStatus: (...o) => {
2766
- var n;
2767
- return (n = t.value) == null ? void 0 : n.methods.ship.setLableStatus(...o);
2768
- }
2769
- },
2770
- track: {
2771
- render: (...o) => {
2772
- var n;
2773
- return (n = t.value) == null ? void 0 : n.methods.track.render(...o);
2774
- },
2775
- remove: (...o) => {
2776
- var n;
2777
- return (n = t.value) == null ? void 0 : n.methods.track.remove(...o);
2778
- },
2779
- play: (...o) => {
2780
- var n;
2781
- return (n = t.value) == null ? void 0 : n.methods.track.play(...o);
2782
- },
2783
- setCenter: (...o) => {
2784
- var n;
2785
- return (n = t.value) == null ? void 0 : n.methods.track.setCenter(...o);
2786
- },
2787
- close: (...o) => {
2788
- var n;
2789
- return (n = t.value) == null ? void 0 : n.methods.track.close(...o);
2790
- },
2791
- getLength: (...o) => {
2792
- var n;
2793
- return (n = t.value) == null ? void 0 : n.methods.track.getLength(...o);
2794
- }
2795
- },
2796
- carTrack: {
2797
- location: (...o) => {
2798
- var n;
2799
- return (n = t.value) == null ? void 0 : n.methods.carTrack.location(...o);
2800
- },
2801
- remove: (...o) => {
2802
- var n;
2803
- return (n = t.value) == null ? void 0 : n.methods.carTrack.remove(...o);
2804
- },
2805
- renderTrack: (...o) => {
2806
- var n;
2807
- return (n = t.value) == null ? void 0 : n.methods.carTrack.renderTrack(...o);
2808
- },
2809
- setCenter: (...o) => {
2810
- var n;
2811
- return (n = t.value) == null ? void 0 : n.methods.carTrack.setCenter(...o);
2812
- },
2813
- closeTrack: () => {
2814
- var o;
2815
- return (o = t.value) == null ? void 0 : o.methods.carTrack.closeTrack();
2816
- },
2817
- playTrack: (...o) => {
2818
- var n;
2819
- return (n = t.value) == null ? void 0 : n.methods.carTrack.playTrack(...o);
2820
- }
2821
- },
2822
- port: {
2823
- render: (o, n) => {
2824
- var N;
2825
- return (N = t.value) == null ? void 0 : N.methods.port.render(o, n);
2826
- },
2827
- clear: () => {
2828
- var o;
2829
- return (o = t.value) == null ? void 0 : o.methods.port.clear();
2830
- },
2831
- selected: (o) => {
2832
- var n;
2833
- return (n = t.value) == null ? void 0 : n.methods.port.selected(o);
2834
- }
2835
- },
2836
- position: {
2837
- render: (...o) => {
2838
- var n;
2839
- return (n = t.value) == null ? void 0 : n.methods.position.render(...o);
2840
- },
2841
- selected: (...o) => {
2842
- var n;
2843
- return (n = t.value) == null ? void 0 : n.methods.position.selected(...o);
2844
- },
2845
- clearSelected: (...o) => {
2846
- var n;
2847
- return (n = t.value) == null ? void 0 : n.methods.position.clearSelected(...o);
2848
- },
2849
- clear: () => {
2850
- var o;
2851
- return (o = t.value) == null ? void 0 : o.methods.position.clear();
2852
- },
2853
- renderHtml: (...o) => {
2854
- var n;
2855
- return (n = t.value) == null ? void 0 : n.methods.position.renderHtml(...o);
2856
- },
2857
- removeHtml: (...o) => {
2858
- var n;
2859
- return (n = t.value) == null ? void 0 : n.methods.position.removeHtml(...o);
2860
- }
2861
- },
2862
- drawLine: {
2863
- open: () => {
2864
- var o;
2865
- return (o = t.value) == null ? void 0 : o.methods.drawLine.open();
2866
- },
2867
- close: () => {
2868
- var o;
2869
- return (o = t.value) == null ? void 0 : o.methods.drawLine.close();
2870
- },
2871
- deleteLine: (o) => {
2872
- var n;
2873
- return (n = t.value) == null ? void 0 : n.methods.drawLine.deleteLine(o);
2874
- },
2875
- setUnit: (o) => {
2876
- var n;
2877
- return (n = t.value) == null ? void 0 : n.methods.drawLine.setUnit(o);
2878
- },
2879
- getState: () => {
2880
- var o;
2881
- return (o = t.value) == null ? void 0 : o.methods.drawLine.getState();
2882
- }
2883
- },
2884
- drawPolygon: {
2885
- open: (...o) => {
2886
- var n;
2887
- return (n = t.value) == null ? void 0 : n.methods.drawPolygon.open(...o);
2888
- },
2889
- close: () => {
2890
- var o;
2891
- return (o = t.value) == null ? void 0 : o.methods.drawPolygon.close();
2892
- },
2893
- reset: () => {
2894
- var o;
2895
- return (o = t.value) == null ? void 0 : o.methods.drawPolygon.reset();
2896
- }
2897
- },
2898
- pathLine: {
2899
- render: (...o) => {
2900
- var n;
2901
- return (n = t.value) == null ? void 0 : n.methods.pathLine.render(...o);
2902
- },
2903
- blinking: (...o) => {
2904
- var n;
2905
- return (n = t.value) == null ? void 0 : n.methods.pathLine.blinking(...o);
2906
- }
2907
- },
2908
- renderPolygon: {
2909
- createPolygon: (...o) => {
2910
- var n;
2911
- return (n = t.value) == null ? void 0 : n.methods.renderPolygon.createPolygon(...o);
2912
- },
2913
- createCircle: (...o) => {
2914
- var n;
2915
- return (n = t.value) == null ? void 0 : n.methods.renderPolygon.createCircle(...o);
2916
- },
2917
- updatePolygon: (...o) => {
2918
- var n;
2919
- return (n = t.value) == null ? void 0 : n.methods.renderPolygon.updatePolygon(...o);
2920
- },
2921
- clear: () => {
2922
- var o;
2923
- return (o = t.value) == null ? void 0 : o.methods.renderPolygon.clear();
2924
- }
2925
- },
2926
- // 子模块
2927
- utils: {
2928
- getCalculateExtent: (...o) => {
2929
- var n;
2930
- return (n = t.value) == null ? void 0 : n.methods.utils.getCalculateExtent(...o);
2931
- },
2932
- convertSixHundredThousandToLatLng: (...o) => {
2933
- var n;
2934
- return (n = t.value) == null ? void 0 : n.methods.utils.convertSixHundredThousandToLatLng(...o);
2935
- },
2936
- calculateCirclePoints: (o, n) => {
2937
- var N;
2938
- return (N = t.value) == null ? void 0 : N.methods.utils.calculateCirclePoints(o, n);
2939
- }
2940
- }
2941
- }), (o, n) => (yt(), vt("div", Uo, [
2942
- ut("div", {
2943
- id: "map",
2944
- ref_key: "zhMapRef",
2945
- ref: i,
2946
- class: "zh-map"
2947
- }, null, 512),
2948
- gt(yo, {
2949
- ref_key: "scaleLineRef",
2950
- ref: a
2951
- }, null, 512),
2952
- gt(wo, {
2953
- ref: "zoomControlRef",
2954
- "map-instance": t.value
2955
- }, null, 8, ["map-instance"])
2956
- ]));
2957
- }
2958
- }), Io = /* @__PURE__ */ bt(Jo, [["__scopeId", "data-v-c82c7bff"]]), sn = go(Io);
2959
- export {
2960
- sn as Z
2961
- };