zhihao-ui 1.3.61 → 1.3.62

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