zhihao-ui 1.3.39 → 1.3.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es/{Map-P9S4N_HH.js → Map-BuHDM71l.js} +653 -653
- package/dist/es/index.js +1 -1
- package/dist/umd/index.umd.cjs +25 -25
- package/package.json +1 -1
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { defineComponent as He, openBlock as Xe, createElementBlock as je, createElementVNode as Ye, ref as ee, computed as
|
|
2
|
-
import { S as Rt, M as tt, T as ye, X as me, p as U, V as Zt, q as Dt, t as Gt, h as ct, r as Qe, s as At, u as we, F as I, v as j, O as ce, P as le, w as
|
|
1
|
+
import { defineComponent as He, openBlock as Xe, createElementBlock as je, createElementVNode as Ye, ref as ee, computed as Se, h as ne, createVNode as Be, render as $t, reactive as Vt, onMounted as zt, onUnmounted as Ot } from "vue";
|
|
2
|
+
import { S as Rt, M as tt, T as ye, X as me, p as U, V as Zt, q as Dt, t as Gt, h as ct, r as Qe, s as At, u as we, F as I, v as j, O as ce, P as le, w as Me, x as ze, L as $e, y as Wt, z as ot, A as ie, B as he, C as de, D as fe, i as Yt, G as Oe, H as Bt, I as pe, J as qt, K as Ht, N as at, Q as Ve, R as qe, U as rt, W as Xt, Y as jt, Z as Qt } from "./vendor-D2mv9LHk.js";
|
|
3
3
|
import { _ as Je } from "./Button-CGndQwez.js";
|
|
4
4
|
import { w as Jt } from "./utils-D2wHR1YB.js";
|
|
5
5
|
const Kt = { id: "scale-line-container" }, _t = /* @__PURE__ */ He({
|
|
6
6
|
__name: "scaleLine",
|
|
7
7
|
setup(e, { expose: n }) {
|
|
8
8
|
return n({
|
|
9
|
-
setScaleLine: (
|
|
10
|
-
|
|
9
|
+
setScaleLine: (l, c) => {
|
|
10
|
+
c || (c = "metric");
|
|
11
11
|
const o = new Rt({
|
|
12
|
-
units:
|
|
12
|
+
units: c
|
|
13
13
|
}), d = document.getElementById("scale-line-container");
|
|
14
|
-
d && (o.setTarget(d),
|
|
14
|
+
d && (o.setTarget(d), l.addControl(o));
|
|
15
15
|
}
|
|
16
|
-
}), (
|
|
16
|
+
}), (l, c) => (Xe(), je("div", Kt));
|
|
17
17
|
}
|
|
18
18
|
}), Ut = /* @__PURE__ */ Je(_t, [["__scopeId", "data-v-2bc5dee8"]]), It = { class: "zoom" }, eo = /* @__PURE__ */ He({
|
|
19
19
|
__name: "zoomControl",
|
|
@@ -26,30 +26,30 @@ const Kt = { id: "scale-line-container" }, _t = /* @__PURE__ */ He({
|
|
|
26
26
|
setup(e) {
|
|
27
27
|
const n = e;
|
|
28
28
|
console.log("props", n);
|
|
29
|
-
const
|
|
29
|
+
const s = () => {
|
|
30
30
|
console.log("props");
|
|
31
|
-
const { setZoom:
|
|
31
|
+
const { setZoom: c, getZoom: o, getInstall: d } = n.mapInstance.methods;
|
|
32
32
|
if (!d()) return;
|
|
33
33
|
const t = o();
|
|
34
|
-
t &&
|
|
35
|
-
},
|
|
36
|
-
const { setZoom:
|
|
34
|
+
t && c(t + 1);
|
|
35
|
+
}, l = () => {
|
|
36
|
+
const { setZoom: c, getZoom: o, getInstall: d } = n.mapInstance.methods;
|
|
37
37
|
if (!d()) return;
|
|
38
38
|
const t = o();
|
|
39
|
-
t &&
|
|
39
|
+
t && c(t - 1);
|
|
40
40
|
};
|
|
41
|
-
return (
|
|
41
|
+
return (c, o) => (Xe(), je("div", It, [
|
|
42
42
|
Ye("div", {
|
|
43
43
|
class: "button big-button",
|
|
44
|
-
onClick:
|
|
44
|
+
onClick: s
|
|
45
45
|
}, " + "),
|
|
46
46
|
Ye("div", {
|
|
47
47
|
class: "button small-button",
|
|
48
|
-
onClick:
|
|
48
|
+
onClick: l
|
|
49
49
|
}, " - ")
|
|
50
50
|
]));
|
|
51
51
|
}
|
|
52
|
-
}), to = /* @__PURE__ */ Je(eo, [["__scopeId", "data-v-c39c3075"]]),
|
|
52
|
+
}), to = /* @__PURE__ */ Je(eo, [["__scopeId", "data-v-c39c3075"]]), Ne = "a6e8f78974f2581f2ca00485b40c948f", te = {
|
|
53
53
|
// 地图默认层级
|
|
54
54
|
default: 13,
|
|
55
55
|
// 地图缩放最小层级
|
|
@@ -69,21 +69,21 @@ const Kt = { id: "scale-line-container" }, _t = /* @__PURE__ */ He({
|
|
|
69
69
|
data: "EPSG:4326",
|
|
70
70
|
// 墨卡托投影坐标 渲染坐标
|
|
71
71
|
mercator: "EPSG:3857"
|
|
72
|
-
}, oo = [114.84, 30.52], dt = "https://static.zhihaoscm.cn/",
|
|
73
|
-
var ue = ((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=${
|
|
72
|
+
}, oo = [114.84, 30.52], dt = "https://static.zhihaoscm.cn/", Re = 2003750834e-2;
|
|
73
|
+
var ue = ((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=${Ne}`, 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=${Ne}`, 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=${Ne}`, 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=${Ne}`, e.greenTile = `${dt}/map/tile/{z}/{x}/{y}.png`, e))(ue || {}), xe = /* @__PURE__ */ ((e) => (e[e.M = 1] = "M", e[e.KM = 2] = "KM", e[e.NM = 3] = "NM", e))(xe || {});
|
|
74
74
|
function ro() {
|
|
75
|
-
const e = ee(), n = () => e.value,
|
|
75
|
+
const e = ee(), n = () => e.value, s = () => n().getView(), l = () => {
|
|
76
76
|
var x;
|
|
77
|
-
return (x =
|
|
78
|
-
},
|
|
77
|
+
return (x = s()) == null ? void 0 : x.getZoom();
|
|
78
|
+
}, c = (x) => {
|
|
79
79
|
var L;
|
|
80
|
-
(L =
|
|
80
|
+
(L = s()) == null || L.setZoom(x);
|
|
81
81
|
}, o = (x, L) => {
|
|
82
82
|
var $;
|
|
83
|
-
($ =
|
|
83
|
+
($ = s()) == null || $.setCenter(U([x, L]));
|
|
84
84
|
}, d = () => {
|
|
85
85
|
var L;
|
|
86
|
-
const x = (L =
|
|
86
|
+
const x = (L = s()) == null ? void 0 : L.getCenter();
|
|
87
87
|
return Gt(x);
|
|
88
88
|
}, m = () => {
|
|
89
89
|
var x;
|
|
@@ -99,7 +99,7 @@ function ro() {
|
|
|
99
99
|
enableRotation: !1,
|
|
100
100
|
multiWorld: !0
|
|
101
101
|
};
|
|
102
|
-
let
|
|
102
|
+
let T = {
|
|
103
103
|
target: x,
|
|
104
104
|
controls: Dt({
|
|
105
105
|
zoom: !1
|
|
@@ -112,7 +112,7 @@ function ro() {
|
|
|
112
112
|
],
|
|
113
113
|
view: new Zt($)
|
|
114
114
|
};
|
|
115
|
-
const g = new tt(
|
|
115
|
+
const g = new tt(T);
|
|
116
116
|
e.value = g;
|
|
117
117
|
}, w = (x) => {
|
|
118
118
|
t.set("vectorTile", new ye({
|
|
@@ -148,9 +148,9 @@ function ro() {
|
|
|
148
148
|
};
|
|
149
149
|
return {
|
|
150
150
|
getInstall: n,
|
|
151
|
-
getView:
|
|
152
|
-
getZoom:
|
|
153
|
-
setZoom:
|
|
151
|
+
getView: s,
|
|
152
|
+
getZoom: l,
|
|
153
|
+
setZoom: c,
|
|
154
154
|
setCenter: o,
|
|
155
155
|
getCenter: d,
|
|
156
156
|
getSize: m,
|
|
@@ -159,15 +159,15 @@ function ro() {
|
|
|
159
159
|
};
|
|
160
160
|
}
|
|
161
161
|
const Ke = function(e, n) {
|
|
162
|
-
const
|
|
163
|
-
return [Number(e) / 6e5,
|
|
162
|
+
const s = Number(n) / 6e5;
|
|
163
|
+
return [Number(e) / 6e5, s];
|
|
164
164
|
}, no = (e, n) => {
|
|
165
|
-
const
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
], o = At(
|
|
165
|
+
const s = U(e), l = n * 1e3, c = [
|
|
166
|
+
s[0] - l,
|
|
167
|
+
s[1] - l,
|
|
168
|
+
s[0] + l,
|
|
169
|
+
s[1] + l
|
|
170
|
+
], o = At(c, J.mercator, J.data);
|
|
171
171
|
return {
|
|
172
172
|
leftTopPoint: { lng: o[0], lat: o[3] },
|
|
173
173
|
rightTopPoint: { lng: o[2], lat: o[3] },
|
|
@@ -175,31 +175,31 @@ const Ke = function(e, n) {
|
|
|
175
175
|
leftBottomPoint: { lng: o[0], lat: o[1] }
|
|
176
176
|
};
|
|
177
177
|
}, lo = function(e, n) {
|
|
178
|
-
const
|
|
179
|
-
let
|
|
178
|
+
const l = Qe(e);
|
|
179
|
+
let c = "";
|
|
180
180
|
switch (console.log(n, xe), n) {
|
|
181
181
|
case xe.M:
|
|
182
|
-
|
|
182
|
+
c = Math.round(l * 100) / 100 + " m";
|
|
183
183
|
break;
|
|
184
184
|
case xe.KM:
|
|
185
|
-
|
|
185
|
+
c = Math.round(l / 1e3 * 100) / 100 + " km";
|
|
186
186
|
break;
|
|
187
187
|
case xe.NM:
|
|
188
|
-
|
|
188
|
+
c = (Math.round(l / 1e3 * 100) / 100 / 1.852).toFixed(2) + " nm";
|
|
189
189
|
break;
|
|
190
190
|
}
|
|
191
|
-
return
|
|
191
|
+
return c;
|
|
192
192
|
};
|
|
193
193
|
function so(e) {
|
|
194
|
-
const n = e[0] *
|
|
195
|
-
let
|
|
196
|
-
return
|
|
194
|
+
const n = e[0] * Re / 180;
|
|
195
|
+
let s = Math.log(Math.tan((90 + e[1]) * Math.PI / 360)) / (Math.PI / 180);
|
|
196
|
+
return s = s * Re / 180, [n, s];
|
|
197
197
|
}
|
|
198
198
|
function ge(e = "") {
|
|
199
199
|
let n = e.replace(/&?/g, "&");
|
|
200
|
-
return n = n.replace(/&#x([0-9a-fA-F]+);?/g, (
|
|
201
|
-
const
|
|
202
|
-
return String.fromCodePoint(
|
|
200
|
+
return n = n.replace(/&#x([0-9a-fA-F]+);?/g, (s, l) => {
|
|
201
|
+
const c = parseInt(l, 16);
|
|
202
|
+
return String.fromCodePoint(c);
|
|
203
203
|
}), n;
|
|
204
204
|
}
|
|
205
205
|
const nt = (e) => {
|
|
@@ -214,38 +214,38 @@ const nt = (e) => {
|
|
|
214
214
|
zIndex: 100
|
|
215
215
|
});
|
|
216
216
|
}, lt = (e, n = "lonlat") => {
|
|
217
|
-
const
|
|
218
|
-
let
|
|
219
|
-
return
|
|
217
|
+
const s = { lon: 0, lat: 0 }, l = e[0] / Re * 180;
|
|
218
|
+
let c = e[1] / Re * 180;
|
|
219
|
+
return c = 180 / Math.PI * (2 * Math.atan(Math.exp(c * Math.PI / 180)) - Math.PI / 2), s.lon = l, s.lat = c, n === "lonlat" ? s : [l, c];
|
|
220
220
|
}, io = (e) => {
|
|
221
|
-
const n = ct.duration(e, "minutes"),
|
|
222
|
-
let o = `${String(
|
|
223
|
-
return
|
|
221
|
+
const n = ct.duration(e, "minutes"), s = Math.floor(n.asDays()), l = n.hours(), c = n.minutes();
|
|
222
|
+
let o = `${String(c).padStart(2, "0")}分`;
|
|
223
|
+
return l !== 0 && (o = `${String(l).padStart(2, "0")}时${o}`), s !== 0 && (o = `${String(s).padStart(2, "0")}天${o}`), o;
|
|
224
224
|
}, co = (e, n) => {
|
|
225
|
-
let
|
|
226
|
-
const
|
|
225
|
+
let s = null;
|
|
226
|
+
const l = async (w) => {
|
|
227
227
|
if (!e || (console.log("vehicleInfo", w), !(w != null && w.lon && (w != null && w.lat)))) return;
|
|
228
228
|
const x = Math.abs(Number(w.lon)) > 180 ? Ke(w.lon, w.lat) : [w.lon, w.lat];
|
|
229
|
-
|
|
229
|
+
c(w, U(x));
|
|
230
230
|
const L = e == null ? void 0 : e.getView(), $ = new le(x);
|
|
231
|
-
L.setCenter(
|
|
232
|
-
},
|
|
231
|
+
L.setCenter(Me($.getCoordinates(), J.data, J.mercator));
|
|
232
|
+
}, c = (w, x) => {
|
|
233
233
|
const L = `${dt}map/car-icon.gif`;
|
|
234
|
-
|
|
234
|
+
s || (s = new ce({
|
|
235
235
|
element: document.createElement("div"),
|
|
236
236
|
positioning: "center-center",
|
|
237
237
|
stopEvent: !1
|
|
238
238
|
// 允许交互事件穿透
|
|
239
|
-
}), e.addOverlay(
|
|
240
|
-
const $ =
|
|
239
|
+
}), e.addOverlay(s));
|
|
240
|
+
const $ = s.getElement();
|
|
241
241
|
$.style.backgroundImage = `url(${L})`, $.style.width = "80px", $.style.height = "80px";
|
|
242
|
-
const
|
|
243
|
-
$.style.transform = `rotate(${
|
|
242
|
+
const T = (w == null ? void 0 : w.drc) || "";
|
|
243
|
+
$.style.transform = `rotate(${T}deg)`, $.style.backgroundSize = "cover", s == null || s.setPosition(x);
|
|
244
244
|
};
|
|
245
245
|
return {
|
|
246
|
-
location:
|
|
246
|
+
location: l,
|
|
247
247
|
remove: () => {
|
|
248
|
-
const w =
|
|
248
|
+
const w = s == null ? void 0 : s.getElement();
|
|
249
249
|
w && (w.innerHTML = "");
|
|
250
250
|
},
|
|
251
251
|
renderTrack: (w, x, L) => {
|
|
@@ -264,139 +264,143 @@ const nt = (e) => {
|
|
|
264
264
|
};
|
|
265
265
|
var ut = /* @__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))(ut || {}), oe = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.front = "front", e.up = "up", e.down = "down", e.back = "back", e))(oe || {});
|
|
266
266
|
const ao = (e) => {
|
|
267
|
-
const n = /* @__PURE__ */ new Map(),
|
|
268
|
-
let
|
|
269
|
-
const
|
|
267
|
+
const n = /* @__PURE__ */ new Map(), s = {};
|
|
268
|
+
let l = null;
|
|
269
|
+
const c = "--";
|
|
270
270
|
let o = null;
|
|
271
271
|
const d = document.createElement("div"), m = new ce({
|
|
272
272
|
element: d,
|
|
273
273
|
positioning: "top-left",
|
|
274
274
|
className: "track-label-popup"
|
|
275
275
|
});
|
|
276
|
-
let t, r, w, x, L, $ = !1,
|
|
277
|
-
const O = 8, Y = [], A = (
|
|
276
|
+
let t, r, w, x, L, $ = !1, T = Date.now(), g, p = 0, M = null, f = 20;
|
|
277
|
+
const O = 8, Y = [], A = (a) => {
|
|
278
278
|
var u;
|
|
279
|
-
for (Y.unshift(
|
|
280
|
-
const
|
|
281
|
-
|
|
279
|
+
for (Y.unshift(a); Y.length > O; ) {
|
|
280
|
+
const v = Y.pop(), b = n.get(v);
|
|
281
|
+
b && ((u = b.getSource()) == null || u.clear(), e == null || e.removeLayer(b), n.delete(v), delete s[v]);
|
|
282
282
|
}
|
|
283
283
|
};
|
|
284
284
|
let B = "";
|
|
285
|
-
const R = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"],
|
|
286
|
-
if (
|
|
285
|
+
const R = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"], Z = ze(() => {
|
|
286
|
+
if (l && s[l] && n.get(l).getVisible()) {
|
|
287
287
|
console.log("reRenderTrackLine------------");
|
|
288
|
-
const
|
|
289
|
-
re(
|
|
288
|
+
const a = Yt(F(l, s[l]));
|
|
289
|
+
re(l, a);
|
|
290
290
|
}
|
|
291
|
-
}, 300),
|
|
292
|
-
let
|
|
293
|
-
const
|
|
294
|
-
return
|
|
295
|
-
if (Number(
|
|
296
|
-
const [V, W] = Ke(
|
|
297
|
-
|
|
291
|
+
}, 300), F = (a, u) => {
|
|
292
|
+
let v = [];
|
|
293
|
+
const b = Math.max(1, Math.floor(u.length / f));
|
|
294
|
+
return v = u.filter((E, G) => G % b === 0).map((E, G) => {
|
|
295
|
+
if (Number(E.lon) > 180 || Number(E.lat) > 180) {
|
|
296
|
+
const [V, W] = Ke(E.lon, E.lat);
|
|
297
|
+
E.lon = V, E.lat = W;
|
|
298
298
|
}
|
|
299
|
-
return
|
|
300
|
-
}),
|
|
301
|
-
}, i = async (
|
|
302
|
-
if (!e || JSON.stringify(
|
|
299
|
+
return E.center = [E.lon, E.lat], E.centerPoint = so(E.center), E.time = ct(E.createdAt).format("YYYY-MM-DD HH:mm:ss"), E.id = a, E.index = G, E;
|
|
300
|
+
}), v;
|
|
301
|
+
}, i = async (a, u, v, b = "ship", C = 200) => {
|
|
302
|
+
if (!e || JSON.stringify(s[a]) === JSON.stringify(u) && l === a || (u = u == null ? void 0 : u.reverse(), m && b === "ship" && (e != null && e.getOverlays().getArray().includes(m) || e.addOverlay(m)), (u == null ? void 0 : u.length) < 2))
|
|
303
303
|
return;
|
|
304
|
-
A(
|
|
305
|
-
const
|
|
306
|
-
B =
|
|
307
|
-
}, y = (
|
|
304
|
+
A(a), l = a, s[a] = u, f = C;
|
|
305
|
+
const E = Object.keys(s).findIndex((G) => G === a) || 0;
|
|
306
|
+
B = v || R[E > 10 ? 10 : E], await k(), await Ue(l);
|
|
307
|
+
}, y = (a) => {
|
|
308
308
|
const u = new de();
|
|
309
309
|
return new he({
|
|
310
310
|
source: u,
|
|
311
311
|
visible: !1,
|
|
312
312
|
// 默认隐藏
|
|
313
|
-
className: `track-layer-${
|
|
313
|
+
className: `track-layer-${a}`,
|
|
314
314
|
renderBuffer: 1024
|
|
315
315
|
// 增大渲染缓冲区
|
|
316
316
|
});
|
|
317
|
-
},
|
|
318
|
-
n.forEach((u,
|
|
317
|
+
}, h = (a) => {
|
|
318
|
+
n.forEach((u, v) => {
|
|
319
319
|
var C;
|
|
320
|
-
const
|
|
321
|
-
u.getVisible() !==
|
|
322
|
-
}),
|
|
320
|
+
const b = v === a;
|
|
321
|
+
u.getVisible() !== b && (u.setVisible(b), e.getLayers().getArray().includes(u) || e.addLayer(u), b || (C = u.getSource()) == null || C.clear());
|
|
322
|
+
}), l = a;
|
|
323
323
|
}, k = async () => {
|
|
324
|
-
const
|
|
325
|
-
if (!n.has(
|
|
326
|
-
const
|
|
327
|
-
n.set(
|
|
324
|
+
const a = l;
|
|
325
|
+
if (!n.has(a)) {
|
|
326
|
+
const E = y(a);
|
|
327
|
+
n.set(a, E);
|
|
328
328
|
}
|
|
329
|
-
await
|
|
330
|
-
const u = B || "",
|
|
331
|
-
if (!(
|
|
332
|
-
let
|
|
333
|
-
|
|
334
|
-
const C =
|
|
335
|
-
|
|
336
|
-
}, S = (
|
|
337
|
-
const
|
|
338
|
-
if (
|
|
339
|
-
|
|
329
|
+
await h(a);
|
|
330
|
+
const u = B || "", v = s[a] || [];
|
|
331
|
+
if (!(v && v.length > 1)) return [];
|
|
332
|
+
let b = [];
|
|
333
|
+
b = F(a, v);
|
|
334
|
+
const C = b.map((E) => E.centerPoint);
|
|
335
|
+
b.length >= 2 && await S(a, C, u);
|
|
336
|
+
}, S = (a, u, v) => {
|
|
337
|
+
const b = new $e(u), C = n.get(a).getSource(), E = C.getFeatureById(a);
|
|
338
|
+
if (E)
|
|
339
|
+
E.setGeometry(b), E.setId(a), E.setStyle(N(v)), M = E;
|
|
340
340
|
else {
|
|
341
|
-
const
|
|
342
|
-
|
|
341
|
+
const G = new ie({ geometry: b });
|
|
342
|
+
G.setId(a), G.set("type", "line"), G.setStyle(N(v)), C.addFeature(G), M = G;
|
|
343
343
|
}
|
|
344
|
-
return
|
|
345
|
-
}, N = (
|
|
344
|
+
return M;
|
|
345
|
+
}, N = (a) => new j({
|
|
346
346
|
stroke: new fe({
|
|
347
|
-
color:
|
|
347
|
+
color: a,
|
|
348
348
|
width: 2
|
|
349
349
|
})
|
|
350
|
-
}),
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
350
|
+
}), D = (a, u, v) => {
|
|
351
|
+
try {
|
|
352
|
+
const b = a == null ? void 0 : a.get("data");
|
|
353
|
+
if (console.log("trackId-data", b), a && b && u === "hover") {
|
|
354
|
+
e.getTargetElement().style.cursor = b ? "pointer" : "";
|
|
355
|
+
const C = X(b), E = v == null ? void 0 : v.coordinate;
|
|
356
|
+
E && (d.querySelector(".popup-content"), d.innerHTML = C, m == null || m.setPosition(E));
|
|
357
|
+
} else
|
|
358
|
+
m && m.setPosition(void 0);
|
|
359
|
+
} catch (b) {
|
|
360
|
+
console.error("handleTrackMapEvent", b);
|
|
361
|
+
}
|
|
362
|
+
}, X = (a) => {
|
|
363
|
+
if (!(a != null && a.time)) return;
|
|
360
364
|
let u = "";
|
|
361
|
-
return
|
|
365
|
+
return a != null && a.stayTime && (u = `
|
|
362
366
|
<div class="item w-100">
|
|
363
367
|
<div class="item-label">停泊时间约</div>
|
|
364
|
-
<div class="item-item">${io(Number(
|
|
368
|
+
<div class="item-item">${io(Number(a.stayTime))}</div>
|
|
365
369
|
</div>
|
|
366
370
|
`), `
|
|
367
371
|
<div class="track-point-popup">
|
|
368
372
|
<div class="item">
|
|
369
373
|
<div class="item-label">状态</div>
|
|
370
|
-
<div class="item-item">${
|
|
374
|
+
<div class="item-item">${a != null && a.sailStatus ? ut[a.sailStatus] : c}</div>
|
|
371
375
|
</div>
|
|
372
376
|
<div class="item">
|
|
373
377
|
<div class="item-label">航速</div>
|
|
374
|
-
<div class="item-item">${
|
|
378
|
+
<div class="item-item">${a.speed || c}</div>
|
|
375
379
|
</div>
|
|
376
380
|
<div class="item">
|
|
377
381
|
<div class="item-label">艏向</div>
|
|
378
|
-
<div class="item-item">${
|
|
382
|
+
<div class="item-item">${a.hdg || c}</div>
|
|
379
383
|
</div>
|
|
380
384
|
<div class="item">
|
|
381
385
|
<div class="item-label">航向</div>
|
|
382
|
-
<div class="item-item">${
|
|
386
|
+
<div class="item-item">${a.cog || c}</div>
|
|
383
387
|
</div>
|
|
384
388
|
<div class="item">
|
|
385
389
|
<div class="item-label">经度</div>
|
|
386
|
-
<div class="item-item">${
|
|
390
|
+
<div class="item-item">${a.lon || c}</div>
|
|
387
391
|
</div>
|
|
388
392
|
<div class="item">
|
|
389
393
|
<div class="item-label">纬度</div>
|
|
390
|
-
<div class="item-item">${
|
|
394
|
+
<div class="item-item">${a.lat || c}</div>
|
|
391
395
|
</div>
|
|
392
396
|
<div class="item w-100">
|
|
393
397
|
<div class="item-label">时间</div>
|
|
394
|
-
<div class="item-item">${
|
|
398
|
+
<div class="item-item">${a.time}</div>
|
|
395
399
|
</div>
|
|
396
400
|
${u ?? u}
|
|
397
401
|
</div>`;
|
|
398
|
-
}, z = (
|
|
399
|
-
const
|
|
402
|
+
}, z = (a) => {
|
|
403
|
+
const v = a.map((V) => {
|
|
400
404
|
const W = e.getPixelFromCoordinate(U(V.center));
|
|
401
405
|
return {
|
|
402
406
|
...V,
|
|
@@ -406,32 +410,32 @@ const ao = (e) => {
|
|
|
406
410
|
// 先初始化,后续计算
|
|
407
411
|
};
|
|
408
412
|
});
|
|
409
|
-
let
|
|
410
|
-
|
|
411
|
-
for (let V = 1; V <
|
|
412
|
-
const W =
|
|
413
|
-
|
|
413
|
+
let b = 0;
|
|
414
|
+
v[0].distance = 0;
|
|
415
|
+
for (let V = 1; V < v.length; V++) {
|
|
416
|
+
const W = v[V - 1].pixel, H = v[V].pixel, K = H[0] - W[0], P = H[1] - W[1];
|
|
417
|
+
b += Math.sqrt(K * K + P * P), v[V].distance = b;
|
|
414
418
|
}
|
|
415
|
-
const C =
|
|
416
|
-
(V, W) => W === 0 || W ===
|
|
417
|
-
),
|
|
419
|
+
const C = v.filter(
|
|
420
|
+
(V, W) => W === 0 || W === v.length - 1
|
|
421
|
+
), E = [];
|
|
418
422
|
for (let V = 0; V < C.length; V++) {
|
|
419
423
|
const W = C[V];
|
|
420
|
-
if (
|
|
424
|
+
if (E.push(W), V < C.length - 1) {
|
|
421
425
|
const H = C[V + 1], K = H.distance - W.distance, P = Math.floor(K / 100);
|
|
422
426
|
for (let q = 1; q <= P; q++) {
|
|
423
427
|
const Q = W.distance + q * 100;
|
|
424
428
|
if (Q >= H.distance) break;
|
|
425
429
|
const _ = ae(
|
|
426
|
-
|
|
430
|
+
v,
|
|
427
431
|
Q
|
|
428
432
|
);
|
|
429
|
-
_ &&
|
|
433
|
+
_ && E.push(_);
|
|
430
434
|
}
|
|
431
435
|
}
|
|
432
436
|
}
|
|
433
437
|
return Array.from(
|
|
434
|
-
new Map(
|
|
438
|
+
new Map(E.map((V) => [V.distance.toFixed(2), V])).values()
|
|
435
439
|
).map((V) => ({
|
|
436
440
|
...V.original,
|
|
437
441
|
// 优先保留原始数据
|
|
@@ -443,16 +447,16 @@ const ao = (e) => {
|
|
|
443
447
|
distance: V.distance
|
|
444
448
|
}));
|
|
445
449
|
};
|
|
446
|
-
function ae(
|
|
447
|
-
for (let
|
|
448
|
-
const
|
|
449
|
-
if (u >=
|
|
450
|
-
const
|
|
450
|
+
function ae(a, u) {
|
|
451
|
+
for (let v = 1; v < a.length; v++) {
|
|
452
|
+
const b = a[v - 1], C = a[v];
|
|
453
|
+
if (u >= b.distance && u <= C.distance) {
|
|
454
|
+
const E = (u - b.distance) / (C.distance - b.distance), G = b.pixel[0] + E * (C.pixel[0] - b.pixel[0]), V = b.pixel[1] + E * (C.pixel[1] - b.pixel[1]), W = e == null ? void 0 : e.getCoordinateFromPixel([G, V]);
|
|
451
455
|
return {
|
|
452
|
-
...
|
|
456
|
+
...b,
|
|
453
457
|
// 继承前一个点的属性(可调整)
|
|
454
458
|
coord: W,
|
|
455
|
-
pixel: [
|
|
459
|
+
pixel: [G, V],
|
|
456
460
|
distance: u,
|
|
457
461
|
original: void 0
|
|
458
462
|
// 明确标记为插值生成点
|
|
@@ -461,27 +465,27 @@ const ao = (e) => {
|
|
|
461
465
|
}
|
|
462
466
|
return null;
|
|
463
467
|
}
|
|
464
|
-
const re = async (
|
|
465
|
-
await be(), await
|
|
466
|
-
const
|
|
467
|
-
n.get(
|
|
468
|
-
const
|
|
469
|
-
e.addOverlay(
|
|
468
|
+
const re = async (a, u) => {
|
|
469
|
+
await be(), await Le(a);
|
|
470
|
+
const v = z(u), b = v.map((E) => se(E));
|
|
471
|
+
n.get(a).getSource().addFeatures(b), wt(a, v, u, B), v.forEach((E) => {
|
|
472
|
+
const G = Ze(a, B, E);
|
|
473
|
+
e.addOverlay(G);
|
|
470
474
|
});
|
|
471
|
-
}, se = (
|
|
475
|
+
}, se = (a) => {
|
|
472
476
|
const u = new ie({
|
|
473
|
-
geometry: new le(
|
|
474
|
-
data:
|
|
477
|
+
geometry: new le(a.centerPoint),
|
|
478
|
+
data: a
|
|
475
479
|
});
|
|
476
|
-
u.set("type", "track_point"), u.set("trackId",
|
|
477
|
-
let
|
|
478
|
-
...yt(
|
|
480
|
+
u.set("type", "track_point"), u.set("trackId", a.id), u.set("data", a);
|
|
481
|
+
let v = [
|
|
482
|
+
...yt(a, B)
|
|
479
483
|
];
|
|
480
|
-
return (
|
|
481
|
-
}, Ze = (
|
|
482
|
-
const
|
|
483
|
-
|
|
484
|
-
<span>${
|
|
484
|
+
return (a.index === 0 || a.index === s[a.id].length - 1) && (v = [...xt(a)], u.set("type", "track_begin")), a.state !== void 0 && a.state !== null && (v = [...mt(a)], u.set("type", "track_icon")), u.setStyle(v), u;
|
|
485
|
+
}, Ze = (a, u, v) => {
|
|
486
|
+
const b = document.createElement("div");
|
|
487
|
+
b.className = "track-overlay-label", b.style.position = "relative", b.style.backgroundColor = "rgba(255,255,255,0.8)", b.style.border = `1px solid ${u}`, b.style.fontSize = "12px", b.innerHTML = `
|
|
488
|
+
<span>${v.time}</span>
|
|
485
489
|
<svg
|
|
486
490
|
style="position: absolute;right: -20px;top: 0;"
|
|
487
491
|
viewBox="0 0 20 20"
|
|
@@ -494,68 +498,68 @@ const ao = (e) => {
|
|
|
494
498
|
stroke-width="1" />
|
|
495
499
|
`;
|
|
496
500
|
const C = new ce({
|
|
497
|
-
element:
|
|
498
|
-
position: U(
|
|
501
|
+
element: b,
|
|
502
|
+
position: U(v.center),
|
|
499
503
|
positioning: "top-right",
|
|
500
504
|
offset: [-20, -20],
|
|
501
505
|
stopEvent: !1,
|
|
502
506
|
className: "track-label-time-overlay"
|
|
503
507
|
});
|
|
504
|
-
return C.set("class", "track-label-overlay"), C.set("trackId",
|
|
508
|
+
return C.set("class", "track-label-overlay"), C.set("trackId", a), C;
|
|
505
509
|
}, be = () => {
|
|
506
|
-
const
|
|
507
|
-
u && u.length > 0 && u.forEach((
|
|
508
|
-
|
|
510
|
+
const a = e == null ? void 0 : e.getOverlays().getArray(), u = a == null ? void 0 : a.filter((v) => v.get("class") === "track-label-overlay");
|
|
511
|
+
u && u.length > 0 && u.forEach((v) => {
|
|
512
|
+
v.setPosition(void 0), v.dispose();
|
|
509
513
|
});
|
|
510
|
-
},
|
|
511
|
-
const u = n.get(
|
|
512
|
-
u.forEachFeature((
|
|
513
|
-
|
|
514
|
+
}, Le = (a) => {
|
|
515
|
+
const u = n.get(a).getSource();
|
|
516
|
+
u.forEachFeature((v) => {
|
|
517
|
+
v.get("type") !== "line" && u.removeFeature(v);
|
|
514
518
|
});
|
|
515
|
-
}, yt = (
|
|
519
|
+
}, yt = (a, u) => [
|
|
516
520
|
new j({
|
|
517
521
|
// 扩大交互热区
|
|
518
|
-
image: new
|
|
522
|
+
image: new Oe({
|
|
519
523
|
stroke: new fe({ color: "rgba(0, 0, 0, 0.01)", width: 20 }),
|
|
520
524
|
radius: 3
|
|
521
525
|
})
|
|
522
526
|
}),
|
|
523
527
|
// 轨迹点样式
|
|
524
528
|
new j({
|
|
525
|
-
image: new
|
|
529
|
+
image: new Oe({
|
|
526
530
|
fill: new I({ color: u }),
|
|
527
531
|
stroke: new fe({ color: "#fff", width: 2 }),
|
|
528
532
|
radius: 3
|
|
529
533
|
})
|
|
530
534
|
})
|
|
531
535
|
// textStyle,
|
|
532
|
-
]
|
|
533
|
-
const u = "#E31818",
|
|
536
|
+
], mt = (a) => {
|
|
537
|
+
const u = "#E31818", v = "#1890FF", b = "", C = new j({
|
|
534
538
|
text: new we({
|
|
535
539
|
font: "Normal 22px map-iconfont",
|
|
536
|
-
text: ge(
|
|
540
|
+
text: ge(b),
|
|
537
541
|
offsetY: -10,
|
|
538
542
|
fill: new I({
|
|
539
|
-
color: Number(
|
|
543
|
+
color: Number(a.state) === 0 ? u : Number(a.state) === 1 ? v : ""
|
|
540
544
|
})
|
|
541
545
|
}),
|
|
542
546
|
zIndex: 99
|
|
543
|
-
}),
|
|
544
|
-
return Number(
|
|
545
|
-
}, wt = (
|
|
546
|
-
const C = u || [],
|
|
547
|
-
|
|
548
|
-
const
|
|
549
|
-
for (let W = 0; W <
|
|
547
|
+
}), G = nt(""), W = nt(""), H = [];
|
|
548
|
+
return Number(a.state) === 0 ? H.push(G) : Number(a.state) === 1 && H.push(W), H.push(C), H;
|
|
549
|
+
}, wt = (a, u, v, b) => {
|
|
550
|
+
const C = u || [], E = u.length;
|
|
551
|
+
E || (C.push(v[0]), C.push(v[v.length - 1]));
|
|
552
|
+
const G = [];
|
|
553
|
+
for (let W = 0; W < E - 1; W++) {
|
|
550
554
|
let H;
|
|
551
555
|
const K = u[W], P = (u[W + 1].index + K.index) / 2;
|
|
552
556
|
if (P % 2 === 0)
|
|
553
|
-
H =
|
|
557
|
+
H = v[P].centerPoint;
|
|
554
558
|
else {
|
|
555
|
-
const q =
|
|
559
|
+
const q = v[Math.floor(P)], Q = v[Math.ceil(P)];
|
|
556
560
|
if (q && Q) {
|
|
557
|
-
const [_,
|
|
558
|
-
H = [(_ +
|
|
561
|
+
const [_, Te] = q.centerPoint, [Fe, Pe] = Q.centerPoint;
|
|
562
|
+
H = [(_ + Fe) / 2, (Te + Pe) / 2];
|
|
559
563
|
}
|
|
560
564
|
}
|
|
561
565
|
if (H) {
|
|
@@ -567,7 +571,7 @@ const ao = (e) => {
|
|
|
567
571
|
text: new we({
|
|
568
572
|
font: "700 12px map-iconfont",
|
|
569
573
|
text: ge(""),
|
|
570
|
-
fill: new I({ color:
|
|
574
|
+
fill: new I({ color: b }),
|
|
571
575
|
// 设置箭头旋转 角度转为弧度
|
|
572
576
|
rotation: Ie(
|
|
573
577
|
u[W].center,
|
|
@@ -575,16 +579,16 @@ const ao = (e) => {
|
|
|
575
579
|
) * (Math.PI / 180)
|
|
576
580
|
})
|
|
577
581
|
})
|
|
578
|
-
),
|
|
582
|
+
), G.push(q);
|
|
579
583
|
}
|
|
580
584
|
}
|
|
581
|
-
const V = n.get(
|
|
582
|
-
V == null || V.addFeatures(
|
|
583
|
-
}, Ue = (
|
|
584
|
-
var
|
|
585
|
-
const u = e.getView(),
|
|
586
|
-
if (!
|
|
587
|
-
const C = (
|
|
585
|
+
const V = n.get(a).getSource();
|
|
586
|
+
V == null || V.addFeatures(G);
|
|
587
|
+
}, Ue = (a) => {
|
|
588
|
+
var E, G;
|
|
589
|
+
const u = e.getView(), v = (E = n == null ? void 0 : n.get(a)) == null ? void 0 : E.getSource(), b = M || (a ? v == null ? void 0 : v.getFeatureById(a) : null);
|
|
590
|
+
if (!b) return;
|
|
591
|
+
const C = (G = b == null ? void 0 : b.getGeometry()) == null ? void 0 : G.getExtent();
|
|
588
592
|
if (C != null && C.length)
|
|
589
593
|
try {
|
|
590
594
|
const V = Wt(C, Math.max(C[2] - C[0], C[3] - C[1]) * 0.02);
|
|
@@ -592,8 +596,8 @@ const ao = (e) => {
|
|
|
592
596
|
} catch (V) {
|
|
593
597
|
console.log(V);
|
|
594
598
|
}
|
|
595
|
-
}, xt = (
|
|
596
|
-
const u = "", C =
|
|
599
|
+
}, xt = (a) => {
|
|
600
|
+
const u = "", C = a.index === 0 ? "#fcdc3f" : "#ff0000";
|
|
597
601
|
return [new j({
|
|
598
602
|
text: new we({
|
|
599
603
|
font: "Normal 14px map-iconfont",
|
|
@@ -603,34 +607,34 @@ const ao = (e) => {
|
|
|
603
607
|
zIndex: 101
|
|
604
608
|
})];
|
|
605
609
|
}, bt = () => {
|
|
606
|
-
console.log("清除所有的轨迹-----"),
|
|
607
|
-
var
|
|
608
|
-
(
|
|
609
|
-
}), Object.keys(
|
|
610
|
-
n.delete(u), delete
|
|
610
|
+
console.log("清除所有的轨迹-----"), Ee(), n.forEach((u) => {
|
|
611
|
+
var v;
|
|
612
|
+
(v = u.getSource()) == null || v.clear(), e == null || e.removeLayer(u);
|
|
613
|
+
}), Object.keys(s).forEach((u) => {
|
|
614
|
+
n.delete(u), delete s[u];
|
|
611
615
|
}), be();
|
|
612
|
-
}, kt = (
|
|
613
|
-
const u = n.get(
|
|
616
|
+
}, kt = (a) => {
|
|
617
|
+
const u = n.get(a || l);
|
|
614
618
|
u == null || u.setVisible(!1);
|
|
615
|
-
const
|
|
616
|
-
for (let
|
|
617
|
-
const C =
|
|
618
|
-
C.get("class") === "track-label-overlay" ? (C.setPosition(void 0), e.removeOverlay(C)) :
|
|
619
|
+
const v = e.getOverlays().getArray();
|
|
620
|
+
for (let b = 0; b < v.length; ) {
|
|
621
|
+
const C = v[b];
|
|
622
|
+
C.get("class") === "track-label-overlay" ? (C.setPosition(void 0), e.removeOverlay(C)) : b++;
|
|
619
623
|
}
|
|
620
|
-
|
|
621
|
-
},
|
|
622
|
-
const
|
|
623
|
-
id:
|
|
624
|
+
Ee();
|
|
625
|
+
}, Mt = (a, u = xe.NM) => {
|
|
626
|
+
const v = {
|
|
627
|
+
id: a,
|
|
624
628
|
length: "--"
|
|
625
|
-
}, C = (
|
|
626
|
-
(
|
|
627
|
-
),
|
|
628
|
-
return
|
|
629
|
-
},
|
|
630
|
-
Ct(String(
|
|
631
|
-
}, Ct = (
|
|
632
|
-
const
|
|
633
|
-
|
|
629
|
+
}, C = (s[a] || []).map(
|
|
630
|
+
(G) => Me([G.lon, G.lat], J.data, J.mercator)
|
|
631
|
+
), E = new $e(C);
|
|
632
|
+
return v.length = lo(E, u) || "--", v;
|
|
633
|
+
}, pt = (a, u) => {
|
|
634
|
+
Ct(String(a), u);
|
|
635
|
+
}, Ct = (a, u) => {
|
|
636
|
+
const v = s[String(a)], b = v == null ? void 0 : v.map((C) => [C.lon, C.lat]);
|
|
637
|
+
b && Tt(b, u);
|
|
634
638
|
}, De = new j({
|
|
635
639
|
text: new we({
|
|
636
640
|
font: "700 20px map-iconfont",
|
|
@@ -639,35 +643,35 @@ const ao = (e) => {
|
|
|
639
643
|
rotation: 0
|
|
640
644
|
// 初始旋转角度
|
|
641
645
|
})
|
|
642
|
-
}), Lt = (
|
|
646
|
+
}), Lt = (a, u) => {
|
|
643
647
|
var P, q;
|
|
644
|
-
const
|
|
645
|
-
if (
|
|
646
|
-
|
|
648
|
+
const v = Number(50 * u), b = ((P = a.frameState) == null ? void 0 : P.time) ?? Date.now(), C = b - T;
|
|
649
|
+
if (p = (p + v * C / 1e6) % 2, T = b, p >= 1) {
|
|
650
|
+
Ee();
|
|
647
651
|
return;
|
|
648
652
|
}
|
|
649
|
-
const
|
|
650
|
-
|
|
651
|
-
),
|
|
652
|
-
|
|
653
|
+
const E = r.getCoordinateAt(
|
|
654
|
+
p > 1 ? 2 - p : p
|
|
655
|
+
), G = r.getCoordinateAt(
|
|
656
|
+
p > 1 ? p - 0.01 : p
|
|
653
657
|
), V = r.getCoordinateAt(
|
|
654
|
-
|
|
658
|
+
p > 1 ? 2 - p : p + 0.01
|
|
655
659
|
), H = Ie(
|
|
656
|
-
lt(
|
|
660
|
+
lt(G, "array"),
|
|
657
661
|
lt(V, "array")
|
|
658
662
|
) * Math.PI / 180;
|
|
659
|
-
(q = De.getText()) == null || q.setRotation(H), x.setCoordinates(
|
|
660
|
-
const K = Bt(
|
|
663
|
+
(q = De.getText()) == null || q.setRotation(H), x.setCoordinates(E);
|
|
664
|
+
const K = Bt(a);
|
|
661
665
|
K.setStyle(De), K.drawGeometry(x), e == null || e.render();
|
|
662
666
|
}, Et = () => {
|
|
663
|
-
var
|
|
664
|
-
$ = !0,
|
|
665
|
-
},
|
|
667
|
+
var a;
|
|
668
|
+
$ = !0, T = Date.now(), p = 0, x = ((a = w.getGeometry()) == null ? void 0 : a.clone()) || new le([0, 0]), o && (g == null || g.on("postrender", o)), L == null || L.setGeometry(void 0);
|
|
669
|
+
}, Ee = () => {
|
|
666
670
|
$ && ($ = !1, L == null || L.setGeometry(void 0), o && g && g.un("postrender", o), g && (e == null || e.removeLayer(g)), g = null, L = null);
|
|
667
|
-
}, Tt = (
|
|
668
|
-
$ &&
|
|
671
|
+
}, Tt = (a, u) => {
|
|
672
|
+
$ && Ee(), t = new ot({
|
|
669
673
|
factor: 1e6
|
|
670
|
-
}).writeGeometry(new
|
|
674
|
+
}).writeGeometry(new $e(a)), r = new ot({
|
|
671
675
|
factor: 1e6
|
|
672
676
|
}).readGeometry(t, {
|
|
673
677
|
dataProjection: J.data,
|
|
@@ -676,8 +680,8 @@ const ao = (e) => {
|
|
|
676
680
|
type: "icon",
|
|
677
681
|
geometry: new le(r.getFirstCoordinate())
|
|
678
682
|
});
|
|
679
|
-
const
|
|
680
|
-
x =
|
|
683
|
+
const v = w.getGeometry();
|
|
684
|
+
x = v ? v.clone() : new le([0, 0]), L = new ie({
|
|
681
685
|
type: "geoMarker",
|
|
682
686
|
style: De,
|
|
683
687
|
geometry: x
|
|
@@ -685,15 +689,15 @@ const ao = (e) => {
|
|
|
685
689
|
source: new de({
|
|
686
690
|
features: [L]
|
|
687
691
|
})
|
|
688
|
-
}), e == null || e.addLayer(g), o = (
|
|
689
|
-
}, Ie = (
|
|
690
|
-
function
|
|
692
|
+
}), e == null || e.addLayer(g), o = (b) => Lt(b, u), Et();
|
|
693
|
+
}, Ie = (a, u, v) => {
|
|
694
|
+
function b(P) {
|
|
691
695
|
return 180 * (P % (2 * Math.PI)) / Math.PI;
|
|
692
696
|
}
|
|
693
697
|
function C(P) {
|
|
694
698
|
return P % 360 * Math.PI / 180;
|
|
695
699
|
}
|
|
696
|
-
function
|
|
700
|
+
function E(P) {
|
|
697
701
|
var q;
|
|
698
702
|
if (!P) throw new Error("Coordinate is required");
|
|
699
703
|
if (!Array.isArray(P)) {
|
|
@@ -707,13 +711,13 @@ const ao = (e) => {
|
|
|
707
711
|
"Coordinate must be GeoJSON Point or an Array of numbers"
|
|
708
712
|
);
|
|
709
713
|
}
|
|
710
|
-
function
|
|
714
|
+
function G(P, q, Q = {}) {
|
|
711
715
|
if (Q.final)
|
|
712
716
|
return function(St, Nt) {
|
|
713
|
-
return (
|
|
717
|
+
return (G(Nt, St) + 180) % 360;
|
|
714
718
|
}(P, q);
|
|
715
|
-
const _ =
|
|
716
|
-
return
|
|
719
|
+
const _ = E(P), Te = E(q), Fe = C(_[0]), Pe = C(Te[0]), et = C(_[1]), Ge = C(Te[1]), Ft = Math.sin(Pe - Fe) * Math.cos(Ge), Pt = Math.cos(et) * Math.sin(Ge) - Math.sin(et) * Math.cos(Ge) * Math.cos(Pe - Fe);
|
|
720
|
+
return b(Math.atan2(Ft, Pt));
|
|
717
721
|
}
|
|
718
722
|
function V(P) {
|
|
719
723
|
return !isNaN(P) && P !== null && !Array.isArray(P);
|
|
@@ -731,23 +735,23 @@ const ao = (e) => {
|
|
|
731
735
|
};
|
|
732
736
|
return Q.id !== void 0 && (_.id = Q.id), Q.bbox && (_.bbox = Q.bbox), _.properties = q, _.geometry = P, _;
|
|
733
737
|
}
|
|
734
|
-
const K =
|
|
738
|
+
const K = G(W(a), W(u), v);
|
|
735
739
|
return K < 0 ? 360 + K : K;
|
|
736
740
|
};
|
|
737
741
|
return {
|
|
738
742
|
render: i,
|
|
739
743
|
remove: bt,
|
|
740
|
-
play:
|
|
744
|
+
play: pt,
|
|
741
745
|
setCenter: Ue,
|
|
742
746
|
close: kt,
|
|
743
|
-
getLength:
|
|
744
|
-
handleTrackMapEvent:
|
|
745
|
-
reRenderTrackLine:
|
|
747
|
+
getLength: Mt,
|
|
748
|
+
handleTrackMapEvent: D,
|
|
749
|
+
reRenderTrackLine: Z
|
|
746
750
|
};
|
|
747
751
|
};
|
|
748
752
|
function uo(e) {
|
|
749
753
|
console.log("useShipOverlay", e);
|
|
750
|
-
const n = ee(null),
|
|
754
|
+
const n = ee(null), s = Se(() => ({
|
|
751
755
|
"--overlay-color": "#FFF",
|
|
752
756
|
"--bg-color1": e.colors && e.colors[0] ? e.colors[0] : "#ffffff",
|
|
753
757
|
// 默认第一个颜色
|
|
@@ -755,7 +759,7 @@ function uo(e) {
|
|
|
755
759
|
"--bg-color": "#ffffff",
|
|
756
760
|
position: "relative",
|
|
757
761
|
"pointer-events": "none"
|
|
758
|
-
})),
|
|
762
|
+
})), l = Se(() => {
|
|
759
763
|
var d;
|
|
760
764
|
return {
|
|
761
765
|
position: "relative",
|
|
@@ -776,12 +780,12 @@ function uo(e) {
|
|
|
776
780
|
animation: e.selected ? e.colors && ((d = e.colors) == null ? void 0 : d.length) >= 2 ? "blink-dual 2s ease-in-out infinite" : "blink-single 1.5s ease-in-out infinite" : "none"
|
|
777
781
|
// "animation": props.selected ? 'blink 1.5s ease-in-out infinite' : 'none', // 动画开关
|
|
778
782
|
};
|
|
779
|
-
}),
|
|
783
|
+
}), c = Se(() => ({
|
|
780
784
|
width: "14px",
|
|
781
785
|
height: "14px",
|
|
782
786
|
margin: "1px 5px 1px 1px",
|
|
783
787
|
"background-color": "var(--attention-bg)"
|
|
784
|
-
})), o =
|
|
788
|
+
})), o = Se(() => ({
|
|
785
789
|
position: "absolute",
|
|
786
790
|
top: "0px",
|
|
787
791
|
color: "var(--overlay-color)",
|
|
@@ -796,17 +800,17 @@ function uo(e) {
|
|
|
796
800
|
return () => ne("div", {
|
|
797
801
|
ref: n,
|
|
798
802
|
class: "ship-overlay-container",
|
|
799
|
-
style:
|
|
803
|
+
style: s.value
|
|
800
804
|
}, [
|
|
801
805
|
ne(
|
|
802
806
|
"div",
|
|
803
807
|
{
|
|
804
808
|
class: "ship-overlay-content",
|
|
805
|
-
style:
|
|
809
|
+
style: l.value
|
|
806
810
|
},
|
|
807
811
|
[
|
|
808
812
|
ne("div", {
|
|
809
|
-
style: e.selected ?
|
|
813
|
+
style: e.selected ? c.value : {}
|
|
810
814
|
}, ""),
|
|
811
815
|
ne("div", {
|
|
812
816
|
class: "text",
|
|
@@ -861,24 +865,24 @@ function uo(e) {
|
|
|
861
865
|
]);
|
|
862
866
|
}
|
|
863
867
|
const go = (e) => {
|
|
864
|
-
const { spd: n, hdg:
|
|
865
|
-
return n ?
|
|
868
|
+
const { spd: n, hdg: s, cog: l } = e;
|
|
869
|
+
return n ? s !== null && +s != 511 && l !== null ? l - +s >= 3 ? oe.right : l - +s <= -3 ? oe.left : oe.front : oe.front : "";
|
|
866
870
|
}, ve = (e, n) => {
|
|
867
|
-
const { shipData:
|
|
868
|
-
return fo(n,
|
|
871
|
+
const { shipData: s } = n.getProperties(), l = gt(e), c = _e(e, s, l);
|
|
872
|
+
return fo(n, c, l);
|
|
869
873
|
}, gt = (e) => {
|
|
870
874
|
const n = e == null ? void 0 : e.getView().getZoom();
|
|
871
875
|
return n <= te.shipModelMax && n >= te.shipTriggleMin ? "ship" : "triangle";
|
|
872
|
-
}, _e = (e, n,
|
|
873
|
-
if (
|
|
874
|
-
const { len:
|
|
876
|
+
}, _e = (e, n, s) => {
|
|
877
|
+
if (s === "ship") {
|
|
878
|
+
const { len: l, wid: c } = n, o = 97, d = 20, t = 1 / (e == null ? void 0 : e.getView().getResolution()), r = l * t / o, w = c * t / d, x = Math.min(r, w);
|
|
875
879
|
return x < 0.2 ? 0.2 : x > 2 ? 2 : x;
|
|
876
880
|
}
|
|
877
881
|
return te.scaleNum;
|
|
878
|
-
}, fo = (e, n,
|
|
879
|
-
const { color:
|
|
882
|
+
}, fo = (e, n, s) => {
|
|
883
|
+
const { color: l, direct: c, isHighlight: o, shipData: d } = e.getProperties(), m = ((d == null ? void 0 : d.cog) - 90 + 360) % 360;
|
|
880
884
|
return new j({
|
|
881
|
-
image: new
|
|
885
|
+
image: new pe({
|
|
882
886
|
src: t(),
|
|
883
887
|
scale: n || te.scaleNum,
|
|
884
888
|
anchor: [0.5, 0.5],
|
|
@@ -890,26 +894,26 @@ const go = (e) => {
|
|
|
890
894
|
return `data:image/svg+xml;utf8,${encodeURIComponent(r())}`;
|
|
891
895
|
}
|
|
892
896
|
function r() {
|
|
893
|
-
switch (
|
|
897
|
+
switch (s) {
|
|
894
898
|
case "triangle":
|
|
895
899
|
return `<svg width="41" height="24" viewBox="0 0 41 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
896
900
|
<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"
|
|
897
|
-
fill="${
|
|
901
|
+
fill="${l}" stroke="${o ? "#FF2424" : "black"}" stroke-width="${o ? "2" : "0.578947"}" />
|
|
898
902
|
<!--path船航向左边或者向前-->
|
|
899
|
-
${
|
|
903
|
+
${c === oe.left && `<path d="M30 12L40 12L40 8" stroke="${o ? "#FF2424" : "black"}" stroke-width="2"/>`}
|
|
900
904
|
<!--path船航向右边-->
|
|
901
|
-
${
|
|
905
|
+
${c === oe.right && `<path d="M30 12L40 12L40 16" stroke="${o ? "#FF2424" : "black"}" stroke-width="2"/>`}
|
|
902
906
|
<!--path黑线无左右-->
|
|
903
|
-
${
|
|
907
|
+
${c === oe.front && `<path d="M30 12L40 12" stroke="${o ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
|
|
904
908
|
</svg>
|
|
905
909
|
`;
|
|
906
910
|
case "ship":
|
|
907
911
|
return `<svg width="97" height="20" viewBox="0 0 97 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
908
912
|
<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"
|
|
909
|
-
fill="${
|
|
910
|
-
${
|
|
911
|
-
${
|
|
912
|
-
${
|
|
913
|
+
fill="${l}" stroke="${o ? "#FF2424" : "black"}" stroke-width="${o ? "4" : "0.578947"}"/>
|
|
914
|
+
${c === oe.left && `<path d="M86 10L96 10L96 6" stroke="${o ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
|
|
915
|
+
${c === oe.right && `<path d="M86 10L96 10L96 14" stroke="${o ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
|
|
916
|
+
${c === oe.front && `<path d="M86 10L96 10" stroke="${o ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
|
|
913
917
|
</svg>
|
|
914
918
|
`;
|
|
915
919
|
default:
|
|
@@ -917,49 +921,49 @@ const go = (e) => {
|
|
|
917
921
|
}
|
|
918
922
|
}
|
|
919
923
|
}, ho = (e, n) => {
|
|
920
|
-
const
|
|
921
|
-
element:
|
|
922
|
-
position: U([
|
|
923
|
-
id: "selected-" +
|
|
924
|
+
const s = ft(e, n), l = n.id, { lon: c, lat: o } = n, d = new ce({
|
|
925
|
+
element: s,
|
|
926
|
+
position: U([c, o]),
|
|
927
|
+
id: "selected-" + l,
|
|
924
928
|
positioning: "center-center",
|
|
925
929
|
offset: [0, 5],
|
|
926
930
|
className: "ship-selected-overlay"
|
|
927
931
|
});
|
|
928
932
|
return d.set("class", "ship-overlay-selected"), d;
|
|
929
933
|
}, ft = (e, n) => {
|
|
930
|
-
const
|
|
931
|
-
<svg style="transform:scale(${
|
|
934
|
+
const s = gt(e), l = _e(e, n, s), c = s === "ship" ? 109 : 49, o = `
|
|
935
|
+
<svg style="transform:scale(${l});" xmlns="http://www.w3.org/2000/svg" width="${c}" height="${c}" viewBox="0 0 49 49" fill="none">
|
|
932
936
|
<path d="M1.99982 46.9998L1.99982 1.99982L46.9998 1.99982L46.9998 46.9998L1.99982 46.9998Z" fill="#FF2424" fill-opacity="0.2"/>
|
|
933
937
|
<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"/>
|
|
934
938
|
</svg>
|
|
935
939
|
`, d = document.createElement("div");
|
|
936
940
|
return d.className = "ship-overlay-selected", d.innerHTML = o, d;
|
|
937
941
|
};
|
|
938
|
-
function vo(e, n,
|
|
942
|
+
function vo(e, n, s, l) {
|
|
939
943
|
if (n) {
|
|
940
|
-
const
|
|
941
|
-
element:
|
|
944
|
+
const c = new ce({
|
|
945
|
+
element: s,
|
|
942
946
|
positioning: "top-left",
|
|
943
|
-
id: "label-" + (
|
|
947
|
+
id: "label-" + (l == null ? void 0 : l.id),
|
|
944
948
|
offset: [20, -20],
|
|
945
949
|
autoPan: !1,
|
|
946
950
|
position: n,
|
|
947
|
-
className:
|
|
951
|
+
className: l.blinking ? "ship-label-overlay-blinking" : "ship-label-overlay"
|
|
948
952
|
});
|
|
949
|
-
|
|
953
|
+
c.set("class", "zh-map-ship-overlay"), e.addOverlay(c);
|
|
950
954
|
}
|
|
951
955
|
}
|
|
952
956
|
const yo = (e, n) => {
|
|
953
|
-
const { lon:
|
|
954
|
-
|
|
957
|
+
const { lon: s, lat: l, blinking: c } = n, o = ht(n);
|
|
958
|
+
s && l && vo(e, U([s, l]), o, { ...n, blinking: c });
|
|
955
959
|
}, ht = (e) => {
|
|
956
960
|
const n = document.createElement("div");
|
|
957
961
|
n.className = "ship-overlay-box", n.style.position = "relative";
|
|
958
|
-
const { lon:
|
|
962
|
+
const { lon: s, lat: l, blinking: c, blinkingColors: o, name: d } = e, m = Be({
|
|
959
963
|
setup() {
|
|
960
964
|
return uo({
|
|
961
|
-
position: [
|
|
962
|
-
selected:
|
|
965
|
+
position: [s + 2e-3, l + 2e-3],
|
|
966
|
+
selected: c,
|
|
963
967
|
name: d,
|
|
964
968
|
colors: o || [],
|
|
965
969
|
existDevice: e == null ? void 0 : e.existDevice,
|
|
@@ -986,10 +990,10 @@ function mo() {
|
|
|
986
990
|
}
|
|
987
991
|
const wo = window.devicePixelRatio || 1, Ae = /* @__PURE__ */ new Map();
|
|
988
992
|
let ke = null, We = null;
|
|
989
|
-
function xo(e, n,
|
|
990
|
-
const
|
|
991
|
-
if (Ae.has(
|
|
992
|
-
return Ae.get(
|
|
993
|
+
function xo(e, n, s = "left-bottom", l = 2) {
|
|
994
|
+
const c = `${e}-${n.join(",")}-${s}-${l}`;
|
|
995
|
+
if (Ae.has(c))
|
|
996
|
+
return Ae.get(c);
|
|
993
997
|
if (!ke) {
|
|
994
998
|
ke = document.createElement("canvas");
|
|
995
999
|
try {
|
|
@@ -1005,43 +1009,43 @@ function xo(e, n, l = "left-bottom", s = 2) {
|
|
|
1005
1009
|
o.width = 0, o.height = 0;
|
|
1006
1010
|
const m = 2, t = 8, r = 16, w = window.devicePixelRatio || 1, x = "500 12px Arial", L = "14px map-iconfont";
|
|
1007
1011
|
d.font = x;
|
|
1008
|
-
const
|
|
1012
|
+
const T = d.measureText(e).width;
|
|
1009
1013
|
d.font = L;
|
|
1010
|
-
const g = n.map((N) => ({ width: d.measureText(ge(N)).width, height: 14 })),
|
|
1011
|
-
let Y, A, B = 0, R = 0,
|
|
1012
|
-
switch (Y = r +
|
|
1014
|
+
const g = n.map((N) => ({ width: d.measureText(ge(N)).width, height: 14 })), p = g.reduce((N, D) => N + D.width, 0), M = (n.length - 1) * l, f = t + T + p + M + t, O = m + 14 + m;
|
|
1015
|
+
let Y, A, B = 0, R = 0, Z = 0, F = 0, i = 0, y = 0;
|
|
1016
|
+
switch (Y = r + f, s) {
|
|
1013
1017
|
case "right-top":
|
|
1014
|
-
A = r + O, B = 0, R = r + O,
|
|
1018
|
+
A = r + O, B = 0, R = r + O, Z = r, F = 0, i = r, y = 0;
|
|
1015
1019
|
break;
|
|
1016
1020
|
case "right-middle":
|
|
1017
|
-
A = O, B = 0, R = O / 2,
|
|
1021
|
+
A = O, B = 0, R = O / 2, Z = r, F = O / 2, i = r, y = 0;
|
|
1018
1022
|
break;
|
|
1019
1023
|
case "right-bottom":
|
|
1020
|
-
A = r + O, B = 0, R = 0,
|
|
1024
|
+
A = r + O, B = 0, R = 0, Z = r, F = r, i = r, y = r;
|
|
1021
1025
|
break;
|
|
1022
1026
|
case "left-top":
|
|
1023
|
-
A = r + O, B =
|
|
1027
|
+
A = r + O, B = f, R = r, Z = f + r, F = O + r, i = 0, y = 0;
|
|
1024
1028
|
break;
|
|
1025
1029
|
case "left-middle":
|
|
1026
|
-
A = O, B =
|
|
1030
|
+
A = O, B = f, R = O / 2, Z = f + r, F = O / 2, i = 0, y = 0;
|
|
1027
1031
|
break;
|
|
1028
1032
|
case "left-bottom":
|
|
1029
|
-
A = r + O, B =
|
|
1033
|
+
A = r + O, B = f, R = O, Z = f + r, F = 0, i = 0, y = r;
|
|
1030
1034
|
break;
|
|
1031
1035
|
}
|
|
1032
|
-
A = A + m, o.width = Math.round(Y * w), o.height = Math.round(A * w), d.scale(w, w), d.clearRect(0, 0, Y, A), d.beginPath(), d.moveTo(B, R), d.lineTo(
|
|
1033
|
-
const
|
|
1034
|
-
d.strokeStyle = "#ffffff", d.lineWidth = 1, d.strokeText(e, i + t,
|
|
1035
|
-
let k = i + t +
|
|
1036
|
-
n.length > 0 && n.forEach((N,
|
|
1036
|
+
A = A + m, o.width = Math.round(Y * w), o.height = Math.round(A * w), d.scale(w, w), d.clearRect(0, 0, Y, A), d.beginPath(), d.moveTo(B, R), d.lineTo(Z, F), d.strokeStyle = "#FFF", d.lineWidth = 1, d.stroke(), d.fillStyle = "#FFF", d.fillRect(i, y, f, O), d.font = x, d.textBaseline = "middle";
|
|
1037
|
+
const h = y + m + O / 2;
|
|
1038
|
+
d.strokeStyle = "#ffffff", d.lineWidth = 1, d.strokeText(e, i + t, h), d.fillStyle = "#000000", d.fillText(e, i + t, h), d.font = L, d.fillStyle = "#3370ff";
|
|
1039
|
+
let k = i + t + T + l;
|
|
1040
|
+
n.length > 0 && n.forEach((N, D) => {
|
|
1037
1041
|
const X = y + m + O / 2;
|
|
1038
|
-
d.fillText(ge(N), k, X), k += g[
|
|
1042
|
+
d.fillText(ge(N), k, X), k += g[D].width + l;
|
|
1039
1043
|
});
|
|
1040
1044
|
const S = o.toDataURL("image/png");
|
|
1041
|
-
return Ae.set(
|
|
1045
|
+
return Ae.set(c, S), S;
|
|
1042
1046
|
}
|
|
1043
1047
|
const it = (e, n) => {
|
|
1044
|
-
const { name:
|
|
1048
|
+
const { name: s, rightIcons: l, selected: c } = e.getProperties(), o = n !== 1 ? mo() : "right-top", d = xo(s, l, o);
|
|
1045
1049
|
let m = [0, 0];
|
|
1046
1050
|
switch (o) {
|
|
1047
1051
|
case "right-top":
|
|
@@ -1064,7 +1068,7 @@ const it = (e, n) => {
|
|
|
1064
1068
|
break;
|
|
1065
1069
|
}
|
|
1066
1070
|
return new j({
|
|
1067
|
-
image: new
|
|
1071
|
+
image: new pe({
|
|
1068
1072
|
src: d,
|
|
1069
1073
|
anchor: m,
|
|
1070
1074
|
displacement: [0, 0],
|
|
@@ -1072,12 +1076,12 @@ const it = (e, n) => {
|
|
|
1072
1076
|
anchorXUnits: "fraction",
|
|
1073
1077
|
anchorYUnits: "fraction"
|
|
1074
1078
|
}),
|
|
1075
|
-
zIndex:
|
|
1079
|
+
zIndex: c ? 100 : 10
|
|
1076
1080
|
});
|
|
1077
1081
|
}, bo = (e) => {
|
|
1078
|
-
let n = null,
|
|
1079
|
-
const
|
|
1080
|
-
source:
|
|
1082
|
+
let n = null, s = null;
|
|
1083
|
+
const l = new de(), c = new qt({
|
|
1084
|
+
source: l,
|
|
1081
1085
|
className: "zh-map--ship-layer",
|
|
1082
1086
|
renderBuffer: 300,
|
|
1083
1087
|
zIndex: 101,
|
|
@@ -1090,20 +1094,20 @@ const it = (e, n) => {
|
|
|
1090
1094
|
updateWhileAnimating: !1,
|
|
1091
1095
|
declutter: !0
|
|
1092
1096
|
});
|
|
1093
|
-
e == null || e.addLayer(
|
|
1097
|
+
e == null || e.addLayer(c), e == null || e.addLayer(d);
|
|
1094
1098
|
let m = null, t = "", r = {}, w = {};
|
|
1095
1099
|
const x = (i) => {
|
|
1096
1100
|
if (!i || !e) return;
|
|
1097
|
-
const y = (
|
|
1098
|
-
if (
|
|
1099
|
-
const
|
|
1100
|
-
|
|
1101
|
+
const y = (s == null ? void 0 : s.id) || (n == null ? void 0 : n.get("id"));
|
|
1102
|
+
if (s) {
|
|
1103
|
+
const h = i.filter((k) => k.id === y);
|
|
1104
|
+
h.length === 0 ? i.push(s) : s = h[0];
|
|
1101
1105
|
}
|
|
1102
|
-
|
|
1106
|
+
p(), F(i), $();
|
|
1103
1107
|
}, L = (i) => {
|
|
1104
1108
|
var z;
|
|
1105
|
-
const y = (
|
|
1106
|
-
geometry: new le(
|
|
1109
|
+
const y = (s == null ? void 0 : s.id) || (n == null ? void 0 : n.get("id")), h = U([i == null ? void 0 : i.lon, i == null ? void 0 : i.lat]), k = ((z = w[i.id]) == null ? void 0 : z.blinkColors) || [], N = k[k.length - 1] || i.fill || "#04C900", D = go(i), X = new ie({
|
|
1110
|
+
geometry: new le(h),
|
|
1107
1111
|
// 船舶数据
|
|
1108
1112
|
shipData: i,
|
|
1109
1113
|
id: i.id,
|
|
@@ -1111,63 +1115,59 @@ const it = (e, n) => {
|
|
|
1111
1115
|
selected: i.id === y,
|
|
1112
1116
|
// 图标
|
|
1113
1117
|
rightIcons: st(i),
|
|
1114
|
-
// 是否闪烁
|
|
1115
|
-
// blinking: attentionShips[ship.id] || false,
|
|
1116
|
-
// // 闪烁颜色
|
|
1117
|
-
// blinkingColor: attentionShipsColor[ship.id].blinkColors || '',
|
|
1118
1118
|
// 船舶颜色
|
|
1119
1119
|
color: N,
|
|
1120
1120
|
// 船艏向的方向
|
|
1121
|
-
direct:
|
|
1121
|
+
direct: D,
|
|
1122
1122
|
// 高亮
|
|
1123
1123
|
isHighlight: !1
|
|
1124
1124
|
});
|
|
1125
|
-
return X.set("clickGeometry", new Ht(
|
|
1125
|
+
return X.set("clickGeometry", new Ht(h)), X;
|
|
1126
1126
|
}, $ = async () => {
|
|
1127
|
-
if (!
|
|
1128
|
-
let y = e.getOverlays().getArray().find((
|
|
1127
|
+
if (!s || !e) return;
|
|
1128
|
+
let y = e.getOverlays().getArray().find((h) => h.get("class") == "ship-overlay-selected");
|
|
1129
1129
|
if (y) {
|
|
1130
|
-
const
|
|
1131
|
-
await y.setElement(
|
|
1130
|
+
const h = ft(e, s);
|
|
1131
|
+
await y.setElement(h), await y.setPosition(U([s.lon, s.lat]));
|
|
1132
1132
|
} else
|
|
1133
|
-
y = ho(e,
|
|
1133
|
+
y = ho(e, s), y && e.addOverlay(y);
|
|
1134
1134
|
setTimeout(() => {
|
|
1135
|
-
var
|
|
1136
|
-
y && ((
|
|
1135
|
+
var h;
|
|
1136
|
+
y && ((h = y.get("element")) != null && h.parentElement) && (y.get("element").parentElement.style.display = "block");
|
|
1137
1137
|
}, 20);
|
|
1138
|
-
},
|
|
1138
|
+
}, T = (i) => {
|
|
1139
1139
|
if (i === "start") {
|
|
1140
1140
|
const y = () => {
|
|
1141
|
-
|
|
1142
|
-
|
|
1141
|
+
l.getFeatures().forEach((h) => {
|
|
1142
|
+
h.setStyle(ve(e, h));
|
|
1143
1143
|
}), m = requestAnimationFrame(y);
|
|
1144
1144
|
};
|
|
1145
1145
|
y();
|
|
1146
1146
|
}
|
|
1147
1147
|
i === "end" && m && (cancelAnimationFrame(m), m = null);
|
|
1148
1148
|
}, g = () => {
|
|
1149
|
-
const y = (e == null ? void 0 : e.getOverlays().getArray()).find((
|
|
1149
|
+
const y = (e == null ? void 0 : e.getOverlays().getArray()).find((h) => h.get("class") == "ship-overlay-selected");
|
|
1150
1150
|
if (y) {
|
|
1151
|
-
const
|
|
1151
|
+
const h = y.getElement(), k = _e(e, s, "ship"), S = h.querySelector("svg");
|
|
1152
1152
|
console.log(S), S && (S.style.transform = `scale(${k})`);
|
|
1153
1153
|
}
|
|
1154
|
-
},
|
|
1155
|
-
e &&
|
|
1156
|
-
},
|
|
1157
|
-
const y = e.getOverlays().getArray().filter((
|
|
1154
|
+
}, p = () => {
|
|
1155
|
+
e && l && (M(), l.clear(), o.clear(), T("end"));
|
|
1156
|
+
}, M = (i) => {
|
|
1157
|
+
const y = e.getOverlays().getArray().filter((h) => h.get("class") == "zh-map-ship-overlay");
|
|
1158
1158
|
if (y && y.length > 0) {
|
|
1159
|
-
for (let
|
|
1160
|
-
if (
|
|
1161
|
-
const k = y[
|
|
1159
|
+
for (let h = 0; h < y.length; h++)
|
|
1160
|
+
if (y[h].get("class") !== "ship-overlay-selected") {
|
|
1161
|
+
const k = y[h];
|
|
1162
1162
|
console.log("overlay---", k), k.setPosition(void 0), e.removeOverlay(k), k.dispose();
|
|
1163
1163
|
}
|
|
1164
1164
|
}
|
|
1165
|
-
},
|
|
1165
|
+
}, f = (i, y) => {
|
|
1166
1166
|
r = i, w = y;
|
|
1167
|
-
const
|
|
1167
|
+
const h = e.getOverlays().getArray(), k = l.getFeatures();
|
|
1168
1168
|
for (const S in r) {
|
|
1169
|
-
const N = r[S],
|
|
1170
|
-
if (
|
|
1169
|
+
const N = r[S], D = h.find((z) => z.getId() === "label-" + S), X = k.find((z) => S === z.get("id"));
|
|
1170
|
+
if (D && X) {
|
|
1171
1171
|
const z = y[S].blinkColors || [], { shipData: ae, name: re, color: se } = X.getProperties();
|
|
1172
1172
|
X.set("blinking", N), z[(z == null ? void 0 : z.length) - 1] && se !== z[(z == null ? void 0 : z.length) - 1] && (X.set("color", z[(z == null ? void 0 : z.length) - 1] || ""), X.setStyle(ve(e, X)));
|
|
1173
1173
|
const Ze = {
|
|
@@ -1175,20 +1175,20 @@ const it = (e, n) => {
|
|
|
1175
1175
|
blinking: N,
|
|
1176
1176
|
blinkingColors: z || [],
|
|
1177
1177
|
name: re + "(" + y[S].shipState + ")"
|
|
1178
|
-
}, be =
|
|
1179
|
-
be && be !==
|
|
1178
|
+
}, be = D.getElement(), Le = ht(Ze);
|
|
1179
|
+
be && be !== Le && D.setElement(Le);
|
|
1180
1180
|
}
|
|
1181
1181
|
}
|
|
1182
1182
|
}, O = (i) => {
|
|
1183
1183
|
if (!e) return;
|
|
1184
|
-
const y =
|
|
1184
|
+
const y = l.getFeatures(), h = o.getFeatures(), k = n ? n.get("id") : "", S = y.filter((z) => z.get("id") !== k), N = h == null ? void 0 : h.filter((z) => z.get("id") !== k), D = /* @__PURE__ */ new Map();
|
|
1185
1185
|
i.forEach((z) => {
|
|
1186
|
-
|
|
1186
|
+
D.set(z.id, !0);
|
|
1187
1187
|
});
|
|
1188
1188
|
const X = e.getOverlays().getArray();
|
|
1189
1189
|
S.forEach((z) => {
|
|
1190
1190
|
const ae = z.get("id");
|
|
1191
|
-
if (!
|
|
1191
|
+
if (!D.has(ae))
|
|
1192
1192
|
z.setStyle([]);
|
|
1193
1193
|
else {
|
|
1194
1194
|
const se = z.getStyle();
|
|
@@ -1196,9 +1196,9 @@ const it = (e, n) => {
|
|
|
1196
1196
|
}
|
|
1197
1197
|
const re = X.find((se) => se.getId() === "label-" + ae);
|
|
1198
1198
|
re && re.setPosition(void 0);
|
|
1199
|
-
}),
|
|
1199
|
+
}), N.forEach((z) => {
|
|
1200
1200
|
const ae = z.get("id");
|
|
1201
|
-
if (!
|
|
1201
|
+
if (!D.has(ae))
|
|
1202
1202
|
z.setStyle([]);
|
|
1203
1203
|
else {
|
|
1204
1204
|
const re = z.getStyle();
|
|
@@ -1208,17 +1208,17 @@ const it = (e, n) => {
|
|
|
1208
1208
|
}, Y = (i) => {
|
|
1209
1209
|
if (i) {
|
|
1210
1210
|
console.log("选中", i);
|
|
1211
|
-
const y =
|
|
1212
|
-
y && (n = y),
|
|
1211
|
+
const y = l.getFeatures().find((k) => k.get("id") === i.id), h = o.getFeatures().find((k) => k.get("id") === i.id);
|
|
1212
|
+
y && (n = y), h && h.set("selected", !0), s = i, $();
|
|
1213
1213
|
} else
|
|
1214
|
-
console.log("取消选中"),
|
|
1215
|
-
}, A =
|
|
1214
|
+
console.log("取消选中"), s = null, n = null, R();
|
|
1215
|
+
}, A = ze((i, y, h) => {
|
|
1216
1216
|
try {
|
|
1217
1217
|
if (i) {
|
|
1218
1218
|
const k = i.get("shipData"), S = i.get("id");
|
|
1219
|
-
if (e.getTargetElement().style.cursor = S ? "pointer" : "", y === "click" && (Y(k),
|
|
1219
|
+
if (e.getTargetElement().style.cursor = S ? "pointer" : "", y === "click" && (Y(k), h && h(S)), y === "hover") {
|
|
1220
1220
|
t && t !== S && B(), t = S;
|
|
1221
|
-
const N =
|
|
1221
|
+
const N = l.getFeatures().find((D) => D.get("id") === t);
|
|
1222
1222
|
N == null || N.set("isHighlight", !0), N == null || N.setStyle(ve(e, N));
|
|
1223
1223
|
}
|
|
1224
1224
|
} else
|
|
@@ -1227,44 +1227,44 @@ const it = (e, n) => {
|
|
|
1227
1227
|
console.log("handleShipMapEvent", k);
|
|
1228
1228
|
}
|
|
1229
1229
|
}, 10), B = () => {
|
|
1230
|
-
const i = t ?
|
|
1230
|
+
const i = t ? l.getFeatures().find((y) => y.get("id") === t) : null;
|
|
1231
1231
|
t = null, i == null || i.set("isHighlight", !1), i == null || i.setStyle(ve(e, i));
|
|
1232
1232
|
}, R = () => {
|
|
1233
1233
|
try {
|
|
1234
|
-
const y = e.getOverlays().getArray().find((
|
|
1234
|
+
const y = e.getOverlays().getArray().find((h) => h.get("class") == "ship-overlay-selected");
|
|
1235
1235
|
y && y.setPosition(void 0);
|
|
1236
1236
|
} catch (i) {
|
|
1237
1237
|
console.log(i);
|
|
1238
1238
|
}
|
|
1239
|
-
},
|
|
1240
|
-
const
|
|
1241
|
-
geometry: new le(
|
|
1239
|
+
}, Z = (i, y) => {
|
|
1240
|
+
const h = U([i == null ? void 0 : i.lon, i == null ? void 0 : i.lat]), k = new ie({
|
|
1241
|
+
geometry: new le(h),
|
|
1242
1242
|
name: i.cnname || i.enname || i.name || i.id || "未命名船舶",
|
|
1243
1243
|
// 图标
|
|
1244
1244
|
rightIcons: st(i),
|
|
1245
|
-
selected: (i == null ? void 0 : i.id) === (
|
|
1245
|
+
selected: (i == null ? void 0 : i.id) === (s == null ? void 0 : s.id),
|
|
1246
1246
|
shipData: i
|
|
1247
1247
|
});
|
|
1248
1248
|
k.set("id", i.id);
|
|
1249
1249
|
const S = it(k, y);
|
|
1250
1250
|
return k.setStyle(S), k;
|
|
1251
|
-
},
|
|
1251
|
+
}, F = (i) => {
|
|
1252
1252
|
const y = e.getView().getZoom();
|
|
1253
|
-
i.forEach((
|
|
1254
|
-
const k = L(
|
|
1255
|
-
if (k.setStyle(ve(e, k)),
|
|
1256
|
-
if (r[
|
|
1257
|
-
if (
|
|
1258
|
-
const S = w[
|
|
1259
|
-
...
|
|
1253
|
+
i.forEach((h) => {
|
|
1254
|
+
const k = L(h);
|
|
1255
|
+
if (k.setStyle(ve(e, k)), l.addFeature(k), (s == null ? void 0 : s.id) == h.id || y >= te.shipModelMin)
|
|
1256
|
+
if (r[h.id]) {
|
|
1257
|
+
if (h.id && w[h == null ? void 0 : h.id]) {
|
|
1258
|
+
const S = w[h == null ? void 0 : h.id] || {}, N = (S == null ? void 0 : S.blinkColors) || [], D = (S == null ? void 0 : S.shipState) || "", X = (h.cnname || h.enname || h.name || h.id || "未命名船舶") + "(" + D + ")", z = {
|
|
1259
|
+
...h,
|
|
1260
1260
|
name: X,
|
|
1261
|
-
blinking: r[
|
|
1261
|
+
blinking: r[h.id],
|
|
1262
1262
|
blinkingColors: N || []
|
|
1263
1263
|
};
|
|
1264
1264
|
yo(e, z);
|
|
1265
1265
|
}
|
|
1266
1266
|
} else {
|
|
1267
|
-
const S =
|
|
1267
|
+
const S = Z(h, i.length);
|
|
1268
1268
|
o.addFeature(S);
|
|
1269
1269
|
}
|
|
1270
1270
|
});
|
|
@@ -1273,15 +1273,15 @@ const it = (e, n) => {
|
|
|
1273
1273
|
render: x,
|
|
1274
1274
|
selected: Y,
|
|
1275
1275
|
filter: O,
|
|
1276
|
-
blinking:
|
|
1277
|
-
clear:
|
|
1276
|
+
blinking: f,
|
|
1277
|
+
clear: p,
|
|
1278
1278
|
handleShipMapEvent: A,
|
|
1279
|
-
changeShipScale:
|
|
1279
|
+
changeShipScale: T,
|
|
1280
1280
|
changeSelectedScale: g
|
|
1281
1281
|
};
|
|
1282
1282
|
}, ko = (e) => {
|
|
1283
|
-
const n = () => e == null ? void 0 : e.getLayers(),
|
|
1284
|
-
|
|
1283
|
+
const n = () => e == null ? void 0 : e.getLayers(), s = ee("vector"), l = () => s.value, c = (t) => {
|
|
1284
|
+
s.value = t;
|
|
1285
1285
|
const r = n();
|
|
1286
1286
|
r && (r == null || r.getArray().forEach((w) => {
|
|
1287
1287
|
(w.className_ === "vector" || w.className_ === "satellite") && w.setVisible(w.className_ === t);
|
|
@@ -1310,48 +1310,48 @@ const it = (e, n) => {
|
|
|
1310
1310
|
o.value = t;
|
|
1311
1311
|
}
|
|
1312
1312
|
},
|
|
1313
|
-
getShowLayerType:
|
|
1314
|
-
setShowLayerType:
|
|
1313
|
+
getShowLayerType: l,
|
|
1314
|
+
setShowLayerType: c
|
|
1315
1315
|
};
|
|
1316
|
-
},
|
|
1316
|
+
}, Mo = () => {
|
|
1317
1317
|
const e = ee();
|
|
1318
1318
|
return {
|
|
1319
|
-
setProps: (
|
|
1320
|
-
e.value =
|
|
1319
|
+
setProps: (l) => {
|
|
1320
|
+
e.value = l;
|
|
1321
1321
|
},
|
|
1322
1322
|
getProps: () => e.value
|
|
1323
1323
|
};
|
|
1324
|
-
},
|
|
1324
|
+
}, po = (e) => {
|
|
1325
1325
|
const n = "zh-map-location-layer";
|
|
1326
|
-
let
|
|
1327
|
-
const d = (
|
|
1328
|
-
if (!(!
|
|
1329
|
-
if (
|
|
1330
|
-
const g =
|
|
1331
|
-
g ? o = g :
|
|
1326
|
+
let s, l, c = null, o = null;
|
|
1327
|
+
const d = (T) => {
|
|
1328
|
+
if (!(!T || T.length === 0)) {
|
|
1329
|
+
if (l || (l = new de()), l.clear(), o) {
|
|
1330
|
+
const g = T.find((p) => p.id === o.id);
|
|
1331
|
+
g ? o = g : T.push(o);
|
|
1332
1332
|
}
|
|
1333
|
-
|
|
1333
|
+
T.forEach((g) => {
|
|
1334
1334
|
m(g);
|
|
1335
|
-
}),
|
|
1335
|
+
}), s || (s = new he({
|
|
1336
1336
|
className: n,
|
|
1337
|
-
source:
|
|
1337
|
+
source: l,
|
|
1338
1338
|
zIndex: 100
|
|
1339
|
-
}), e == null || e.addLayer(
|
|
1339
|
+
}), e == null || e.addLayer(s));
|
|
1340
1340
|
}
|
|
1341
|
-
}, m = (
|
|
1342
|
-
const g = e == null ? void 0 : e.getView().getZoom(), [
|
|
1343
|
-
geometry: new le(U([Number(
|
|
1341
|
+
}, m = (T) => {
|
|
1342
|
+
const g = e == null ? void 0 : e.getView().getZoom(), [p, M] = T.latLon.split(","), f = new ie({
|
|
1343
|
+
geometry: new le(U([Number(p), Number(M)]))
|
|
1344
1344
|
});
|
|
1345
|
-
|
|
1346
|
-
}, t = (
|
|
1347
|
-
const
|
|
1348
|
-
image: new
|
|
1349
|
-
src:
|
|
1345
|
+
f.setStyle(t(T, g, T.id === (o == null ? void 0 : o.id))), f.set("loactionData", T), l.addFeature(f);
|
|
1346
|
+
}, t = (T, g, p) => {
|
|
1347
|
+
const M = {
|
|
1348
|
+
image: new pe({
|
|
1349
|
+
src: p && T.selectedPath || T.defaultPath,
|
|
1350
1350
|
scale: 0.5 * g / 10
|
|
1351
1351
|
})
|
|
1352
1352
|
};
|
|
1353
|
-
return
|
|
1354
|
-
text:
|
|
1353
|
+
return T.name && (M.text = new we({
|
|
1354
|
+
text: T.name,
|
|
1355
1355
|
font: "12px sans-serif",
|
|
1356
1356
|
fill: new I({
|
|
1357
1357
|
color: "#000000"
|
|
@@ -1360,32 +1360,32 @@ const it = (e, n) => {
|
|
|
1360
1360
|
color: "#FFFFFF"
|
|
1361
1361
|
}),
|
|
1362
1362
|
offsetY: 30
|
|
1363
|
-
})), new j(
|
|
1363
|
+
})), new j(M);
|
|
1364
1364
|
}, r = () => {
|
|
1365
|
-
if (
|
|
1366
|
-
const
|
|
1367
|
-
|
|
1368
|
-
g.get("loactionData").id !==
|
|
1365
|
+
if (c) {
|
|
1366
|
+
const T = c.get("loactionData").id;
|
|
1367
|
+
l.getFeatures().forEach((g) => {
|
|
1368
|
+
g.get("loactionData").id !== T && l.removeFeature(g);
|
|
1369
1369
|
});
|
|
1370
1370
|
} else
|
|
1371
|
-
|
|
1371
|
+
l.clear();
|
|
1372
1372
|
}, w = () => {
|
|
1373
|
-
var
|
|
1374
|
-
const
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
}), o = null,
|
|
1378
|
-
}, x = (
|
|
1379
|
-
|
|
1373
|
+
var M;
|
|
1374
|
+
const T = c.get("loactionData"), g = (M = e == null ? void 0 : e.getView()) == null ? void 0 : M.getZoom();
|
|
1375
|
+
l.getFeatures().forEach((f) => {
|
|
1376
|
+
f.get("loactionData").id === T.id && (f == null || f.setStyle(t(T, g, !1)));
|
|
1377
|
+
}), o = null, c = null;
|
|
1378
|
+
}, x = (T) => {
|
|
1379
|
+
T ? (L(), $(T)) : clearSelectedPort();
|
|
1380
1380
|
}, L = () => {
|
|
1381
|
-
var
|
|
1382
|
-
if (
|
|
1383
|
-
const g =
|
|
1384
|
-
|
|
1381
|
+
var T;
|
|
1382
|
+
if (c) {
|
|
1383
|
+
const g = c.get("loactionData"), p = (T = e == null ? void 0 : e.getView()) == null ? void 0 : T.getZoom();
|
|
1384
|
+
c.setStyle(t(g, p, !1));
|
|
1385
1385
|
}
|
|
1386
|
-
}, $ = (
|
|
1387
|
-
const g =
|
|
1388
|
-
o =
|
|
1386
|
+
}, $ = (T) => {
|
|
1387
|
+
const g = l.getFeatures();
|
|
1388
|
+
o = T, c = g.find((p) => p.get("loactionData").id === T.id);
|
|
1389
1389
|
};
|
|
1390
1390
|
return {
|
|
1391
1391
|
render: d,
|
|
@@ -1401,16 +1401,16 @@ const it = (e, n) => {
|
|
|
1401
1401
|
e.getInteractions().forEach((n) => {
|
|
1402
1402
|
n instanceof at && n.setActive(!0);
|
|
1403
1403
|
});
|
|
1404
|
-
},
|
|
1405
|
-
const
|
|
1406
|
-
|
|
1404
|
+
}, Ce = (e, n) => {
|
|
1405
|
+
const s = e.getViewport();
|
|
1406
|
+
s && (s.style.cursor = n);
|
|
1407
1407
|
}, Eo = (e, n) => {
|
|
1408
|
-
const
|
|
1409
|
-
|
|
1408
|
+
const s = ee([]), l = ee("km"), c = (F) => {
|
|
1409
|
+
l.value = F;
|
|
1410
1410
|
};
|
|
1411
1411
|
let o;
|
|
1412
1412
|
const d = ee(!1), m = () => {
|
|
1413
|
-
|
|
1413
|
+
Ce(e, "crosshair"), w(), Co(e), e.on("pointermove", $), e.getViewport().addEventListener("mouseout", () => {
|
|
1414
1414
|
o && o.classList.add("hidden");
|
|
1415
1415
|
}), g(), d.value = !0;
|
|
1416
1416
|
};
|
|
@@ -1429,15 +1429,15 @@ const it = (e, n) => {
|
|
|
1429
1429
|
}), e == null || e.addLayer(r);
|
|
1430
1430
|
};
|
|
1431
1431
|
let x, L;
|
|
1432
|
-
const $ = (
|
|
1433
|
-
if (
|
|
1432
|
+
const $ = (F) => {
|
|
1433
|
+
if (F.dragging)
|
|
1434
1434
|
return;
|
|
1435
1435
|
let i = "点击选择起点";
|
|
1436
|
-
x && (i = "单击继续,双击结束"), o && (o.innerHTML = i, L.setPosition(
|
|
1436
|
+
x && (i = "单击继续,双击结束"), o && (o.innerHTML = i, L.setPosition(F.coordinate), o.classList.remove("hidden"));
|
|
1437
1437
|
};
|
|
1438
|
-
let
|
|
1438
|
+
let T;
|
|
1439
1439
|
const g = () => {
|
|
1440
|
-
|
|
1440
|
+
T = new Ve({
|
|
1441
1441
|
source: t,
|
|
1442
1442
|
type: "LineString",
|
|
1443
1443
|
style: new j({
|
|
@@ -1449,7 +1449,7 @@ const it = (e, n) => {
|
|
|
1449
1449
|
lineDash: [10, 10],
|
|
1450
1450
|
width: 2
|
|
1451
1451
|
}),
|
|
1452
|
-
image: new
|
|
1452
|
+
image: new Oe({
|
|
1453
1453
|
radius: 5,
|
|
1454
1454
|
stroke: new fe({
|
|
1455
1455
|
color: "rgba(0, 0, 0, 0.7)"
|
|
@@ -1461,39 +1461,39 @@ const it = (e, n) => {
|
|
|
1461
1461
|
}),
|
|
1462
1462
|
// 添加条件函数,判断是否应该出发点绘制
|
|
1463
1463
|
condition: (i) => i.originalEvent.target.tagName !== "DIV"
|
|
1464
|
-
}), e == null || e.addInteraction(
|
|
1465
|
-
let
|
|
1466
|
-
|
|
1467
|
-
var
|
|
1468
|
-
x = i.feature, x.set("randomId",
|
|
1464
|
+
}), e == null || e.addInteraction(T), O(), Y();
|
|
1465
|
+
let F;
|
|
1466
|
+
T.on("drawstart", function(i) {
|
|
1467
|
+
var h;
|
|
1468
|
+
x = i.feature, x.set("randomId", p());
|
|
1469
1469
|
let y;
|
|
1470
|
-
|
|
1471
|
-
const S = k.target, N = vt(S,
|
|
1472
|
-
y = S.getLastCoordinate(),
|
|
1470
|
+
F = (h = x.getGeometry()) == null ? void 0 : h.on("change", function(k) {
|
|
1471
|
+
const S = k.target, N = vt(S, l.value);
|
|
1472
|
+
y = S.getLastCoordinate(), M && N && (M.innerHTML = N), f.setPosition(y);
|
|
1473
1473
|
});
|
|
1474
|
-
}),
|
|
1475
|
-
var i, y,
|
|
1476
|
-
if (
|
|
1477
|
-
const k = (x == null ? void 0 : x.get("randomId")) ||
|
|
1478
|
-
|
|
1474
|
+
}), T.on("drawend", function() {
|
|
1475
|
+
var i, y, h;
|
|
1476
|
+
if (M && (M.className = "ol-tooltip ol-tooltip-static ol-tooltip-measure"), M != null && M.innerHTML) {
|
|
1477
|
+
const k = (x == null ? void 0 : x.get("randomId")) || p();
|
|
1478
|
+
s.value.push({ id: k, value: M == null ? void 0 : M.innerHTML }), M.innerHTML = `${M.innerHTML}<div class="ol-tooltip-delete-button" data-id="${k}"><i class="map-iconfont icon-delete"></i></div>`;
|
|
1479
1479
|
}
|
|
1480
1480
|
(i = document.querySelector(".ol-selectable:has(.ol-tooltip-delete-button):last-child .ol-tooltip-delete-button")) == null || i.addEventListener("click", (k) => {
|
|
1481
1481
|
var N;
|
|
1482
1482
|
k.preventDefault(), k.stopPropagation();
|
|
1483
1483
|
const S = (N = k.target) == null ? void 0 : N.getAttribute("data-id");
|
|
1484
1484
|
S && B(S);
|
|
1485
|
-
}),
|
|
1485
|
+
}), f.setOffset([0, -7]), x = null, M = null, O(), F && qe(F), (h = (y = n.getProps()) == null ? void 0 : y.lineDrawEnd) == null || h.call(y, s.value);
|
|
1486
1486
|
});
|
|
1487
|
-
},
|
|
1488
|
-
let
|
|
1487
|
+
}, p = () => Math.random().toString(36).substring(2, 9);
|
|
1488
|
+
let M, f;
|
|
1489
1489
|
const O = () => {
|
|
1490
|
-
|
|
1491
|
-
element:
|
|
1490
|
+
M != null && M.parentNode && M.parentNode.removeChild(M), M = document.createElement("div"), M.className = "ol-tooltip ol-tooltip-measure", f = new ce({
|
|
1491
|
+
element: M,
|
|
1492
1492
|
offset: [0, -15],
|
|
1493
1493
|
positioning: "bottom-center",
|
|
1494
1494
|
stopEvent: !1,
|
|
1495
1495
|
insertFirst: !1
|
|
1496
|
-
}), e == null || e.addOverlay(
|
|
1496
|
+
}), e == null || e.addOverlay(f);
|
|
1497
1497
|
}, Y = () => {
|
|
1498
1498
|
o != null && o.parentNode && o.parentNode.removeChild(o), o = document.createElement("div"), o.className = "ol-tooltip hidden", L = new ce({
|
|
1499
1499
|
element: o,
|
|
@@ -1501,67 +1501,67 @@ const it = (e, n) => {
|
|
|
1501
1501
|
positioning: "center-left"
|
|
1502
1502
|
}), e == null || e.addOverlay(L);
|
|
1503
1503
|
}, A = () => {
|
|
1504
|
-
|
|
1504
|
+
s.value.forEach((F, i) => {
|
|
1505
1505
|
var k, S;
|
|
1506
1506
|
const y = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
|
|
1507
1507
|
y[i] && ((S = (k = y[i]) == null ? void 0 : k.parentNode) == null || S.removeChild(y[i]));
|
|
1508
|
-
const
|
|
1509
|
-
|
|
1510
|
-
}), R(), Lo(e), d.value = !1,
|
|
1511
|
-
}, B = (
|
|
1512
|
-
var y,
|
|
1513
|
-
const i =
|
|
1508
|
+
const h = t.getFeatures();
|
|
1509
|
+
h[i] && t.removeFeature(h[i]);
|
|
1510
|
+
}), R(), Lo(e), d.value = !1, Ce(e, "pointer");
|
|
1511
|
+
}, B = (F) => {
|
|
1512
|
+
var y, h, k, S;
|
|
1513
|
+
const i = s.value.findIndex((N) => N.id === F);
|
|
1514
1514
|
if (i !== -1) {
|
|
1515
|
-
|
|
1515
|
+
s.value.splice(i, 1);
|
|
1516
1516
|
const N = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
|
|
1517
|
-
N[i] && ((
|
|
1518
|
-
const
|
|
1519
|
-
|
|
1517
|
+
N[i] && ((h = (y = N[i]) == null ? void 0 : y.parentNode) == null || h.removeChild(N[i]));
|
|
1518
|
+
const D = t.getFeatures();
|
|
1519
|
+
D[i] && t.removeFeature(D[i]);
|
|
1520
1520
|
}
|
|
1521
|
-
(S = (k = n.getProps()) == null ? void 0 : k.lineDrawEnd) == null || S.call(k,
|
|
1521
|
+
(S = (k = n.getProps()) == null ? void 0 : k.lineDrawEnd) == null || S.call(k, s.value);
|
|
1522
1522
|
}, R = () => {
|
|
1523
|
-
if (
|
|
1523
|
+
if (s.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((F) => {
|
|
1524
1524
|
var i;
|
|
1525
|
-
(i =
|
|
1526
|
-
}), t == null || t.clear(),
|
|
1527
|
-
const
|
|
1528
|
-
|
|
1525
|
+
(i = F == null ? void 0 : F.parentNode) == null || i.removeChild(F);
|
|
1526
|
+
}), t == null || t.clear(), T) {
|
|
1527
|
+
const F = e.getInteractions().getArray().find((i) => rt(i) === rt(T));
|
|
1528
|
+
F && e.removeInteraction(F);
|
|
1529
1529
|
}
|
|
1530
|
-
e.removeLayer(r), o != null && o.parentNode && o.parentNode.removeChild(o),
|
|
1530
|
+
e.removeLayer(r), o != null && o.parentNode && o.parentNode.removeChild(o), M != null && M.parentNode && M.parentNode.removeChild(M);
|
|
1531
1531
|
};
|
|
1532
1532
|
return {
|
|
1533
1533
|
open: m,
|
|
1534
1534
|
close: A,
|
|
1535
1535
|
deleteLine: B,
|
|
1536
|
-
setUnit:
|
|
1536
|
+
setUnit: c,
|
|
1537
1537
|
getState: () => d.value
|
|
1538
1538
|
};
|
|
1539
1539
|
}, vt = (e, n) => {
|
|
1540
|
-
const
|
|
1541
|
-
let
|
|
1540
|
+
const l = Qe(e);
|
|
1541
|
+
let c = "";
|
|
1542
1542
|
switch (n) {
|
|
1543
1543
|
case "m":
|
|
1544
|
-
|
|
1544
|
+
c = `${Math.round(l * 100) / 100} m`;
|
|
1545
1545
|
break;
|
|
1546
1546
|
case "km":
|
|
1547
|
-
|
|
1547
|
+
c = `${Math.round(l / 1e3 * 100) / 100} km`;
|
|
1548
1548
|
break;
|
|
1549
1549
|
case "nm":
|
|
1550
|
-
|
|
1550
|
+
c = (Math.round(l / 1e3 * 100) / 100 / 1.852).toFixed(2) + " nm";
|
|
1551
1551
|
break;
|
|
1552
1552
|
}
|
|
1553
|
-
return
|
|
1553
|
+
return c;
|
|
1554
1554
|
}, To = (e, n) => {
|
|
1555
|
-
let
|
|
1556
|
-
const
|
|
1557
|
-
o(),
|
|
1555
|
+
let s, l;
|
|
1556
|
+
const c = () => {
|
|
1557
|
+
o(), Ce(e, "crosshair");
|
|
1558
1558
|
}, o = () => {
|
|
1559
|
-
t(),
|
|
1559
|
+
t(), M(), Y(), $();
|
|
1560
1560
|
};
|
|
1561
1561
|
let d = null, m = null;
|
|
1562
1562
|
const t = () => {
|
|
1563
1563
|
if (d && m) return;
|
|
1564
|
-
const R = new de(),
|
|
1564
|
+
const R = new de(), Z = new he({
|
|
1565
1565
|
source: R,
|
|
1566
1566
|
style: new j({
|
|
1567
1567
|
stroke: new fe({
|
|
@@ -1570,43 +1570,43 @@ const it = (e, n) => {
|
|
|
1570
1570
|
})
|
|
1571
1571
|
})
|
|
1572
1572
|
});
|
|
1573
|
-
d =
|
|
1574
|
-
x && (
|
|
1573
|
+
d = Z, m = R, e.on("pointermove", w), e.addLayer(Z), e.on(["dblclick"], function(F) {
|
|
1574
|
+
x && (F.stopPropagation(), F.preventDefault());
|
|
1575
1575
|
});
|
|
1576
1576
|
};
|
|
1577
1577
|
let r;
|
|
1578
1578
|
const w = (R) => {
|
|
1579
1579
|
if (R.dragging) return;
|
|
1580
|
-
const
|
|
1581
|
-
|
|
1580
|
+
const Z = r ? "单击继续,双击结束" : "点击选择起点";
|
|
1581
|
+
f && (f.innerHTML = Z, O.setPosition(R.coordinate));
|
|
1582
1582
|
};
|
|
1583
1583
|
let x, L = !1;
|
|
1584
1584
|
const $ = () => {
|
|
1585
|
-
if (
|
|
1586
|
-
|
|
1587
|
-
const R =
|
|
1585
|
+
if (s) {
|
|
1586
|
+
f != null && f.parentNode && f.parentNode.removeChild(f);
|
|
1587
|
+
const R = s.getGeometry();
|
|
1588
1588
|
if (!R) return;
|
|
1589
|
-
const
|
|
1589
|
+
const Z = T(R, "nm");
|
|
1590
1590
|
g && (g.innerHTML = `
|
|
1591
|
-
<span class="text">面积:${
|
|
1591
|
+
<span class="text">面积:${Z}${L ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
|
|
1592
1592
|
`), g && (g.innerHTML += '<span class="delete-icon" ><i class="map-iconfont icon-delete" /></div>');
|
|
1593
|
-
const
|
|
1594
|
-
if (
|
|
1595
|
-
const
|
|
1596
|
-
|
|
1593
|
+
const F = R.getCoordinates(), i = F[0][F[0].length - 2];
|
|
1594
|
+
if (p.setPosition(i), d) {
|
|
1595
|
+
const h = d.getSource();
|
|
1596
|
+
h && s && (h.clear(), h.addFeature(s));
|
|
1597
1597
|
}
|
|
1598
1598
|
setTimeout(() => {
|
|
1599
|
-
var
|
|
1600
|
-
(
|
|
1599
|
+
var h;
|
|
1600
|
+
(h = document.querySelector(".delete-icon")) == null || h.addEventListener("click", () => {
|
|
1601
1601
|
var k, S;
|
|
1602
1602
|
console.log("delete"), A(), (S = (k = n.getProps()) == null ? void 0 : k.areaDrawEnd) == null || S.call(k, []);
|
|
1603
1603
|
});
|
|
1604
1604
|
}, 0);
|
|
1605
|
-
const y = jt(
|
|
1605
|
+
const y = jt(s.getGeometry().getExtent());
|
|
1606
1606
|
e == null || e.getView().setCenter(y);
|
|
1607
1607
|
return;
|
|
1608
1608
|
}
|
|
1609
|
-
x = new
|
|
1609
|
+
x = new Ve({
|
|
1610
1610
|
type: "Polygon",
|
|
1611
1611
|
source: m,
|
|
1612
1612
|
trace: !0,
|
|
@@ -1620,35 +1620,35 @@ const it = (e, n) => {
|
|
|
1620
1620
|
color: "rgba(255, 255, 255, 0.25)"
|
|
1621
1621
|
})
|
|
1622
1622
|
}), new j({
|
|
1623
|
-
image: new
|
|
1623
|
+
image: new Oe({
|
|
1624
1624
|
radius: 5,
|
|
1625
1625
|
fill: new I({
|
|
1626
1626
|
color: "rgb(51,112,255, 1)"
|
|
1627
1627
|
})
|
|
1628
1628
|
}),
|
|
1629
1629
|
geometry: function(R) {
|
|
1630
|
-
const
|
|
1631
|
-
return new Qt(
|
|
1630
|
+
const Z = R.getGeometry().getCoordinates();
|
|
1631
|
+
return new Qt(Z);
|
|
1632
1632
|
}
|
|
1633
1633
|
})]
|
|
1634
1634
|
}), e == null || e.addInteraction(x), x.on("drawstart", (R) => {
|
|
1635
|
-
var
|
|
1636
|
-
r = R.feature,
|
|
1637
|
-
const i =
|
|
1635
|
+
var Z;
|
|
1636
|
+
r = R.feature, l = (Z = r.getGeometry()) == null ? void 0 : Z.on("change", (F) => {
|
|
1637
|
+
const i = F.target, y = T(i, "nm"), k = i.getCoordinates()[0], S = new $e([k[k.length - 2], k[k.length - 1]]), N = vt(S, "nm");
|
|
1638
1638
|
if (L = Number(Qe(S) / 1e3) > 150, !y) return;
|
|
1639
|
-
const
|
|
1639
|
+
const D = '<span class="error pl-4">超出可以绘画的距离</span>';
|
|
1640
1640
|
g && (g.innerHTML = `
|
|
1641
1641
|
<div class="text">
|
|
1642
1642
|
面积:${y}
|
|
1643
|
-
${L ?
|
|
1643
|
+
${L ? D : ""}
|
|
1644
1644
|
</div>
|
|
1645
|
-
`),
|
|
1645
|
+
`), f && (f.innerHTML = `
|
|
1646
1646
|
<div class="text">
|
|
1647
1647
|
面积:${y}
|
|
1648
1648
|
</div>
|
|
1649
1649
|
<div class="text ${L ? "error" : ""}">
|
|
1650
1650
|
线段 ${k.length - 2}: ${N}
|
|
1651
|
-
${L ?
|
|
1651
|
+
${L ? D : ""}
|
|
1652
1652
|
|
|
1653
1653
|
</div>
|
|
1654
1654
|
<div>
|
|
@@ -1657,104 +1657,104 @@ const it = (e, n) => {
|
|
|
1657
1657
|
`);
|
|
1658
1658
|
});
|
|
1659
1659
|
}), x.on("drawend", (R) => {
|
|
1660
|
-
var y,
|
|
1660
|
+
var y, h, k, S;
|
|
1661
1661
|
if (!R.feature.getGeometry()) return;
|
|
1662
|
-
g && !
|
|
1663
|
-
const
|
|
1664
|
-
if (
|
|
1665
|
-
const N =
|
|
1666
|
-
(k = (
|
|
1662
|
+
g && !s && (g.innerHTML += '<span class="delete-icon"><i class="map-iconfont icon-delete" /></div>'), s = R.feature, p.setOffset([10, 0]);
|
|
1663
|
+
const F = R.feature.getGeometry().getCoordinates(), i = F[0][F[0].length - 2];
|
|
1664
|
+
if (p.setPosition(i), f != null && f.parentNode && f.parentNode.removeChild(f), (y = n.getProps()) != null && y.areaDrawEnd) {
|
|
1665
|
+
const N = F[0].map((D) => Me(D, J.mercator, J.data));
|
|
1666
|
+
(k = (h = n.getProps()) == null ? void 0 : h.areaDrawEnd) == null || k.call(h, N);
|
|
1667
1667
|
}
|
|
1668
|
-
x && (x.setActive(!1), e == null || e.removeInteraction(x), (e == null ? void 0 : e.getInteractions()).forEach((
|
|
1669
|
-
|
|
1670
|
-
})),
|
|
1671
|
-
var N,
|
|
1672
|
-
A(), (
|
|
1668
|
+
x && (x.setActive(!1), e == null || e.removeInteraction(x), (e == null ? void 0 : e.getInteractions()).forEach((D) => {
|
|
1669
|
+
D instanceof Ve && (D.setActive(!1), e == null || e.removeInteraction(D));
|
|
1670
|
+
})), l && qe(l), (S = document.querySelector(".delete-icon")) == null || S.addEventListener("click", () => {
|
|
1671
|
+
var N, D;
|
|
1672
|
+
A(), (D = (N = n.getProps()) == null ? void 0 : N.areaDrawEnd) == null || D.call(N, []);
|
|
1673
1673
|
});
|
|
1674
1674
|
});
|
|
1675
|
-
},
|
|
1676
|
-
const
|
|
1677
|
-
switch (
|
|
1675
|
+
}, T = (R, Z) => {
|
|
1676
|
+
const F = Xt(R);
|
|
1677
|
+
switch (Z) {
|
|
1678
1678
|
case "km":
|
|
1679
|
-
return
|
|
1679
|
+
return F > 1e4 ? Math.round(F / 1e6 * 100) / 100 + " km<sup>2</sup>" : Math.round(F * 100) / 100 + " m<sup>2</sup>";
|
|
1680
1680
|
case "nm":
|
|
1681
|
-
return
|
|
1681
|
+
return F > 1e4 ? Math.round(F / 1e6 / Math.pow(1.852, 2) * 100) / 100 + " nm<sup>2</sup>" : Math.round(F * 100) / 100 + " m<sup>2</sup>";
|
|
1682
1682
|
}
|
|
1683
1683
|
};
|
|
1684
|
-
let g,
|
|
1685
|
-
const
|
|
1686
|
-
g != null && g.parentNode && g.parentNode.removeChild(g), g = document.createElement("div"), g.style.display = "flex", g.className = "ol-tooltip ol-tooltip-draw-polygon",
|
|
1684
|
+
let g, p;
|
|
1685
|
+
const M = () => {
|
|
1686
|
+
g != null && g.parentNode && g.parentNode.removeChild(g), g = document.createElement("div"), g.style.display = "flex", g.className = "ol-tooltip ol-tooltip-draw-polygon", p = new ce({
|
|
1687
1687
|
element: g,
|
|
1688
1688
|
offset: [0, -15],
|
|
1689
1689
|
positioning: "bottom-center",
|
|
1690
1690
|
stopEvent: !1,
|
|
1691
1691
|
insertFirst: !1
|
|
1692
|
-
}), e == null || e.addOverlay(
|
|
1692
|
+
}), e == null || e.addOverlay(p);
|
|
1693
1693
|
};
|
|
1694
|
-
let
|
|
1694
|
+
let f, O;
|
|
1695
1695
|
const Y = () => {
|
|
1696
|
-
|
|
1697
|
-
element:
|
|
1696
|
+
f != null && f.parentNode && f.parentNode.removeChild(f), f = document.createElement("div"), f.className = "ol-tooltip ol-help-tooltip", O = new ce({
|
|
1697
|
+
element: f,
|
|
1698
1698
|
offset: [15, 0],
|
|
1699
1699
|
positioning: "center-left"
|
|
1700
1700
|
}), e == null || e.addOverlay(O);
|
|
1701
1701
|
}, A = () => {
|
|
1702
|
-
m == null || m.clear(),
|
|
1702
|
+
m == null || m.clear(), s = null, M(), Y(), $();
|
|
1703
1703
|
};
|
|
1704
1704
|
return {
|
|
1705
|
-
open:
|
|
1705
|
+
open: c,
|
|
1706
1706
|
close: () => {
|
|
1707
|
-
|
|
1708
|
-
|
|
1709
|
-
}), x = null),
|
|
1707
|
+
e.un("pointermove", w), r = null, x && (x.setActive(!1), (e == null ? void 0 : e.getInteractions()).forEach((Z) => {
|
|
1708
|
+
Z instanceof Ve && (Z.setActive(!1), e == null || e.removeInteraction(Z));
|
|
1709
|
+
}), x = null), l && qe(l), l = void 0, m == null || m.clear(), m = null, d && e.getAllLayers().includes(d) && (e.removeLayer(d), d = null), f != null && f.parentElement && (f.innerHTML = "", f.parentElement.removeChild(f), f = null), g != null && g.parentElement && (g.innerHTML = "", g.parentElement.removeChild(g), g = null), O && e.removeOverlay(O), p && e.removeOverlay(p), Ce(e, "pointer");
|
|
1710
1710
|
},
|
|
1711
1711
|
reset: A
|
|
1712
1712
|
};
|
|
1713
1713
|
}, Fo = "zh-map-port-layer", Po = (e) => {
|
|
1714
|
-
const n = new de(),
|
|
1714
|
+
const n = new de(), s = new he({
|
|
1715
1715
|
className: Fo,
|
|
1716
1716
|
source: n,
|
|
1717
1717
|
zIndex: 100,
|
|
1718
1718
|
updateWhileInteracting: !0,
|
|
1719
1719
|
updateWhileAnimating: !0
|
|
1720
1720
|
});
|
|
1721
|
-
e == null || e.addLayer(
|
|
1722
|
-
let
|
|
1723
|
-
const o = (g,
|
|
1721
|
+
e == null || e.addLayer(s);
|
|
1722
|
+
let l = null, c = null;
|
|
1723
|
+
const o = (g, p = !0) => {
|
|
1724
1724
|
if (!g || g.length === 0) return;
|
|
1725
|
-
if (n.clear(),
|
|
1726
|
-
const
|
|
1727
|
-
|
|
1725
|
+
if (n.clear(), c) {
|
|
1726
|
+
const f = g.find((O) => O.id === (c == null ? void 0 : c.id));
|
|
1727
|
+
f ? c = f : g.push(c);
|
|
1728
1728
|
}
|
|
1729
|
-
const
|
|
1730
|
-
g.forEach((
|
|
1731
|
-
const [O, Y] =
|
|
1729
|
+
const M = [];
|
|
1730
|
+
g.forEach((f) => {
|
|
1731
|
+
const [O, Y] = f.latLon.split(","), A = new ie({
|
|
1732
1732
|
geometry: new le(U([Number(O), Number(Y)])),
|
|
1733
|
-
portData:
|
|
1734
|
-
id:
|
|
1735
|
-
select:
|
|
1736
|
-
showTitle:
|
|
1733
|
+
portData: f,
|
|
1734
|
+
id: f.id,
|
|
1735
|
+
select: f.id === (c == null ? void 0 : c.id),
|
|
1736
|
+
showTitle: f.id === (c == null ? void 0 : c.id) || p
|
|
1737
1737
|
}), B = r(A);
|
|
1738
|
-
A.setStyle(B),
|
|
1739
|
-
}), n.addFeatures(
|
|
1738
|
+
A.setStyle(B), M.push(A);
|
|
1739
|
+
}), n.addFeatures(M);
|
|
1740
1740
|
};
|
|
1741
1741
|
let d = null, m = null;
|
|
1742
|
-
const t = (g,
|
|
1742
|
+
const t = (g, p) => {
|
|
1743
1743
|
d || (d = document.createElement("canvas"), m = d.getContext("2d", {
|
|
1744
1744
|
willReadFrequently: !0
|
|
1745
1745
|
}));
|
|
1746
|
-
const
|
|
1747
|
-
if (!
|
|
1748
|
-
|
|
1746
|
+
const M = d, f = m;
|
|
1747
|
+
if (!f) return "";
|
|
1748
|
+
M.width = 0, M.height = 0;
|
|
1749
1749
|
const O = 2, Y = 8, A = window.devicePixelRatio || 1, B = "12px sans-serif";
|
|
1750
|
-
|
|
1751
|
-
const
|
|
1752
|
-
|
|
1750
|
+
f.font = B;
|
|
1751
|
+
const Z = f.measureText(g).width, F = Y + Z + Y, i = O + 12 + O * 2;
|
|
1752
|
+
M.width = Math.round(F * A), M.height = Math.round(i * A), f.scale(A, A), f.clearRect(0, 0, F, i), f.fillStyle = p ? "#FF5733" : "#FFF", f.fillRect(0, 0, F, i), f.font = B, f.textBaseline = "middle";
|
|
1753
1753
|
const y = i / 2;
|
|
1754
|
-
return
|
|
1754
|
+
return f.strokeStyle = p ? "#000" : "#ffffff", f.lineWidth = 1, f.strokeText(g, Y, y), f.fillStyle = p ? "#FFF" : "#000000", f.fillText(g, Y, y), M.toDataURL("image/png");
|
|
1755
1755
|
}, r = (g) => {
|
|
1756
|
-
const { select:
|
|
1757
|
-
<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="${
|
|
1756
|
+
const { select: p, showTitle: M } = g.getProperties(), f = (F) => `<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1757
|
+
<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="${F}"/>
|
|
1758
1758
|
<g clip-path="url(#clip0_10059_122082)">
|
|
1759
1759
|
<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"/>
|
|
1760
1760
|
</g>
|
|
@@ -1764,22 +1764,22 @@ const it = (e, n) => {
|
|
|
1764
1764
|
</clipPath>
|
|
1765
1765
|
</defs>
|
|
1766
1766
|
</svg>
|
|
1767
|
-
`, O = () => `data:image/svg+xml;utf8,${encodeURIComponent(
|
|
1768
|
-
image: new
|
|
1767
|
+
`, O = () => `data:image/svg+xml;utf8,${encodeURIComponent(f(p ? "#FF5733" : "#3370FF"))}`, Y = e.getView().getZoom(), A = g.get("portData"), B = window.devicePixelRatio || 1, R = new j({
|
|
1768
|
+
image: new pe({
|
|
1769
1769
|
src: O(),
|
|
1770
1770
|
scale: 0.5 * Y / 10
|
|
1771
1771
|
}),
|
|
1772
|
-
zIndex:
|
|
1773
|
-
}),
|
|
1774
|
-
image: new
|
|
1775
|
-
src: t(A.shortName,
|
|
1772
|
+
zIndex: p ? 110 : 100
|
|
1773
|
+
}), Z = new j({
|
|
1774
|
+
image: new pe({
|
|
1775
|
+
src: t(A.shortName, p),
|
|
1776
1776
|
anchor: [0.5, 0.5],
|
|
1777
1777
|
displacement: [0, -26],
|
|
1778
1778
|
scale: 1 / B,
|
|
1779
1779
|
anchorXUnits: "fraction",
|
|
1780
1780
|
anchorYUnits: "fraction"
|
|
1781
1781
|
}),
|
|
1782
|
-
zIndex:
|
|
1782
|
+
zIndex: p ? 110 : 100
|
|
1783
1783
|
// text: new Text({
|
|
1784
1784
|
// text: port.shortName,
|
|
1785
1785
|
// font: '12px sans-serif',
|
|
@@ -1792,14 +1792,14 @@ const it = (e, n) => {
|
|
|
1792
1792
|
// offsetY: 30,
|
|
1793
1793
|
// }),
|
|
1794
1794
|
});
|
|
1795
|
-
return !
|
|
1795
|
+
return !M && !p ? R : [R, Z];
|
|
1796
1796
|
}, w = () => {
|
|
1797
1797
|
if (n)
|
|
1798
|
-
if (
|
|
1798
|
+
if (l) {
|
|
1799
1799
|
console.log("清除非选中的港口");
|
|
1800
|
-
const g =
|
|
1801
|
-
n.getFeatures().forEach((
|
|
1802
|
-
|
|
1800
|
+
const g = l.get("portData").id;
|
|
1801
|
+
n.getFeatures().forEach((p) => {
|
|
1802
|
+
p.get("portData").id !== g && n.removeFeature(p);
|
|
1803
1803
|
});
|
|
1804
1804
|
} else
|
|
1805
1805
|
console.log("清除所有港口", n), n == null || n.clear();
|
|
@@ -1807,35 +1807,35 @@ const it = (e, n) => {
|
|
|
1807
1807
|
if (n) {
|
|
1808
1808
|
if (!g)
|
|
1809
1809
|
return L();
|
|
1810
|
-
(
|
|
1810
|
+
(l == null ? void 0 : l.get("portData").id) !== g.id && (L(), $(g));
|
|
1811
1811
|
}
|
|
1812
1812
|
}, L = () => {
|
|
1813
1813
|
var g;
|
|
1814
|
-
if (
|
|
1815
|
-
const
|
|
1816
|
-
|
|
1814
|
+
if (l) {
|
|
1815
|
+
const p = l == null ? void 0 : l.get("portData"), M = (g = n.getFeatures()) == null ? void 0 : g.find((f) => f.get("portData").id === p.id);
|
|
1816
|
+
M && (M.set("select", !1), M.setStyle(r(M)), l = null, c = null);
|
|
1817
1817
|
}
|
|
1818
1818
|
}, $ = (g) => {
|
|
1819
1819
|
if (!n) return;
|
|
1820
|
-
const
|
|
1821
|
-
|
|
1820
|
+
const p = n.getFeatures();
|
|
1821
|
+
c = g, l = p.find((M) => M.get("portData").id === g.id), l && (l.set("select", !0), l.setStyle(r(l)));
|
|
1822
1822
|
};
|
|
1823
1823
|
return {
|
|
1824
1824
|
render: o,
|
|
1825
1825
|
clear: w,
|
|
1826
1826
|
selected: x,
|
|
1827
1827
|
handlePortHover: (g) => {
|
|
1828
|
-
const
|
|
1829
|
-
g && g.get("portData") &&
|
|
1828
|
+
const p = e == null ? void 0 : e.getTargetElement();
|
|
1829
|
+
console.log("targetElement", p, g), g && g.get("portData") && p && Ce(e, "pointer");
|
|
1830
1830
|
}
|
|
1831
1831
|
};
|
|
1832
|
-
}, So = (e, n,
|
|
1832
|
+
}, So = (e, n, s, l, c, o) => {
|
|
1833
1833
|
const d = e.getInstall();
|
|
1834
1834
|
d.on("moveend", () => {
|
|
1835
1835
|
var m, t;
|
|
1836
1836
|
try {
|
|
1837
1837
|
const r = e.getZoom();
|
|
1838
|
-
(t = (m = n.getProps()).mapMoveEnd) == null || t.call(m, r),
|
|
1838
|
+
(t = (m = n.getProps()).mapMoveEnd) == null || t.call(m, r), s.reRenderTrackLine(), l.changeShipScale("end");
|
|
1839
1839
|
} catch (r) {
|
|
1840
1840
|
console.log("moveend---catch", r);
|
|
1841
1841
|
}
|
|
@@ -1844,18 +1844,18 @@ const it = (e, n) => {
|
|
|
1844
1844
|
const t = d == null ? void 0 : d.getEventPixel(m.originalEvent);
|
|
1845
1845
|
if (!t || !d) return;
|
|
1846
1846
|
const r = d == null ? void 0 : d.forEachFeatureAtPixel(t, (w) => w);
|
|
1847
|
-
|
|
1847
|
+
l == null || l.handleShipMapEvent(r, "hover"), s == null || s.handleTrackMapEvent(r, "hover", m), r && (c == null || c.handlePortHover(r));
|
|
1848
1848
|
} catch (t) {
|
|
1849
1849
|
console.log("pointermove---catch", t);
|
|
1850
1850
|
}
|
|
1851
1851
|
}), d.on("movestart", () => {
|
|
1852
1852
|
try {
|
|
1853
1853
|
const m = d == null ? void 0 : d.getView().getZoom();
|
|
1854
|
-
m && m <= te.shipModelMax && m >= te.shipTriggleMin &&
|
|
1854
|
+
m && m <= te.shipModelMax && m >= te.shipTriggleMin && l.changeShipScale("start");
|
|
1855
1855
|
} catch (m) {
|
|
1856
1856
|
console.log("movestart---catch", m);
|
|
1857
1857
|
}
|
|
1858
|
-
}), d.on("click",
|
|
1858
|
+
}), d.on("click", ze((m) => {
|
|
1859
1859
|
var t, r, w;
|
|
1860
1860
|
try {
|
|
1861
1861
|
if (console.log("1", o.getState()), o.getState()) return;
|
|
@@ -1867,38 +1867,38 @@ const it = (e, n) => {
|
|
|
1867
1867
|
}
|
|
1868
1868
|
);
|
|
1869
1869
|
if (L != null && L.get("shipData"))
|
|
1870
|
-
|
|
1870
|
+
l.handleShipMapEvent(L, "click", (t = n.getProps()) == null ? void 0 : t.selectShip);
|
|
1871
1871
|
else if (L != null && L.get("portData")) {
|
|
1872
1872
|
const $ = L.get("portData");
|
|
1873
|
-
|
|
1873
|
+
c.selected($), (w = (r = n.getProps()) == null ? void 0 : r.selectPort) == null || w.call(r, $);
|
|
1874
1874
|
}
|
|
1875
1875
|
m.preventDefault(), m.stopPropagation();
|
|
1876
1876
|
} catch (x) {
|
|
1877
1877
|
console.log("click---catch", x);
|
|
1878
1878
|
}
|
|
1879
|
-
}, 150)), d.getView().on("change:resolution",
|
|
1879
|
+
}, 150)), d.getView().on("change:resolution", ze(() => {
|
|
1880
1880
|
const m = d == null ? void 0 : d.getView().getZoom();
|
|
1881
|
-
m && m <= te.shipModelMax && m >= te.shipTriggleMin &&
|
|
1881
|
+
m && m <= te.shipModelMax && m >= te.shipTriggleMin && l.changeSelectedScale("start");
|
|
1882
1882
|
}, 10));
|
|
1883
1883
|
}, No = () => {
|
|
1884
1884
|
const e = Vt([]);
|
|
1885
1885
|
return {
|
|
1886
|
-
createInstance: (
|
|
1886
|
+
createInstance: (l, c) => {
|
|
1887
1887
|
const o = ro();
|
|
1888
|
-
o.initMap(
|
|
1889
|
-
const d = o.getInstall(), m = ko(d), t =
|
|
1890
|
-
t.setProps(
|
|
1891
|
-
const r = ao(d), w = co(d, r), x = bo(d), L =
|
|
1888
|
+
o.initMap(l, c);
|
|
1889
|
+
const d = o.getInstall(), m = ko(d), t = Mo();
|
|
1890
|
+
t.setProps(c), m.setShowLayerType(c.layerType), m.setGreenTileVisible(c.showGreenLayer);
|
|
1891
|
+
const r = ao(d), w = co(d, r), x = bo(d), L = po(d), $ = Eo(d, t), T = To(d, t), g = Po(d);
|
|
1892
1892
|
So(o, t, r, x, g, $);
|
|
1893
|
-
const
|
|
1894
|
-
const
|
|
1893
|
+
const p = () => {
|
|
1894
|
+
const f = d.getView().calculateExtent(o.getSize()), O = Me([f[0], f[1]], J.mercator, J.data), Y = Me([f[2], f[3]], J.mercator, J.data);
|
|
1895
1895
|
return [O[0], O[1], Y[0], Y[1]];
|
|
1896
|
-
},
|
|
1896
|
+
}, M = {
|
|
1897
1897
|
id: Symbol("map-instance"),
|
|
1898
1898
|
innerMap: null,
|
|
1899
1899
|
map: o.getInstall(),
|
|
1900
1900
|
destroy: () => {
|
|
1901
|
-
e.splice(e.indexOf(
|
|
1901
|
+
e.splice(e.indexOf(M), 1);
|
|
1902
1902
|
},
|
|
1903
1903
|
methods: {
|
|
1904
1904
|
...o,
|
|
@@ -1913,23 +1913,23 @@ const it = (e, n) => {
|
|
|
1913
1913
|
},
|
|
1914
1914
|
position: L,
|
|
1915
1915
|
drawLine: $,
|
|
1916
|
-
drawPolygon:
|
|
1916
|
+
drawPolygon: T,
|
|
1917
1917
|
// 子模块
|
|
1918
1918
|
utils: {
|
|
1919
|
-
getCalculateExtent:
|
|
1919
|
+
getCalculateExtent: p,
|
|
1920
1920
|
convertSixHundredThousandToLatLng: Ke,
|
|
1921
1921
|
calculateCirclePoints: no
|
|
1922
1922
|
}
|
|
1923
1923
|
}
|
|
1924
1924
|
};
|
|
1925
|
-
return e.push(
|
|
1925
|
+
return e.push(M), M;
|
|
1926
1926
|
},
|
|
1927
|
-
destroyInstance: (
|
|
1928
|
-
const
|
|
1929
|
-
|
|
1927
|
+
destroyInstance: (l) => {
|
|
1928
|
+
const c = e.findIndex((o) => o.id === l);
|
|
1929
|
+
c > -1 && (e[c].destroy(), e.splice(c, 1));
|
|
1930
1930
|
},
|
|
1931
1931
|
destroyAll: () => {
|
|
1932
|
-
e.forEach((
|
|
1932
|
+
e.forEach((l) => l.destroy()), e.splice(0, e.length);
|
|
1933
1933
|
},
|
|
1934
1934
|
getAllInstances: () => [...e]
|
|
1935
1935
|
};
|
|
@@ -1953,16 +1953,16 @@ const it = (e, n) => {
|
|
|
1953
1953
|
} }
|
|
1954
1954
|
},
|
|
1955
1955
|
setup(e, { expose: n }) {
|
|
1956
|
-
const
|
|
1956
|
+
const s = ee(), l = ee(), c = No(), o = ee(), d = e, m = ee({
|
|
1957
1957
|
getInstall() {
|
|
1958
1958
|
}
|
|
1959
1959
|
});
|
|
1960
1960
|
return zt(() => {
|
|
1961
1961
|
var t;
|
|
1962
|
-
o.value =
|
|
1962
|
+
o.value = c.createInstance(s.value, d), m.value = o.value.methods, (t = l.value) == null || t.setScaleLine(o.value.map, d.scaleLineUnit);
|
|
1963
1963
|
}), Ot(() => {
|
|
1964
1964
|
var t, r;
|
|
1965
|
-
|
|
1965
|
+
c.destroyInstance((t = o == null ? void 0 : o.value) == null ? void 0 : t.id), (r = o.value) == null || r.destroy();
|
|
1966
1966
|
}), n({
|
|
1967
1967
|
getZoom: () => {
|
|
1968
1968
|
var t;
|
|
@@ -2171,12 +2171,12 @@ const it = (e, n) => {
|
|
|
2171
2171
|
Ye("div", {
|
|
2172
2172
|
id: "map",
|
|
2173
2173
|
ref_key: "zhMapRef",
|
|
2174
|
-
ref:
|
|
2174
|
+
ref: s,
|
|
2175
2175
|
class: "zh-map"
|
|
2176
2176
|
}, null, 512),
|
|
2177
2177
|
Be(Ut, {
|
|
2178
2178
|
ref_key: "scaleLineRef",
|
|
2179
|
-
ref:
|
|
2179
|
+
ref: l
|
|
2180
2180
|
}, null, 512),
|
|
2181
2181
|
Be(to, {
|
|
2182
2182
|
ref: "zoomControlRef",
|