zhihao-ui 1.3.58-alpha.4 → 1.3.58-alpha.5

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