zhihao-ui 1.2.39 → 1.2.41
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, F, V, 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 = F, this.existMobile = V, 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;
|
|
@@ -173,7 +173,7 @@ const formatLength = function(e, t) {
|
|
|
173
173
|
})
|
|
174
174
|
})
|
|
175
175
|
});
|
|
176
|
-
function
|
|
176
|
+
function F() {
|
|
177
177
|
var S, M;
|
|
178
178
|
if (o != null && o.value) {
|
|
179
179
|
if (c.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((C) => {
|
|
@@ -183,12 +183,12 @@ 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
|
-
function
|
|
189
|
+
function V() {
|
|
190
190
|
var M, C;
|
|
191
|
-
|
|
191
|
+
F(), (M = o == null ? void 0 : o.value) == null || M.addLayer(h), T = new Draw({
|
|
192
192
|
source: m,
|
|
193
193
|
type: "LineString",
|
|
194
194
|
style: function() {
|
|
@@ -202,27 +202,27 @@ const formatLength = function(e, t) {
|
|
|
202
202
|
let S;
|
|
203
203
|
T.on("drawstart", function(E) {
|
|
204
204
|
var N;
|
|
205
|
-
|
|
206
|
-
let
|
|
207
|
-
S = (N =
|
|
205
|
+
d = E.feature;
|
|
206
|
+
let x;
|
|
207
|
+
S = (N = d.getGeometry()) == null ? void 0 : N.on("change", function(A) {
|
|
208
208
|
const $ = A.target;
|
|
209
|
-
let R = formatUtils.formatLength($, Number(
|
|
210
|
-
|
|
209
|
+
let R = formatUtils.formatLength($, Number(l.value));
|
|
210
|
+
x = $.getLastCoordinate(), p && R && (p.innerHTML = R), y.setPosition(x);
|
|
211
211
|
});
|
|
212
212
|
}), T.on("drawend", function() {
|
|
213
|
-
var E,
|
|
214
|
-
p && (p.className = "ol-tooltip ol-tooltip-static ol-tooltip-measure"), p != null && p.innerHTML && (c.value.push(p == null ? void 0 : p.innerHTML), p.innerHTML = `${p.innerHTML}<div class="ol-tooltip-delete-button" data-index="${((E = c.value) == null ? void 0 : E.length) - 1}"><i class="map-iconfont icon-delete"></i></div>`), (
|
|
213
|
+
var E, x;
|
|
214
|
+
p && (p.className = "ol-tooltip ol-tooltip-static ol-tooltip-measure"), p != null && p.innerHTML && (c.value.push(p == null ? void 0 : p.innerHTML), p.innerHTML = `${p.innerHTML}<div class="ol-tooltip-delete-button" data-index="${((E = c.value) == null ? void 0 : E.length) - 1}"><i class="map-iconfont icon-delete"></i></div>`), (x = document.querySelector(".ol-selectable:has(.ol-tooltip-delete-button):last-child .ol-tooltip-delete-button")) == null || x.addEventListener("click", (N) => {
|
|
215
215
|
var $;
|
|
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);
|
|
@@ -238,20 +238,20 @@ const formatLength = function(e, t) {
|
|
|
238
238
|
}), (S = o == null ? void 0 : o.value) == null || S.addOverlay(y);
|
|
239
239
|
}
|
|
240
240
|
const L = (S) => {
|
|
241
|
-
var E,
|
|
241
|
+
var E, x;
|
|
242
242
|
c.value[S] && c.value.splice(S, 1);
|
|
243
243
|
const M = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
|
|
244
|
-
M[S] && ((
|
|
244
|
+
M[S] && ((x = (E = M[S]) == null ? void 0 : E.parentNode) == null || x.removeChild(M[S]));
|
|
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
|
-
r.value && !s.value && (k(),
|
|
251
|
+
r.value && !s.value && (k(), V());
|
|
252
252
|
}, { deep: !0, immediate: !0 }), t({
|
|
253
|
-
addInteraction:
|
|
254
|
-
removeInteraction:
|
|
253
|
+
addInteraction: V,
|
|
254
|
+
removeInteraction: F
|
|
255
255
|
}), (S, M) => r.value && S.viewMode !== "WxMiniprogram" ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
|
|
256
256
|
createElementVNode("div", { class: "header" }, [
|
|
257
257
|
M[1] || (M[1] = createElementVNode("div", { class: "title" }, "测量", -1)),
|
|
@@ -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), {
|
|
@@ -296,7 +296,7 @@ const formatLength = function(e, t) {
|
|
|
296
296
|
]),
|
|
297
297
|
createElementVNode("div", {
|
|
298
298
|
class: "delete-button",
|
|
299
|
-
onClick: (
|
|
299
|
+
onClick: (x) => L(E)
|
|
300
300
|
}, M[4] || (M[4] = [
|
|
301
301
|
createElementVNode("i", { class: "map-iconfont icon-delete" }, null, -1)
|
|
302
302
|
]), 8, _hoisted_7)
|
|
@@ -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(
|
|
458
|
-
return o(Math.atan2(
|
|
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]), F = Math.sin(k - g) * Math.cos(I), V = Math.cos(T) * Math.sin(I) - Math.sin(T) * Math.cos(I) * Math.cos(k - g);
|
|
458
|
+
return o(Math.atan2(F, V));
|
|
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,84 @@ 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(
|
|
550
|
-
},
|
|
547
|
+
const c = drawShipBody(i, r, n, t);
|
|
548
|
+
c && (drawHeading(i, r, c, t), r.selected = e, e && setTimeout(() => {
|
|
549
|
+
drawSelectBounds(i, c);
|
|
550
|
+
}, 1)), drawShipLabel(i, r, n);
|
|
551
551
|
} catch {
|
|
552
552
|
return !1;
|
|
553
553
|
}
|
|
554
554
|
}
|
|
555
555
|
}), drawShipBody = (e, t, n, o) => {
|
|
556
556
|
if (!mapInstance$7.value) return;
|
|
557
|
-
const
|
|
558
|
-
if (!
|
|
557
|
+
const i = Math.round(Number(mapInstance$7.value.getView().getZoom()));
|
|
558
|
+
if (!i) return;
|
|
559
559
|
let r = [];
|
|
560
|
-
const [
|
|
561
|
-
if (
|
|
562
|
-
r = rotateShapeModel(drawCurrentShipShapeModel(t,
|
|
563
|
-
const [f, p] =
|
|
560
|
+
const [l, c] = drawShipModelByZoom[i] || [0, 0], [s, m] = n;
|
|
561
|
+
if (i <= mapZoom.shipModelMax && i > mapZoom.shipModelMin && t.length >= l && t.breadth >= c)
|
|
562
|
+
r = rotateShapeModel(drawCurrentShipShapeModel(t, i), t.angle).map((u) => {
|
|
563
|
+
const [f, p] = u;
|
|
564
564
|
return [s + f, m + p];
|
|
565
565
|
});
|
|
566
566
|
else {
|
|
567
|
-
const
|
|
568
|
-
n.length === 2 && (r =
|
|
569
|
-
const [f, p] =
|
|
567
|
+
const d = rotateShapeModel(triangleModel, t.angle);
|
|
568
|
+
n.length === 2 && (r = d.map((u) => {
|
|
569
|
+
const [f, p] = u;
|
|
570
570
|
return [s + f, m + p];
|
|
571
571
|
}));
|
|
572
572
|
}
|
|
573
573
|
if (!(r.length > 2)) return !1;
|
|
574
574
|
if (t != null && t.length) {
|
|
575
|
-
const
|
|
575
|
+
const d = r.length === 3 ? 30 : t.length * 0.4;
|
|
576
576
|
e.beginPath(), e.arc(
|
|
577
577
|
n[0],
|
|
578
578
|
n[1],
|
|
579
|
-
|
|
579
|
+
d,
|
|
580
580
|
0,
|
|
581
581
|
2 * Math.PI
|
|
582
582
|
), e.fillStyle = "rgba(255, 255, 255, 0.001)", e.fill();
|
|
583
583
|
}
|
|
584
584
|
e.save(), e.beginPath(), e.moveTo(r[0][0], r[0][1]);
|
|
585
|
-
for (let
|
|
586
|
-
e.lineTo(r[
|
|
585
|
+
for (let d = 1; d < r.length; d++)
|
|
586
|
+
e.lineTo(r[d][0], r[d][1]);
|
|
587
587
|
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
588
|
}, drawHeading = (e, t, n, o) => {
|
|
589
|
-
const [
|
|
590
|
-
if (
|
|
591
|
-
const c =
|
|
592
|
-
const [m,
|
|
593
|
-
return [m +
|
|
589
|
+
const [i, r] = n[0], l = getShipDirectPath(t);
|
|
590
|
+
if (l) {
|
|
591
|
+
const c = l.map(function(s) {
|
|
592
|
+
const [m, d] = s;
|
|
593
|
+
return [m + i, d + r];
|
|
594
594
|
});
|
|
595
595
|
if (e.save(), e.beginPath(), t.angle > 0) {
|
|
596
|
-
e.translate(
|
|
596
|
+
e.translate(i, r);
|
|
597
597
|
const s = t.angle * Math.PI / 180;
|
|
598
|
-
e.rotate(s), e.translate(-
|
|
598
|
+
e.rotate(s), e.translate(-i, -r);
|
|
599
599
|
}
|
|
600
|
-
e.moveTo(
|
|
600
|
+
e.moveTo(i, r);
|
|
601
601
|
for (let s = 1; s < c.length; s++) {
|
|
602
|
-
const [m,
|
|
603
|
-
e.lineTo(m,
|
|
602
|
+
const [m, d] = c[s];
|
|
603
|
+
e.lineTo(m, d);
|
|
604
604
|
}
|
|
605
605
|
e.strokeStyle = o ? "#ff0000" : "#000", e.lineWidth = o ? 2 : 1, e.stroke(), e.restore();
|
|
606
606
|
}
|
|
607
607
|
}, drawSelectBounds = (e, t) => {
|
|
608
|
-
let [n, o,
|
|
609
|
-
const
|
|
610
|
-
n -=
|
|
611
|
-
const
|
|
612
|
-
e.beginPath(), e.moveTo(n +
|
|
608
|
+
let [n, o, i, r] = getPixelFromCoordinate(t);
|
|
609
|
+
const l = window.devicePixelRatio || 1, c = 4;
|
|
610
|
+
n -= c, o -= c, i += c, r += c, e.save(), e.strokeStyle = "#ff0000", e.lineWidth = 4 * l;
|
|
611
|
+
const s = 8 * l;
|
|
612
|
+
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
613
|
}, drawShipLabel = (e, t, n) => {
|
|
614
|
-
if (!t.selected && shipLabels.value.find((
|
|
615
|
-
const [o,
|
|
614
|
+
if (!t.selected && shipLabels.value.find((u) => u.name === t.name)) return;
|
|
615
|
+
const [o, i] = n, r = o, l = i, c = t.name;
|
|
616
616
|
let s;
|
|
617
617
|
t.leftIconColor && (s = { color: t.leftIconColor, icon: "" });
|
|
618
|
-
const m = getShipCustomIcon(t),
|
|
618
|
+
const m = getShipCustomIcon(t), d = {
|
|
619
619
|
id: t.id,
|
|
620
|
-
center: [r,
|
|
620
|
+
center: [r, l],
|
|
621
621
|
text: c,
|
|
622
622
|
fill: t.fill,
|
|
623
623
|
color: "#fff",
|
|
@@ -629,21 +629,21 @@ const multiplyPixelRatio = (e) => {
|
|
|
629
629
|
blinkColors: t.blinkColors,
|
|
630
630
|
type: "ShipName"
|
|
631
631
|
};
|
|
632
|
-
drawLabel(e,
|
|
632
|
+
drawLabel(e, d, shipLabels.value);
|
|
633
633
|
}, drawCurrentShipShapeModel = (e, t) => {
|
|
634
634
|
let n = 0;
|
|
635
635
|
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,
|
|
636
|
+
const o = e.length / 4 * n, i = e.breadth * n;
|
|
637
637
|
let r = cloneDeep(shipShapeModel);
|
|
638
|
-
return r = r.map(([
|
|
638
|
+
return r = r.map(([l, c]) => [l * i, c * o]), r;
|
|
639
639
|
}, getShipDirectPath = (e) => {
|
|
640
640
|
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[
|
|
641
|
+
let i = "", r = null;
|
|
642
|
+
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))
|
|
643
|
+
for (let l = 0; l < speedCondition.length; l++) {
|
|
644
|
+
const c = speedCondition[l];
|
|
645
645
|
if (t >= c[0] && t < c[1]) {
|
|
646
|
-
r = shipDirectPath[
|
|
646
|
+
r = shipDirectPath[i][l];
|
|
647
647
|
break;
|
|
648
648
|
}
|
|
649
649
|
}
|
|
@@ -656,14 +656,14 @@ let shipsMarkerList = [], shipsVectorSource, largeAmountShipsSource;
|
|
|
656
656
|
const selectedShipData = ref(null), selectedShips = ref([]);
|
|
657
657
|
let selectShipsVectorSource;
|
|
658
658
|
const renderShips = (e) => {
|
|
659
|
-
var n, o,
|
|
659
|
+
var n, o, i, r;
|
|
660
660
|
if (!mapInstance$6.value || showTrackLayer.value) return;
|
|
661
661
|
const t = Math.round(Number(mapInstance$6.value.getView().getZoom()));
|
|
662
662
|
if (selectedShipData.value && nextTick(() => {
|
|
663
663
|
selectSingleShipMarker(selectedShipData.value);
|
|
664
|
-
}).then((
|
|
664
|
+
}).then((l) => {
|
|
665
665
|
}), !(!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)) : ((
|
|
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)) : ((i = largeAmountShipsLayer.value) == null || i.setVisible(!1), (r = shipsLayer.value) == null || r.setVisible(!0), renderShipsMarker(allShips.value));
|
|
667
667
|
}, renderLargeAmountShips = (e) => {
|
|
668
668
|
if (!mapInstance$6.value) return;
|
|
669
669
|
const t = e.map((n) => ({
|
|
@@ -718,16 +718,16 @@ const renderShips = (e) => {
|
|
|
718
718
|
deleteAllShipMarkers();
|
|
719
719
|
let t = convertShipMapData(e);
|
|
720
720
|
if (t = customFilterShips(t), !!(t != null && t.length))
|
|
721
|
-
return t.forEach((o,
|
|
722
|
-
const r = [o.lon, o.lat],
|
|
721
|
+
return t.forEach((o, i) => {
|
|
722
|
+
const r = [o.lon, o.lat], l = new Feature({
|
|
723
723
|
geometry: new Point(fromLonLat(r))
|
|
724
724
|
}), c = 1;
|
|
725
|
-
|
|
725
|
+
l.set("clickGeometry", new Circle(fromLonLat(r), c)), l.set("data", o), l.set("index", i), l.setStyle(
|
|
726
726
|
setShipStyle(!1)
|
|
727
727
|
), shipsMarkerList.push({
|
|
728
728
|
ship: o,
|
|
729
729
|
lonlat: r,
|
|
730
|
-
feature:
|
|
730
|
+
feature: l
|
|
731
731
|
});
|
|
732
732
|
}), shipsVectorSource = new VectorSource({
|
|
733
733
|
features: shipsMarkerList.map((o) => o.feature)
|
|
@@ -739,26 +739,26 @@ const renderShips = (e) => {
|
|
|
739
739
|
var o;
|
|
740
740
|
let e = null, t = 0;
|
|
741
741
|
const n = 100;
|
|
742
|
-
(o = mapInstance$6.value) == null || o.on("pointermove", function(
|
|
743
|
-
var s, m;
|
|
742
|
+
(o = mapInstance$6.value) == null || o.on("pointermove", function(i) {
|
|
743
|
+
var s, m, d, u;
|
|
744
744
|
const r = Date.now();
|
|
745
745
|
if (r - t < n)
|
|
746
746
|
return;
|
|
747
747
|
t = r;
|
|
748
|
-
const
|
|
749
|
-
if (c && (c.style.cursor =
|
|
748
|
+
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();
|
|
749
|
+
if (c && (c.style.cursor = l ? "pointer" : ""), e !== l) {
|
|
750
750
|
if (e) {
|
|
751
|
-
const
|
|
752
|
-
if (!(
|
|
751
|
+
const f = e.get("data");
|
|
752
|
+
if (!(f != null && f.mmsi)) return;
|
|
753
753
|
e.setStyle(
|
|
754
|
-
setShipStyle(
|
|
754
|
+
setShipStyle(((d = selectedShipData.value) == null ? void 0 : d.id) === f.id, !1)
|
|
755
755
|
);
|
|
756
756
|
}
|
|
757
|
-
if (
|
|
758
|
-
const
|
|
759
|
-
if (!(
|
|
760
|
-
e =
|
|
761
|
-
setShipStyle(
|
|
757
|
+
if (l) {
|
|
758
|
+
const f = l.get("data");
|
|
759
|
+
if (!(f != null && f.mmsi)) return;
|
|
760
|
+
e = l, l.setStyle(
|
|
761
|
+
setShipStyle(((u = selectedShipData.value) == null ? void 0 : u.id) === f.id, !0)
|
|
762
762
|
);
|
|
763
763
|
} else
|
|
764
764
|
e = null;
|
|
@@ -767,9 +767,9 @@ const renderShips = (e) => {
|
|
|
767
767
|
}, customFilterShips = (e) => {
|
|
768
768
|
let t = cloneDeep(e);
|
|
769
769
|
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) && ((
|
|
770
|
+
var i;
|
|
771
|
+
const o = getFilterItem(n).every(({ btnShow: r, value: l }) => r ? !!l : !0);
|
|
772
|
+
return (switchBtnShow.value.camera || switchBtnShow.value.mobile || switchBtnShow.value.waterGauge) && ((i = selectedShipData.value) == null ? void 0 : i.id) === n.id && clearSelectFeature(), o;
|
|
773
773
|
}), t;
|
|
774
774
|
}, getFilterItem = (e) => [
|
|
775
775
|
{ btnShow: switchBtnShow.value.camera, value: e == null ? void 0 : e.existDevice },
|
|
@@ -798,19 +798,19 @@ const renderShips = (e) => {
|
|
|
798
798
|
}), selectShipsLayer.value = new VectorLayer({
|
|
799
799
|
source: selectShipsVectorSource
|
|
800
800
|
}), shipsVectorSource && setVisibleFeatureById(shipsVectorSource, selectSingleShipData.value.id, !0);
|
|
801
|
-
const
|
|
802
|
-
return
|
|
801
|
+
const i = (r = shipsLayer.value) == null ? void 0 : r.getSource();
|
|
802
|
+
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
803
|
}, setVisibleFeatureById = (e, t, n) => {
|
|
804
804
|
e && e.forEachFeature((o) => {
|
|
805
|
-
const
|
|
806
|
-
|
|
805
|
+
const i = o.get("data");
|
|
806
|
+
i && i.id === t && o.setStyle(n ? setShipStyle(!1, i.id) : setBlankStyle());
|
|
807
807
|
});
|
|
808
808
|
}, findShip = (e, t, n = !0) => {
|
|
809
|
-
var
|
|
809
|
+
var i, r, l, c, s;
|
|
810
810
|
if (!e || !mapInstance$6.value) return;
|
|
811
|
-
const o = (
|
|
812
|
-
var
|
|
813
|
-
return ((
|
|
811
|
+
const o = (l = (r = (i = shipsLayer.value) == null ? void 0 : i.getSource()) == null ? void 0 : r.getFeatures()) == null ? void 0 : l.find((m) => {
|
|
812
|
+
var d;
|
|
813
|
+
return ((d = m.get("data")) == null ? void 0 : d.id) === e;
|
|
814
814
|
});
|
|
815
815
|
if (o)
|
|
816
816
|
selectedShipData.value = o.get("data");
|
|
@@ -821,12 +821,12 @@ const renderShips = (e) => {
|
|
|
821
821
|
return;
|
|
822
822
|
}
|
|
823
823
|
if (selectedShips.value.some((m) => {
|
|
824
|
-
var
|
|
825
|
-
return m.id === ((
|
|
824
|
+
var d;
|
|
825
|
+
return m.id === ((d = selectedShipData.value) == null ? void 0 : d.id);
|
|
826
826
|
}) || 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
|
|
827
|
+
const m = mapInstance$6.value.getView(), d = new Point([selectedShipData.value.lon, selectedShipData.value.lat]);
|
|
828
|
+
m.setCenter(transform(d.getCoordinates(), projection.data, projection.mercator));
|
|
829
|
+
const u = m.getZoom(), f = u < mapZoom.findShipMin ? mapZoom.findShip : u;
|
|
830
830
|
m.setZoom(f);
|
|
831
831
|
}
|
|
832
832
|
return setTimeout(() => {
|
|
@@ -856,92 +856,92 @@ const renderShips = (e) => {
|
|
|
856
856
|
switchBtnShow.value[e] = t, renderShips(allShips.value);
|
|
857
857
|
}, rerenderShip = () => {
|
|
858
858
|
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 +
|
|
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, i, r, l = 4) => {
|
|
860
|
+
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
861
|
}, getPixelFromCoordinate = (e) => {
|
|
862
862
|
if (!e || e.length === 0)
|
|
863
863
|
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,
|
|
864
|
+
let t = 1 / 0, n = 1 / 0, o = -1 / 0, i = -1 / 0;
|
|
865
|
+
for (const [r, l] of e)
|
|
866
|
+
r < t && (t = r), l < n && (n = l), r > o && (o = r), l > i && (i = l);
|
|
867
|
+
return [t, n, o, i];
|
|
868
868
|
}, calculatePolygonCentroid = (e) => {
|
|
869
869
|
if (!Array.isArray(e) || e.length < 3)
|
|
870
870
|
throw new Error("A polygon must have at least 3 coordinates.");
|
|
871
871
|
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 +
|
|
872
|
+
const i = e.length;
|
|
873
|
+
for (let c = 0; c < i - 1; c++) {
|
|
874
|
+
const [s, m] = e[c], [d, u] = e[c + 1], f = s * u - d * m;
|
|
875
|
+
o += f, t += (s + d) * f, n += (m + u) * f;
|
|
876
876
|
}
|
|
877
877
|
if (o *= 0.5, o === 0)
|
|
878
878
|
throw new Error("多边形面积为零");
|
|
879
|
-
const r = t / (6 * o),
|
|
880
|
-
return [r,
|
|
879
|
+
const r = t / (6 * o), l = n / (6 * o);
|
|
880
|
+
return [r, l];
|
|
881
881
|
}, rotateShapeModel = (e, t) => {
|
|
882
|
-
const [n, o] = calculatePolygonCentroid(e),
|
|
882
|
+
const [n, o] = calculatePolygonCentroid(e), i = t * Math.PI / 180, r = Math.cos(i), l = Math.sin(i);
|
|
883
883
|
return e.map(([c, s]) => {
|
|
884
|
-
const m = c - n,
|
|
885
|
-
return [
|
|
884
|
+
const m = c - n, d = s - o, u = m * r - d * l + n, f = m * l + d * r + o;
|
|
885
|
+
return [u, f];
|
|
886
886
|
});
|
|
887
887
|
}, 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],
|
|
888
|
+
function calculateBounds(e, t, n, o, i) {
|
|
889
|
+
let r, l, c, s;
|
|
890
|
+
const m = e[0], d = e[1];
|
|
891
891
|
switch (t) {
|
|
892
892
|
case 0:
|
|
893
|
-
r = m +
|
|
893
|
+
r = m + i, l = r + n, s = d - i, c = s - o;
|
|
894
894
|
break;
|
|
895
895
|
case 1:
|
|
896
|
-
r = m +
|
|
896
|
+
r = m + i, l = r + n, s = d + o / 2, c = s - o;
|
|
897
897
|
break;
|
|
898
898
|
case 2:
|
|
899
|
-
r = m +
|
|
899
|
+
r = m + i, l = r + n, s = d + i + o, c = s - o;
|
|
900
900
|
break;
|
|
901
901
|
case 3:
|
|
902
|
-
r = m - n / 2,
|
|
902
|
+
r = m - n / 2, l = r + n, s = d + i + o, c = s - o;
|
|
903
903
|
break;
|
|
904
904
|
case 4:
|
|
905
|
-
|
|
905
|
+
l = m, r = l - n, s = d + i + o, c = s - o;
|
|
906
906
|
break;
|
|
907
907
|
case 5:
|
|
908
|
-
|
|
908
|
+
l = m - i, r = l - n, s = d + o / 2, c = s - o;
|
|
909
909
|
break;
|
|
910
910
|
case 6:
|
|
911
|
-
|
|
911
|
+
l = m, r = l - n, s = d - i, c = s - o;
|
|
912
912
|
break;
|
|
913
913
|
case 7:
|
|
914
|
-
r = m - n / 2,
|
|
914
|
+
r = m - n / 2, l = r + n, s = d - i, c = s - o;
|
|
915
915
|
}
|
|
916
|
-
if (!(!r || !c || !
|
|
917
|
-
return [Math.min(r,
|
|
916
|
+
if (!(!r || !c || !l || !s))
|
|
917
|
+
return [Math.min(r, l), Math.min(c, s), Math.max(r, l), Math.max(c, s) + 1];
|
|
918
918
|
}
|
|
919
|
-
function calculateAnchorPoint(e, t, n = 70, o = 20,
|
|
919
|
+
function calculateAnchorPoint(e, t, n = 70, o = 20, i = 20) {
|
|
920
920
|
const r = [0, 0];
|
|
921
921
|
switch (t) {
|
|
922
922
|
case 0:
|
|
923
|
-
r[0] = e[0] +
|
|
923
|
+
r[0] = e[0] + i, r[1] = e[1] - i - o / 2;
|
|
924
924
|
break;
|
|
925
925
|
case 1:
|
|
926
|
-
r[0] = e[0] +
|
|
926
|
+
r[0] = e[0] + i, r[1] = e[1];
|
|
927
927
|
break;
|
|
928
928
|
case 2:
|
|
929
|
-
r[0] = e[0] +
|
|
929
|
+
r[0] = e[0] + i, r[1] = e[1] + i + o / 2;
|
|
930
930
|
break;
|
|
931
931
|
case 3:
|
|
932
|
-
r[0] = e[0], r[1] = e[1] +
|
|
932
|
+
r[0] = e[0], r[1] = e[1] + i + o / 4;
|
|
933
933
|
break;
|
|
934
934
|
case 4:
|
|
935
|
-
r[0] = Math.max(e[0] -
|
|
935
|
+
r[0] = Math.max(e[0] - i, e[0] - n / 2), r[1] = e[1] + i + o / 4;
|
|
936
936
|
break;
|
|
937
937
|
case 5:
|
|
938
|
-
r[0] = e[0] -
|
|
938
|
+
r[0] = e[0] - i, r[1] = e[1];
|
|
939
939
|
break;
|
|
940
940
|
case 6:
|
|
941
|
-
r[0] = Math.max(e[0] -
|
|
941
|
+
r[0] = Math.max(e[0] - i, e[0] - n / 2), r[1] = e[1] - i - o / 4;
|
|
942
942
|
break;
|
|
943
943
|
case 7:
|
|
944
|
-
r[0] = e[0], r[1] = e[1] -
|
|
944
|
+
r[0] = e[0], r[1] = e[1] - i - o / 4;
|
|
945
945
|
}
|
|
946
946
|
return r;
|
|
947
947
|
}
|
|
@@ -949,31 +949,31 @@ function drawLabelBody(e, t, n) {
|
|
|
949
949
|
if (!e) return;
|
|
950
950
|
const {
|
|
951
951
|
font: o,
|
|
952
|
-
labelOutSize:
|
|
952
|
+
labelOutSize: i = 2,
|
|
953
953
|
labelHeight: r,
|
|
954
|
-
center:
|
|
954
|
+
center: l,
|
|
955
955
|
text: c,
|
|
956
956
|
leftIcon: s,
|
|
957
957
|
shipColor: m,
|
|
958
|
-
lineLength:
|
|
959
|
-
selected:
|
|
958
|
+
lineLength: d = 20,
|
|
959
|
+
selected: u
|
|
960
960
|
} = n;
|
|
961
961
|
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 (
|
|
962
|
+
let f = e.measureText(c).width + 4 * i;
|
|
963
|
+
(s || m) && (f += r + 6 * i), e.restore();
|
|
964
|
+
let p, y = 20, h = -1, g = r + 3 * i;
|
|
965
|
+
if (d)
|
|
966
966
|
for (let k = 0; k < 8; k++) {
|
|
967
|
-
p = calculateBounds(
|
|
967
|
+
p = calculateBounds(l, k, f, g, d);
|
|
968
968
|
let T = !1;
|
|
969
969
|
for (let I = 0; I < t.length; ++I) {
|
|
970
|
-
let
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
970
|
+
let F = t[I].bounds, V = [
|
|
971
|
+
F[0] - y,
|
|
972
|
+
F[1] - y,
|
|
973
|
+
F[2] + y,
|
|
974
|
+
F[3] + y
|
|
975
975
|
];
|
|
976
|
-
if (p && isOverlapping(p,
|
|
976
|
+
if (p && isOverlapping(p, V)) {
|
|
977
977
|
T = !0;
|
|
978
978
|
break;
|
|
979
979
|
}
|
|
@@ -984,12 +984,12 @@ function drawLabelBody(e, t, n) {
|
|
|
984
984
|
}
|
|
985
985
|
}
|
|
986
986
|
else
|
|
987
|
-
h = 0, p = calculateBounds(
|
|
988
|
-
if (
|
|
987
|
+
h = 0, p = calculateBounds(l, h, f, g, d);
|
|
988
|
+
if (u && h === -1 && (h = 0), p && h > -1) {
|
|
989
989
|
let k = getBottomLeftPoint(p), T = getTopRighttPoint(p);
|
|
990
990
|
return {
|
|
991
|
-
center:
|
|
992
|
-
x: calculateAnchorPoint(
|
|
991
|
+
center: l,
|
|
992
|
+
x: calculateAnchorPoint(l, h, f, g, d),
|
|
993
993
|
l: T,
|
|
994
994
|
r: k,
|
|
995
995
|
bounds: p,
|
|
@@ -1001,60 +1001,60 @@ function drawLabelBody(e, t, n) {
|
|
|
1001
1001
|
}
|
|
1002
1002
|
const drawText = (e, t) => {
|
|
1003
1003
|
if (!e) return;
|
|
1004
|
-
const { center: n, text: o, textColor:
|
|
1004
|
+
const { center: n, text: o, textColor: i, leftIcon: r, rightIcons: l, font: c } = t;
|
|
1005
1005
|
e.save(), e.setTransform(1, 0, 0, 1, 0, 0);
|
|
1006
1006
|
let [s, m] = n;
|
|
1007
1007
|
if (r) {
|
|
1008
1008
|
e.font = `${18 * pixelRatio}px map-iconfont`;
|
|
1009
|
-
let
|
|
1010
|
-
e.fillStyle = r.color, e.fillText(
|
|
1009
|
+
let d = getIconFont(r.icon);
|
|
1010
|
+
e.fillStyle = r.color, e.fillText(d, s + labelOutSize - 3 * pixelRatio, m + 2.6 * pixelRatio), s += 23 * pixelRatio;
|
|
1011
1011
|
}
|
|
1012
|
-
if (
|
|
1012
|
+
if (l != null && l.length) {
|
|
1013
1013
|
e.font = `${12 * pixelRatio}px map-iconfont`, e.fillStyle = "#3370ff";
|
|
1014
|
-
const
|
|
1015
|
-
|
|
1016
|
-
const p = getIconFont(
|
|
1017
|
-
e.fillText(p, s +
|
|
1014
|
+
const d = e.measureText(o).width + 6 * pixelRatio;
|
|
1015
|
+
l.forEach((u, f) => {
|
|
1016
|
+
const p = getIconFont(u), y = 20 * pixelRatio * f;
|
|
1017
|
+
e.fillText(p, s + d + y, m);
|
|
1018
1018
|
});
|
|
1019
1019
|
}
|
|
1020
|
-
e.font = c || labelFont, e.fillStyle =
|
|
1020
|
+
e.font = c || labelFont, e.fillStyle = i, e.fillText(o, s + 2, m), e.restore();
|
|
1021
1021
|
}, drawPolygon = (e, t) => {
|
|
1022
1022
|
let {
|
|
1023
1023
|
points: n,
|
|
1024
1024
|
strokeColor: o,
|
|
1025
|
-
fillColor:
|
|
1025
|
+
fillColor: i,
|
|
1026
1026
|
shouldClosePath: r,
|
|
1027
|
-
translation:
|
|
1027
|
+
translation: l,
|
|
1028
1028
|
rotation: c,
|
|
1029
1029
|
rotationCenter: s,
|
|
1030
1030
|
scale: m,
|
|
1031
|
-
globalAlpha:
|
|
1031
|
+
globalAlpha: d
|
|
1032
1032
|
} = 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()),
|
|
1033
|
+
if (d || (d = 1), n && e) {
|
|
1034
|
+
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]);
|
|
1035
|
+
for (let u = 1; u < n.length; u++)
|
|
1036
|
+
e.lineTo(n[u][0], n[u][1]);
|
|
1037
|
+
r && e.closePath(), o && (e.strokeStyle = o, e.stroke()), i && r && (d && (e.globalAlpha = d), e.fillStyle = i, e.fill()), e.restore();
|
|
1038
1038
|
}
|
|
1039
1039
|
}, intervalIds = {}, drawLabel = (e, t, n) => {
|
|
1040
|
-
var
|
|
1041
|
-
let { center: o, text:
|
|
1042
|
-
if (o &&
|
|
1040
|
+
var u, f, p, y, h, g, k;
|
|
1041
|
+
let { center: o, text: i, color: r, textColor: l, bgColor: c, leftIcon: s, rightIcons: m, type: d } = t;
|
|
1042
|
+
if (o && i) {
|
|
1043
1043
|
const T = {
|
|
1044
1044
|
font: labelFont,
|
|
1045
1045
|
labelOutSize,
|
|
1046
1046
|
labelHeight,
|
|
1047
1047
|
center: o,
|
|
1048
|
-
text:
|
|
1048
|
+
text: i,
|
|
1049
1049
|
leftIcon: s,
|
|
1050
1050
|
selected: t.selected
|
|
1051
1051
|
};
|
|
1052
|
-
(
|
|
1052
|
+
(u = t.blinkColors) != null && u.length && t.fill && (c = t.fill, l = getForegroundColor(t.fill));
|
|
1053
1053
|
const I = drawLabelBody(e, n, T);
|
|
1054
1054
|
if (I) {
|
|
1055
|
-
const { x, bounds:
|
|
1056
|
-
n.find((E) => E.name ===
|
|
1057
|
-
points: [o,
|
|
1055
|
+
const { x: F, bounds: V, l: P } = I, v = [getTopLeftPoint(V), getBottomLeftPoint(V), getBottomRightPoint(V), getTopRighttPoint(V)];
|
|
1056
|
+
n.find((E) => E.name === i) || n.push(I), drawPolygon(e, {
|
|
1057
|
+
points: [o, F],
|
|
1058
1058
|
strokeColor: r,
|
|
1059
1059
|
fillColor: "#000",
|
|
1060
1060
|
shouldClosePath: !0,
|
|
@@ -1063,8 +1063,8 @@ const drawText = (e, t) => {
|
|
|
1063
1063
|
rotationCenter: void 0,
|
|
1064
1064
|
scale: void 0,
|
|
1065
1065
|
globalAlpha: labelAlpha
|
|
1066
|
-
}), m != null && m.length && m.forEach((
|
|
1067
|
-
v[1][0] +=
|
|
1066
|
+
}), m != null && m.length && m.forEach(() => {
|
|
1067
|
+
v[1][0] += pixelRatio === 1 ? 18 : 36, v[2][0] += pixelRatio === 1 ? 18 : 36;
|
|
1068
1068
|
});
|
|
1069
1069
|
const w = {
|
|
1070
1070
|
points: v,
|
|
@@ -1073,14 +1073,14 @@ const drawText = (e, t) => {
|
|
|
1073
1073
|
shouldClosePath: !0
|
|
1074
1074
|
}, [S, M] = P, C = {
|
|
1075
1075
|
center: [S, M + labelOutSize + labelHeight + 1],
|
|
1076
|
-
text:
|
|
1077
|
-
textColor:
|
|
1076
|
+
text: i,
|
|
1077
|
+
textColor: l,
|
|
1078
1078
|
leftIcon: s,
|
|
1079
1079
|
rightIcons: m,
|
|
1080
1080
|
blinkColors: t.blinkColors
|
|
1081
1081
|
};
|
|
1082
1082
|
if (drawPolygon(e, w), drawText(e, C), t != null && t.blinkColors && t.blinkColors.length > 0) {
|
|
1083
|
-
let E = Date.now(),
|
|
1083
|
+
let E = Date.now(), x = 0;
|
|
1084
1084
|
const N = t.blinkColors;
|
|
1085
1085
|
!!!((y = (p = (f = selectShipsLayer.value) == null ? void 0 : f.getSource()) == null ? void 0 : p.getFeatures()) != null && y.find(($) => {
|
|
1086
1086
|
var R;
|
|
@@ -1088,10 +1088,10 @@ const drawText = (e, t) => {
|
|
|
1088
1088
|
}) || (k = (g = (h = shipsLayer.value) == null ? void 0 : h.getSource()) == null ? void 0 : g.getFeatures()) != null && k.find(($) => {
|
|
1089
1089
|
var R;
|
|
1090
1090
|
return ((R = $.get("data")) == null ? void 0 : R.id) === t.id;
|
|
1091
|
-
})) || hiddenOrther.value ? (clearInterval(intervalIds[t.id]), deleteLabelFromArray(n,
|
|
1091
|
+
})) || hiddenOrther.value ? (clearInterval(intervalIds[t.id]), deleteLabelFromArray(n, i)) : (intervalIds[t.id] && clearInterval(intervalIds[t.id]), intervalIds[t.id] = window.setInterval(() => {
|
|
1092
1092
|
var D, G, _;
|
|
1093
1093
|
const $ = Date.now();
|
|
1094
|
-
$ - E >= 500 && (
|
|
1094
|
+
$ - E >= 500 && (x = (x + 1) % N.length, E = $, w.fillColor = N[x], drawPolygon(e, w), C.textColor = getForegroundColor(w.fillColor), drawText(e, C));
|
|
1095
1095
|
const R = shipsMarkerList == null ? void 0 : shipsMarkerList.some((O) => {
|
|
1096
1096
|
var B;
|
|
1097
1097
|
return ((B = O.ship) == null ? void 0 : B.id) === t.id;
|
|
@@ -1099,10 +1099,10 @@ const drawText = (e, t) => {
|
|
|
1099
1099
|
const B = O.get("data");
|
|
1100
1100
|
return (B == null ? void 0 : B.id) === t.id;
|
|
1101
1101
|
});
|
|
1102
|
-
!R && !Z && (clearInterval(intervalIds[t.id]), deleteLabelFromArray(n,
|
|
1102
|
+
!R && !Z && (clearInterval(intervalIds[t.id]), deleteLabelFromArray(n, i));
|
|
1103
1103
|
}, 10));
|
|
1104
1104
|
} else
|
|
1105
|
-
shipLabels.value.find((
|
|
1105
|
+
shipLabels.value.find((x) => x.name === i) && (clearInterval(intervalIds[t.id]), drawPolygon(e, w), drawText(e, C));
|
|
1106
1106
|
}
|
|
1107
1107
|
}
|
|
1108
1108
|
return null;
|
|
@@ -1130,23 +1130,23 @@ function gcj02ToWgs84(e) {
|
|
|
1130
1130
|
if (outOfChina(t, n))
|
|
1131
1131
|
return `${t.toFixed(6)}, ${n.toFixed(6)}`;
|
|
1132
1132
|
{
|
|
1133
|
-
let o = transformLat(t - 105, n - 35),
|
|
1133
|
+
let o = transformLat(t - 105, n - 35), i = transformLng(t - 105, n - 35);
|
|
1134
1134
|
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 +
|
|
1135
|
+
let l = Math.sin(r);
|
|
1136
|
+
l = 1 - ee * l * l;
|
|
1137
|
+
const c = Math.sqrt(l);
|
|
1138
|
+
o = o * 180 / (a * (1 - ee) / (l * c) * PI), i = i * 180 / (a / c * Math.cos(r) * PI);
|
|
1139
|
+
const s = n + o, m = t + i;
|
|
1140
1140
|
return `${(t * 2 - m).toFixed(6)}, ${(n * 2 - s).toFixed(6)}`;
|
|
1141
1141
|
}
|
|
1142
1142
|
}
|
|
1143
1143
|
function calculateCirclePoints(e, t) {
|
|
1144
|
-
const n = fromLonLat(e), o = t * 1e3,
|
|
1144
|
+
const n = fromLonLat(e), o = t * 1e3, i = [
|
|
1145
1145
|
n[0] - o,
|
|
1146
1146
|
n[1] - o,
|
|
1147
1147
|
n[0] + o,
|
|
1148
1148
|
n[1] + o
|
|
1149
|
-
], r = transformExtent(
|
|
1149
|
+
], r = transformExtent(i, projection.mercator, projection.data);
|
|
1150
1150
|
return {
|
|
1151
1151
|
leftTopPoint: { lng: r[0], lat: r[3] },
|
|
1152
1152
|
rightTopPoint: { lng: r[2], lat: r[3] },
|
|
@@ -1162,17 +1162,17 @@ function lonLatToMercator(e) {
|
|
|
1162
1162
|
}
|
|
1163
1163
|
function mercatorToLonLat(e, t = "lonlat") {
|
|
1164
1164
|
const n = { lon: 0, lat: 0 }, o = e[0] / equatorialCircumference * 180;
|
|
1165
|
-
let
|
|
1166
|
-
return
|
|
1165
|
+
let i = e[1] / equatorialCircumference * 180;
|
|
1166
|
+
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
1167
|
}
|
|
1168
1168
|
function calculateBoundingBox(e) {
|
|
1169
|
-
let t = 1 / 0, n = -1 / 0, o = 1 / 0,
|
|
1169
|
+
let t = 1 / 0, n = -1 / 0, o = 1 / 0, i = -1 / 0;
|
|
1170
1170
|
e.forEach((h) => {
|
|
1171
1171
|
const [g, k] = h;
|
|
1172
|
-
t = Math.min(t, k), n = Math.max(n, k), o = Math.min(o, g),
|
|
1172
|
+
t = Math.min(t, k), n = Math.max(n, k), o = Math.min(o, g), i = Math.max(i, g);
|
|
1173
1173
|
});
|
|
1174
|
-
const r =
|
|
1175
|
-
return [f, p,
|
|
1174
|
+
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;
|
|
1175
|
+
return [f, p, u, y];
|
|
1176
1176
|
}
|
|
1177
1177
|
const transformUtils = {
|
|
1178
1178
|
gcj02ToWgs84,
|
|
@@ -1183,13 +1183,13 @@ const transformUtils = {
|
|
|
1183
1183
|
}, mapInstance$5 = ref(), renderTrackStyleSetInstance = (e) => mapInstance$5.value = e, stopIcon = "", stopColor = "#E31818", slowIcon = "", slowColor = "#1890FF", dropletsIcon = "", trackList$1 = ref([]);
|
|
1184
1184
|
let animationFeature;
|
|
1185
1185
|
const renderTrackLine = (e, t, n) => {
|
|
1186
|
-
var r,
|
|
1186
|
+
var r, l, c;
|
|
1187
1187
|
const o = e[t];
|
|
1188
1188
|
if (!o) return;
|
|
1189
1189
|
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(
|
|
1190
|
+
const i = trackList$1.value.map((s) => s.centerPoint);
|
|
1191
|
+
if (i.length >= 2) {
|
|
1192
|
+
const s = new LineString(i), m = new Feature({ geometry: s });
|
|
1193
1193
|
m.setStyle(
|
|
1194
1194
|
new Style({
|
|
1195
1195
|
stroke: new Stroke({
|
|
@@ -1197,13 +1197,13 @@ const renderTrackLine = (e, t, n) => {
|
|
|
1197
1197
|
width: 2
|
|
1198
1198
|
})
|
|
1199
1199
|
})
|
|
1200
|
-
), m.setId(t), m.set("type", "line"), (
|
|
1201
|
-
const
|
|
1202
|
-
|
|
1203
|
-
const
|
|
1200
|
+
), m.setId(t), m.set("type", "line"), (l = (r = shipTrackVectorLayer.value) == null ? void 0 : r.getSource()) == null || l.clear(), shipTrackLineFeatures.value = [];
|
|
1201
|
+
const d = shipTrackLineFeatures.value.findIndex((f) => f.getId() === t);
|
|
1202
|
+
d >= 0 ? shipTrackLineFeatures.value[d] = m : shipTrackLineFeatures.value.push(m);
|
|
1203
|
+
const u = createAnimatedIconFeature(n, i);
|
|
1204
1204
|
trackLineVectorSource.value = new VectorSource({
|
|
1205
1205
|
features: [...shipTrackLineFeatures.value]
|
|
1206
|
-
}), animationFeature =
|
|
1206
|
+
}), animationFeature = u, console.log(animationFeature), shipTrackVectorLayer.value = new VectorLayer({
|
|
1207
1207
|
source: trackLineVectorSource.value,
|
|
1208
1208
|
zIndex: 102
|
|
1209
1209
|
}), renderPoint(n), (c = mapInstance$5.value) == null || c.addLayer(shipTrackVectorLayer.value);
|
|
@@ -1240,25 +1240,25 @@ let polyline, linePath, startMarker, position, geoMarker, vectorLayer;
|
|
|
1240
1240
|
const trackAnimating = ref(!1);
|
|
1241
1241
|
let distance = 0, lastTime = Date.now(), moveFeatureHandler = null;
|
|
1242
1242
|
const moveFeature = (e, t) => {
|
|
1243
|
-
var
|
|
1244
|
-
const n = Number(50 * t), o = ((
|
|
1245
|
-
if (distance = (distance + n *
|
|
1243
|
+
var u, f, p;
|
|
1244
|
+
const n = Number(50 * t), o = ((u = e.frameState) == null ? void 0 : u.time) ?? Date.now(), i = o - lastTime;
|
|
1245
|
+
if (distance = (distance + n * i / 1e6) % 2, lastTime = o, distance >= 1) {
|
|
1246
1246
|
stopAnimation();
|
|
1247
1247
|
return;
|
|
1248
1248
|
}
|
|
1249
1249
|
const r = linePath.getCoordinateAt(
|
|
1250
1250
|
distance > 1 ? 2 - distance : distance
|
|
1251
|
-
),
|
|
1251
|
+
), l = linePath.getCoordinateAt(
|
|
1252
1252
|
distance > 1 ? distance - 0.01 : distance
|
|
1253
1253
|
), c = linePath.getCoordinateAt(
|
|
1254
1254
|
distance > 1 ? 2 - distance : distance + 0.01
|
|
1255
1255
|
), m = getRotation(
|
|
1256
|
-
transformUtils.mercatorToLonLat(
|
|
1256
|
+
transformUtils.mercatorToLonLat(l, "array"),
|
|
1257
1257
|
transformUtils.mercatorToLonLat(c, "array")
|
|
1258
1258
|
) * Math.PI / 180;
|
|
1259
1259
|
(f = geoMarkerStyle.getText()) == null || f.setRotation(m), position.setCoordinates(r);
|
|
1260
|
-
const
|
|
1261
|
-
|
|
1260
|
+
const d = getVectorContext(e);
|
|
1261
|
+
d.context_.save(), d.setStyle(geoMarkerStyle), d.drawGeometry(position), d.context_.restore(), (p = mapInstance$5.value) == null || p.render();
|
|
1262
1262
|
}, startAnimation = () => {
|
|
1263
1263
|
var e;
|
|
1264
1264
|
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 +1287,38 @@ const moveFeature = (e, t) => {
|
|
|
1287
1287
|
source: new VectorSource({
|
|
1288
1288
|
features: [geoMarker]
|
|
1289
1289
|
})
|
|
1290
|
-
}), (o = mapInstance$5.value) == null || o.addLayer(vectorLayer), moveFeatureHandler = (
|
|
1290
|
+
}), (o = mapInstance$5.value) == null || o.addLayer(vectorLayer), moveFeatureHandler = (i) => moveFeature(i, t), startAnimation();
|
|
1291
1291
|
}, renderPoint = (e) => {
|
|
1292
1292
|
if (!mapInstance$5.value) return;
|
|
1293
1293
|
const t = trackList$1.value || [];
|
|
1294
1294
|
if (!(t && t.length > 1)) return [];
|
|
1295
|
-
const n = { 16: 24, 17: 15, default: 4 }, o = [],
|
|
1296
|
-
for (let c = 0; c <
|
|
1295
|
+
const n = { 16: 24, 17: 15, default: 4 }, o = [], i = t.length;
|
|
1296
|
+
for (let c = 0; c < i; c++) {
|
|
1297
1297
|
t[c].index = c;
|
|
1298
1298
|
const s = mapInstance$5.value.getPixelFromCoordinate(t[c].centerPoint);
|
|
1299
1299
|
if (s) {
|
|
1300
1300
|
let m = s.concat(s);
|
|
1301
1301
|
m = adjustBounds(m, [20, 20]);
|
|
1302
|
-
const
|
|
1303
|
-
if (!
|
|
1304
|
-
if (
|
|
1305
|
-
const f = n[
|
|
1302
|
+
const d = mapInstance$5.value.getView().getZoom();
|
|
1303
|
+
if (!d) return;
|
|
1304
|
+
if (d > 15) {
|
|
1305
|
+
const f = n[d] || n.default;
|
|
1306
1306
|
m = adjustBounds(m, [f, f]);
|
|
1307
1307
|
}
|
|
1308
|
-
let
|
|
1308
|
+
let u = !0;
|
|
1309
1309
|
if (t[c].state !== "0") {
|
|
1310
1310
|
for (let f = 0; f < o.length; f++)
|
|
1311
1311
|
if (isOverlapping(m, o[f].bounds)) {
|
|
1312
|
-
|
|
1312
|
+
u = !1;
|
|
1313
1313
|
break;
|
|
1314
1314
|
}
|
|
1315
1315
|
}
|
|
1316
|
-
|
|
1316
|
+
u && (t[c].bounds = m, o.push(t[c]));
|
|
1317
1317
|
}
|
|
1318
1318
|
}
|
|
1319
|
-
const r = getIconStyle(stopIcon),
|
|
1319
|
+
const r = getIconStyle(stopIcon), l = getIconStyle(slowIcon);
|
|
1320
1320
|
o.forEach((c, s) => {
|
|
1321
|
-
var
|
|
1321
|
+
var u, f;
|
|
1322
1322
|
const m = new Feature({
|
|
1323
1323
|
geometry: new Point(c.centerPoint)
|
|
1324
1324
|
});
|
|
@@ -1339,12 +1339,12 @@ const moveFeature = (e, t) => {
|
|
|
1339
1339
|
})
|
|
1340
1340
|
})
|
|
1341
1341
|
]), trackLineVectorSource.value.addFeature(m);
|
|
1342
|
-
const
|
|
1342
|
+
const d = new Feature({
|
|
1343
1343
|
geometry: new Point(fromLonLat(c.center))
|
|
1344
1344
|
});
|
|
1345
|
-
if (
|
|
1345
|
+
if (d.set("type", "track_label"), d.set("track_label_index", s), d.setStyle(
|
|
1346
1346
|
setTrackLabelStyle(c, e)
|
|
1347
|
-
), trackLineVectorSource.value.addFeature(
|
|
1347
|
+
), trackLineVectorSource.value.addFeature(d), typeof c == "object" && c.hasOwnProperty("state")) {
|
|
1348
1348
|
const p = new Feature({
|
|
1349
1349
|
geometry: new Point(c.centerPoint)
|
|
1350
1350
|
});
|
|
@@ -1357,27 +1357,27 @@ const moveFeature = (e, t) => {
|
|
|
1357
1357
|
}),
|
|
1358
1358
|
zIndex: 99
|
|
1359
1359
|
}), h = [];
|
|
1360
|
-
Number(c.state) === 0 ? ((
|
|
1360
|
+
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
1361
|
}
|
|
1362
1362
|
}), renderArrow(o, e), renderIconPoint();
|
|
1363
1363
|
}, renderArrow = (e, t) => {
|
|
1364
1364
|
const n = e.length;
|
|
1365
1365
|
n || (e.push(trackList$1.value[0]), e.push(trackList$1.value[trackList$1.value.length - 1]));
|
|
1366
1366
|
for (let o = 0; o < n - 1; o++) {
|
|
1367
|
-
let
|
|
1368
|
-
const r = e[o],
|
|
1369
|
-
if (
|
|
1370
|
-
|
|
1367
|
+
let i;
|
|
1368
|
+
const r = e[o], l = (e[o + 1].index + r.index) / 2;
|
|
1369
|
+
if (l % 2 === 0)
|
|
1370
|
+
i = trackList$1.value[l].centerPoint;
|
|
1371
1371
|
else {
|
|
1372
|
-
const c = trackList$1.value[Math.floor(
|
|
1372
|
+
const c = trackList$1.value[Math.floor(l)], s = trackList$1.value[Math.ceil(l)];
|
|
1373
1373
|
if (c && s) {
|
|
1374
|
-
const [m,
|
|
1375
|
-
|
|
1374
|
+
const [m, d] = c.centerPoint, [u, f] = s.centerPoint;
|
|
1375
|
+
i = [(m + u) / 2, (d + f) / 2];
|
|
1376
1376
|
}
|
|
1377
1377
|
}
|
|
1378
|
-
if (
|
|
1378
|
+
if (i) {
|
|
1379
1379
|
const c = new Feature({
|
|
1380
|
-
geometry: new Point(
|
|
1380
|
+
geometry: new Point(i)
|
|
1381
1381
|
});
|
|
1382
1382
|
c.set("type", "track_arrow"), c.setStyle(
|
|
1383
1383
|
new Style({
|
|
@@ -1397,18 +1397,18 @@ const moveFeature = (e, t) => {
|
|
|
1397
1397
|
}
|
|
1398
1398
|
}, renderIconPoint = () => {
|
|
1399
1399
|
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((
|
|
1400
|
+
(trackList$1.value.length < 2 ? [trackList$1.value[0]] : [trackList$1.value[0], trackList$1.value[trackList$1.value.length - 1]]).forEach((i) => {
|
|
1401
1401
|
const r = new Feature({
|
|
1402
|
-
geometry: new Point(
|
|
1402
|
+
geometry: new Point(i.centerPoint)
|
|
1403
1403
|
});
|
|
1404
|
-
r.set("type", "track_begin"), r.set("data",
|
|
1405
|
-
const
|
|
1404
|
+
r.set("type", "track_begin"), r.set("data", i);
|
|
1405
|
+
const l = i.index === 0 && trackList$1.value.length >= 2 ? t : n;
|
|
1406
1406
|
r.setStyle(
|
|
1407
1407
|
new Style({
|
|
1408
1408
|
text: new Text({
|
|
1409
1409
|
font: "Normal 14px map-iconfont",
|
|
1410
1410
|
text: getIconFont(e),
|
|
1411
|
-
fill: new Fill({ color:
|
|
1411
|
+
fill: new Fill({ color: l })
|
|
1412
1412
|
}),
|
|
1413
1413
|
zIndex: 101
|
|
1414
1414
|
})
|
|
@@ -1416,7 +1416,7 @@ const moveFeature = (e, t) => {
|
|
|
1416
1416
|
});
|
|
1417
1417
|
}, setTrackLabelStyle = (e, t) => new Style({
|
|
1418
1418
|
renderer: (n, o) => {
|
|
1419
|
-
const
|
|
1419
|
+
const i = o.context, c = {
|
|
1420
1420
|
id: e.id || "",
|
|
1421
1421
|
center: n,
|
|
1422
1422
|
text: e.time,
|
|
@@ -1426,10 +1426,10 @@ const moveFeature = (e, t) => {
|
|
|
1426
1426
|
selected: !0,
|
|
1427
1427
|
type: "TrackTime"
|
|
1428
1428
|
};
|
|
1429
|
-
drawLabel(
|
|
1429
|
+
drawLabel(i, c, trackLabels.value);
|
|
1430
1430
|
}
|
|
1431
|
-
}), mapInstance$4 = ref(), renderCustomOverlaySetInstance = (e) => mapInstance$4.value = e, drawCustomContent = (e, t, n, o = "top-left",
|
|
1432
|
-
var
|
|
1431
|
+
}), mapInstance$4 = ref(), renderCustomOverlaySetInstance = (e) => mapInstance$4.value = e, drawCustomContent = (e, t, n, o = "top-left", i = !1) => {
|
|
1432
|
+
var d, u;
|
|
1433
1433
|
if (!t || !mapInstance$4.value) return;
|
|
1434
1434
|
document.querySelectorAll(".truck-custom-content").forEach((f) => {
|
|
1435
1435
|
var p;
|
|
@@ -1437,15 +1437,15 @@ const moveFeature = (e, t) => {
|
|
|
1437
1437
|
});
|
|
1438
1438
|
const r = document.createElement("div");
|
|
1439
1439
|
r.innerHTML = n;
|
|
1440
|
-
const
|
|
1440
|
+
const l = new Overlay({
|
|
1441
1441
|
element: r,
|
|
1442
1442
|
position: t,
|
|
1443
1443
|
// 初始位置
|
|
1444
1444
|
positioning: o,
|
|
1445
|
-
stopEvent:
|
|
1445
|
+
stopEvent: i
|
|
1446
1446
|
// 设置不阻拦事件
|
|
1447
1447
|
});
|
|
1448
|
-
if (
|
|
1448
|
+
if (i) {
|
|
1449
1449
|
let f = !1, p = [0, 0], y = [0, 0], h = 0, g = 0;
|
|
1450
1450
|
r.addEventListener("mousedown", function(k) {
|
|
1451
1451
|
var I;
|
|
@@ -1458,43 +1458,43 @@ const moveFeature = (e, t) => {
|
|
|
1458
1458
|
}), document.addEventListener("mousemove", function(k) {
|
|
1459
1459
|
var T;
|
|
1460
1460
|
if (f) {
|
|
1461
|
-
const I = (T = mapInstance$4.value) == null ? void 0 : T.getCoordinateFromPixel([k.clientX - y[0], k.clientY - y[1]]),
|
|
1462
|
-
|
|
1461
|
+
const I = (T = mapInstance$4.value) == null ? void 0 : T.getCoordinateFromPixel([k.clientX - y[0], k.clientY - y[1]]), F = I[0] - p[0], V = I[1] - p[1];
|
|
1462
|
+
l.setPosition([p[0] + F, p[1] + V]);
|
|
1463
1463
|
}
|
|
1464
1464
|
}), document.addEventListener("mouseup", function() {
|
|
1465
1465
|
f = !1;
|
|
1466
1466
|
});
|
|
1467
1467
|
}
|
|
1468
|
-
(
|
|
1468
|
+
(d = mapInstance$4.value) == null || d.addOverlay(l);
|
|
1469
1469
|
const c = r.querySelector(".close-button");
|
|
1470
1470
|
c && c.addEventListener("click", () => {
|
|
1471
1471
|
var f, p;
|
|
1472
|
-
(f = mapInstance$4.value) == null || f.removeOverlay(
|
|
1472
|
+
(f = mapInstance$4.value) == null || f.removeOverlay(l), (p = r.parentNode) == null || p.removeChild(r);
|
|
1473
1473
|
});
|
|
1474
|
-
const s = JSON.parse(JSON.stringify(t)), m = (
|
|
1475
|
-
return
|
|
1474
|
+
const s = JSON.parse(JSON.stringify(t)), m = (u = mapInstance$4.value) == null ? void 0 : u.getCoordinateFromPixel(s);
|
|
1475
|
+
return l.setPosition(m), l;
|
|
1476
1476
|
}, mapInstance$3 = ref(), renderTrackSetInstance = (e) => mapInstance$3.value = e, showTracks = ref([]), trackList = ref([]);
|
|
1477
1477
|
ref(null);
|
|
1478
|
-
const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o,
|
|
1479
|
-
var
|
|
1480
|
-
if (console.log(
|
|
1478
|
+
const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, i = "ship") => {
|
|
1479
|
+
var d;
|
|
1480
|
+
if (console.log(i), nextTick(() => {
|
|
1481
1481
|
hiddenAllShips();
|
|
1482
|
-
}).then((
|
|
1482
|
+
}).then((u) => {
|
|
1483
1483
|
}), (t == null ? void 0 : t.length) < 2) {
|
|
1484
|
-
((
|
|
1484
|
+
((d = showTracks.value) == null ? void 0 : d.findIndex((u) => u.id === e)) < 0 && showTracks.value.push({ id: e, length: "" });
|
|
1485
1485
|
return;
|
|
1486
1486
|
}
|
|
1487
1487
|
const r = {};
|
|
1488
|
-
t.forEach((
|
|
1489
|
-
|
|
1488
|
+
t.forEach((u) => {
|
|
1489
|
+
u.state ? u.state = Number(u.state) : delete u.state;
|
|
1490
1490
|
}), trackId.value = e, r[e] = t, trackList.value = t;
|
|
1491
|
-
const
|
|
1492
|
-
(
|
|
1491
|
+
const l = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"], c = r[e].map(
|
|
1492
|
+
(u) => transform([u.lon, u.lat], projection.data, projection.mercator)
|
|
1493
1493
|
), s = new LineString(c), m = formatUtils.formatLength(s, o) || "--";
|
|
1494
1494
|
nextTick(() => {
|
|
1495
1495
|
var f, p;
|
|
1496
|
-
const
|
|
1497
|
-
|
|
1496
|
+
const u = (f = showTracks.value) == null ? void 0 : f.findIndex((y) => y.id === e);
|
|
1497
|
+
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
1498
|
resetTrackView(e);
|
|
1499
1499
|
}).then(() => {
|
|
1500
1500
|
}), (p = mapInstance$3.value) == null || p.on("moveend", () => {
|
|
@@ -1506,8 +1506,8 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1506
1506
|
var t;
|
|
1507
1507
|
const e = ref(null);
|
|
1508
1508
|
(t = mapInstance$3.value) == null || t.on("pointermove", (n) => {
|
|
1509
|
-
var
|
|
1510
|
-
e.value && ((
|
|
1509
|
+
var i, r, l, c;
|
|
1510
|
+
e.value && ((i = mapInstance$3.value) == null || i.removeOverlay(e.value));
|
|
1511
1511
|
const o = (r = mapInstance$3.value) == null ? void 0 : r.forEachFeatureAtPixel(n.pixel, (s) => s);
|
|
1512
1512
|
if (o) {
|
|
1513
1513
|
const s = o.get("data");
|
|
@@ -1519,7 +1519,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1519
1519
|
<div class="item-item">${formatMinutesToDDHHMM(Number(s.stayTime))}</div>
|
|
1520
1520
|
</div>
|
|
1521
1521
|
`);
|
|
1522
|
-
const
|
|
1522
|
+
const d = `
|
|
1523
1523
|
<div class="track-point-popup">
|
|
1524
1524
|
<div class="item">
|
|
1525
1525
|
<div class="item-label">状态</div>
|
|
@@ -1550,9 +1550,9 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1550
1550
|
<div class="item-item">${s.time}</div>
|
|
1551
1551
|
</div>
|
|
1552
1552
|
${m ?? m}
|
|
1553
|
-
</div>`,
|
|
1554
|
-
if (
|
|
1555
|
-
const f = drawCustomContent(s.time,
|
|
1553
|
+
</div>`, u = (l = mapInstance$3.value) == null ? void 0 : l.getPixelFromCoordinate(n.coordinate);
|
|
1554
|
+
if (u) {
|
|
1555
|
+
const f = drawCustomContent(s.time, u, d, "top-left");
|
|
1556
1556
|
f && (e.value = f);
|
|
1557
1557
|
}
|
|
1558
1558
|
} else
|
|
@@ -1564,10 +1564,10 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1564
1564
|
}, playTrack = (e, t) => {
|
|
1565
1565
|
handlePlay(String(e), t);
|
|
1566
1566
|
}, resetTrackView = (e) => {
|
|
1567
|
-
var
|
|
1567
|
+
var i;
|
|
1568
1568
|
const t = mapInstance$3.value.getView(), n = e ? shipTrackLineFeatures.value.find((r) => r.getId() === e) : shipTrackLineFeatures.value[0];
|
|
1569
1569
|
if (!n) return;
|
|
1570
|
-
const o = (
|
|
1570
|
+
const o = (i = n == null ? void 0 : n.getGeometry()) == null ? void 0 : i.getExtent();
|
|
1571
1571
|
if (o != null && o.length)
|
|
1572
1572
|
try {
|
|
1573
1573
|
const r = buffer(o, Math.max(o[2] - o[0], o[3] - o[1]) * 0.02);
|
|
@@ -1576,8 +1576,8 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1576
1576
|
console.log(r);
|
|
1577
1577
|
}
|
|
1578
1578
|
}, formatMinutesToDDHHMM = (e) => {
|
|
1579
|
-
const t = hooks.duration(e, "minutes"), n = Math.floor(t.asDays()), o = t.hours(),
|
|
1580
|
-
let r = `${String(
|
|
1579
|
+
const t = hooks.duration(e, "minutes"), n = Math.floor(t.asDays()), o = t.hours(), i = t.minutes();
|
|
1580
|
+
let r = `${String(i).padStart(2, "0")}分`;
|
|
1581
1581
|
return o !== 0 && (r = `${String(o).padStart(2, "0")}时${r}`), n !== 0 && (r = `${String(n).padStart(2, "0")}天${r}`), r;
|
|
1582
1582
|
}, _hoisted_1$3 = {
|
|
1583
1583
|
key: 0,
|
|
@@ -1594,16 +1594,16 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1594
1594
|
emits: ["switchGreenDot", "switchMapTile"],
|
|
1595
1595
|
setup(e, { emit: t }) {
|
|
1596
1596
|
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);
|
|
1597
|
+
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 = () => {
|
|
1598
|
+
o.disableGreenDot || r.value >= mapZoom.shipGreenDotMax || (s.value = !s.value, i("switchGreenDot", s.value));
|
|
1601
1599
|
}, d = () => {
|
|
1600
|
+
i("switchMapTile", o.mapTileMode === BaseMapType.vector ? BaseMapType.satellite : BaseMapType.vector);
|
|
1601
|
+
}, u = () => {
|
|
1602
1602
|
var h, g;
|
|
1603
|
-
|
|
1603
|
+
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
1604
|
}, f = () => {
|
|
1605
1605
|
var h;
|
|
1606
|
-
(h = c.value) == null || h.removeInteraction(),
|
|
1606
|
+
(h = c.value) == null || h.removeInteraction(), l.value = !1;
|
|
1607
1607
|
};
|
|
1608
1608
|
return onMounted(() => {
|
|
1609
1609
|
nextTick(() => {
|
|
@@ -1622,8 +1622,8 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1622
1622
|
createElementVNode("div", _hoisted_2$1, [
|
|
1623
1623
|
h.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
|
|
1624
1624
|
key: 0,
|
|
1625
|
-
class: normalizeClass(["switch-btn", `${
|
|
1626
|
-
onClick:
|
|
1625
|
+
class: normalizeClass(["switch-btn", `${l.value && "active"}`]),
|
|
1626
|
+
onClick: u
|
|
1627
1627
|
}, g[5] || (g[5] = [
|
|
1628
1628
|
createElementVNode("i", { class: "map-iconfont icon-measure" }, null, -1),
|
|
1629
1629
|
createElementVNode("div", { class: "button-text" }, "测距", -1)
|
|
@@ -1639,7 +1639,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1639
1639
|
h.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
|
|
1640
1640
|
key: 2,
|
|
1641
1641
|
class: normalizeClass(`switch-btn ${h.mapTileMode === unref(BaseMapType).satellite && "active"}`),
|
|
1642
|
-
onClick: g[0] || (g[0] = (k) =>
|
|
1642
|
+
onClick: g[0] || (g[0] = (k) => d())
|
|
1643
1643
|
}, g[7] || (g[7] = [
|
|
1644
1644
|
createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
|
|
1645
1645
|
createElementVNode("div", { class: "button-text" }, "图层", -1)
|
|
@@ -1647,7 +1647,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1647
1647
|
h.vehicleMode === "truck" ? (openBlock(), createElementBlock("div", {
|
|
1648
1648
|
key: 3,
|
|
1649
1649
|
class: normalizeClass(`switch-btn ${h.mapTileMode === unref(BaseMapType).satellite && "active"}`),
|
|
1650
|
-
onClick: g[1] || (g[1] = (k) =>
|
|
1650
|
+
onClick: g[1] || (g[1] = (k) => d())
|
|
1651
1651
|
}, g[8] || (g[8] = [
|
|
1652
1652
|
createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
|
|
1653
1653
|
createElementVNode("div", { class: "button-text" }, "卫星", -1)
|
|
@@ -1673,8 +1673,8 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1673
1673
|
])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
1674
1674
|
h.vehicleMode === "ship" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
1675
1675
|
createElementVNode("div", {
|
|
1676
|
-
class: normalizeClass(["switch-btn", `${
|
|
1677
|
-
onClick:
|
|
1676
|
+
class: normalizeClass(["switch-btn", `${l.value && "active"}`]),
|
|
1677
|
+
onClick: u
|
|
1678
1678
|
}, g[11] || (g[11] = [
|
|
1679
1679
|
createElementVNode("i", { class: "map-iconfont icon-measure" }, null, -1),
|
|
1680
1680
|
createElementVNode("div", { class: "button-text" }, "测距", -1)
|
|
@@ -1690,7 +1690,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1690
1690
|
], 64)) : createCommentVNode("", !0),
|
|
1691
1691
|
createElementVNode("div", {
|
|
1692
1692
|
class: normalizeClass(["switch-btn", { active: h.mapTileMode === unref(BaseMapType).satellite }]),
|
|
1693
|
-
onClick:
|
|
1693
|
+
onClick: d
|
|
1694
1694
|
}, g[13] || (g[13] = [
|
|
1695
1695
|
createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
|
|
1696
1696
|
createElementVNode("div", { class: "button-text" }, "卫星", -1)
|
|
@@ -1698,12 +1698,12 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1698
1698
|
], 64))
|
|
1699
1699
|
], 2),
|
|
1700
1700
|
createElementVNode("div", _hoisted_3, [
|
|
1701
|
-
|
|
1701
|
+
l.value ? (openBlock(), createBlock(Measure, {
|
|
1702
1702
|
key: 0,
|
|
1703
1703
|
ref_key: "measureRef",
|
|
1704
1704
|
ref: c,
|
|
1705
|
-
visible:
|
|
1706
|
-
"onUpdate:visible": g[4] || (g[4] = (k) =>
|
|
1705
|
+
visible: l.value,
|
|
1706
|
+
"onUpdate:visible": g[4] || (g[4] = (k) => l.value = k),
|
|
1707
1707
|
onClose: f,
|
|
1708
1708
|
"view-mode": h.viewMode
|
|
1709
1709
|
}, null, 8, ["visible", "view-mode"])) : createCommentVNode("", !0)
|
|
@@ -1715,15 +1715,15 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1715
1715
|
setup(e, { expose: t }) {
|
|
1716
1716
|
const n = inject("mapInstance");
|
|
1717
1717
|
return t({
|
|
1718
|
-
setScaleLine: (
|
|
1718
|
+
setScaleLine: (i) => {
|
|
1719
1719
|
var c;
|
|
1720
|
-
|
|
1720
|
+
i || (i = "metric");
|
|
1721
1721
|
const r = new ScaleLine$1({
|
|
1722
|
-
units:
|
|
1723
|
-
}),
|
|
1724
|
-
|
|
1722
|
+
units: i
|
|
1723
|
+
}), l = document.getElementById("scale-line-container");
|
|
1724
|
+
l && (r.setTarget(l), (c = n == null ? void 0 : n.value) == null || c.addControl(r));
|
|
1725
1725
|
}
|
|
1726
|
-
}), (
|
|
1726
|
+
}), (i, r) => (openBlock(), createElementBlock("div", _hoisted_1$2));
|
|
1727
1727
|
}
|
|
1728
1728
|
}), ScaleLine = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-d666f80d"]]), _hoisted_1$1 = { class: "zoom" }, _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
1729
1729
|
__name: "zoomControl",
|
|
@@ -1735,14 +1735,14 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1735
1735
|
setup(e) {
|
|
1736
1736
|
const t = inject("mapInstance"), n = () => {
|
|
1737
1737
|
if (!t.value) return;
|
|
1738
|
-
const
|
|
1739
|
-
r &&
|
|
1738
|
+
const i = t.value.getView(), r = i.getZoom();
|
|
1739
|
+
r && i.setZoom(r + 1);
|
|
1740
1740
|
}, o = () => {
|
|
1741
1741
|
if (!t.value) return;
|
|
1742
|
-
const
|
|
1743
|
-
r &&
|
|
1742
|
+
const i = t.value.getView(), r = i.getZoom();
|
|
1743
|
+
r && i.setZoom(r - 1);
|
|
1744
1744
|
};
|
|
1745
|
-
return (
|
|
1745
|
+
return (i, r) => (openBlock(), createElementBlock("div", _hoisted_1$1, [
|
|
1746
1746
|
createElementVNode("div", {
|
|
1747
1747
|
onClick: n,
|
|
1748
1748
|
class: "button big-button"
|
|
@@ -1760,10 +1760,10 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1760
1760
|
},
|
|
1761
1761
|
setup(e) {
|
|
1762
1762
|
useCssVars((r) => ({
|
|
1763
|
-
"4bfada56":
|
|
1763
|
+
"4bfada56": i.value
|
|
1764
1764
|
}));
|
|
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,
|
|
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"), i = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? "auto auto 0 5px" : "0 auto auto 5px");
|
|
1766
|
+
return (r, l) => (openBlock(), createElementBlock("div", _hoisted_1, [
|
|
1767
1767
|
createElementVNode("img", {
|
|
1768
1768
|
src: unref(CDN_URL) + n.value,
|
|
1769
1769
|
width: o.value,
|
|
@@ -1785,30 +1785,30 @@ const loadImage = new Image();
|
|
|
1785
1785
|
loadImage.src = `${CDN_URL}/map/map-load.svg`;
|
|
1786
1786
|
loadImage.crossOrigin = "anonymous";
|
|
1787
1787
|
const setTruckStyle = (e, t, n, o) => new Style({
|
|
1788
|
-
renderer: (
|
|
1789
|
-
const
|
|
1790
|
-
|
|
1788
|
+
renderer: (i, r) => {
|
|
1789
|
+
const l = r.context;
|
|
1790
|
+
l.save();
|
|
1791
1791
|
let c = 1;
|
|
1792
|
-
|
|
1793
|
-
let [s, m] =
|
|
1792
|
+
l.scale(c, c);
|
|
1793
|
+
let [s, m] = i;
|
|
1794
1794
|
s = Number(s) / c - 20, m = Number(m) / c;
|
|
1795
|
-
const
|
|
1795
|
+
const d = s - 70, u = m - 68;
|
|
1796
1796
|
let f = 180;
|
|
1797
1797
|
const p = 56, y = "#FFFFFF";
|
|
1798
1798
|
let h = 176;
|
|
1799
1799
|
const g = 52;
|
|
1800
1800
|
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(
|
|
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(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
1802
|
const I = `${t.slice(0, 2) + " · " + t.slice(2)}`;
|
|
1803
|
-
if (
|
|
1804
|
-
const
|
|
1803
|
+
if (l.fillText(I, d + 12, u + 32), l.save(), l.restore(), o != null && o.length) {
|
|
1804
|
+
const V = l.measureText(I).width + 12;
|
|
1805
1805
|
let P = 0;
|
|
1806
1806
|
o.forEach((v) => {
|
|
1807
|
-
v === DEVICE_TYPE.CAMERA && (
|
|
1807
|
+
v === DEVICE_TYPE.CAMERA && (l.drawImage(cameraImage, s - 54 + V + P * 56, m - 64, 50, 50), ++P), v === DEVICE_TYPE.LOAD && (l.drawImage(loadImage, s - 54 + V + P * 56, m - 64, 50, 50), ++P);
|
|
1808
1808
|
});
|
|
1809
1809
|
}
|
|
1810
|
-
const
|
|
1811
|
-
|
|
1810
|
+
const F = dotImage$1;
|
|
1811
|
+
l.drawImage(F, s + f / 2 - 90, m, 50 / c, 50 / c), l.restore();
|
|
1812
1812
|
}
|
|
1813
1813
|
}), mapInstance$2 = ref(), renderDashboardSetInstance = (e) => mapInstance$2.value = e;
|
|
1814
1814
|
ref([]);
|
|
@@ -1839,8 +1839,8 @@ const renderTrucksMarker = (e) => {
|
|
|
1839
1839
|
if (!mapInstance$1.value || (focusShipData.value = e, !(e != null && e.lon && (e != null && e.lat)))) return;
|
|
1840
1840
|
const t = formatUtils.convertSixHundredThousandToLatLng(e.lon, e.lat), n = mapInstance$1.value.getPixelFromCoordinate(transform(t, projection.data, projection.mercator));
|
|
1841
1841
|
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(
|
|
1842
|
+
const o = mapInstance$1.value.getView(), i = new Point(t);
|
|
1843
|
+
o.setCenter(transform(i.getCoordinates(), projection.data, projection.mercator));
|
|
1844
1844
|
}, clearAllTruck = () => {
|
|
1845
1845
|
vehicle.value.clearAllShip();
|
|
1846
1846
|
}, drawTruckIcon = (e, t, n) => {
|
|
@@ -1856,12 +1856,12 @@ const renderTrucksMarker = (e) => {
|
|
|
1856
1856
|
var r;
|
|
1857
1857
|
if (!mapInstance$1.value) return;
|
|
1858
1858
|
const e = mapInstance$1.value.getView().getZoom(), t = 120, n = 60;
|
|
1859
|
-
function o(
|
|
1860
|
-
return
|
|
1859
|
+
function o(l) {
|
|
1860
|
+
return l < 14 ? n : l >= 14 && l <= 18 ? Math.round((l - 14) * (t - n) / 4 + n) : t;
|
|
1861
1861
|
}
|
|
1862
|
-
const
|
|
1863
|
-
(r = document.querySelectorAll(".truck-custom-content")) == null || r.forEach((
|
|
1864
|
-
|
|
1862
|
+
const i = o(e);
|
|
1863
|
+
(r = document.querySelectorAll(".truck-custom-content")) == null || r.forEach((l) => {
|
|
1864
|
+
l.style.width = `${i}px`, l.style.height = `${i}px`;
|
|
1865
1865
|
});
|
|
1866
1866
|
}, mapInstance = ref(), drawPolygonSetInstance = (e) => mapInstance.value = e;
|
|
1867
1867
|
let layerState = "drawn", drawnState = "undrawn";
|
|
@@ -1907,13 +1907,13 @@ function createHelpTooltip() {
|
|
|
1907
1907
|
}
|
|
1908
1908
|
let squareLimitError = !1, lineLimitError = !1;
|
|
1909
1909
|
const validateSquareLimit = (e) => {
|
|
1910
|
-
let n = 1 / 0, o = -1 / 0,
|
|
1910
|
+
let n = 1 / 0, o = -1 / 0, i = 1 / 0, r = -1 / 0;
|
|
1911
1911
|
e == null || e.forEach((s) => {
|
|
1912
|
-
const m = transform(s, projection.mercator, projection.data),
|
|
1913
|
-
n = Math.min(n,
|
|
1912
|
+
const m = transform(s, projection.mercator, projection.data), d = m[0], u = m[1];
|
|
1913
|
+
n = Math.min(n, u), o = Math.max(o, u), i = Math.min(i, d), r = Math.max(r, d);
|
|
1914
1914
|
});
|
|
1915
|
-
const
|
|
1916
|
-
squareLimitError =
|
|
1915
|
+
const l = (o - n) * 111, c = (r - i) * 111;
|
|
1916
|
+
squareLimitError = l > 150 || c > 150;
|
|
1917
1917
|
};
|
|
1918
1918
|
let storeFeature, callbackFunction = null;
|
|
1919
1919
|
const addInteraction = (e) => {
|
|
@@ -1925,29 +1925,29 @@ const addInteraction = (e) => {
|
|
|
1925
1925
|
style: [drawPolygonStyle.drawing, circleStyle]
|
|
1926
1926
|
}), (o = mapInstance.value) == null || o.addInteraction(draw), createMeasureTooltip(), createHelpTooltip();
|
|
1927
1927
|
let t;
|
|
1928
|
-
draw.on("drawstart", function(
|
|
1928
|
+
draw.on("drawstart", function(i) {
|
|
1929
1929
|
var r;
|
|
1930
|
-
layerState = "drawn", sketch =
|
|
1931
|
-
const c =
|
|
1932
|
-
if (lineLimitError = Number(getLength(
|
|
1930
|
+
layerState = "drawn", sketch = i.feature, t = (r = sketch.getGeometry()) == null ? void 0 : r.on("change", function(l) {
|
|
1931
|
+
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);
|
|
1932
|
+
if (lineLimitError = Number(getLength(u) / 1e3) > 150, validateSquareLimit(d), measureTooltipElement && s && (measureTooltipElement.innerHTML = `
|
|
1933
1933
|
<span class="text">面积:${s}${lineLimitError || squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
|
|
1934
1934
|
`), helpTooltipElement && s) {
|
|
1935
1935
|
let p = "";
|
|
1936
1936
|
parseFloat(s) > 0 && (p = `
|
|
1937
1937
|
<div class="text ${squareLimitError ? "error" : ""}">面积:${s}${squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</div>`), helpTooltipElement.innerHTML = `${p}
|
|
1938
|
-
<span class="text ${lineLimitError ? "error" : ""}">线段${
|
|
1938
|
+
<span class="text ${lineLimitError ? "error" : ""}">线段${d.length - 2}:${f}${lineLimitError ? '<span class="error pl-4">超出可以绘画的距离</span>' : ""}</span>
|
|
1939
1939
|
<div><span class="text">单击继续,双击结束</span></div>
|
|
1940
1940
|
`;
|
|
1941
1941
|
}
|
|
1942
1942
|
}), drawnState = "drawing";
|
|
1943
|
-
}), draw.on("drawend", function(
|
|
1944
|
-
if (
|
|
1945
|
-
storeFeature =
|
|
1946
|
-
const r = endFn(
|
|
1943
|
+
}), draw.on("drawend", function(i) {
|
|
1944
|
+
if (i.feature.getGeometry()) {
|
|
1945
|
+
storeFeature = i.feature;
|
|
1946
|
+
const r = endFn(i.feature);
|
|
1947
1947
|
r != null && r.length && callbackFunction && callbackFunction(r);
|
|
1948
1948
|
}
|
|
1949
1949
|
if (sketch = null, measureTooltipElement = null, createMeasureTooltip(), t && unByKey(t), drawnState = "drawend", draw && mapInstance.value) {
|
|
1950
|
-
const r = mapInstance.value.getInteractions().getArray().find((
|
|
1950
|
+
const r = mapInstance.value.getInteractions().getArray().find((l) => getUid(l) === getUid(draw));
|
|
1951
1951
|
r && mapInstance.value.removeInteraction(r), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement);
|
|
1952
1952
|
}
|
|
1953
1953
|
});
|
|
@@ -1955,10 +1955,10 @@ const addInteraction = (e) => {
|
|
|
1955
1955
|
var e, t, n;
|
|
1956
1956
|
if (mapInstance.value) {
|
|
1957
1957
|
if (document.querySelectorAll(".ol-tooltip.ol-tooltip-draw-polygon").forEach((o) => {
|
|
1958
|
-
var
|
|
1959
|
-
(
|
|
1958
|
+
var i;
|
|
1959
|
+
(i = o == null ? void 0 : o.parentNode) == null || i.removeChild(o);
|
|
1960
1960
|
}), 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((
|
|
1961
|
+
const o = mapInstance.value.getInteractions().getArray().find((i) => getUid(i) === getUid(draw));
|
|
1962
1962
|
o && ((n = mapInstance.value) == null || n.removeInteraction(o));
|
|
1963
1963
|
}
|
|
1964
1964
|
drawnState = "undrawn", layerState = "destroyed";
|
|
@@ -1966,15 +1966,15 @@ const addInteraction = (e) => {
|
|
|
1966
1966
|
}, endFn = (e) => {
|
|
1967
1967
|
var t, n, o;
|
|
1968
1968
|
if (e.getGeometry()) {
|
|
1969
|
-
const
|
|
1970
|
-
(t =
|
|
1971
|
-
|
|
1969
|
+
const i = [], l = e.getGeometry().getCoordinates();
|
|
1970
|
+
(t = l[0]) == null || t.forEach((s) => {
|
|
1971
|
+
i.push(transform(s, projection.mercator, projection.data));
|
|
1972
1972
|
});
|
|
1973
|
-
const c =
|
|
1973
|
+
const c = l[0][l[0].length - 2];
|
|
1974
1974
|
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
1975
|
reset();
|
|
1976
1976
|
}), !lineLimitError && !squareLimitError)
|
|
1977
|
-
return
|
|
1977
|
+
return i;
|
|
1978
1978
|
draw && ((o = mapInstance.value) == null || o.removeInteraction(draw)), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement);
|
|
1979
1979
|
}
|
|
1980
1980
|
}, initFeature = (e) => {
|
|
@@ -1982,14 +1982,14 @@ const addInteraction = (e) => {
|
|
|
1982
1982
|
if (e && (callbackFunction = e), layerState = "drawn", storeFeature) {
|
|
1983
1983
|
const o = storeFeature.getGeometry();
|
|
1984
1984
|
if (!o) return;
|
|
1985
|
-
const
|
|
1985
|
+
const i = formatUtils.formatArea(o, LENGTH_UNIT.NM);
|
|
1986
1986
|
measureTooltipElement && (measureTooltipElement.innerHTML = `
|
|
1987
|
-
<span class="text">面积:${
|
|
1987
|
+
<span class="text">面积:${i}${lineLimitError || squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
|
|
1988
1988
|
`), (t = drawVector.getSource()) == null || t.addFeature(storeFeature);
|
|
1989
1989
|
const r = endFn(storeFeature);
|
|
1990
1990
|
r != null && r.length && callbackFunction && callbackFunction(r);
|
|
1991
|
-
const
|
|
1992
|
-
(n = mapInstance.value) == null || n.getView().setCenter(
|
|
1991
|
+
const l = getCenter(storeFeature.getGeometry().getExtent());
|
|
1992
|
+
(n = mapInstance.value) == null || n.getView().setCenter(l);
|
|
1993
1993
|
}
|
|
1994
1994
|
}, pointerMoveHandler = function(e) {
|
|
1995
1995
|
var n;
|
|
@@ -2030,18 +2030,18 @@ dotImage.crossOrigin = "anonymous";
|
|
|
2030
2030
|
const dotActiveImage = new Image();
|
|
2031
2031
|
dotActiveImage.crossOrigin = "anonymous";
|
|
2032
2032
|
const setPointStyle = (e, t, n) => {
|
|
2033
|
-
const { color: o, url:
|
|
2034
|
-
return (r ||
|
|
2033
|
+
const { color: o, url: i, activeUrl: r, activeColor: l } = n;
|
|
2034
|
+
return (r || i) && (e ? dotActiveImage.src = CDN_URL + (r || i) : dotImage.src = CDN_URL + (i || r)), new Style({
|
|
2035
2035
|
renderer: (c, s) => {
|
|
2036
2036
|
const m = s.context;
|
|
2037
2037
|
m.save();
|
|
2038
|
-
const
|
|
2039
|
-
let [
|
|
2040
|
-
|
|
2041
|
-
const p = m.measureText(t).width, y =
|
|
2042
|
-
if (fillRectRadius(m, y, h + 13 *
|
|
2038
|
+
const d = window.devicePixelRatio || 1;
|
|
2039
|
+
let [u, f] = c;
|
|
2040
|
+
u = Number(u), f = Number(f), m.font = `${12 * d}px Arial`;
|
|
2041
|
+
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;
|
|
2042
|
+
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
2043
|
const I = e ? dotActiveImage : dotImage;
|
|
2044
|
-
m.drawImage(I,
|
|
2044
|
+
m.drawImage(I, u - I.width / 2, f - I.height / 2, 30 * d, 30 * d);
|
|
2045
2045
|
}
|
|
2046
2046
|
m.restore();
|
|
2047
2047
|
}
|
|
@@ -2087,7 +2087,7 @@ class PointMarkerClass {
|
|
|
2087
2087
|
let n = {};
|
|
2088
2088
|
t.forEach((o) => {
|
|
2089
2089
|
var r;
|
|
2090
|
-
const
|
|
2090
|
+
const i = [o.lon, o.lat];
|
|
2091
2091
|
if (((r = this.highlightPoint) == null ? void 0 : r.id) === o.id)
|
|
2092
2092
|
n = {
|
|
2093
2093
|
id: o.id,
|
|
@@ -2096,12 +2096,12 @@ class PointMarkerClass {
|
|
|
2096
2096
|
pointType: o.pointType
|
|
2097
2097
|
};
|
|
2098
2098
|
else {
|
|
2099
|
-
const
|
|
2099
|
+
const l = this.getFeature(o, i);
|
|
2100
2100
|
this.pointMarkerList.push({
|
|
2101
2101
|
id: o.id,
|
|
2102
2102
|
name: o.name,
|
|
2103
2103
|
lonlat: [Number(o.lon), Number(o.lat)],
|
|
2104
|
-
feature:
|
|
2104
|
+
feature: l,
|
|
2105
2105
|
pointType: o.pointType
|
|
2106
2106
|
});
|
|
2107
2107
|
}
|
|
@@ -2147,23 +2147,23 @@ class PointMarkerClass {
|
|
|
2147
2147
|
*/
|
|
2148
2148
|
highlightPointMarker(t) {
|
|
2149
2149
|
if (!this.mapInstance) return;
|
|
2150
|
-
const { id: n, name: o, fullName:
|
|
2150
|
+
const { id: n, name: o, fullName: i, lon: r, lat: l, pointType: c } = t, s = [Number(r), Number(l)];
|
|
2151
2151
|
this.highlightPoint = {
|
|
2152
2152
|
id: n,
|
|
2153
2153
|
name: o,
|
|
2154
|
-
fullName:
|
|
2154
|
+
fullName: i,
|
|
2155
2155
|
lonlat: s,
|
|
2156
2156
|
pointType: c
|
|
2157
2157
|
}, this.setPointCenter(s);
|
|
2158
2158
|
}
|
|
2159
2159
|
// 获取feature
|
|
2160
2160
|
getFeature(t, n) {
|
|
2161
|
-
var
|
|
2161
|
+
var i;
|
|
2162
2162
|
const o = new Feature({
|
|
2163
2163
|
geometry: new Point(fromLonLat(n))
|
|
2164
2164
|
});
|
|
2165
2165
|
return o.set("data", t), o.setStyle(
|
|
2166
|
-
setPointStyle(((
|
|
2166
|
+
setPointStyle(((i = this.highlightPoint) == null ? void 0 : i.id) === t.id, t.name, this.options)
|
|
2167
2167
|
), o;
|
|
2168
2168
|
}
|
|
2169
2169
|
/**
|
|
@@ -2176,8 +2176,8 @@ class PointMarkerClass {
|
|
|
2176
2176
|
*/
|
|
2177
2177
|
setPointCenter(t, n = { customZoom: mapZoom.findShip, type: 1 }) {
|
|
2178
2178
|
if (!this.mapInstance) return;
|
|
2179
|
-
const { customZoom: o = mapZoom.findShip, type:
|
|
2180
|
-
(
|
|
2179
|
+
const { customZoom: o = mapZoom.findShip, type: i = 1 } = n, r = this.mapInstance.getView(), l = r.getZoom();
|
|
2180
|
+
(i === 1 || l > o && i === 2 || l < o && i === 3) && r.setZoom(o);
|
|
2181
2181
|
const c = new Point(t);
|
|
2182
2182
|
r.setCenter(transform(c.getCoordinates(), projection.data, projection.mercator));
|
|
2183
2183
|
}
|
|
@@ -2197,7 +2197,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2197
2197
|
setup(e, { expose: t, emit: n }) {
|
|
2198
2198
|
const o = ref();
|
|
2199
2199
|
provide("mapInstance", o);
|
|
2200
|
-
const
|
|
2200
|
+
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
2201
|
tiandituTile: new TileLayer({ source: new XYZ({ url: baseMap.tiandituTile }) }),
|
|
2202
2202
|
tiandituTileMark: new TileLayer({ source: new XYZ({ url: baseMap.tiandituTileMark }) }),
|
|
2203
2203
|
tiandituImgTile: new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTile }), visible: !1 }),
|
|
@@ -2246,7 +2246,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2246
2246
|
}, g = (v) => {
|
|
2247
2247
|
var L;
|
|
2248
2248
|
s.vehicleMode !== "ship" && (v = !1), (L = o.value) == null || L.getLayers().forEach((w) => {
|
|
2249
|
-
getUid(w) === getUid(p.greenMark) && (w.setVisible(v),
|
|
2249
|
+
getUid(w) === getUid(p.greenMark) && (w.setVisible(v), u.value = v);
|
|
2250
2250
|
});
|
|
2251
2251
|
}, k = ref(BaseMapType.satellite), T = (v) => {
|
|
2252
2252
|
var L;
|
|
@@ -2255,15 +2255,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2255
2255
|
});
|
|
2256
2256
|
}, I = () => {
|
|
2257
2257
|
const v = o.value.getView(), L = v.getZoom();
|
|
2258
|
-
L &&
|
|
2258
|
+
L && F(L);
|
|
2259
2259
|
const w = v.calculateExtent(o.value.getSize());
|
|
2260
|
-
w && L &&
|
|
2261
|
-
},
|
|
2262
|
-
var S, M, C, E,
|
|
2260
|
+
w && L && V(w, L);
|
|
2261
|
+
}, F = (v) => {
|
|
2262
|
+
var S, M, C, E, x;
|
|
2263
2263
|
m.value = v, g(v < mapZoom.shipGreenDotMax);
|
|
2264
2264
|
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)) : !
|
|
2266
|
-
},
|
|
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)) : !d.value && u.value && v <= mapZoom.shipGreenDotMax ? (f.value = !0, w == null || w.setVisible(!0), (E = shipsLayer.value) == null || E.setVisible(!1), (x = largeAmountShipsLayer.value) == null || x.setVisible(!1)) : (f.value = !1, w == null || w.setVisible(!1)), c("zoomChanged", v);
|
|
2266
|
+
}, V = (v, L) => {
|
|
2267
2267
|
const w = transform([v[0], v[1]], projection.mercator, projection.data), S = transform([v[2], v[3]], projection.mercator, projection.data);
|
|
2268
2268
|
c("extentChanged", { extent: [w, S], zoom: L });
|
|
2269
2269
|
};
|
|
@@ -2275,14 +2275,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2275
2275
|
renderShip: renderShips,
|
|
2276
2276
|
renderTrack: (v, L, w) => {
|
|
2277
2277
|
var S, M;
|
|
2278
|
-
currentTrackId.value = v, showTrackLayer.value = !0,
|
|
2278
|
+
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
2279
|
},
|
|
2280
2280
|
findTruck,
|
|
2281
2281
|
removeTruckIcon,
|
|
2282
2282
|
clearAllTruck,
|
|
2283
2283
|
closeTrack: () => {
|
|
2284
2284
|
var v, L;
|
|
2285
|
-
showTrackLayer.value = !1, (v = shipTrackVectorLayer.value) == null || v.setVisible(!1), (L = selectShipsLayer.value) == null || L.setVisible(!0),
|
|
2285
|
+
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
2286
|
},
|
|
2287
2287
|
closeTruckTrack: () => {
|
|
2288
2288
|
var v, L;
|
|
@@ -2308,7 +2308,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2308
2308
|
removerLayer: removeShipTrackLineFeatureByIndex,
|
|
2309
2309
|
renderMarker,
|
|
2310
2310
|
setMarkerPosition: (v) => {
|
|
2311
|
-
|
|
2311
|
+
d.value = !0, setMarkerPosition(v);
|
|
2312
2312
|
},
|
|
2313
2313
|
getZoomAndCenter: () => {
|
|
2314
2314
|
var M;
|
|
@@ -2340,7 +2340,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2340
2340
|
}), (v, L) => (openBlock(), createElementBlock("div", {
|
|
2341
2341
|
class: "map-page map-container",
|
|
2342
2342
|
ref_key: "pageRef",
|
|
2343
|
-
ref:
|
|
2343
|
+
ref: i
|
|
2344
2344
|
}, [
|
|
2345
2345
|
L[0] || (L[0] = createElementVNode("div", {
|
|
2346
2346
|
id: "map",
|
|
@@ -2349,7 +2349,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2349
2349
|
createVNode(ToolPanel, {
|
|
2350
2350
|
"vehicle-mode": v.vehicleMode,
|
|
2351
2351
|
"view-mode": v.viewMode,
|
|
2352
|
-
"disable-green-dot":
|
|
2352
|
+
"disable-green-dot": d.value,
|
|
2353
2353
|
"show-track-layer": unref(showTrackLayer),
|
|
2354
2354
|
"map-tile-mode": k.value,
|
|
2355
2355
|
onSwitchGreenDot: g,
|
|
@@ -2367,7 +2367,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2367
2367
|
}, null, 512),
|
|
2368
2368
|
createVNode(ZoomControl, {
|
|
2369
2369
|
ref_key: "zoomControl",
|
|
2370
|
-
ref:
|
|
2370
|
+
ref: l
|
|
2371
2371
|
}, null, 512)
|
|
2372
2372
|
], 64)) : createCommentVNode("", !0),
|
|
2373
2373
|
createVNode(Copyright, {
|