zhihao-ui 1.2.39 → 1.2.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.
|
@@ -8,7 +8,7 @@ import { g as getForegroundColor } from "./DatePicker-Dh8sksac.js";
|
|
|
8
8
|
import { w as withInstall } from "./utils-BSQSj8Ii.js";
|
|
9
9
|
var BaseMapType = /* @__PURE__ */ ((e) => (e[e.vector = 0] = "vector", e[e.satellite = 1] = "satellite", e))(BaseMapType || {}), SEARCH_TYPE = /* @__PURE__ */ ((e) => (e[e.SEARCH_SHIP = 0] = "SEARCH_SHIP", e[e.SEARCH_PORT = 1] = "SEARCH_PORT", e[e.SEARCH_CUSTOM = 2] = "SEARCH_CUSTOM", e))(SEARCH_TYPE || {}), COPY_RIGHT_TYPE = /* @__PURE__ */ ((e) => (e[e.HORIZONTAL = 0] = "HORIZONTAL", e[e.VERTICAL = 1] = "VERTICAL", e))(COPY_RIGHT_TYPE || {}), CAR_COLOR = /* @__PURE__ */ ((e) => (e[e.BLUE = 1] = "BLUE", e[e.YELLOW = 2] = "YELLOW", e[e.Y_GREEN = 3] = "Y_GREEN", e))(CAR_COLOR || {}), DEVICE_TYPE = /* @__PURE__ */ ((e) => (e[e.HOST = 1] = "HOST", e[e.TALK = 2] = "TALK", e[e.STORAGE = 3] = "STORAGE", e[e.INTERNET = 4] = "INTERNET", e[e.CAMERA = 5] = "CAMERA", e[e.LOAD = 6] = "LOAD", e))(DEVICE_TYPE || {}), LENGTH_UNIT = /* @__PURE__ */ ((e) => (e[e.M = 1] = "M", e[e.KM = 2] = "KM", e[e.NM = 3] = "NM", e))(LENGTH_UNIT || {}), SWITCH_BTN = /* @__PURE__ */ ((e) => (e.Camera = "camera", e.Mobile = "mobile", e.WaterGauge = "waterGauge", e))(SWITCH_BTN || {}), SHIP_SAIL_STATUS = /* @__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))(SHIP_SAIL_STATUS || {});
|
|
10
10
|
class ShipMapData {
|
|
11
|
-
constructor(t, n, o,
|
|
11
|
+
constructor(t, n, o, i, r, l, c, s, m, d, u, f, p, y, h, g, k, T, I, x, F, P, v, L) {
|
|
12
12
|
b(this, "id");
|
|
13
13
|
// mmsi
|
|
14
14
|
b(this, "mmsi");
|
|
@@ -50,40 +50,40 @@ class ShipMapData {
|
|
|
50
50
|
b(this, "existWaterGauge");
|
|
51
51
|
b(this, "selected");
|
|
52
52
|
b(this, "blinkColors");
|
|
53
|
-
this.id = t, this.mmsi = n, this.fill = o, this.shipType =
|
|
53
|
+
this.id = t, this.mmsi = n, this.fill = o, this.shipType = i, this.name = r, this.length = l, this.breadth = c, this.lon = s, this.lat = m, this.createdAt = d, this.speed = u, this.from = f, this.sailStatus = p, this.hdg = y, this.cog = h, this.posType = g, this.type = k, this.angle = T, this.leftIconColor = I, this.existDevice = x, this.existMobile = F, this.existWaterGauge = P, this.selected = v, this.blinkColors = L;
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
const formatLength = function(e, t) {
|
|
57
57
|
const o = getLength(e);
|
|
58
|
-
let
|
|
58
|
+
let i = "";
|
|
59
59
|
switch (t) {
|
|
60
60
|
case LENGTH_UNIT.M:
|
|
61
|
-
|
|
61
|
+
i = Math.round(o * 100) / 100 + " m";
|
|
62
62
|
break;
|
|
63
63
|
case LENGTH_UNIT.KM:
|
|
64
|
-
|
|
64
|
+
i = Math.round(o / 1e3 * 100) / 100 + " km";
|
|
65
65
|
break;
|
|
66
66
|
case LENGTH_UNIT.NM:
|
|
67
|
-
|
|
67
|
+
i = (Math.round(o / 1e3 * 100) / 100 / 1.852).toFixed(2) + " nm";
|
|
68
68
|
break;
|
|
69
69
|
}
|
|
70
|
-
return
|
|
70
|
+
return i;
|
|
71
71
|
}, convertSixHundredThousandToLatLng = function(e, t) {
|
|
72
72
|
const n = Number(t) / 6e5;
|
|
73
73
|
return [Number(e) / 6e5, n];
|
|
74
74
|
}, formatArea = (e, t) => {
|
|
75
75
|
const o = getArea(e);
|
|
76
|
-
let
|
|
76
|
+
let i;
|
|
77
77
|
switch (t) {
|
|
78
78
|
case LENGTH_UNIT.KM:
|
|
79
|
-
o > 1e4 ?
|
|
79
|
+
o > 1e4 ? i = Math.round(o / 1e6 * 100) / 100 + " km<sup>2</sup>" : i = Math.round(o * 100) / 100 + " m<sup>2</sup>";
|
|
80
80
|
break;
|
|
81
81
|
case LENGTH_UNIT.NM:
|
|
82
82
|
const r = Math.pow(1.852, 2);
|
|
83
|
-
o > 1e4 ?
|
|
83
|
+
o > 1e4 ? i = Math.round(o / 1e6 / r * 100) / 100 + " nm<sup>2</sup>" : i = Math.round(o * 100) / 100 + " m<sup>2</sup>";
|
|
84
84
|
break;
|
|
85
85
|
}
|
|
86
|
-
return
|
|
86
|
+
return i;
|
|
87
87
|
}, convertShipMapData = (e) => {
|
|
88
88
|
const t = (n) => new ShipMapData(
|
|
89
89
|
n.id,
|
|
@@ -130,8 +130,8 @@ const formatLength = function(e, t) {
|
|
|
130
130
|
}),
|
|
131
131
|
emits: /* @__PURE__ */ mergeModels(["close"], ["update:visible"]),
|
|
132
132
|
setup(e, { expose: t, emit: n }) {
|
|
133
|
-
const o = inject("mapInstance"),
|
|
134
|
-
let
|
|
133
|
+
const o = inject("mapInstance"), i = n, r = useModel(e, "visible"), l = ref("3"), c = ref([]), s = ref(!1), m = new VectorSource();
|
|
134
|
+
let d, u, f, p, y;
|
|
135
135
|
const h = new VectorLayer({
|
|
136
136
|
source: m,
|
|
137
137
|
style: {
|
|
@@ -145,12 +145,12 @@ const formatLength = function(e, t) {
|
|
|
145
145
|
if (S.dragging)
|
|
146
146
|
return;
|
|
147
147
|
let M = "点击选择起点";
|
|
148
|
-
|
|
148
|
+
d && (M = "单击继续,双击结束"), u && (u.innerHTML = M, f.setPosition(S.coordinate), u.classList.remove("hidden"));
|
|
149
149
|
}, k = () => {
|
|
150
150
|
var S, M;
|
|
151
151
|
o != null && o.value && ((S = o == null ? void 0 : o.value) == null || S.on("pointermove", g), (M = o == null ? void 0 : o.value) == null || M.getViewport().addEventListener("mouseout", function() {
|
|
152
152
|
var C;
|
|
153
|
-
(C =
|
|
153
|
+
(C = u == null ? void 0 : u.classList) == null || C.add("hidden");
|
|
154
154
|
}), s.value = !0);
|
|
155
155
|
};
|
|
156
156
|
let T;
|
|
@@ -183,7 +183,7 @@ const formatLength = function(e, t) {
|
|
|
183
183
|
const C = o.value.getInteractions().getArray().find((E) => getUid(E) === getUid(T));
|
|
184
184
|
C && ((S = o.value) == null || S.removeInteraction(C));
|
|
185
185
|
}
|
|
186
|
-
(M = o.value) == null || M.removeLayer(h),
|
|
186
|
+
(M = o.value) == null || M.removeLayer(h), u != null && u.parentNode && u.parentNode.removeChild(u), p != null && p.parentNode && p.parentNode.removeChild(p);
|
|
187
187
|
}
|
|
188
188
|
}
|
|
189
189
|
function F() {
|
|
@@ -202,11 +202,11 @@ const formatLength = function(e, t) {
|
|
|
202
202
|
let S;
|
|
203
203
|
T.on("drawstart", function(E) {
|
|
204
204
|
var N;
|
|
205
|
-
|
|
205
|
+
d = E.feature;
|
|
206
206
|
let V;
|
|
207
|
-
S = (N =
|
|
207
|
+
S = (N = d.getGeometry()) == null ? void 0 : N.on("change", function(A) {
|
|
208
208
|
const $ = A.target;
|
|
209
|
-
let R = formatUtils.formatLength($, Number(
|
|
209
|
+
let R = formatUtils.formatLength($, Number(l.value));
|
|
210
210
|
V = $.getLastCoordinate(), p && R && (p.innerHTML = R), y.setPosition(V);
|
|
211
211
|
});
|
|
212
212
|
}), T.on("drawend", function() {
|
|
@@ -216,13 +216,13 @@ const formatLength = function(e, t) {
|
|
|
216
216
|
N.preventDefault(), N.stopPropagation();
|
|
217
217
|
const A = ($ = N.target) == null ? void 0 : $.getAttribute("data-index");
|
|
218
218
|
A && L(Number(A));
|
|
219
|
-
}), y.setOffset([0, -7]),
|
|
219
|
+
}), y.setOffset([0, -7]), d = null, p = null, v(), S && unByKey(S);
|
|
220
220
|
});
|
|
221
221
|
}
|
|
222
222
|
function P() {
|
|
223
223
|
var S;
|
|
224
|
-
|
|
225
|
-
element:
|
|
224
|
+
u != null && u.parentNode && u.parentNode.removeChild(u), u = document.createElement("div"), u.className = "ol-tooltip hidden", f = new Overlay({
|
|
225
|
+
element: u,
|
|
226
226
|
offset: [15, 0],
|
|
227
227
|
positioning: "center-left"
|
|
228
228
|
}), (S = o == null ? void 0 : o.value) == null || S.addOverlay(f);
|
|
@@ -245,7 +245,7 @@ const formatLength = function(e, t) {
|
|
|
245
245
|
const C = m.getFeatures();
|
|
246
246
|
C[S] && m.removeFeature(C[S]);
|
|
247
247
|
}, w = () => {
|
|
248
|
-
|
|
248
|
+
i("close");
|
|
249
249
|
};
|
|
250
250
|
return watch(() => r, () => {
|
|
251
251
|
r.value && !s.value && (k(), F());
|
|
@@ -264,8 +264,8 @@ const formatLength = function(e, t) {
|
|
|
264
264
|
M[2] || (M[2] = createElementVNode("div", { class: "tips" }, "在地图上点击多个点测量距离,距离单位", -1)),
|
|
265
265
|
createVNode(unref(ElSelect), {
|
|
266
266
|
class: "select-length-unit",
|
|
267
|
-
modelValue:
|
|
268
|
-
"onUpdate:modelValue": M[0] || (M[0] = (C) =>
|
|
267
|
+
modelValue: l.value,
|
|
268
|
+
"onUpdate:modelValue": M[0] || (M[0] = (C) => l.value = C)
|
|
269
269
|
}, {
|
|
270
270
|
default: withCtx(() => [
|
|
271
271
|
createVNode(unref(ElOption), {
|
|
@@ -334,36 +334,36 @@ const formatLength = function(e, t) {
|
|
|
334
334
|
// 设置文本背景的内边距
|
|
335
335
|
})
|
|
336
336
|
}), renderMarker = (e, t = !0, n = !0) => {
|
|
337
|
-
var
|
|
337
|
+
var d;
|
|
338
338
|
if (!mapInstance$8.value || !e || e.split(",").length !== 2) return;
|
|
339
|
-
const [o,
|
|
339
|
+
const [o, i] = e.split(",").map(Number);
|
|
340
340
|
marker.value = new Feature({
|
|
341
|
-
geometry: new Point(fromLonLat([o,
|
|
341
|
+
geometry: new Point(fromLonLat([o, i]))
|
|
342
342
|
});
|
|
343
|
-
const r = n ? `${o}, ${
|
|
344
|
-
(
|
|
345
|
-
const
|
|
343
|
+
const r = n ? `${o}, ${i}` : "";
|
|
344
|
+
(d = marker.value) == null || d.setStyle(createIconStyle(r));
|
|
345
|
+
const l = new VectorSource({
|
|
346
346
|
features: [marker.value]
|
|
347
347
|
}), c = new VectorLayer({
|
|
348
|
-
source:
|
|
348
|
+
source: l
|
|
349
349
|
}), s = mapInstance$8.value.getView();
|
|
350
350
|
if (mapInstance$8.value.addLayer(c), t) {
|
|
351
|
-
const
|
|
351
|
+
const u = new Translate({
|
|
352
352
|
layers: [c]
|
|
353
353
|
});
|
|
354
|
-
|
|
354
|
+
u.on("translating", function(f) {
|
|
355
355
|
var h;
|
|
356
356
|
const p = f.features.item(0).getGeometry().getCoordinates(), y = toLonLat(p);
|
|
357
357
|
markerPosition.value = `${y[0].toFixed(6)}, ${y[1].toFixed(6)}`, (h = marker.value) == null || h.setStyle(createIconStyle(markerPosition.value));
|
|
358
|
-
}), mapInstance$8.value.addInteraction(
|
|
358
|
+
}), mapInstance$8.value.addInteraction(u);
|
|
359
359
|
}
|
|
360
|
-
const m = new Point([o,
|
|
360
|
+
const m = new Point([o, i]);
|
|
361
361
|
s.setCenter(transform(m.getCoordinates(), projection.data, projection.mercator)), s.setZoom(mapZoom.findShip);
|
|
362
362
|
}, setMarkerPosition = (e) => {
|
|
363
|
-
var
|
|
363
|
+
var i, r;
|
|
364
364
|
if (!mapInstance$8.value) return;
|
|
365
365
|
const t = mapInstance$8.value.getView(), n = e.split(",").map(Number);
|
|
366
|
-
(r = (
|
|
366
|
+
(r = (i = marker.value) == null ? void 0 : i.getGeometry()) == null || r.setCoordinates(fromLonLat([n[0], n[1]]));
|
|
367
367
|
const o = new Point([n[0], n[1]]);
|
|
368
368
|
t.setCenter(transform(o.getCoordinates(), projection.data, projection.mercator)), t.setZoom(mapZoom.markerPosition);
|
|
369
369
|
}, CDN_URL = "https://static.zhihaoscm.cn/", tiandituKey = "a6e8f78974f2581f2ca00485b40c948f", zhongkeKey = "15c81cc0a191a232e0a0ca1a51c3ca81", baseMap = {
|
|
@@ -430,45 +430,45 @@ const multiplyPixelRatio = (e) => {
|
|
|
430
430
|
}),
|
|
431
431
|
zIndex: 100
|
|
432
432
|
}), getRotation = (e, t, n) => {
|
|
433
|
-
function o(
|
|
434
|
-
return 180 * (
|
|
433
|
+
function o(u) {
|
|
434
|
+
return 180 * (u % (2 * Math.PI)) / Math.PI;
|
|
435
435
|
}
|
|
436
|
-
function
|
|
437
|
-
return
|
|
436
|
+
function i(u) {
|
|
437
|
+
return u % 360 * Math.PI / 180;
|
|
438
438
|
}
|
|
439
|
-
function r(
|
|
440
|
-
if (!
|
|
441
|
-
if (!Array.isArray(
|
|
442
|
-
if (
|
|
443
|
-
return
|
|
444
|
-
if (
|
|
439
|
+
function r(u) {
|
|
440
|
+
if (!u) throw new Error("Coordinate is required");
|
|
441
|
+
if (!Array.isArray(u)) {
|
|
442
|
+
if (u.type === "Feature" && u.geometry !== null && u.geometry.type === "Point")
|
|
443
|
+
return u.geometry.coordinates;
|
|
444
|
+
if (u.type === "Point") return u.coordinates;
|
|
445
445
|
}
|
|
446
|
-
if (Array.isArray(
|
|
447
|
-
return
|
|
446
|
+
if (Array.isArray(u) && u.length >= 2 && !Array.isArray(u[0]) && !Array.isArray(u[1]))
|
|
447
|
+
return u;
|
|
448
448
|
throw new Error(
|
|
449
449
|
"Coordinate must be GeoJSON Point or an Array of numbers"
|
|
450
450
|
);
|
|
451
451
|
}
|
|
452
|
-
function
|
|
452
|
+
function l(u, f, p = {}) {
|
|
453
453
|
if (p.final)
|
|
454
454
|
return function(P, v) {
|
|
455
|
-
return (
|
|
456
|
-
}(
|
|
457
|
-
const y = r(
|
|
455
|
+
return (l(v, P) + 180) % 360;
|
|
456
|
+
}(u, f);
|
|
457
|
+
const y = r(u), h = r(f), g = i(y[0]), k = i(h[0]), T = i(y[1]), I = i(h[1]), x = Math.sin(k - g) * Math.cos(I), F = Math.cos(T) * Math.sin(I) - Math.sin(T) * Math.cos(I) * Math.cos(k - g);
|
|
458
458
|
return o(Math.atan2(x, F));
|
|
459
459
|
}
|
|
460
|
-
function c(
|
|
461
|
-
return !isNaN(
|
|
460
|
+
function c(u) {
|
|
461
|
+
return !isNaN(u) && u !== null && !Array.isArray(u);
|
|
462
462
|
}
|
|
463
|
-
function s(
|
|
464
|
-
return
|
|
463
|
+
function s(u, f = {}, p = {}) {
|
|
464
|
+
return u || console.log("Coordinates are required"), Array.isArray(u) || console.log("Coordinates must be an Array"), u.length < 2 && console.log("Coordinates must be at least 2 numbers long"), (!c(u[0]) || !c(u[1])) && console.log("Coordinates must contain numbers"), m({ type: "Point", coordinates: u }, f, p);
|
|
465
465
|
}
|
|
466
|
-
function m(
|
|
466
|
+
function m(u, f = {}, p = {}) {
|
|
467
467
|
const y = { type: "Feature" };
|
|
468
|
-
return p.id !== void 0 && (y.id = p.id), p.bbox && (y.bbox = p.bbox), y.properties = f || {}, y.geometry =
|
|
468
|
+
return p.id !== void 0 && (y.id = p.id), p.bbox && (y.bbox = p.bbox), y.properties = f || {}, y.geometry = u, y;
|
|
469
469
|
}
|
|
470
|
-
const
|
|
471
|
-
return
|
|
470
|
+
const d = l(s(e), s(t), n);
|
|
471
|
+
return d < 0 ? 360 + d : d;
|
|
472
472
|
}, triangleModel = multiplyPixelRatio([
|
|
473
473
|
[0, -8],
|
|
474
474
|
[5, 8],
|
|
@@ -540,84 +540,82 @@ const multiplyPixelRatio = (e) => {
|
|
|
540
540
|
}), mapInstance$7 = ref(), renderShipStyleSetInstance = (e) => mapInstance$7.value = e, speedCondition = [[1, 10], [10, 20], [20, 1 / 0]], drawShipModelByZoom = { 14: [200, 30], 15: [115, 15], 16: [55, 8], 17: [25, 5], 18: [1, 1] }, setShipStyle = (e, t = !1) => new Style({
|
|
541
541
|
renderer: (n, o) => {
|
|
542
542
|
n = n;
|
|
543
|
-
const
|
|
543
|
+
const i = o.context, r = o.feature.get("data");
|
|
544
544
|
if (!r) return;
|
|
545
545
|
o.feature.get("index") === 0 && (shipLabels.value = []);
|
|
546
546
|
try {
|
|
547
|
-
const c = drawShipBody(
|
|
548
|
-
c && (drawHeading(
|
|
549
|
-
drawSelectBounds(l, c);
|
|
550
|
-
}, 50)), drawShipLabel(l, r, n);
|
|
547
|
+
const c = drawShipBody(i, r, n, t);
|
|
548
|
+
c && (drawHeading(i, r, c, t), r.selected = e, e && drawSelectBounds(i, c)), drawShipLabel(i, r, n);
|
|
551
549
|
} catch {
|
|
552
550
|
return !1;
|
|
553
551
|
}
|
|
554
552
|
}
|
|
555
553
|
}), drawShipBody = (e, t, n, o) => {
|
|
556
554
|
if (!mapInstance$7.value) return;
|
|
557
|
-
const
|
|
558
|
-
if (!
|
|
555
|
+
const i = Math.round(Number(mapInstance$7.value.getView().getZoom()));
|
|
556
|
+
if (!i) return;
|
|
559
557
|
let r = [];
|
|
560
|
-
const [
|
|
561
|
-
if (
|
|
562
|
-
r = rotateShapeModel(drawCurrentShipShapeModel(t,
|
|
563
|
-
const [f, p] =
|
|
558
|
+
const [l, c] = drawShipModelByZoom[i] || [0, 0], [s, m] = n;
|
|
559
|
+
if (i <= mapZoom.shipModelMax && i > mapZoom.shipModelMin && t.length >= l && t.breadth >= c)
|
|
560
|
+
r = rotateShapeModel(drawCurrentShipShapeModel(t, i), t.angle).map((u) => {
|
|
561
|
+
const [f, p] = u;
|
|
564
562
|
return [s + f, m + p];
|
|
565
563
|
});
|
|
566
564
|
else {
|
|
567
|
-
const
|
|
568
|
-
n.length === 2 && (r =
|
|
569
|
-
const [f, p] =
|
|
565
|
+
const d = rotateShapeModel(triangleModel, t.angle);
|
|
566
|
+
n.length === 2 && (r = d.map((u) => {
|
|
567
|
+
const [f, p] = u;
|
|
570
568
|
return [s + f, m + p];
|
|
571
569
|
}));
|
|
572
570
|
}
|
|
573
571
|
if (!(r.length > 2)) return !1;
|
|
574
572
|
if (t != null && t.length) {
|
|
575
|
-
const
|
|
573
|
+
const d = r.length === 3 ? 30 : t.length * 0.4;
|
|
576
574
|
e.beginPath(), e.arc(
|
|
577
575
|
n[0],
|
|
578
576
|
n[1],
|
|
579
|
-
|
|
577
|
+
d,
|
|
580
578
|
0,
|
|
581
579
|
2 * Math.PI
|
|
582
580
|
), e.fillStyle = "rgba(255, 255, 255, 0.001)", e.fill();
|
|
583
581
|
}
|
|
584
582
|
e.save(), e.beginPath(), e.moveTo(r[0][0], r[0][1]);
|
|
585
|
-
for (let
|
|
586
|
-
e.lineTo(r[
|
|
583
|
+
for (let d = 1; d < r.length; d++)
|
|
584
|
+
e.lineTo(r[d][0], r[d][1]);
|
|
587
585
|
return e.closePath(), e.strokeStyle = o ? "#ff0000" : "#000", e.lineWidth = o ? 2 : 1, e.stroke(), e.fillStyle = t.fill, e.fill(), e.restore(), r;
|
|
588
586
|
}, drawHeading = (e, t, n, o) => {
|
|
589
|
-
const [
|
|
590
|
-
if (
|
|
591
|
-
const c =
|
|
592
|
-
const [m,
|
|
593
|
-
return [m +
|
|
587
|
+
const [i, r] = n[0], l = getShipDirectPath(t);
|
|
588
|
+
if (l) {
|
|
589
|
+
const c = l.map(function(s) {
|
|
590
|
+
const [m, d] = s;
|
|
591
|
+
return [m + i, d + r];
|
|
594
592
|
});
|
|
595
593
|
if (e.save(), e.beginPath(), t.angle > 0) {
|
|
596
|
-
e.translate(
|
|
594
|
+
e.translate(i, r);
|
|
597
595
|
const s = t.angle * Math.PI / 180;
|
|
598
|
-
e.rotate(s), e.translate(-
|
|
596
|
+
e.rotate(s), e.translate(-i, -r);
|
|
599
597
|
}
|
|
600
|
-
e.moveTo(
|
|
598
|
+
e.moveTo(i, r);
|
|
601
599
|
for (let s = 1; s < c.length; s++) {
|
|
602
|
-
const [m,
|
|
603
|
-
e.lineTo(m,
|
|
600
|
+
const [m, d] = c[s];
|
|
601
|
+
e.lineTo(m, d);
|
|
604
602
|
}
|
|
605
603
|
e.strokeStyle = o ? "#ff0000" : "#000", e.lineWidth = o ? 2 : 1, e.stroke(), e.restore();
|
|
606
604
|
}
|
|
607
605
|
}, drawSelectBounds = (e, t) => {
|
|
608
|
-
let [n, o,
|
|
609
|
-
const
|
|
610
|
-
n -=
|
|
611
|
-
const
|
|
612
|
-
e.beginPath(), e.moveTo(n +
|
|
606
|
+
let [n, o, i, r] = getPixelFromCoordinate(t);
|
|
607
|
+
const l = window.devicePixelRatio || 1, c = 4;
|
|
608
|
+
n -= c, o -= c, i += c, r += c, e.save(), e.strokeStyle = "#ff0000", e.lineWidth = 4 * l;
|
|
609
|
+
const s = 8 * l;
|
|
610
|
+
e.beginPath(), e.moveTo(n + s, r), e.lineTo(n, r), e.lineTo(n, r - s), e.moveTo(n, o + s), e.lineTo(n, o), e.lineTo(n + s, o), e.moveTo(i - s, o), e.lineTo(i, o), e.lineTo(i, o + s), e.moveTo(i, r - s), e.lineTo(i, r), e.lineTo(i - s, r), e.stroke(), e.restore();
|
|
613
611
|
}, drawShipLabel = (e, t, n) => {
|
|
614
|
-
if (!t.selected && shipLabels.value.find((
|
|
615
|
-
const [o,
|
|
612
|
+
if (!t.selected && shipLabels.value.find((u) => u.name === t.name)) return;
|
|
613
|
+
const [o, i] = n, r = o, l = i, c = t.name;
|
|
616
614
|
let s;
|
|
617
615
|
t.leftIconColor && (s = { color: t.leftIconColor, icon: "" });
|
|
618
|
-
const m = getShipCustomIcon(t),
|
|
616
|
+
const m = getShipCustomIcon(t), d = {
|
|
619
617
|
id: t.id,
|
|
620
|
-
center: [r,
|
|
618
|
+
center: [r, l],
|
|
621
619
|
text: c,
|
|
622
620
|
fill: t.fill,
|
|
623
621
|
color: "#fff",
|
|
@@ -629,21 +627,21 @@ const multiplyPixelRatio = (e) => {
|
|
|
629
627
|
blinkColors: t.blinkColors,
|
|
630
628
|
type: "ShipName"
|
|
631
629
|
};
|
|
632
|
-
drawLabel(e,
|
|
630
|
+
drawLabel(e, d, shipLabels.value);
|
|
633
631
|
}, drawCurrentShipShapeModel = (e, t) => {
|
|
634
632
|
let n = 0;
|
|
635
633
|
t <= 14 ? n = 0.058 : t === 15 ? n = 0.12 : t === 16 ? n = 0.22 : t === 17 ? n = 0.435 : t === 18 && (n = 0.857);
|
|
636
|
-
const o = e.length / 4 * n,
|
|
634
|
+
const o = e.length / 4 * n, i = e.breadth * n;
|
|
637
635
|
let r = cloneDeep(shipShapeModel);
|
|
638
|
-
return r = r.map(([
|
|
636
|
+
return r = r.map(([l, c]) => [l * i, c * o]), r;
|
|
639
637
|
}, getShipDirectPath = (e) => {
|
|
640
638
|
const { speed: t, hdg: n, cog: o } = e;
|
|
641
|
-
let
|
|
642
|
-
if (t && t > 1 && (n !== null && n != 511 && o !== null ? o - n >= 3 ?
|
|
643
|
-
for (let
|
|
644
|
-
const c = speedCondition[
|
|
639
|
+
let i = "", r = null;
|
|
640
|
+
if (t && t > 1 && (n !== null && n != 511 && o !== null ? o - n >= 3 ? i = "left" : o - n <= -3 ? i = "right" : i = "front" : i = "front", i && t))
|
|
641
|
+
for (let l = 0; l < speedCondition.length; l++) {
|
|
642
|
+
const c = speedCondition[l];
|
|
645
643
|
if (t >= c[0] && t < c[1]) {
|
|
646
|
-
r = shipDirectPath[
|
|
644
|
+
r = shipDirectPath[i][l];
|
|
647
645
|
break;
|
|
648
646
|
}
|
|
649
647
|
}
|
|
@@ -656,14 +654,14 @@ let shipsMarkerList = [], shipsVectorSource, largeAmountShipsSource;
|
|
|
656
654
|
const selectedShipData = ref(null), selectedShips = ref([]);
|
|
657
655
|
let selectShipsVectorSource;
|
|
658
656
|
const renderShips = (e) => {
|
|
659
|
-
var n, o,
|
|
657
|
+
var n, o, i, r;
|
|
660
658
|
if (!mapInstance$6.value || showTrackLayer.value) return;
|
|
661
659
|
const t = Math.round(Number(mapInstance$6.value.getView().getZoom()));
|
|
662
660
|
if (selectedShipData.value && nextTick(() => {
|
|
663
661
|
selectSingleShipMarker(selectedShipData.value);
|
|
664
|
-
}).then((
|
|
662
|
+
}).then((l) => {
|
|
665
663
|
}), !(!t || t < mapZoom.shipGreenDotMax) && (allShips.value = [...e, ...selectedShips.value], !hiddenOrther.value))
|
|
666
|
-
return t >= mapZoom.shipGreenDotMax && t < mapZoom.shipModelMin ? ((n = shipsLayer.value) == null || n.setVisible(!1), (o = largeAmountShipsLayer.value) == null || o.setVisible(!0), renderLargeAmountShips(allShips.value)) : ((
|
|
664
|
+
return t >= mapZoom.shipGreenDotMax && t < mapZoom.shipModelMin ? ((n = shipsLayer.value) == null || n.setVisible(!1), (o = largeAmountShipsLayer.value) == null || o.setVisible(!0), renderLargeAmountShips(allShips.value)) : ((i = largeAmountShipsLayer.value) == null || i.setVisible(!1), (r = shipsLayer.value) == null || r.setVisible(!0), renderShipsMarker(allShips.value));
|
|
667
665
|
}, renderLargeAmountShips = (e) => {
|
|
668
666
|
if (!mapInstance$6.value) return;
|
|
669
667
|
const t = e.map((n) => ({
|
|
@@ -718,16 +716,16 @@ const renderShips = (e) => {
|
|
|
718
716
|
deleteAllShipMarkers();
|
|
719
717
|
let t = convertShipMapData(e);
|
|
720
718
|
if (t = customFilterShips(t), !!(t != null && t.length))
|
|
721
|
-
return t.forEach((o,
|
|
722
|
-
const r = [o.lon, o.lat],
|
|
719
|
+
return t.forEach((o, i) => {
|
|
720
|
+
const r = [o.lon, o.lat], l = new Feature({
|
|
723
721
|
geometry: new Point(fromLonLat(r))
|
|
724
722
|
}), c = 1;
|
|
725
|
-
|
|
723
|
+
l.set("clickGeometry", new Circle(fromLonLat(r), c)), l.set("data", o), l.set("index", i), l.setStyle(
|
|
726
724
|
setShipStyle(!1)
|
|
727
725
|
), shipsMarkerList.push({
|
|
728
726
|
ship: o,
|
|
729
727
|
lonlat: r,
|
|
730
|
-
feature:
|
|
728
|
+
feature: l
|
|
731
729
|
});
|
|
732
730
|
}), shipsVectorSource = new VectorSource({
|
|
733
731
|
features: shipsMarkerList.map((o) => o.feature)
|
|
@@ -739,26 +737,26 @@ const renderShips = (e) => {
|
|
|
739
737
|
var o;
|
|
740
738
|
let e = null, t = 0;
|
|
741
739
|
const n = 100;
|
|
742
|
-
(o = mapInstance$6.value) == null || o.on("pointermove", function(
|
|
743
|
-
var s, m;
|
|
740
|
+
(o = mapInstance$6.value) == null || o.on("pointermove", function(i) {
|
|
741
|
+
var s, m, d, u;
|
|
744
742
|
const r = Date.now();
|
|
745
743
|
if (r - t < n)
|
|
746
744
|
return;
|
|
747
745
|
t = r;
|
|
748
|
-
const
|
|
749
|
-
if (c && (c.style.cursor =
|
|
746
|
+
const l = (s = mapInstance$6.value) == null ? void 0 : s.forEachFeatureAtPixel(i.pixel, (f) => f), c = (m = mapInstance$6.value) == null ? void 0 : m.getTargetElement();
|
|
747
|
+
if (c && (c.style.cursor = l ? "pointer" : ""), e !== l) {
|
|
750
748
|
if (e) {
|
|
751
|
-
const
|
|
752
|
-
if (!(
|
|
749
|
+
const f = e.get("data");
|
|
750
|
+
if (!(f != null && f.mmsi)) return;
|
|
753
751
|
e.setStyle(
|
|
754
|
-
setShipStyle(
|
|
752
|
+
setShipStyle(((d = selectedShipData.value) == null ? void 0 : d.id) === f.id, !1)
|
|
755
753
|
);
|
|
756
754
|
}
|
|
757
|
-
if (
|
|
758
|
-
const
|
|
759
|
-
if (!(
|
|
760
|
-
e =
|
|
761
|
-
setShipStyle(
|
|
755
|
+
if (l) {
|
|
756
|
+
const f = l.get("data");
|
|
757
|
+
if (!(f != null && f.mmsi)) return;
|
|
758
|
+
e = l, l.setStyle(
|
|
759
|
+
setShipStyle(((u = selectedShipData.value) == null ? void 0 : u.id) === f.id, !0)
|
|
762
760
|
);
|
|
763
761
|
} else
|
|
764
762
|
e = null;
|
|
@@ -767,9 +765,9 @@ const renderShips = (e) => {
|
|
|
767
765
|
}, customFilterShips = (e) => {
|
|
768
766
|
let t = cloneDeep(e);
|
|
769
767
|
return t = t.filter((n) => {
|
|
770
|
-
var
|
|
771
|
-
const o = getFilterItem(n).every(({ btnShow: r, value:
|
|
772
|
-
return (switchBtnShow.value.camera || switchBtnShow.value.mobile || switchBtnShow.value.waterGauge) && ((
|
|
768
|
+
var i;
|
|
769
|
+
const o = getFilterItem(n).every(({ btnShow: r, value: l }) => r ? !!l : !0);
|
|
770
|
+
return (switchBtnShow.value.camera || switchBtnShow.value.mobile || switchBtnShow.value.waterGauge) && ((i = selectedShipData.value) == null ? void 0 : i.id) === n.id && clearSelectFeature(), o;
|
|
773
771
|
}), t;
|
|
774
772
|
}, getFilterItem = (e) => [
|
|
775
773
|
{ btnShow: switchBtnShow.value.camera, value: e == null ? void 0 : e.existDevice },
|
|
@@ -798,19 +796,19 @@ const renderShips = (e) => {
|
|
|
798
796
|
}), selectShipsLayer.value = new VectorLayer({
|
|
799
797
|
source: selectShipsVectorSource
|
|
800
798
|
}), shipsVectorSource && setVisibleFeatureById(shipsVectorSource, selectSingleShipData.value.id, !0);
|
|
801
|
-
const
|
|
802
|
-
return
|
|
799
|
+
const i = (r = shipsLayer.value) == null ? void 0 : r.getSource();
|
|
800
|
+
return i && (t && setVisibleFeatureById(i, t.id, !0), setVisibleFeatureById(i, selectSingleShipData.value.id, !1)), mapInstance$6.value.addLayer(selectShipsLayer.value), selectShipsLayer.value.setVisible(!0), selectShipsLayer.value;
|
|
803
801
|
}, setVisibleFeatureById = (e, t, n) => {
|
|
804
802
|
e && e.forEachFeature((o) => {
|
|
805
|
-
const
|
|
806
|
-
|
|
803
|
+
const i = o.get("data");
|
|
804
|
+
i && i.id === t && o.setStyle(n ? setShipStyle(!1, i.id) : setBlankStyle());
|
|
807
805
|
});
|
|
808
806
|
}, findShip = (e, t, n = !0) => {
|
|
809
|
-
var
|
|
807
|
+
var i, r, l, c, s;
|
|
810
808
|
if (!e || !mapInstance$6.value) return;
|
|
811
|
-
const o = (
|
|
812
|
-
var
|
|
813
|
-
return ((
|
|
809
|
+
const o = (l = (r = (i = shipsLayer.value) == null ? void 0 : i.getSource()) == null ? void 0 : r.getFeatures()) == null ? void 0 : l.find((m) => {
|
|
810
|
+
var d;
|
|
811
|
+
return ((d = m.get("data")) == null ? void 0 : d.id) === e;
|
|
814
812
|
});
|
|
815
813
|
if (o)
|
|
816
814
|
selectedShipData.value = o.get("data");
|
|
@@ -821,12 +819,12 @@ const renderShips = (e) => {
|
|
|
821
819
|
return;
|
|
822
820
|
}
|
|
823
821
|
if (selectedShips.value.some((m) => {
|
|
824
|
-
var
|
|
825
|
-
return m.id === ((
|
|
822
|
+
var d;
|
|
823
|
+
return m.id === ((d = selectedShipData.value) == null ? void 0 : d.id);
|
|
826
824
|
}) || selectedShips.value.push(selectedShipData.value), n && ((c = selectedShipData.value) != null && c.lon) && ((s = selectedShipData.value) != null && s.lat)) {
|
|
827
|
-
const m = mapInstance$6.value.getView(),
|
|
828
|
-
m.setCenter(transform(
|
|
829
|
-
const
|
|
825
|
+
const m = mapInstance$6.value.getView(), d = new Point([selectedShipData.value.lon, selectedShipData.value.lat]);
|
|
826
|
+
m.setCenter(transform(d.getCoordinates(), projection.data, projection.mercator));
|
|
827
|
+
const u = m.getZoom(), f = u < mapZoom.findShipMin ? mapZoom.findShip : u;
|
|
830
828
|
m.setZoom(f);
|
|
831
829
|
}
|
|
832
830
|
return setTimeout(() => {
|
|
@@ -856,92 +854,92 @@ const renderShips = (e) => {
|
|
|
856
854
|
switchBtnShow.value[e] = t, renderShips(allShips.value);
|
|
857
855
|
}, rerenderShip = () => {
|
|
858
856
|
renderShips(allShips.value);
|
|
859
|
-
}, labelAlpha = 0.8, pixelRatio = window.devicePixelRatio || 1, labelFont = `500 ${12 * pixelRatio}px Arial`, labelOutSize = 2 * pixelRatio, labelHeight = 10 * pixelRatio, fillRectRadius = (e, t, n, o,
|
|
860
|
-
e.beginPath(), e.moveTo(t +
|
|
857
|
+
}, labelAlpha = 0.8, pixelRatio = window.devicePixelRatio || 1, labelFont = `500 ${12 * pixelRatio}px Arial`, labelOutSize = 2 * pixelRatio, labelHeight = 10 * pixelRatio, fillRectRadius = (e, t, n, o, i, r, l = 4) => {
|
|
858
|
+
e.beginPath(), e.moveTo(t + l, n), e.arcTo(t + o, n, t + o, n + l, l), e.arcTo(t + o, n + i, t + o - l, n + i, l), e.arcTo(t, n + i, t, n + i - l, l), e.arcTo(t, n, t + l, n, l), e.closePath(), e.fillStyle = r, e.fill();
|
|
861
859
|
}, getPixelFromCoordinate = (e) => {
|
|
862
860
|
if (!e || e.length === 0)
|
|
863
861
|
throw new Error("Points array is empty or invalid.");
|
|
864
|
-
let t = 1 / 0, n = 1 / 0, o = -1 / 0,
|
|
865
|
-
for (const [r,
|
|
866
|
-
r < t && (t = r),
|
|
867
|
-
return [t, n, o,
|
|
862
|
+
let t = 1 / 0, n = 1 / 0, o = -1 / 0, i = -1 / 0;
|
|
863
|
+
for (const [r, l] of e)
|
|
864
|
+
r < t && (t = r), l < n && (n = l), r > o && (o = r), l > i && (i = l);
|
|
865
|
+
return [t, n, o, i];
|
|
868
866
|
}, calculatePolygonCentroid = (e) => {
|
|
869
867
|
if (!Array.isArray(e) || e.length < 3)
|
|
870
868
|
throw new Error("A polygon must have at least 3 coordinates.");
|
|
871
869
|
let t = 0, n = 0, o = 0;
|
|
872
|
-
const
|
|
873
|
-
for (let c = 0; c <
|
|
874
|
-
const [s, m] = e[c], [
|
|
875
|
-
o += f, t += (s +
|
|
870
|
+
const i = e.length;
|
|
871
|
+
for (let c = 0; c < i - 1; c++) {
|
|
872
|
+
const [s, m] = e[c], [d, u] = e[c + 1], f = s * u - d * m;
|
|
873
|
+
o += f, t += (s + d) * f, n += (m + u) * f;
|
|
876
874
|
}
|
|
877
875
|
if (o *= 0.5, o === 0)
|
|
878
876
|
throw new Error("多边形面积为零");
|
|
879
|
-
const r = t / (6 * o),
|
|
880
|
-
return [r,
|
|
877
|
+
const r = t / (6 * o), l = n / (6 * o);
|
|
878
|
+
return [r, l];
|
|
881
879
|
}, rotateShapeModel = (e, t) => {
|
|
882
|
-
const [n, o] = calculatePolygonCentroid(e),
|
|
880
|
+
const [n, o] = calculatePolygonCentroid(e), i = t * Math.PI / 180, r = Math.cos(i), l = Math.sin(i);
|
|
883
881
|
return e.map(([c, s]) => {
|
|
884
|
-
const m = c - n,
|
|
885
|
-
return [
|
|
882
|
+
const m = c - n, d = s - o, u = m * r - d * l + n, f = m * l + d * r + o;
|
|
883
|
+
return [u, f];
|
|
886
884
|
});
|
|
887
885
|
}, getTopLeftPoint = (e) => [e[0], e[3]], getBottomLeftPoint = (e) => [e[2], e[3]], getBottomRightPoint = (e) => [e[2], e[1]], getTopRighttPoint = (e) => [e[0], e[1]];
|
|
888
|
-
function calculateBounds(e, t, n, o,
|
|
889
|
-
let r,
|
|
890
|
-
const m = e[0],
|
|
886
|
+
function calculateBounds(e, t, n, o, i) {
|
|
887
|
+
let r, l, c, s;
|
|
888
|
+
const m = e[0], d = e[1];
|
|
891
889
|
switch (t) {
|
|
892
890
|
case 0:
|
|
893
|
-
r = m +
|
|
891
|
+
r = m + i, l = r + n, s = d - i, c = s - o;
|
|
894
892
|
break;
|
|
895
893
|
case 1:
|
|
896
|
-
r = m +
|
|
894
|
+
r = m + i, l = r + n, s = d + o / 2, c = s - o;
|
|
897
895
|
break;
|
|
898
896
|
case 2:
|
|
899
|
-
r = m +
|
|
897
|
+
r = m + i, l = r + n, s = d + i + o, c = s - o;
|
|
900
898
|
break;
|
|
901
899
|
case 3:
|
|
902
|
-
r = m - n / 2,
|
|
900
|
+
r = m - n / 2, l = r + n, s = d + i + o, c = s - o;
|
|
903
901
|
break;
|
|
904
902
|
case 4:
|
|
905
|
-
|
|
903
|
+
l = m, r = l - n, s = d + i + o, c = s - o;
|
|
906
904
|
break;
|
|
907
905
|
case 5:
|
|
908
|
-
|
|
906
|
+
l = m - i, r = l - n, s = d + o / 2, c = s - o;
|
|
909
907
|
break;
|
|
910
908
|
case 6:
|
|
911
|
-
|
|
909
|
+
l = m, r = l - n, s = d - i, c = s - o;
|
|
912
910
|
break;
|
|
913
911
|
case 7:
|
|
914
|
-
r = m - n / 2,
|
|
912
|
+
r = m - n / 2, l = r + n, s = d - i, c = s - o;
|
|
915
913
|
}
|
|
916
|
-
if (!(!r || !c || !
|
|
917
|
-
return [Math.min(r,
|
|
914
|
+
if (!(!r || !c || !l || !s))
|
|
915
|
+
return [Math.min(r, l), Math.min(c, s), Math.max(r, l), Math.max(c, s) + 1];
|
|
918
916
|
}
|
|
919
|
-
function calculateAnchorPoint(e, t, n = 70, o = 20,
|
|
917
|
+
function calculateAnchorPoint(e, t, n = 70, o = 20, i = 20) {
|
|
920
918
|
const r = [0, 0];
|
|
921
919
|
switch (t) {
|
|
922
920
|
case 0:
|
|
923
|
-
r[0] = e[0] +
|
|
921
|
+
r[0] = e[0] + i, r[1] = e[1] - i - o / 2;
|
|
924
922
|
break;
|
|
925
923
|
case 1:
|
|
926
|
-
r[0] = e[0] +
|
|
924
|
+
r[0] = e[0] + i, r[1] = e[1];
|
|
927
925
|
break;
|
|
928
926
|
case 2:
|
|
929
|
-
r[0] = e[0] +
|
|
927
|
+
r[0] = e[0] + i, r[1] = e[1] + i + o / 2;
|
|
930
928
|
break;
|
|
931
929
|
case 3:
|
|
932
|
-
r[0] = e[0], r[1] = e[1] +
|
|
930
|
+
r[0] = e[0], r[1] = e[1] + i + o / 4;
|
|
933
931
|
break;
|
|
934
932
|
case 4:
|
|
935
|
-
r[0] = Math.max(e[0] -
|
|
933
|
+
r[0] = Math.max(e[0] - i, e[0] - n / 2), r[1] = e[1] + i + o / 4;
|
|
936
934
|
break;
|
|
937
935
|
case 5:
|
|
938
|
-
r[0] = e[0] -
|
|
936
|
+
r[0] = e[0] - i, r[1] = e[1];
|
|
939
937
|
break;
|
|
940
938
|
case 6:
|
|
941
|
-
r[0] = Math.max(e[0] -
|
|
939
|
+
r[0] = Math.max(e[0] - i, e[0] - n / 2), r[1] = e[1] - i - o / 4;
|
|
942
940
|
break;
|
|
943
941
|
case 7:
|
|
944
|
-
r[0] = e[0], r[1] = e[1] -
|
|
942
|
+
r[0] = e[0], r[1] = e[1] - i - o / 4;
|
|
945
943
|
}
|
|
946
944
|
return r;
|
|
947
945
|
}
|
|
@@ -949,22 +947,22 @@ function drawLabelBody(e, t, n) {
|
|
|
949
947
|
if (!e) return;
|
|
950
948
|
const {
|
|
951
949
|
font: o,
|
|
952
|
-
labelOutSize:
|
|
950
|
+
labelOutSize: i = 2,
|
|
953
951
|
labelHeight: r,
|
|
954
|
-
center:
|
|
952
|
+
center: l,
|
|
955
953
|
text: c,
|
|
956
954
|
leftIcon: s,
|
|
957
955
|
shipColor: m,
|
|
958
|
-
lineLength:
|
|
959
|
-
selected:
|
|
956
|
+
lineLength: d = 20,
|
|
957
|
+
selected: u
|
|
960
958
|
} = n;
|
|
961
959
|
e.save(), o && (e.font = o);
|
|
962
|
-
let f = e.measureText(c).width + 4 *
|
|
963
|
-
(s || m) && (f += r + 6 *
|
|
964
|
-
let p, y = 20, h = -1, g = r + 3 *
|
|
965
|
-
if (
|
|
960
|
+
let f = e.measureText(c).width + 4 * i;
|
|
961
|
+
(s || m) && (f += r + 6 * i), e.restore();
|
|
962
|
+
let p, y = 20, h = -1, g = r + 3 * i;
|
|
963
|
+
if (d)
|
|
966
964
|
for (let k = 0; k < 8; k++) {
|
|
967
|
-
p = calculateBounds(
|
|
965
|
+
p = calculateBounds(l, k, f, g, d);
|
|
968
966
|
let T = !1;
|
|
969
967
|
for (let I = 0; I < t.length; ++I) {
|
|
970
968
|
let x = t[I].bounds, F = [
|
|
@@ -984,12 +982,12 @@ function drawLabelBody(e, t, n) {
|
|
|
984
982
|
}
|
|
985
983
|
}
|
|
986
984
|
else
|
|
987
|
-
h = 0, p = calculateBounds(
|
|
988
|
-
if (
|
|
985
|
+
h = 0, p = calculateBounds(l, h, f, g, d);
|
|
986
|
+
if (u && h === -1 && (h = 0), p && h > -1) {
|
|
989
987
|
let k = getBottomLeftPoint(p), T = getTopRighttPoint(p);
|
|
990
988
|
return {
|
|
991
|
-
center:
|
|
992
|
-
x: calculateAnchorPoint(
|
|
989
|
+
center: l,
|
|
990
|
+
x: calculateAnchorPoint(l, h, f, g, d),
|
|
993
991
|
l: T,
|
|
994
992
|
r: k,
|
|
995
993
|
bounds: p,
|
|
@@ -1001,59 +999,59 @@ function drawLabelBody(e, t, n) {
|
|
|
1001
999
|
}
|
|
1002
1000
|
const drawText = (e, t) => {
|
|
1003
1001
|
if (!e) return;
|
|
1004
|
-
const { center: n, text: o, textColor:
|
|
1002
|
+
const { center: n, text: o, textColor: i, leftIcon: r, rightIcons: l, font: c } = t;
|
|
1005
1003
|
e.save(), e.setTransform(1, 0, 0, 1, 0, 0);
|
|
1006
1004
|
let [s, m] = n;
|
|
1007
1005
|
if (r) {
|
|
1008
1006
|
e.font = `${18 * pixelRatio}px map-iconfont`;
|
|
1009
|
-
let
|
|
1010
|
-
e.fillStyle = r.color, e.fillText(
|
|
1007
|
+
let d = getIconFont(r.icon);
|
|
1008
|
+
e.fillStyle = r.color, e.fillText(d, s + labelOutSize - 3 * pixelRatio, m + 2.6 * pixelRatio), s += 23 * pixelRatio;
|
|
1011
1009
|
}
|
|
1012
|
-
if (
|
|
1010
|
+
if (l != null && l.length) {
|
|
1013
1011
|
e.font = `${12 * pixelRatio}px map-iconfont`, e.fillStyle = "#3370ff";
|
|
1014
|
-
const
|
|
1015
|
-
|
|
1016
|
-
const p = getIconFont(
|
|
1017
|
-
e.fillText(p, s +
|
|
1012
|
+
const d = e.measureText(o).width + 6 * pixelRatio;
|
|
1013
|
+
l.forEach((u, f) => {
|
|
1014
|
+
const p = getIconFont(u), y = 20 * pixelRatio * f;
|
|
1015
|
+
e.fillText(p, s + d + y, m);
|
|
1018
1016
|
});
|
|
1019
1017
|
}
|
|
1020
|
-
e.font = c || labelFont, e.fillStyle =
|
|
1018
|
+
e.font = c || labelFont, e.fillStyle = i, e.fillText(o, s + 2, m), e.restore();
|
|
1021
1019
|
}, drawPolygon = (e, t) => {
|
|
1022
1020
|
let {
|
|
1023
1021
|
points: n,
|
|
1024
1022
|
strokeColor: o,
|
|
1025
|
-
fillColor:
|
|
1023
|
+
fillColor: i,
|
|
1026
1024
|
shouldClosePath: r,
|
|
1027
|
-
translation:
|
|
1025
|
+
translation: l,
|
|
1028
1026
|
rotation: c,
|
|
1029
1027
|
rotationCenter: s,
|
|
1030
1028
|
scale: m,
|
|
1031
|
-
globalAlpha:
|
|
1029
|
+
globalAlpha: d
|
|
1032
1030
|
} = t;
|
|
1033
|
-
if (
|
|
1034
|
-
e.save(), e.beginPath(), c && c !== 0 && s == null && e.rotate(c),
|
|
1035
|
-
for (let
|
|
1036
|
-
e.lineTo(n[
|
|
1037
|
-
r && e.closePath(), o && (e.strokeStyle = o, e.stroke()),
|
|
1031
|
+
if (d || (d = 1), n && e) {
|
|
1032
|
+
e.save(), e.beginPath(), c && c !== 0 && s == null && e.rotate(c), l && e.translate(l[0], l[1]), c && (s != null && s.length) && e.rotate(c), m && e.scale(m, m), e.moveTo(n[0][0], n[0][1]);
|
|
1033
|
+
for (let u = 1; u < n.length; u++)
|
|
1034
|
+
e.lineTo(n[u][0], n[u][1]);
|
|
1035
|
+
r && e.closePath(), o && (e.strokeStyle = o, e.stroke()), i && r && (d && (e.globalAlpha = d), e.fillStyle = i, e.fill()), e.restore();
|
|
1038
1036
|
}
|
|
1039
1037
|
}, intervalIds = {}, drawLabel = (e, t, n) => {
|
|
1040
|
-
var
|
|
1041
|
-
let { center: o, text:
|
|
1042
|
-
if (o &&
|
|
1038
|
+
var u, f, p, y, h, g, k;
|
|
1039
|
+
let { center: o, text: i, color: r, textColor: l, bgColor: c, leftIcon: s, rightIcons: m, type: d } = t;
|
|
1040
|
+
if (o && i) {
|
|
1043
1041
|
const T = {
|
|
1044
1042
|
font: labelFont,
|
|
1045
1043
|
labelOutSize,
|
|
1046
1044
|
labelHeight,
|
|
1047
1045
|
center: o,
|
|
1048
|
-
text:
|
|
1046
|
+
text: i,
|
|
1049
1047
|
leftIcon: s,
|
|
1050
1048
|
selected: t.selected
|
|
1051
1049
|
};
|
|
1052
|
-
(
|
|
1050
|
+
(u = t.blinkColors) != null && u.length && t.fill && (c = t.fill, l = getForegroundColor(t.fill));
|
|
1053
1051
|
const I = drawLabelBody(e, n, T);
|
|
1054
1052
|
if (I) {
|
|
1055
1053
|
const { x, bounds: F, l: P } = I, v = [getTopLeftPoint(F), getBottomLeftPoint(F), getBottomRightPoint(F), getTopRighttPoint(F)];
|
|
1056
|
-
n.find((E) => E.name ===
|
|
1054
|
+
n.find((E) => E.name === i) || n.push(I), drawPolygon(e, {
|
|
1057
1055
|
points: [o, x],
|
|
1058
1056
|
strokeColor: r,
|
|
1059
1057
|
fillColor: "#000",
|
|
@@ -1064,7 +1062,7 @@ const drawText = (e, t) => {
|
|
|
1064
1062
|
scale: void 0,
|
|
1065
1063
|
globalAlpha: labelAlpha
|
|
1066
1064
|
}), m != null && m.length && m.forEach((E, V) => {
|
|
1067
|
-
v[1][0] +=
|
|
1065
|
+
v[1][0] += 28 + V * pixelRatio, v[2][0] += 28 + V * pixelRatio;
|
|
1068
1066
|
});
|
|
1069
1067
|
const w = {
|
|
1070
1068
|
points: v,
|
|
@@ -1073,8 +1071,8 @@ const drawText = (e, t) => {
|
|
|
1073
1071
|
shouldClosePath: !0
|
|
1074
1072
|
}, [S, M] = P, C = {
|
|
1075
1073
|
center: [S, M + labelOutSize + labelHeight + 1],
|
|
1076
|
-
text:
|
|
1077
|
-
textColor:
|
|
1074
|
+
text: i,
|
|
1075
|
+
textColor: l,
|
|
1078
1076
|
leftIcon: s,
|
|
1079
1077
|
rightIcons: m,
|
|
1080
1078
|
blinkColors: t.blinkColors
|
|
@@ -1088,7 +1086,7 @@ const drawText = (e, t) => {
|
|
|
1088
1086
|
}) || (k = (g = (h = shipsLayer.value) == null ? void 0 : h.getSource()) == null ? void 0 : g.getFeatures()) != null && k.find(($) => {
|
|
1089
1087
|
var R;
|
|
1090
1088
|
return ((R = $.get("data")) == null ? void 0 : R.id) === t.id;
|
|
1091
|
-
})) || hiddenOrther.value ? (clearInterval(intervalIds[t.id]), deleteLabelFromArray(n,
|
|
1089
|
+
})) || hiddenOrther.value ? (clearInterval(intervalIds[t.id]), deleteLabelFromArray(n, i)) : (intervalIds[t.id] && clearInterval(intervalIds[t.id]), intervalIds[t.id] = window.setInterval(() => {
|
|
1092
1090
|
var D, G, _;
|
|
1093
1091
|
const $ = Date.now();
|
|
1094
1092
|
$ - E >= 500 && (V = (V + 1) % N.length, E = $, w.fillColor = N[V], drawPolygon(e, w), C.textColor = getForegroundColor(w.fillColor), drawText(e, C));
|
|
@@ -1099,10 +1097,10 @@ const drawText = (e, t) => {
|
|
|
1099
1097
|
const B = O.get("data");
|
|
1100
1098
|
return (B == null ? void 0 : B.id) === t.id;
|
|
1101
1099
|
});
|
|
1102
|
-
!R && !Z && (clearInterval(intervalIds[t.id]), deleteLabelFromArray(n,
|
|
1100
|
+
!R && !Z && (clearInterval(intervalIds[t.id]), deleteLabelFromArray(n, i));
|
|
1103
1101
|
}, 10));
|
|
1104
1102
|
} else
|
|
1105
|
-
shipLabels.value.find((V) => V.name ===
|
|
1103
|
+
shipLabels.value.find((V) => V.name === i) && (clearInterval(intervalIds[t.id]), drawPolygon(e, w), drawText(e, C));
|
|
1106
1104
|
}
|
|
1107
1105
|
}
|
|
1108
1106
|
return null;
|
|
@@ -1130,23 +1128,23 @@ function gcj02ToWgs84(e) {
|
|
|
1130
1128
|
if (outOfChina(t, n))
|
|
1131
1129
|
return `${t.toFixed(6)}, ${n.toFixed(6)}`;
|
|
1132
1130
|
{
|
|
1133
|
-
let o = transformLat(t - 105, n - 35),
|
|
1131
|
+
let o = transformLat(t - 105, n - 35), i = transformLng(t - 105, n - 35);
|
|
1134
1132
|
const r = n / 180 * PI;
|
|
1135
|
-
let
|
|
1136
|
-
|
|
1137
|
-
const c = Math.sqrt(
|
|
1138
|
-
o = o * 180 / (a * (1 - ee) / (
|
|
1139
|
-
const s = n + o, m = t +
|
|
1133
|
+
let l = Math.sin(r);
|
|
1134
|
+
l = 1 - ee * l * l;
|
|
1135
|
+
const c = Math.sqrt(l);
|
|
1136
|
+
o = o * 180 / (a * (1 - ee) / (l * c) * PI), i = i * 180 / (a / c * Math.cos(r) * PI);
|
|
1137
|
+
const s = n + o, m = t + i;
|
|
1140
1138
|
return `${(t * 2 - m).toFixed(6)}, ${(n * 2 - s).toFixed(6)}`;
|
|
1141
1139
|
}
|
|
1142
1140
|
}
|
|
1143
1141
|
function calculateCirclePoints(e, t) {
|
|
1144
|
-
const n = fromLonLat(e), o = t * 1e3,
|
|
1142
|
+
const n = fromLonLat(e), o = t * 1e3, i = [
|
|
1145
1143
|
n[0] - o,
|
|
1146
1144
|
n[1] - o,
|
|
1147
1145
|
n[0] + o,
|
|
1148
1146
|
n[1] + o
|
|
1149
|
-
], r = transformExtent(
|
|
1147
|
+
], r = transformExtent(i, projection.mercator, projection.data);
|
|
1150
1148
|
return {
|
|
1151
1149
|
leftTopPoint: { lng: r[0], lat: r[3] },
|
|
1152
1150
|
rightTopPoint: { lng: r[2], lat: r[3] },
|
|
@@ -1162,17 +1160,17 @@ function lonLatToMercator(e) {
|
|
|
1162
1160
|
}
|
|
1163
1161
|
function mercatorToLonLat(e, t = "lonlat") {
|
|
1164
1162
|
const n = { lon: 0, lat: 0 }, o = e[0] / equatorialCircumference * 180;
|
|
1165
|
-
let
|
|
1166
|
-
return
|
|
1163
|
+
let i = e[1] / equatorialCircumference * 180;
|
|
1164
|
+
return i = 180 / Math.PI * (2 * Math.atan(Math.exp(i * Math.PI / 180)) - Math.PI / 2), n.lon = o, n.lat = i, t === "lonlat" ? n : [o, i];
|
|
1167
1165
|
}
|
|
1168
1166
|
function calculateBoundingBox(e) {
|
|
1169
|
-
let t = 1 / 0, n = -1 / 0, o = 1 / 0,
|
|
1167
|
+
let t = 1 / 0, n = -1 / 0, o = 1 / 0, i = -1 / 0;
|
|
1170
1168
|
e.forEach((h) => {
|
|
1171
1169
|
const [g, k] = h;
|
|
1172
|
-
t = Math.min(t, k), n = Math.max(n, k), o = Math.min(o, g),
|
|
1170
|
+
t = Math.min(t, k), n = Math.max(n, k), o = Math.min(o, g), i = Math.max(i, g);
|
|
1173
1171
|
});
|
|
1174
|
-
const r =
|
|
1175
|
-
return [f, p,
|
|
1172
|
+
const r = i - o, l = n - t, c = Math.max(r, l), s = (o + i) / 2, m = (t + n) / 2, d = c / 2, u = s - d, f = s + d, p = m - d, y = m + d;
|
|
1173
|
+
return [f, p, u, y];
|
|
1176
1174
|
}
|
|
1177
1175
|
const transformUtils = {
|
|
1178
1176
|
gcj02ToWgs84,
|
|
@@ -1183,13 +1181,13 @@ const transformUtils = {
|
|
|
1183
1181
|
}, mapInstance$5 = ref(), renderTrackStyleSetInstance = (e) => mapInstance$5.value = e, stopIcon = "", stopColor = "#E31818", slowIcon = "", slowColor = "#1890FF", dropletsIcon = "", trackList$1 = ref([]);
|
|
1184
1182
|
let animationFeature;
|
|
1185
1183
|
const renderTrackLine = (e, t, n) => {
|
|
1186
|
-
var r,
|
|
1184
|
+
var r, l, c;
|
|
1187
1185
|
const o = e[t];
|
|
1188
1186
|
if (!o) return;
|
|
1189
1187
|
allTracks.value[t] = o, trackList$1.value = [], trackList$1.value = o.map((s, m) => (s.center = [s.lon, s.lat], s.centerPoint = transformUtils.lonLatToMercator(s.center), s.id = t, s.index = m, s.time = hooks(s.createdAt).format("YYYY-MM-DD HH:mm:ss"), s));
|
|
1190
|
-
const
|
|
1191
|
-
if (
|
|
1192
|
-
const s = new LineString(
|
|
1188
|
+
const i = trackList$1.value.map((s) => s.centerPoint);
|
|
1189
|
+
if (i.length >= 2) {
|
|
1190
|
+
const s = new LineString(i), m = new Feature({ geometry: s });
|
|
1193
1191
|
m.setStyle(
|
|
1194
1192
|
new Style({
|
|
1195
1193
|
stroke: new Stroke({
|
|
@@ -1197,13 +1195,13 @@ const renderTrackLine = (e, t, n) => {
|
|
|
1197
1195
|
width: 2
|
|
1198
1196
|
})
|
|
1199
1197
|
})
|
|
1200
|
-
), m.setId(t), m.set("type", "line"), (
|
|
1201
|
-
const
|
|
1202
|
-
|
|
1203
|
-
const
|
|
1198
|
+
), m.setId(t), m.set("type", "line"), (l = (r = shipTrackVectorLayer.value) == null ? void 0 : r.getSource()) == null || l.clear(), shipTrackLineFeatures.value = [];
|
|
1199
|
+
const d = shipTrackLineFeatures.value.findIndex((f) => f.getId() === t);
|
|
1200
|
+
d >= 0 ? shipTrackLineFeatures.value[d] = m : shipTrackLineFeatures.value.push(m);
|
|
1201
|
+
const u = createAnimatedIconFeature(n, i);
|
|
1204
1202
|
trackLineVectorSource.value = new VectorSource({
|
|
1205
1203
|
features: [...shipTrackLineFeatures.value]
|
|
1206
|
-
}), animationFeature =
|
|
1204
|
+
}), animationFeature = u, console.log(animationFeature), shipTrackVectorLayer.value = new VectorLayer({
|
|
1207
1205
|
source: trackLineVectorSource.value,
|
|
1208
1206
|
zIndex: 102
|
|
1209
1207
|
}), renderPoint(n), (c = mapInstance$5.value) == null || c.addLayer(shipTrackVectorLayer.value);
|
|
@@ -1240,25 +1238,25 @@ let polyline, linePath, startMarker, position, geoMarker, vectorLayer;
|
|
|
1240
1238
|
const trackAnimating = ref(!1);
|
|
1241
1239
|
let distance = 0, lastTime = Date.now(), moveFeatureHandler = null;
|
|
1242
1240
|
const moveFeature = (e, t) => {
|
|
1243
|
-
var
|
|
1244
|
-
const n = Number(50 * t), o = ((
|
|
1245
|
-
if (distance = (distance + n *
|
|
1241
|
+
var u, f, p;
|
|
1242
|
+
const n = Number(50 * t), o = ((u = e.frameState) == null ? void 0 : u.time) ?? Date.now(), i = o - lastTime;
|
|
1243
|
+
if (distance = (distance + n * i / 1e6) % 2, lastTime = o, distance >= 1) {
|
|
1246
1244
|
stopAnimation();
|
|
1247
1245
|
return;
|
|
1248
1246
|
}
|
|
1249
1247
|
const r = linePath.getCoordinateAt(
|
|
1250
1248
|
distance > 1 ? 2 - distance : distance
|
|
1251
|
-
),
|
|
1249
|
+
), l = linePath.getCoordinateAt(
|
|
1252
1250
|
distance > 1 ? distance - 0.01 : distance
|
|
1253
1251
|
), c = linePath.getCoordinateAt(
|
|
1254
1252
|
distance > 1 ? 2 - distance : distance + 0.01
|
|
1255
1253
|
), m = getRotation(
|
|
1256
|
-
transformUtils.mercatorToLonLat(
|
|
1254
|
+
transformUtils.mercatorToLonLat(l, "array"),
|
|
1257
1255
|
transformUtils.mercatorToLonLat(c, "array")
|
|
1258
1256
|
) * Math.PI / 180;
|
|
1259
1257
|
(f = geoMarkerStyle.getText()) == null || f.setRotation(m), position.setCoordinates(r);
|
|
1260
|
-
const
|
|
1261
|
-
|
|
1258
|
+
const d = getVectorContext(e);
|
|
1259
|
+
d.context_.save(), d.setStyle(geoMarkerStyle), d.drawGeometry(position), d.context_.restore(), (p = mapInstance$5.value) == null || p.render();
|
|
1262
1260
|
}, startAnimation = () => {
|
|
1263
1261
|
var e;
|
|
1264
1262
|
trackAnimating.value = !0, showTrackAnimatMarker.value = !0, lastTime = Date.now(), distance = 0, position = ((e = startMarker.getGeometry()) == null ? void 0 : e.clone()) || new Point([0, 0]), moveFeatureHandler && (vectorLayer == null || vectorLayer.on("postrender", moveFeatureHandler)), geoMarker == null || geoMarker.setGeometry(void 0);
|
|
@@ -1287,38 +1285,38 @@ const moveFeature = (e, t) => {
|
|
|
1287
1285
|
source: new VectorSource({
|
|
1288
1286
|
features: [geoMarker]
|
|
1289
1287
|
})
|
|
1290
|
-
}), (o = mapInstance$5.value) == null || o.addLayer(vectorLayer), moveFeatureHandler = (
|
|
1288
|
+
}), (o = mapInstance$5.value) == null || o.addLayer(vectorLayer), moveFeatureHandler = (i) => moveFeature(i, t), startAnimation();
|
|
1291
1289
|
}, renderPoint = (e) => {
|
|
1292
1290
|
if (!mapInstance$5.value) return;
|
|
1293
1291
|
const t = trackList$1.value || [];
|
|
1294
1292
|
if (!(t && t.length > 1)) return [];
|
|
1295
|
-
const n = { 16: 24, 17: 15, default: 4 }, o = [],
|
|
1296
|
-
for (let c = 0; c <
|
|
1293
|
+
const n = { 16: 24, 17: 15, default: 4 }, o = [], i = t.length;
|
|
1294
|
+
for (let c = 0; c < i; c++) {
|
|
1297
1295
|
t[c].index = c;
|
|
1298
1296
|
const s = mapInstance$5.value.getPixelFromCoordinate(t[c].centerPoint);
|
|
1299
1297
|
if (s) {
|
|
1300
1298
|
let m = s.concat(s);
|
|
1301
1299
|
m = adjustBounds(m, [20, 20]);
|
|
1302
|
-
const
|
|
1303
|
-
if (!
|
|
1304
|
-
if (
|
|
1305
|
-
const f = n[
|
|
1300
|
+
const d = mapInstance$5.value.getView().getZoom();
|
|
1301
|
+
if (!d) return;
|
|
1302
|
+
if (d > 15) {
|
|
1303
|
+
const f = n[d] || n.default;
|
|
1306
1304
|
m = adjustBounds(m, [f, f]);
|
|
1307
1305
|
}
|
|
1308
|
-
let
|
|
1306
|
+
let u = !0;
|
|
1309
1307
|
if (t[c].state !== "0") {
|
|
1310
1308
|
for (let f = 0; f < o.length; f++)
|
|
1311
1309
|
if (isOverlapping(m, o[f].bounds)) {
|
|
1312
|
-
|
|
1310
|
+
u = !1;
|
|
1313
1311
|
break;
|
|
1314
1312
|
}
|
|
1315
1313
|
}
|
|
1316
|
-
|
|
1314
|
+
u && (t[c].bounds = m, o.push(t[c]));
|
|
1317
1315
|
}
|
|
1318
1316
|
}
|
|
1319
|
-
const r = getIconStyle(stopIcon),
|
|
1317
|
+
const r = getIconStyle(stopIcon), l = getIconStyle(slowIcon);
|
|
1320
1318
|
o.forEach((c, s) => {
|
|
1321
|
-
var
|
|
1319
|
+
var u, f;
|
|
1322
1320
|
const m = new Feature({
|
|
1323
1321
|
geometry: new Point(c.centerPoint)
|
|
1324
1322
|
});
|
|
@@ -1339,12 +1337,12 @@ const moveFeature = (e, t) => {
|
|
|
1339
1337
|
})
|
|
1340
1338
|
})
|
|
1341
1339
|
]), trackLineVectorSource.value.addFeature(m);
|
|
1342
|
-
const
|
|
1340
|
+
const d = new Feature({
|
|
1343
1341
|
geometry: new Point(fromLonLat(c.center))
|
|
1344
1342
|
});
|
|
1345
|
-
if (
|
|
1343
|
+
if (d.set("type", "track_label"), d.set("track_label_index", s), d.setStyle(
|
|
1346
1344
|
setTrackLabelStyle(c, e)
|
|
1347
|
-
), trackLineVectorSource.value.addFeature(
|
|
1345
|
+
), trackLineVectorSource.value.addFeature(d), typeof c == "object" && c.hasOwnProperty("state")) {
|
|
1348
1346
|
const p = new Feature({
|
|
1349
1347
|
geometry: new Point(c.centerPoint)
|
|
1350
1348
|
});
|
|
@@ -1357,27 +1355,27 @@ const moveFeature = (e, t) => {
|
|
|
1357
1355
|
}),
|
|
1358
1356
|
zIndex: 99
|
|
1359
1357
|
}), h = [];
|
|
1360
|
-
Number(c.state) === 0 ? ((
|
|
1358
|
+
Number(c.state) === 0 ? ((u = y.getText()) == null || u.setFill(new Fill({ color: stopColor })), h.push(r)) : Number(c.state) === 1 && ((f = y.getText()) == null || f.setFill(new Fill({ color: slowColor })), h.push(l)), h.push(y), p.setStyle(h), trackLineVectorSource.value.addFeature(p);
|
|
1361
1359
|
}
|
|
1362
1360
|
}), renderArrow(o, e), renderIconPoint();
|
|
1363
1361
|
}, renderArrow = (e, t) => {
|
|
1364
1362
|
const n = e.length;
|
|
1365
1363
|
n || (e.push(trackList$1.value[0]), e.push(trackList$1.value[trackList$1.value.length - 1]));
|
|
1366
1364
|
for (let o = 0; o < n - 1; o++) {
|
|
1367
|
-
let
|
|
1368
|
-
const r = e[o],
|
|
1369
|
-
if (
|
|
1370
|
-
|
|
1365
|
+
let i;
|
|
1366
|
+
const r = e[o], l = (e[o + 1].index + r.index) / 2;
|
|
1367
|
+
if (l % 2 === 0)
|
|
1368
|
+
i = trackList$1.value[l].centerPoint;
|
|
1371
1369
|
else {
|
|
1372
|
-
const c = trackList$1.value[Math.floor(
|
|
1370
|
+
const c = trackList$1.value[Math.floor(l)], s = trackList$1.value[Math.ceil(l)];
|
|
1373
1371
|
if (c && s) {
|
|
1374
|
-
const [m,
|
|
1375
|
-
|
|
1372
|
+
const [m, d] = c.centerPoint, [u, f] = s.centerPoint;
|
|
1373
|
+
i = [(m + u) / 2, (d + f) / 2];
|
|
1376
1374
|
}
|
|
1377
1375
|
}
|
|
1378
|
-
if (
|
|
1376
|
+
if (i) {
|
|
1379
1377
|
const c = new Feature({
|
|
1380
|
-
geometry: new Point(
|
|
1378
|
+
geometry: new Point(i)
|
|
1381
1379
|
});
|
|
1382
1380
|
c.set("type", "track_arrow"), c.setStyle(
|
|
1383
1381
|
new Style({
|
|
@@ -1397,18 +1395,18 @@ const moveFeature = (e, t) => {
|
|
|
1397
1395
|
}
|
|
1398
1396
|
}, renderIconPoint = () => {
|
|
1399
1397
|
const e = "", t = "#fcdc3f", n = "#ff0000";
|
|
1400
|
-
(trackList$1.value.length < 2 ? [trackList$1.value[0]] : [trackList$1.value[0], trackList$1.value[trackList$1.value.length - 1]]).forEach((
|
|
1398
|
+
(trackList$1.value.length < 2 ? [trackList$1.value[0]] : [trackList$1.value[0], trackList$1.value[trackList$1.value.length - 1]]).forEach((i) => {
|
|
1401
1399
|
const r = new Feature({
|
|
1402
|
-
geometry: new Point(
|
|
1400
|
+
geometry: new Point(i.centerPoint)
|
|
1403
1401
|
});
|
|
1404
|
-
r.set("type", "track_begin"), r.set("data",
|
|
1405
|
-
const
|
|
1402
|
+
r.set("type", "track_begin"), r.set("data", i);
|
|
1403
|
+
const l = i.index === 0 && trackList$1.value.length >= 2 ? t : n;
|
|
1406
1404
|
r.setStyle(
|
|
1407
1405
|
new Style({
|
|
1408
1406
|
text: new Text({
|
|
1409
1407
|
font: "Normal 14px map-iconfont",
|
|
1410
1408
|
text: getIconFont(e),
|
|
1411
|
-
fill: new Fill({ color:
|
|
1409
|
+
fill: new Fill({ color: l })
|
|
1412
1410
|
}),
|
|
1413
1411
|
zIndex: 101
|
|
1414
1412
|
})
|
|
@@ -1416,7 +1414,7 @@ const moveFeature = (e, t) => {
|
|
|
1416
1414
|
});
|
|
1417
1415
|
}, setTrackLabelStyle = (e, t) => new Style({
|
|
1418
1416
|
renderer: (n, o) => {
|
|
1419
|
-
const
|
|
1417
|
+
const i = o.context, c = {
|
|
1420
1418
|
id: e.id || "",
|
|
1421
1419
|
center: n,
|
|
1422
1420
|
text: e.time,
|
|
@@ -1426,10 +1424,10 @@ const moveFeature = (e, t) => {
|
|
|
1426
1424
|
selected: !0,
|
|
1427
1425
|
type: "TrackTime"
|
|
1428
1426
|
};
|
|
1429
|
-
drawLabel(
|
|
1427
|
+
drawLabel(i, c, trackLabels.value);
|
|
1430
1428
|
}
|
|
1431
|
-
}), mapInstance$4 = ref(), renderCustomOverlaySetInstance = (e) => mapInstance$4.value = e, drawCustomContent = (e, t, n, o = "top-left",
|
|
1432
|
-
var
|
|
1429
|
+
}), mapInstance$4 = ref(), renderCustomOverlaySetInstance = (e) => mapInstance$4.value = e, drawCustomContent = (e, t, n, o = "top-left", i = !1) => {
|
|
1430
|
+
var d, u;
|
|
1433
1431
|
if (!t || !mapInstance$4.value) return;
|
|
1434
1432
|
document.querySelectorAll(".truck-custom-content").forEach((f) => {
|
|
1435
1433
|
var p;
|
|
@@ -1437,15 +1435,15 @@ const moveFeature = (e, t) => {
|
|
|
1437
1435
|
});
|
|
1438
1436
|
const r = document.createElement("div");
|
|
1439
1437
|
r.innerHTML = n;
|
|
1440
|
-
const
|
|
1438
|
+
const l = new Overlay({
|
|
1441
1439
|
element: r,
|
|
1442
1440
|
position: t,
|
|
1443
1441
|
// 初始位置
|
|
1444
1442
|
positioning: o,
|
|
1445
|
-
stopEvent:
|
|
1443
|
+
stopEvent: i
|
|
1446
1444
|
// 设置不阻拦事件
|
|
1447
1445
|
});
|
|
1448
|
-
if (
|
|
1446
|
+
if (i) {
|
|
1449
1447
|
let f = !1, p = [0, 0], y = [0, 0], h = 0, g = 0;
|
|
1450
1448
|
r.addEventListener("mousedown", function(k) {
|
|
1451
1449
|
var I;
|
|
@@ -1459,42 +1457,42 @@ const moveFeature = (e, t) => {
|
|
|
1459
1457
|
var T;
|
|
1460
1458
|
if (f) {
|
|
1461
1459
|
const I = (T = mapInstance$4.value) == null ? void 0 : T.getCoordinateFromPixel([k.clientX - y[0], k.clientY - y[1]]), x = I[0] - p[0], F = I[1] - p[1];
|
|
1462
|
-
|
|
1460
|
+
l.setPosition([p[0] + x, p[1] + F]);
|
|
1463
1461
|
}
|
|
1464
1462
|
}), document.addEventListener("mouseup", function() {
|
|
1465
1463
|
f = !1;
|
|
1466
1464
|
});
|
|
1467
1465
|
}
|
|
1468
|
-
(
|
|
1466
|
+
(d = mapInstance$4.value) == null || d.addOverlay(l);
|
|
1469
1467
|
const c = r.querySelector(".close-button");
|
|
1470
1468
|
c && c.addEventListener("click", () => {
|
|
1471
1469
|
var f, p;
|
|
1472
|
-
(f = mapInstance$4.value) == null || f.removeOverlay(
|
|
1470
|
+
(f = mapInstance$4.value) == null || f.removeOverlay(l), (p = r.parentNode) == null || p.removeChild(r);
|
|
1473
1471
|
});
|
|
1474
|
-
const s = JSON.parse(JSON.stringify(t)), m = (
|
|
1475
|
-
return
|
|
1472
|
+
const s = JSON.parse(JSON.stringify(t)), m = (u = mapInstance$4.value) == null ? void 0 : u.getCoordinateFromPixel(s);
|
|
1473
|
+
return l.setPosition(m), l;
|
|
1476
1474
|
}, mapInstance$3 = ref(), renderTrackSetInstance = (e) => mapInstance$3.value = e, showTracks = ref([]), trackList = ref([]);
|
|
1477
1475
|
ref(null);
|
|
1478
|
-
const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o,
|
|
1479
|
-
var
|
|
1480
|
-
if (console.log(
|
|
1476
|
+
const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, i = "ship") => {
|
|
1477
|
+
var d;
|
|
1478
|
+
if (console.log(i), nextTick(() => {
|
|
1481
1479
|
hiddenAllShips();
|
|
1482
|
-
}).then((
|
|
1480
|
+
}).then((u) => {
|
|
1483
1481
|
}), (t == null ? void 0 : t.length) < 2) {
|
|
1484
|
-
((
|
|
1482
|
+
((d = showTracks.value) == null ? void 0 : d.findIndex((u) => u.id === e)) < 0 && showTracks.value.push({ id: e, length: "" });
|
|
1485
1483
|
return;
|
|
1486
1484
|
}
|
|
1487
1485
|
const r = {};
|
|
1488
|
-
t.forEach((
|
|
1489
|
-
|
|
1486
|
+
t.forEach((u) => {
|
|
1487
|
+
u.state ? u.state = Number(u.state) : delete u.state;
|
|
1490
1488
|
}), trackId.value = e, r[e] = t, trackList.value = t;
|
|
1491
|
-
const
|
|
1492
|
-
(
|
|
1489
|
+
const l = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"], c = r[e].map(
|
|
1490
|
+
(u) => transform([u.lon, u.lat], projection.data, projection.mercator)
|
|
1493
1491
|
), s = new LineString(c), m = formatUtils.formatLength(s, o) || "--";
|
|
1494
1492
|
nextTick(() => {
|
|
1495
1493
|
var f, p;
|
|
1496
|
-
const
|
|
1497
|
-
|
|
1494
|
+
const u = (f = showTracks.value) == null ? void 0 : f.findIndex((y) => y.id === e);
|
|
1495
|
+
u < 0 ? showTracks.value.push({ id: e, length: m }) : showTracks.value[u].length = m, ++cursor.value, cursor.value > l.length && (cursor.value = 0), renderTrackLine(r, e, n), nextTick(() => {
|
|
1498
1496
|
resetTrackView(e);
|
|
1499
1497
|
}).then(() => {
|
|
1500
1498
|
}), (p = mapInstance$3.value) == null || p.on("moveend", () => {
|
|
@@ -1506,8 +1504,8 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1506
1504
|
var t;
|
|
1507
1505
|
const e = ref(null);
|
|
1508
1506
|
(t = mapInstance$3.value) == null || t.on("pointermove", (n) => {
|
|
1509
|
-
var
|
|
1510
|
-
e.value && ((
|
|
1507
|
+
var i, r, l, c;
|
|
1508
|
+
e.value && ((i = mapInstance$3.value) == null || i.removeOverlay(e.value));
|
|
1511
1509
|
const o = (r = mapInstance$3.value) == null ? void 0 : r.forEachFeatureAtPixel(n.pixel, (s) => s);
|
|
1512
1510
|
if (o) {
|
|
1513
1511
|
const s = o.get("data");
|
|
@@ -1519,7 +1517,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1519
1517
|
<div class="item-item">${formatMinutesToDDHHMM(Number(s.stayTime))}</div>
|
|
1520
1518
|
</div>
|
|
1521
1519
|
`);
|
|
1522
|
-
const
|
|
1520
|
+
const d = `
|
|
1523
1521
|
<div class="track-point-popup">
|
|
1524
1522
|
<div class="item">
|
|
1525
1523
|
<div class="item-label">状态</div>
|
|
@@ -1550,9 +1548,9 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1550
1548
|
<div class="item-item">${s.time}</div>
|
|
1551
1549
|
</div>
|
|
1552
1550
|
${m ?? m}
|
|
1553
|
-
</div>`,
|
|
1554
|
-
if (
|
|
1555
|
-
const f = drawCustomContent(s.time,
|
|
1551
|
+
</div>`, u = (l = mapInstance$3.value) == null ? void 0 : l.getPixelFromCoordinate(n.coordinate);
|
|
1552
|
+
if (u) {
|
|
1553
|
+
const f = drawCustomContent(s.time, u, d, "top-left");
|
|
1556
1554
|
f && (e.value = f);
|
|
1557
1555
|
}
|
|
1558
1556
|
} else
|
|
@@ -1564,10 +1562,10 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1564
1562
|
}, playTrack = (e, t) => {
|
|
1565
1563
|
handlePlay(String(e), t);
|
|
1566
1564
|
}, resetTrackView = (e) => {
|
|
1567
|
-
var
|
|
1565
|
+
var i;
|
|
1568
1566
|
const t = mapInstance$3.value.getView(), n = e ? shipTrackLineFeatures.value.find((r) => r.getId() === e) : shipTrackLineFeatures.value[0];
|
|
1569
1567
|
if (!n) return;
|
|
1570
|
-
const o = (
|
|
1568
|
+
const o = (i = n == null ? void 0 : n.getGeometry()) == null ? void 0 : i.getExtent();
|
|
1571
1569
|
if (o != null && o.length)
|
|
1572
1570
|
try {
|
|
1573
1571
|
const r = buffer(o, Math.max(o[2] - o[0], o[3] - o[1]) * 0.02);
|
|
@@ -1576,8 +1574,8 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1576
1574
|
console.log(r);
|
|
1577
1575
|
}
|
|
1578
1576
|
}, formatMinutesToDDHHMM = (e) => {
|
|
1579
|
-
const t = hooks.duration(e, "minutes"), n = Math.floor(t.asDays()), o = t.hours(),
|
|
1580
|
-
let r = `${String(
|
|
1577
|
+
const t = hooks.duration(e, "minutes"), n = Math.floor(t.asDays()), o = t.hours(), i = t.minutes();
|
|
1578
|
+
let r = `${String(i).padStart(2, "0")}分`;
|
|
1581
1579
|
return o !== 0 && (r = `${String(o).padStart(2, "0")}时${r}`), n !== 0 && (r = `${String(n).padStart(2, "0")}天${r}`), r;
|
|
1582
1580
|
}, _hoisted_1$3 = {
|
|
1583
1581
|
key: 0,
|
|
@@ -1594,16 +1592,16 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1594
1592
|
emits: ["switchGreenDot", "switchMapTile"],
|
|
1595
1593
|
setup(e, { emit: t }) {
|
|
1596
1594
|
var p, y;
|
|
1597
|
-
const n = inject("mapInstance"), o = e,
|
|
1598
|
-
o.disableGreenDot || r.value >= mapZoom.shipGreenDotMax || (s.value = !s.value,
|
|
1599
|
-
}, u = () => {
|
|
1600
|
-
l("switchMapTile", o.mapTileMode === BaseMapType.vector ? BaseMapType.satellite : BaseMapType.vector);
|
|
1595
|
+
const n = inject("mapInstance"), o = e, i = t, r = ref(((y = (p = n == null ? void 0 : n.value) == null ? void 0 : p.getView()) == null ? void 0 : y.getZoom()) || mapZoom.default), l = ref(!1), c = ref(null), s = ref(!0), m = () => {
|
|
1596
|
+
o.disableGreenDot || r.value >= mapZoom.shipGreenDotMax || (s.value = !s.value, i("switchGreenDot", s.value));
|
|
1601
1597
|
}, d = () => {
|
|
1598
|
+
i("switchMapTile", o.mapTileMode === BaseMapType.vector ? BaseMapType.satellite : BaseMapType.vector);
|
|
1599
|
+
}, u = () => {
|
|
1602
1600
|
var h, g;
|
|
1603
|
-
|
|
1601
|
+
l.value ? (showMeasure.value = !1, (h = c.value) == null || h.removeInteraction()) : (showMeasure.value = !0, (g = c.value) == null || g.addInteraction()), l.value = !l.value;
|
|
1604
1602
|
}, f = () => {
|
|
1605
1603
|
var h;
|
|
1606
|
-
(h = c.value) == null || h.removeInteraction(),
|
|
1604
|
+
(h = c.value) == null || h.removeInteraction(), l.value = !1;
|
|
1607
1605
|
};
|
|
1608
1606
|
return onMounted(() => {
|
|
1609
1607
|
nextTick(() => {
|
|
@@ -1622,8 +1620,8 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1622
1620
|
createElementVNode("div", _hoisted_2$1, [
|
|
1623
1621
|
h.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
|
|
1624
1622
|
key: 0,
|
|
1625
|
-
class: normalizeClass(["switch-btn", `${
|
|
1626
|
-
onClick:
|
|
1623
|
+
class: normalizeClass(["switch-btn", `${l.value && "active"}`]),
|
|
1624
|
+
onClick: u
|
|
1627
1625
|
}, g[5] || (g[5] = [
|
|
1628
1626
|
createElementVNode("i", { class: "map-iconfont icon-measure" }, null, -1),
|
|
1629
1627
|
createElementVNode("div", { class: "button-text" }, "测距", -1)
|
|
@@ -1639,7 +1637,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1639
1637
|
h.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
|
|
1640
1638
|
key: 2,
|
|
1641
1639
|
class: normalizeClass(`switch-btn ${h.mapTileMode === unref(BaseMapType).satellite && "active"}`),
|
|
1642
|
-
onClick: g[0] || (g[0] = (k) =>
|
|
1640
|
+
onClick: g[0] || (g[0] = (k) => d())
|
|
1643
1641
|
}, g[7] || (g[7] = [
|
|
1644
1642
|
createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
|
|
1645
1643
|
createElementVNode("div", { class: "button-text" }, "图层", -1)
|
|
@@ -1647,7 +1645,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1647
1645
|
h.vehicleMode === "truck" ? (openBlock(), createElementBlock("div", {
|
|
1648
1646
|
key: 3,
|
|
1649
1647
|
class: normalizeClass(`switch-btn ${h.mapTileMode === unref(BaseMapType).satellite && "active"}`),
|
|
1650
|
-
onClick: g[1] || (g[1] = (k) =>
|
|
1648
|
+
onClick: g[1] || (g[1] = (k) => d())
|
|
1651
1649
|
}, g[8] || (g[8] = [
|
|
1652
1650
|
createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
|
|
1653
1651
|
createElementVNode("div", { class: "button-text" }, "卫星", -1)
|
|
@@ -1673,8 +1671,8 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1673
1671
|
])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
1674
1672
|
h.vehicleMode === "ship" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
1675
1673
|
createElementVNode("div", {
|
|
1676
|
-
class: normalizeClass(["switch-btn", `${
|
|
1677
|
-
onClick:
|
|
1674
|
+
class: normalizeClass(["switch-btn", `${l.value && "active"}`]),
|
|
1675
|
+
onClick: u
|
|
1678
1676
|
}, g[11] || (g[11] = [
|
|
1679
1677
|
createElementVNode("i", { class: "map-iconfont icon-measure" }, null, -1),
|
|
1680
1678
|
createElementVNode("div", { class: "button-text" }, "测距", -1)
|
|
@@ -1690,7 +1688,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1690
1688
|
], 64)) : createCommentVNode("", !0),
|
|
1691
1689
|
createElementVNode("div", {
|
|
1692
1690
|
class: normalizeClass(["switch-btn", { active: h.mapTileMode === unref(BaseMapType).satellite }]),
|
|
1693
|
-
onClick:
|
|
1691
|
+
onClick: d
|
|
1694
1692
|
}, g[13] || (g[13] = [
|
|
1695
1693
|
createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
|
|
1696
1694
|
createElementVNode("div", { class: "button-text" }, "卫星", -1)
|
|
@@ -1698,12 +1696,12 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1698
1696
|
], 64))
|
|
1699
1697
|
], 2),
|
|
1700
1698
|
createElementVNode("div", _hoisted_3, [
|
|
1701
|
-
|
|
1699
|
+
l.value ? (openBlock(), createBlock(Measure, {
|
|
1702
1700
|
key: 0,
|
|
1703
1701
|
ref_key: "measureRef",
|
|
1704
1702
|
ref: c,
|
|
1705
|
-
visible:
|
|
1706
|
-
"onUpdate:visible": g[4] || (g[4] = (k) =>
|
|
1703
|
+
visible: l.value,
|
|
1704
|
+
"onUpdate:visible": g[4] || (g[4] = (k) => l.value = k),
|
|
1707
1705
|
onClose: f,
|
|
1708
1706
|
"view-mode": h.viewMode
|
|
1709
1707
|
}, null, 8, ["visible", "view-mode"])) : createCommentVNode("", !0)
|
|
@@ -1715,15 +1713,15 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1715
1713
|
setup(e, { expose: t }) {
|
|
1716
1714
|
const n = inject("mapInstance");
|
|
1717
1715
|
return t({
|
|
1718
|
-
setScaleLine: (
|
|
1716
|
+
setScaleLine: (i) => {
|
|
1719
1717
|
var c;
|
|
1720
|
-
|
|
1718
|
+
i || (i = "metric");
|
|
1721
1719
|
const r = new ScaleLine$1({
|
|
1722
|
-
units:
|
|
1723
|
-
}),
|
|
1724
|
-
|
|
1720
|
+
units: i
|
|
1721
|
+
}), l = document.getElementById("scale-line-container");
|
|
1722
|
+
l && (r.setTarget(l), (c = n == null ? void 0 : n.value) == null || c.addControl(r));
|
|
1725
1723
|
}
|
|
1726
|
-
}), (
|
|
1724
|
+
}), (i, r) => (openBlock(), createElementBlock("div", _hoisted_1$2));
|
|
1727
1725
|
}
|
|
1728
1726
|
}), ScaleLine = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-d666f80d"]]), _hoisted_1$1 = { class: "zoom" }, _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
1729
1727
|
__name: "zoomControl",
|
|
@@ -1735,14 +1733,14 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1735
1733
|
setup(e) {
|
|
1736
1734
|
const t = inject("mapInstance"), n = () => {
|
|
1737
1735
|
if (!t.value) return;
|
|
1738
|
-
const
|
|
1739
|
-
r &&
|
|
1736
|
+
const i = t.value.getView(), r = i.getZoom();
|
|
1737
|
+
r && i.setZoom(r + 1);
|
|
1740
1738
|
}, o = () => {
|
|
1741
1739
|
if (!t.value) return;
|
|
1742
|
-
const
|
|
1743
|
-
r &&
|
|
1740
|
+
const i = t.value.getView(), r = i.getZoom();
|
|
1741
|
+
r && i.setZoom(r - 1);
|
|
1744
1742
|
};
|
|
1745
|
-
return (
|
|
1743
|
+
return (i, r) => (openBlock(), createElementBlock("div", _hoisted_1$1, [
|
|
1746
1744
|
createElementVNode("div", {
|
|
1747
1745
|
onClick: n,
|
|
1748
1746
|
class: "button big-button"
|
|
@@ -1760,10 +1758,10 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1760
1758
|
},
|
|
1761
1759
|
setup(e) {
|
|
1762
1760
|
useCssVars((r) => ({
|
|
1763
|
-
"4bfada56":
|
|
1761
|
+
"4bfada56": i.value
|
|
1764
1762
|
}));
|
|
1765
|
-
const t = e, n = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? "map/tdt-copyright-h.svg" : `map/tdt-copyright-v${mapTile === "satellite" ? "-w" : ""}.svg`), o = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? "400px" : "168px"),
|
|
1766
|
-
return (r,
|
|
1763
|
+
const t = e, n = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? "map/tdt-copyright-h.svg" : `map/tdt-copyright-v${mapTile === "satellite" ? "-w" : ""}.svg`), o = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? "400px" : "168px"), i = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? "auto auto 0 5px" : "0 auto auto 5px");
|
|
1764
|
+
return (r, l) => (openBlock(), createElementBlock("div", _hoisted_1, [
|
|
1767
1765
|
createElementVNode("img", {
|
|
1768
1766
|
src: unref(CDN_URL) + n.value,
|
|
1769
1767
|
width: o.value,
|
|
@@ -1785,30 +1783,30 @@ const loadImage = new Image();
|
|
|
1785
1783
|
loadImage.src = `${CDN_URL}/map/map-load.svg`;
|
|
1786
1784
|
loadImage.crossOrigin = "anonymous";
|
|
1787
1785
|
const setTruckStyle = (e, t, n, o) => new Style({
|
|
1788
|
-
renderer: (
|
|
1789
|
-
const
|
|
1790
|
-
|
|
1786
|
+
renderer: (i, r) => {
|
|
1787
|
+
const l = r.context;
|
|
1788
|
+
l.save();
|
|
1791
1789
|
let c = 1;
|
|
1792
|
-
|
|
1793
|
-
let [s, m] =
|
|
1790
|
+
l.scale(c, c);
|
|
1791
|
+
let [s, m] = i;
|
|
1794
1792
|
s = Number(s) / c - 20, m = Number(m) / c;
|
|
1795
|
-
const
|
|
1793
|
+
const d = s - 70, u = m - 68;
|
|
1796
1794
|
let f = 180;
|
|
1797
1795
|
const p = 56, y = "#FFFFFF";
|
|
1798
1796
|
let h = 176;
|
|
1799
1797
|
const g = 52;
|
|
1800
1798
|
let k = "#164AFF", T = "#FFFFFF";
|
|
1801
|
-
n === CAR_COLOR.YELLOW ? (h = 176, k = "#FFC81E", T = "rgba(0,0,0,0.88)") : n === CAR_COLOR.Y_GREEN && (f = 200, h = 196, k = "#8FED7C", T = "rgba(0,0,0,0.88)"), o != null && o.length && (f += o.length * 56), fillRectRadius(
|
|
1799
|
+
n === CAR_COLOR.YELLOW ? (h = 176, k = "#FFC81E", T = "rgba(0,0,0,0.88)") : n === CAR_COLOR.Y_GREEN && (f = 200, h = 196, k = "#8FED7C", T = "rgba(0,0,0,0.88)"), o != null && o.length && (f += o.length * 56), fillRectRadius(l, d, u, f, p, y), fillRectRadius(l, d + 2, u + 2, h, g, k), n === CAR_COLOR.Y_GREEN && fillRectRadius(l, d + 2, u + 2, 68, g, "#FFC81E"), l.save(), l.restore(), l.fillStyle = T, l.font = "bold 28px Arial", l.textAlign = "left", l.textBaseline = "middle";
|
|
1802
1800
|
const I = `${t.slice(0, 2) + " · " + t.slice(2)}`;
|
|
1803
|
-
if (
|
|
1804
|
-
const F =
|
|
1801
|
+
if (l.fillText(I, d + 12, u + 32), l.save(), l.restore(), o != null && o.length) {
|
|
1802
|
+
const F = l.measureText(I).width + 12;
|
|
1805
1803
|
let P = 0;
|
|
1806
1804
|
o.forEach((v) => {
|
|
1807
|
-
v === DEVICE_TYPE.CAMERA && (
|
|
1805
|
+
v === DEVICE_TYPE.CAMERA && (l.drawImage(cameraImage, s - 54 + F + P * 56, m - 64, 50, 50), ++P), v === DEVICE_TYPE.LOAD && (l.drawImage(loadImage, s - 54 + F + P * 56, m - 64, 50, 50), ++P);
|
|
1808
1806
|
});
|
|
1809
1807
|
}
|
|
1810
1808
|
const x = dotImage$1;
|
|
1811
|
-
|
|
1809
|
+
l.drawImage(x, s + f / 2 - 90, m, 50 / c, 50 / c), l.restore();
|
|
1812
1810
|
}
|
|
1813
1811
|
}), mapInstance$2 = ref(), renderDashboardSetInstance = (e) => mapInstance$2.value = e;
|
|
1814
1812
|
ref([]);
|
|
@@ -1839,8 +1837,8 @@ const renderTrucksMarker = (e) => {
|
|
|
1839
1837
|
if (!mapInstance$1.value || (focusShipData.value = e, !(e != null && e.lon && (e != null && e.lat)))) return;
|
|
1840
1838
|
const t = formatUtils.convertSixHundredThousandToLatLng(e.lon, e.lat), n = mapInstance$1.value.getPixelFromCoordinate(transform(t, projection.data, projection.mercator));
|
|
1841
1839
|
currentTruckOverlay.value = e ? drawTruckIcon(e.vno, n, (e == null ? void 0 : e.drc) ?? "") ?? null : null;
|
|
1842
|
-
const o = mapInstance$1.value.getView(),
|
|
1843
|
-
o.setCenter(transform(
|
|
1840
|
+
const o = mapInstance$1.value.getView(), i = new Point(t);
|
|
1841
|
+
o.setCenter(transform(i.getCoordinates(), projection.data, projection.mercator));
|
|
1844
1842
|
}, clearAllTruck = () => {
|
|
1845
1843
|
vehicle.value.clearAllShip();
|
|
1846
1844
|
}, drawTruckIcon = (e, t, n) => {
|
|
@@ -1856,12 +1854,12 @@ const renderTrucksMarker = (e) => {
|
|
|
1856
1854
|
var r;
|
|
1857
1855
|
if (!mapInstance$1.value) return;
|
|
1858
1856
|
const e = mapInstance$1.value.getView().getZoom(), t = 120, n = 60;
|
|
1859
|
-
function o(
|
|
1860
|
-
return
|
|
1857
|
+
function o(l) {
|
|
1858
|
+
return l < 14 ? n : l >= 14 && l <= 18 ? Math.round((l - 14) * (t - n) / 4 + n) : t;
|
|
1861
1859
|
}
|
|
1862
|
-
const
|
|
1863
|
-
(r = document.querySelectorAll(".truck-custom-content")) == null || r.forEach((
|
|
1864
|
-
|
|
1860
|
+
const i = o(e);
|
|
1861
|
+
(r = document.querySelectorAll(".truck-custom-content")) == null || r.forEach((l) => {
|
|
1862
|
+
l.style.width = `${i}px`, l.style.height = `${i}px`;
|
|
1865
1863
|
});
|
|
1866
1864
|
}, mapInstance = ref(), drawPolygonSetInstance = (e) => mapInstance.value = e;
|
|
1867
1865
|
let layerState = "drawn", drawnState = "undrawn";
|
|
@@ -1907,13 +1905,13 @@ function createHelpTooltip() {
|
|
|
1907
1905
|
}
|
|
1908
1906
|
let squareLimitError = !1, lineLimitError = !1;
|
|
1909
1907
|
const validateSquareLimit = (e) => {
|
|
1910
|
-
let n = 1 / 0, o = -1 / 0,
|
|
1908
|
+
let n = 1 / 0, o = -1 / 0, i = 1 / 0, r = -1 / 0;
|
|
1911
1909
|
e == null || e.forEach((s) => {
|
|
1912
|
-
const m = transform(s, projection.mercator, projection.data),
|
|
1913
|
-
n = Math.min(n,
|
|
1910
|
+
const m = transform(s, projection.mercator, projection.data), d = m[0], u = m[1];
|
|
1911
|
+
n = Math.min(n, u), o = Math.max(o, u), i = Math.min(i, d), r = Math.max(r, d);
|
|
1914
1912
|
});
|
|
1915
|
-
const
|
|
1916
|
-
squareLimitError =
|
|
1913
|
+
const l = (o - n) * 111, c = (r - i) * 111;
|
|
1914
|
+
squareLimitError = l > 150 || c > 150;
|
|
1917
1915
|
};
|
|
1918
1916
|
let storeFeature, callbackFunction = null;
|
|
1919
1917
|
const addInteraction = (e) => {
|
|
@@ -1925,29 +1923,29 @@ const addInteraction = (e) => {
|
|
|
1925
1923
|
style: [drawPolygonStyle.drawing, circleStyle]
|
|
1926
1924
|
}), (o = mapInstance.value) == null || o.addInteraction(draw), createMeasureTooltip(), createHelpTooltip();
|
|
1927
1925
|
let t;
|
|
1928
|
-
draw.on("drawstart", function(
|
|
1926
|
+
draw.on("drawstart", function(i) {
|
|
1929
1927
|
var r;
|
|
1930
|
-
layerState = "drawn", sketch =
|
|
1931
|
-
const c =
|
|
1932
|
-
if (lineLimitError = Number(getLength(
|
|
1928
|
+
layerState = "drawn", sketch = i.feature, t = (r = sketch.getGeometry()) == null ? void 0 : r.on("change", function(l) {
|
|
1929
|
+
const c = l.target, s = formatUtils.formatArea(c, LENGTH_UNIT.NM), d = c.getCoordinates()[0], u = new LineString([d[d.length - 2], d[d.length - 1]]), f = formatUtils.formatLength(u, LENGTH_UNIT.NM);
|
|
1930
|
+
if (lineLimitError = Number(getLength(u) / 1e3) > 150, validateSquareLimit(d), measureTooltipElement && s && (measureTooltipElement.innerHTML = `
|
|
1933
1931
|
<span class="text">面积:${s}${lineLimitError || squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
|
|
1934
1932
|
`), helpTooltipElement && s) {
|
|
1935
1933
|
let p = "";
|
|
1936
1934
|
parseFloat(s) > 0 && (p = `
|
|
1937
1935
|
<div class="text ${squareLimitError ? "error" : ""}">面积:${s}${squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</div>`), helpTooltipElement.innerHTML = `${p}
|
|
1938
|
-
<span class="text ${lineLimitError ? "error" : ""}">线段${
|
|
1936
|
+
<span class="text ${lineLimitError ? "error" : ""}">线段${d.length - 2}:${f}${lineLimitError ? '<span class="error pl-4">超出可以绘画的距离</span>' : ""}</span>
|
|
1939
1937
|
<div><span class="text">单击继续,双击结束</span></div>
|
|
1940
1938
|
`;
|
|
1941
1939
|
}
|
|
1942
1940
|
}), drawnState = "drawing";
|
|
1943
|
-
}), draw.on("drawend", function(
|
|
1944
|
-
if (
|
|
1945
|
-
storeFeature =
|
|
1946
|
-
const r = endFn(
|
|
1941
|
+
}), draw.on("drawend", function(i) {
|
|
1942
|
+
if (i.feature.getGeometry()) {
|
|
1943
|
+
storeFeature = i.feature;
|
|
1944
|
+
const r = endFn(i.feature);
|
|
1947
1945
|
r != null && r.length && callbackFunction && callbackFunction(r);
|
|
1948
1946
|
}
|
|
1949
1947
|
if (sketch = null, measureTooltipElement = null, createMeasureTooltip(), t && unByKey(t), drawnState = "drawend", draw && mapInstance.value) {
|
|
1950
|
-
const r = mapInstance.value.getInteractions().getArray().find((
|
|
1948
|
+
const r = mapInstance.value.getInteractions().getArray().find((l) => getUid(l) === getUid(draw));
|
|
1951
1949
|
r && mapInstance.value.removeInteraction(r), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement);
|
|
1952
1950
|
}
|
|
1953
1951
|
});
|
|
@@ -1955,10 +1953,10 @@ const addInteraction = (e) => {
|
|
|
1955
1953
|
var e, t, n;
|
|
1956
1954
|
if (mapInstance.value) {
|
|
1957
1955
|
if (document.querySelectorAll(".ol-tooltip.ol-tooltip-draw-polygon").forEach((o) => {
|
|
1958
|
-
var
|
|
1959
|
-
(
|
|
1956
|
+
var i;
|
|
1957
|
+
(i = o == null ? void 0 : o.parentNode) == null || i.removeChild(o);
|
|
1960
1958
|
}), source.clear(), (e = mapInstance.value) == null || e.removeLayer(drawVector), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement), ((t = mapInstance.value) == null ? void 0 : t.getTargetElement()).style.cursor = "", document.querySelector("#map").style.cursor = "", draw) {
|
|
1961
|
-
const o = mapInstance.value.getInteractions().getArray().find((
|
|
1959
|
+
const o = mapInstance.value.getInteractions().getArray().find((i) => getUid(i) === getUid(draw));
|
|
1962
1960
|
o && ((n = mapInstance.value) == null || n.removeInteraction(o));
|
|
1963
1961
|
}
|
|
1964
1962
|
drawnState = "undrawn", layerState = "destroyed";
|
|
@@ -1966,15 +1964,15 @@ const addInteraction = (e) => {
|
|
|
1966
1964
|
}, endFn = (e) => {
|
|
1967
1965
|
var t, n, o;
|
|
1968
1966
|
if (e.getGeometry()) {
|
|
1969
|
-
const
|
|
1970
|
-
(t =
|
|
1971
|
-
|
|
1967
|
+
const i = [], l = e.getGeometry().getCoordinates();
|
|
1968
|
+
(t = l[0]) == null || t.forEach((s) => {
|
|
1969
|
+
i.push(transform(s, projection.mercator, projection.data));
|
|
1972
1970
|
});
|
|
1973
|
-
const c =
|
|
1971
|
+
const c = l[0][l[0].length - 2];
|
|
1974
1972
|
if (c && measureTooltip.setPosition(c), measureTooltip.setOffset([10, 0]), measureTooltipElement && (measureTooltipElement.innerHTML += '<span class="delete-icon"><i class="map-iconfont icon-delete" /></div>'), (n = document.querySelector(".delete-icon")) == null || n.addEventListener("click", () => {
|
|
1975
1973
|
reset();
|
|
1976
1974
|
}), !lineLimitError && !squareLimitError)
|
|
1977
|
-
return
|
|
1975
|
+
return i;
|
|
1978
1976
|
draw && ((o = mapInstance.value) == null || o.removeInteraction(draw)), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement);
|
|
1979
1977
|
}
|
|
1980
1978
|
}, initFeature = (e) => {
|
|
@@ -1982,14 +1980,14 @@ const addInteraction = (e) => {
|
|
|
1982
1980
|
if (e && (callbackFunction = e), layerState = "drawn", storeFeature) {
|
|
1983
1981
|
const o = storeFeature.getGeometry();
|
|
1984
1982
|
if (!o) return;
|
|
1985
|
-
const
|
|
1983
|
+
const i = formatUtils.formatArea(o, LENGTH_UNIT.NM);
|
|
1986
1984
|
measureTooltipElement && (measureTooltipElement.innerHTML = `
|
|
1987
|
-
<span class="text">面积:${
|
|
1985
|
+
<span class="text">面积:${i}${lineLimitError || squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
|
|
1988
1986
|
`), (t = drawVector.getSource()) == null || t.addFeature(storeFeature);
|
|
1989
1987
|
const r = endFn(storeFeature);
|
|
1990
1988
|
r != null && r.length && callbackFunction && callbackFunction(r);
|
|
1991
|
-
const
|
|
1992
|
-
(n = mapInstance.value) == null || n.getView().setCenter(
|
|
1989
|
+
const l = getCenter(storeFeature.getGeometry().getExtent());
|
|
1990
|
+
(n = mapInstance.value) == null || n.getView().setCenter(l);
|
|
1993
1991
|
}
|
|
1994
1992
|
}, pointerMoveHandler = function(e) {
|
|
1995
1993
|
var n;
|
|
@@ -2030,18 +2028,18 @@ dotImage.crossOrigin = "anonymous";
|
|
|
2030
2028
|
const dotActiveImage = new Image();
|
|
2031
2029
|
dotActiveImage.crossOrigin = "anonymous";
|
|
2032
2030
|
const setPointStyle = (e, t, n) => {
|
|
2033
|
-
const { color: o, url:
|
|
2034
|
-
return (r ||
|
|
2031
|
+
const { color: o, url: i, activeUrl: r, activeColor: l } = n;
|
|
2032
|
+
return (r || i) && (e ? dotActiveImage.src = CDN_URL + (r || i) : dotImage.src = CDN_URL + (i || r)), new Style({
|
|
2035
2033
|
renderer: (c, s) => {
|
|
2036
2034
|
const m = s.context;
|
|
2037
2035
|
m.save();
|
|
2038
|
-
const
|
|
2039
|
-
let [
|
|
2040
|
-
|
|
2041
|
-
const p = m.measureText(t).width, y =
|
|
2042
|
-
if (fillRectRadius(m, y, h + 13 *
|
|
2036
|
+
const d = window.devicePixelRatio || 1;
|
|
2037
|
+
let [u, f] = c;
|
|
2038
|
+
u = Number(u), f = Number(f), m.font = `${12 * d}px Arial`;
|
|
2039
|
+
const p = m.measureText(t).width, y = u - p / 2 + (d === 1 ? -8 : 4 * d), h = f + 6 * d, g = p + 4, k = 16 * d, T = e && l || o;
|
|
2040
|
+
if (fillRectRadius(m, y, h + 13 * d, g, k, T), m.save(), m.restore(), m.fillStyle = e ? "#FFFFFF" : "#000000", m.textAlign = "center", m.textBaseline = "middle", m.fillText(t, y + (p + 4) / 2, h + 22 * d), m.save(), m.restore(), i || r) {
|
|
2043
2041
|
const I = e ? dotActiveImage : dotImage;
|
|
2044
|
-
m.drawImage(I,
|
|
2042
|
+
m.drawImage(I, u - I.width / 2, f - I.height / 2, 30 * d, 30 * d);
|
|
2045
2043
|
}
|
|
2046
2044
|
m.restore();
|
|
2047
2045
|
}
|
|
@@ -2087,7 +2085,7 @@ class PointMarkerClass {
|
|
|
2087
2085
|
let n = {};
|
|
2088
2086
|
t.forEach((o) => {
|
|
2089
2087
|
var r;
|
|
2090
|
-
const
|
|
2088
|
+
const i = [o.lon, o.lat];
|
|
2091
2089
|
if (((r = this.highlightPoint) == null ? void 0 : r.id) === o.id)
|
|
2092
2090
|
n = {
|
|
2093
2091
|
id: o.id,
|
|
@@ -2096,12 +2094,12 @@ class PointMarkerClass {
|
|
|
2096
2094
|
pointType: o.pointType
|
|
2097
2095
|
};
|
|
2098
2096
|
else {
|
|
2099
|
-
const
|
|
2097
|
+
const l = this.getFeature(o, i);
|
|
2100
2098
|
this.pointMarkerList.push({
|
|
2101
2099
|
id: o.id,
|
|
2102
2100
|
name: o.name,
|
|
2103
2101
|
lonlat: [Number(o.lon), Number(o.lat)],
|
|
2104
|
-
feature:
|
|
2102
|
+
feature: l,
|
|
2105
2103
|
pointType: o.pointType
|
|
2106
2104
|
});
|
|
2107
2105
|
}
|
|
@@ -2147,23 +2145,23 @@ class PointMarkerClass {
|
|
|
2147
2145
|
*/
|
|
2148
2146
|
highlightPointMarker(t) {
|
|
2149
2147
|
if (!this.mapInstance) return;
|
|
2150
|
-
const { id: n, name: o, fullName:
|
|
2148
|
+
const { id: n, name: o, fullName: i, lon: r, lat: l, pointType: c } = t, s = [Number(r), Number(l)];
|
|
2151
2149
|
this.highlightPoint = {
|
|
2152
2150
|
id: n,
|
|
2153
2151
|
name: o,
|
|
2154
|
-
fullName:
|
|
2152
|
+
fullName: i,
|
|
2155
2153
|
lonlat: s,
|
|
2156
2154
|
pointType: c
|
|
2157
2155
|
}, this.setPointCenter(s);
|
|
2158
2156
|
}
|
|
2159
2157
|
// 获取feature
|
|
2160
2158
|
getFeature(t, n) {
|
|
2161
|
-
var
|
|
2159
|
+
var i;
|
|
2162
2160
|
const o = new Feature({
|
|
2163
2161
|
geometry: new Point(fromLonLat(n))
|
|
2164
2162
|
});
|
|
2165
2163
|
return o.set("data", t), o.setStyle(
|
|
2166
|
-
setPointStyle(((
|
|
2164
|
+
setPointStyle(((i = this.highlightPoint) == null ? void 0 : i.id) === t.id, t.name, this.options)
|
|
2167
2165
|
), o;
|
|
2168
2166
|
}
|
|
2169
2167
|
/**
|
|
@@ -2176,8 +2174,8 @@ class PointMarkerClass {
|
|
|
2176
2174
|
*/
|
|
2177
2175
|
setPointCenter(t, n = { customZoom: mapZoom.findShip, type: 1 }) {
|
|
2178
2176
|
if (!this.mapInstance) return;
|
|
2179
|
-
const { customZoom: o = mapZoom.findShip, type:
|
|
2180
|
-
(
|
|
2177
|
+
const { customZoom: o = mapZoom.findShip, type: i = 1 } = n, r = this.mapInstance.getView(), l = r.getZoom();
|
|
2178
|
+
(i === 1 || l > o && i === 2 || l < o && i === 3) && r.setZoom(o);
|
|
2181
2179
|
const c = new Point(t);
|
|
2182
2180
|
r.setCenter(transform(c.getCoordinates(), projection.data, projection.mercator));
|
|
2183
2181
|
}
|
|
@@ -2197,7 +2195,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2197
2195
|
setup(e, { expose: t, emit: n }) {
|
|
2198
2196
|
const o = ref();
|
|
2199
2197
|
provide("mapInstance", o);
|
|
2200
|
-
const
|
|
2198
|
+
const i = ref(null), r = ref(null), l = ref(null), c = n, s = e, m = ref(s.zoom || mapZoom.default), d = ref(!1), u = ref(!0), f = ref(!0), p = {
|
|
2201
2199
|
tiandituTile: new TileLayer({ source: new XYZ({ url: baseMap.tiandituTile }) }),
|
|
2202
2200
|
tiandituTileMark: new TileLayer({ source: new XYZ({ url: baseMap.tiandituTileMark }) }),
|
|
2203
2201
|
tiandituImgTile: new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTile }), visible: !1 }),
|
|
@@ -2246,7 +2244,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2246
2244
|
}, g = (v) => {
|
|
2247
2245
|
var L;
|
|
2248
2246
|
s.vehicleMode !== "ship" && (v = !1), (L = o.value) == null || L.getLayers().forEach((w) => {
|
|
2249
|
-
getUid(w) === getUid(p.greenMark) && (w.setVisible(v),
|
|
2247
|
+
getUid(w) === getUid(p.greenMark) && (w.setVisible(v), u.value = v);
|
|
2250
2248
|
});
|
|
2251
2249
|
}, k = ref(BaseMapType.satellite), T = (v) => {
|
|
2252
2250
|
var L;
|
|
@@ -2262,7 +2260,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2262
2260
|
var S, M, C, E, V;
|
|
2263
2261
|
m.value = v, g(v < mapZoom.shipGreenDotMax);
|
|
2264
2262
|
const L = (S = o.value) == null ? void 0 : S.getLayers(), w = s.vehicleMode === "ship" ? L == null ? void 0 : L.getArray().find((N) => getUid(N) === getUid(p.greenMark)) : void 0;
|
|
2265
|
-
showTrackLayer.value ? (f.value = !1, w == null || w.setVisible(!1), (M = shipsLayer.value) == null || M.setVisible(!1), (C = largeAmountShipsLayer.value) == null || C.setVisible(!1)) : !
|
|
2263
|
+
showTrackLayer.value ? (f.value = !1, w == null || w.setVisible(!1), (M = shipsLayer.value) == null || M.setVisible(!1), (C = largeAmountShipsLayer.value) == null || C.setVisible(!1)) : !d.value && u.value && v <= mapZoom.shipGreenDotMax ? (f.value = !0, w == null || w.setVisible(!0), (E = shipsLayer.value) == null || E.setVisible(!1), (V = largeAmountShipsLayer.value) == null || V.setVisible(!1)) : (f.value = !1, w == null || w.setVisible(!1)), c("zoomChanged", v);
|
|
2266
2264
|
}, F = (v, L) => {
|
|
2267
2265
|
const w = transform([v[0], v[1]], projection.mercator, projection.data), S = transform([v[2], v[3]], projection.mercator, projection.data);
|
|
2268
2266
|
c("extentChanged", { extent: [w, S], zoom: L });
|
|
@@ -2275,14 +2273,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2275
2273
|
renderShip: renderShips,
|
|
2276
2274
|
renderTrack: (v, L, w) => {
|
|
2277
2275
|
var S, M;
|
|
2278
|
-
currentTrackId.value = v, showTrackLayer.value = !0,
|
|
2276
|
+
currentTrackId.value = v, showTrackLayer.value = !0, d.value = !0, hiddenAllShips(), (M = (S = largeAmountShipsLayer.value) == null ? void 0 : S.getSource()) == null || M.clear(), renderTrack(v, s.vehicleMode === "ship" ? L.reverse() : L, w, LENGTH_UNIT.NM);
|
|
2279
2277
|
},
|
|
2280
2278
|
findTruck,
|
|
2281
2279
|
removeTruckIcon,
|
|
2282
2280
|
clearAllTruck,
|
|
2283
2281
|
closeTrack: () => {
|
|
2284
2282
|
var v, L;
|
|
2285
|
-
showTrackLayer.value = !1, (v = shipTrackVectorLayer.value) == null || v.setVisible(!1), (L = selectShipsLayer.value) == null || L.setVisible(!0),
|
|
2283
|
+
showTrackLayer.value = !1, (v = shipTrackVectorLayer.value) == null || v.setVisible(!1), (L = selectShipsLayer.value) == null || L.setVisible(!0), d.value = !1, g(m.value < mapZoom.shipGreenDotMax), allTracks.value = [], stopAnimation();
|
|
2286
2284
|
},
|
|
2287
2285
|
closeTruckTrack: () => {
|
|
2288
2286
|
var v, L;
|
|
@@ -2308,7 +2306,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2308
2306
|
removerLayer: removeShipTrackLineFeatureByIndex,
|
|
2309
2307
|
renderMarker,
|
|
2310
2308
|
setMarkerPosition: (v) => {
|
|
2311
|
-
|
|
2309
|
+
d.value = !0, setMarkerPosition(v);
|
|
2312
2310
|
},
|
|
2313
2311
|
getZoomAndCenter: () => {
|
|
2314
2312
|
var M;
|
|
@@ -2340,7 +2338,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2340
2338
|
}), (v, L) => (openBlock(), createElementBlock("div", {
|
|
2341
2339
|
class: "map-page map-container",
|
|
2342
2340
|
ref_key: "pageRef",
|
|
2343
|
-
ref:
|
|
2341
|
+
ref: i
|
|
2344
2342
|
}, [
|
|
2345
2343
|
L[0] || (L[0] = createElementVNode("div", {
|
|
2346
2344
|
id: "map",
|
|
@@ -2349,7 +2347,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2349
2347
|
createVNode(ToolPanel, {
|
|
2350
2348
|
"vehicle-mode": v.vehicleMode,
|
|
2351
2349
|
"view-mode": v.viewMode,
|
|
2352
|
-
"disable-green-dot":
|
|
2350
|
+
"disable-green-dot": d.value,
|
|
2353
2351
|
"show-track-layer": unref(showTrackLayer),
|
|
2354
2352
|
"map-tile-mode": k.value,
|
|
2355
2353
|
onSwitchGreenDot: g,
|
|
@@ -2367,7 +2365,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2367
2365
|
}, null, 512),
|
|
2368
2366
|
createVNode(ZoomControl, {
|
|
2369
2367
|
ref_key: "zoomControl",
|
|
2370
|
-
ref:
|
|
2368
|
+
ref: l
|
|
2371
2369
|
}, null, 512)
|
|
2372
2370
|
], 64)) : createCommentVNode("", !0),
|
|
2373
2371
|
createVNode(Copyright, {
|