zhihao-ui 1.2.46 → 1.2.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es/{Map-BIIy56u4.js → Map-DkNn4z7I.js} +616 -582
- package/dist/es/index.js +2 -2
- package/dist/index.css +1 -1
- package/dist/types/components/Map/Map.vue.d.ts +4 -1
- package/dist/types/components/Map/index.d.ts +9 -3
- package/dist/types/components/Map/render/canvasRender/renderCustomOverlay.d.ts +1 -1
- package/dist/types/components/Map/render/renderPoint.d.ts +1 -0
- package/dist/types/components/Map/render/renderTruck.d.ts +2 -2
- package/dist/types/components/Map/utils/transform.d.ts +3 -0
- package/dist/umd/index.css +1 -1
- package/dist/umd/index.umd.cjs +18 -18
- package/package.json +1 -1
|
@@ -8,7 +8,7 @@ import { g as getForegroundColor } from "./DatePicker-C6kyMZ8-.js";
|
|
|
8
8
|
import { w as withInstall } from "./utils-DvDZ3DAF.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, d, u, m, f, p, y, h, v, M, S, V, C, P, x, g, w) {
|
|
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 = d, this.createdAt = u, this.speed = m, this.from = f, this.sailStatus = p, this.hdg = y, this.cog = h, this.posType = v, this.type = M, this.angle = S, this.leftIconColor = V, this.existDevice = C, this.existMobile = P, this.existWaterGauge = x, this.selected = g, this.blinkColors = w;
|
|
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,10 +130,10 @@ 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 u,
|
|
133
|
+
const o = inject("mapInstance"), i = n, r = useModel(e, "visible"), l = ref("3"), c = ref([]), s = ref(!1), d = new VectorSource();
|
|
134
|
+
let u, m, f, p, y;
|
|
135
135
|
const h = new VectorLayer({
|
|
136
|
-
source:
|
|
136
|
+
source: d,
|
|
137
137
|
style: {
|
|
138
138
|
"fill-color": "rgba(255, 255, 255, 0.2)",
|
|
139
139
|
"stroke-color": "#ffcc33",
|
|
@@ -144,17 +144,17 @@ const formatLength = function(e, t) {
|
|
|
144
144
|
}), v = function(k) {
|
|
145
145
|
if (k.dragging)
|
|
146
146
|
return;
|
|
147
|
-
let
|
|
148
|
-
u && (
|
|
149
|
-
},
|
|
150
|
-
var k,
|
|
151
|
-
o != null && o.value && ((k = o == null ? void 0 : o.value) == null || k.on("pointermove", v), (
|
|
147
|
+
let T = "点击选择起点";
|
|
148
|
+
u && (T = "单击继续,双击结束"), m && (m.innerHTML = T, f.setPosition(k.coordinate), m.classList.remove("hidden"));
|
|
149
|
+
}, M = () => {
|
|
150
|
+
var k, T;
|
|
151
|
+
o != null && o.value && ((k = o == null ? void 0 : o.value) == null || k.on("pointermove", v), (T = o == null ? void 0 : o.value) == null || T.getViewport().addEventListener("mouseout", function() {
|
|
152
152
|
var E;
|
|
153
|
-
(E =
|
|
153
|
+
(E = m == null ? void 0 : m.classList) == null || E.add("hidden");
|
|
154
154
|
}), s.value = !0);
|
|
155
155
|
};
|
|
156
|
-
let
|
|
157
|
-
const
|
|
156
|
+
let S;
|
|
157
|
+
const V = new Style({
|
|
158
158
|
fill: new Fill({
|
|
159
159
|
color: "rgba(255, 255, 255, 0.2)"
|
|
160
160
|
}),
|
|
@@ -173,99 +173,99 @@ const formatLength = function(e, t) {
|
|
|
173
173
|
})
|
|
174
174
|
})
|
|
175
175
|
});
|
|
176
|
-
function
|
|
177
|
-
var k,
|
|
176
|
+
function C() {
|
|
177
|
+
var k, T;
|
|
178
178
|
if (o != null && o.value) {
|
|
179
179
|
if (c.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((E) => {
|
|
180
|
-
var
|
|
181
|
-
(
|
|
182
|
-
}),
|
|
183
|
-
const E = o.value.getInteractions().getArray().find((
|
|
180
|
+
var I;
|
|
181
|
+
(I = E == null ? void 0 : E.parentNode) == null || I.removeChild(E);
|
|
182
|
+
}), d.clear(), S) {
|
|
183
|
+
const E = o.value.getInteractions().getArray().find((I) => getUid(I) === getUid(S));
|
|
184
184
|
E && ((k = o.value) == null || k.removeInteraction(E));
|
|
185
185
|
}
|
|
186
|
-
(
|
|
186
|
+
(T = o.value) == null || T.removeLayer(h), m != null && m.parentNode && m.parentNode.removeChild(m), p != null && p.parentNode && p.parentNode.removeChild(p);
|
|
187
187
|
}
|
|
188
188
|
}
|
|
189
|
-
function
|
|
190
|
-
var
|
|
191
|
-
|
|
192
|
-
source:
|
|
189
|
+
function P() {
|
|
190
|
+
var T, E;
|
|
191
|
+
C(), (T = o == null ? void 0 : o.value) == null || T.addLayer(h), S = new Draw({
|
|
192
|
+
source: d,
|
|
193
193
|
type: "LineString",
|
|
194
194
|
style: function() {
|
|
195
|
-
return
|
|
195
|
+
return V;
|
|
196
196
|
},
|
|
197
197
|
// 添加条件函数,判断是否应该触发绘制
|
|
198
|
-
condition: function(
|
|
199
|
-
return
|
|
198
|
+
condition: function(I) {
|
|
199
|
+
return I.originalEvent.target.tagName !== "DIV";
|
|
200
200
|
}
|
|
201
|
-
}), (E = o == null ? void 0 : o.value) == null || E.addInteraction(
|
|
201
|
+
}), (E = o == null ? void 0 : o.value) == null || E.addInteraction(S), g(), x();
|
|
202
202
|
let k;
|
|
203
|
-
|
|
203
|
+
S.on("drawstart", function(I) {
|
|
204
204
|
var $;
|
|
205
|
-
u =
|
|
205
|
+
u = I.feature;
|
|
206
206
|
let F;
|
|
207
207
|
k = ($ = u.getGeometry()) == null ? void 0 : $.on("change", function(R) {
|
|
208
208
|
const B = R.target;
|
|
209
|
-
let N = formatUtils.formatLength(B, Number(
|
|
210
|
-
F = B.getLastCoordinate(), p && N && (p.innerHTML = N),
|
|
209
|
+
let N = formatUtils.formatLength(B, Number(l.value));
|
|
210
|
+
F = B.getLastCoordinate(), p && N && (p.innerHTML = N), y.setPosition(F);
|
|
211
211
|
});
|
|
212
|
-
}),
|
|
213
|
-
var
|
|
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="${((
|
|
212
|
+
}), S.on("drawend", function() {
|
|
213
|
+
var I, F;
|
|
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="${((I = c.value) == null ? void 0 : I.length) - 1}"><i class="map-iconfont icon-delete"></i></div>`), (F = document.querySelector(".ol-selectable:has(.ol-tooltip-delete-button):last-child .ol-tooltip-delete-button")) == null || F.addEventListener("click", ($) => {
|
|
215
215
|
var B;
|
|
216
216
|
$.preventDefault(), $.stopPropagation();
|
|
217
217
|
const R = (B = $.target) == null ? void 0 : B.getAttribute("data-index");
|
|
218
|
-
R &&
|
|
219
|
-
}),
|
|
218
|
+
R && w(Number(R));
|
|
219
|
+
}), y.setOffset([0, -7]), u = null, p = null, g(), k && unByKey(k);
|
|
220
220
|
});
|
|
221
221
|
}
|
|
222
|
-
function
|
|
222
|
+
function x() {
|
|
223
223
|
var k;
|
|
224
|
-
|
|
225
|
-
element:
|
|
224
|
+
m != null && m.parentNode && m.parentNode.removeChild(m), m = document.createElement("div"), m.className = "ol-tooltip hidden", f = new Overlay({
|
|
225
|
+
element: m,
|
|
226
226
|
offset: [15, 0],
|
|
227
227
|
positioning: "center-left"
|
|
228
228
|
}), (k = o == null ? void 0 : o.value) == null || k.addOverlay(f);
|
|
229
229
|
}
|
|
230
230
|
function g() {
|
|
231
231
|
var k;
|
|
232
|
-
p != null && p.parentNode && p.parentNode.removeChild(p), p = document.createElement("div"), p.className = "ol-tooltip ol-tooltip-measure",
|
|
232
|
+
p != null && p.parentNode && p.parentNode.removeChild(p), p = document.createElement("div"), p.className = "ol-tooltip ol-tooltip-measure", y = new Overlay({
|
|
233
233
|
element: p,
|
|
234
234
|
offset: [0, -15],
|
|
235
235
|
positioning: "bottom-center",
|
|
236
236
|
stopEvent: !1,
|
|
237
237
|
insertFirst: !1
|
|
238
|
-
}), (k = o == null ? void 0 : o.value) == null || k.addOverlay(
|
|
238
|
+
}), (k = o == null ? void 0 : o.value) == null || k.addOverlay(y);
|
|
239
239
|
}
|
|
240
|
-
const
|
|
241
|
-
var
|
|
240
|
+
const w = (k) => {
|
|
241
|
+
var I, F;
|
|
242
242
|
c.value[k] && c.value.splice(k, 1);
|
|
243
|
-
const
|
|
244
|
-
|
|
245
|
-
const E =
|
|
246
|
-
E[k] &&
|
|
247
|
-
},
|
|
248
|
-
|
|
243
|
+
const T = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
|
|
244
|
+
T[k] && ((F = (I = T[k]) == null ? void 0 : I.parentNode) == null || F.removeChild(T[k]));
|
|
245
|
+
const E = d.getFeatures();
|
|
246
|
+
E[k] && d.removeFeature(E[k]);
|
|
247
|
+
}, L = () => {
|
|
248
|
+
i("close");
|
|
249
249
|
};
|
|
250
250
|
return watch(() => r, () => {
|
|
251
|
-
r.value && !s.value && (
|
|
251
|
+
r.value && !s.value && (M(), P());
|
|
252
252
|
}, { deep: !0, immediate: !0 }), t({
|
|
253
|
-
addInteraction:
|
|
254
|
-
removeInteraction:
|
|
255
|
-
}), (k,
|
|
253
|
+
addInteraction: P,
|
|
254
|
+
removeInteraction: C
|
|
255
|
+
}), (k, T) => r.value && k.viewMode !== "WxMiniprogram" ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
|
|
256
256
|
createElementVNode("div", { class: "header" }, [
|
|
257
|
-
|
|
257
|
+
T[1] || (T[1] = createElementVNode("div", { class: "title" }, "测量", -1)),
|
|
258
258
|
createElementVNode("i", {
|
|
259
|
-
onClick:
|
|
259
|
+
onClick: L,
|
|
260
260
|
class: "map-iconfont icon-close"
|
|
261
261
|
})
|
|
262
262
|
]),
|
|
263
263
|
createElementVNode("div", _hoisted_2$2, [
|
|
264
|
-
|
|
264
|
+
T[2] || (T[2] = createElementVNode("div", { class: "tips" }, "在地图上点击多个点测量距离,距离单位", -1)),
|
|
265
265
|
createVNode(unref(ElSelect), {
|
|
266
266
|
class: "select-length-unit",
|
|
267
|
-
modelValue:
|
|
268
|
-
"onUpdate:modelValue":
|
|
267
|
+
modelValue: l.value,
|
|
268
|
+
"onUpdate:modelValue": T[0] || (T[0] = (E) => l.value = E)
|
|
269
269
|
}, {
|
|
270
270
|
default: withCtx(() => [
|
|
271
271
|
createVNode(unref(ElOption), {
|
|
@@ -285,19 +285,19 @@ const formatLength = function(e, t) {
|
|
|
285
285
|
}, 8, ["modelValue"])
|
|
286
286
|
]),
|
|
287
287
|
createElementVNode("div", _hoisted_3$1, [
|
|
288
|
-
(openBlock(!0), createElementBlock(Fragment, null, renderList(c.value, (E,
|
|
288
|
+
(openBlock(!0), createElementBlock(Fragment, null, renderList(c.value, (E, I) => (openBlock(), createElementBlock("div", {
|
|
289
289
|
class: "measure-history-item",
|
|
290
|
-
key:
|
|
290
|
+
key: I
|
|
291
291
|
}, [
|
|
292
292
|
createElementVNode("div", _hoisted_4, [
|
|
293
|
-
|
|
294
|
-
createElementVNode("span", _hoisted_5, "线段" + toDisplayString(
|
|
293
|
+
T[3] || (T[3] = createElementVNode("i", { class: "map-iconfont icon-line" }, null, -1)),
|
|
294
|
+
createElementVNode("span", _hoisted_5, "线段" + toDisplayString(I + 1), 1),
|
|
295
295
|
createElementVNode("span", _hoisted_6, toDisplayString(E), 1)
|
|
296
296
|
]),
|
|
297
297
|
createElementVNode("div", {
|
|
298
298
|
class: "delete-button",
|
|
299
|
-
onClick: (F) =>
|
|
300
|
-
},
|
|
299
|
+
onClick: (F) => w(I)
|
|
300
|
+
}, T[4] || (T[4] = [
|
|
301
301
|
createElementVNode("i", { class: "map-iconfont icon-delete" }, null, -1)
|
|
302
302
|
]), 8, _hoisted_7)
|
|
303
303
|
]))), 128))
|
|
@@ -336,34 +336,34 @@ const formatLength = function(e, t) {
|
|
|
336
336
|
}), renderMarker = (e, t = !0, n = !0) => {
|
|
337
337
|
var u;
|
|
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}, ${
|
|
343
|
+
const r = n ? `${o}, ${i}` : "";
|
|
344
344
|
(u = marker.value) == null || u.setStyle(createIconStyle(r));
|
|
345
|
-
const
|
|
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 m = new Translate({
|
|
352
352
|
layers: [c]
|
|
353
353
|
});
|
|
354
|
-
|
|
354
|
+
m.on("translating", function(f) {
|
|
355
355
|
var h;
|
|
356
|
-
const p = f.features.item(0).getGeometry().getCoordinates(),
|
|
357
|
-
markerPosition.value = `${
|
|
358
|
-
}), mapInstance$8.value.addInteraction(
|
|
356
|
+
const p = f.features.item(0).getGeometry().getCoordinates(), y = toLonLat(p);
|
|
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(m);
|
|
359
359
|
}
|
|
360
|
-
const
|
|
361
|
-
s.setCenter(transform(
|
|
360
|
+
const d = new Point([o, i]);
|
|
361
|
+
s.setCenter(transform(d.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,131 +430,131 @@ const multiplyPixelRatio = (e) => {
|
|
|
430
430
|
}),
|
|
431
431
|
zIndex: 100
|
|
432
432
|
}), getRotation = (e, t, n) => {
|
|
433
|
-
function o(
|
|
434
|
-
return 180 * (
|
|
433
|
+
function o(m) {
|
|
434
|
+
return 180 * (m % (2 * Math.PI)) / Math.PI;
|
|
435
435
|
}
|
|
436
|
-
function
|
|
437
|
-
return
|
|
436
|
+
function i(m) {
|
|
437
|
+
return m % 360 * Math.PI / 180;
|
|
438
438
|
}
|
|
439
|
-
function r(
|
|
440
|
-
if (!
|
|
441
|
-
if (!Array.isArray(
|
|
442
|
-
if (
|
|
443
|
-
return
|
|
444
|
-
if (
|
|
439
|
+
function r(m) {
|
|
440
|
+
if (!m) throw new Error("Coordinate is required");
|
|
441
|
+
if (!Array.isArray(m)) {
|
|
442
|
+
if (m.type === "Feature" && m.geometry !== null && m.geometry.type === "Point")
|
|
443
|
+
return m.geometry.coordinates;
|
|
444
|
+
if (m.type === "Point") return m.coordinates;
|
|
445
445
|
}
|
|
446
|
-
if (Array.isArray(
|
|
447
|
-
return
|
|
446
|
+
if (Array.isArray(m) && m.length >= 2 && !Array.isArray(m[0]) && !Array.isArray(m[1]))
|
|
447
|
+
return m;
|
|
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(m, f, p = {}) {
|
|
453
453
|
if (p.final)
|
|
454
|
-
return function(
|
|
455
|
-
return (
|
|
456
|
-
}(
|
|
457
|
-
const
|
|
458
|
-
return o(Math.atan2(
|
|
454
|
+
return function(x, g) {
|
|
455
|
+
return (l(g, x) + 180) % 360;
|
|
456
|
+
}(m, f);
|
|
457
|
+
const y = r(m), h = r(f), v = i(y[0]), M = i(h[0]), S = i(y[1]), V = i(h[1]), C = Math.sin(M - v) * Math.cos(V), P = Math.cos(S) * Math.sin(V) - Math.sin(S) * Math.cos(V) * Math.cos(M - v);
|
|
458
|
+
return o(Math.atan2(C, P));
|
|
459
459
|
}
|
|
460
|
-
function c(
|
|
461
|
-
return !isNaN(
|
|
460
|
+
function c(m) {
|
|
461
|
+
return !isNaN(m) && m !== null && !Array.isArray(m);
|
|
462
462
|
}
|
|
463
|
-
function s(
|
|
464
|
-
return
|
|
463
|
+
function s(m, f = {}, p = {}) {
|
|
464
|
+
return m || console.log("Coordinates are required"), Array.isArray(m) || console.log("Coordinates must be an Array"), m.length < 2 && console.log("Coordinates must be at least 2 numbers long"), (!c(m[0]) || !c(m[1])) && console.log("Coordinates must contain numbers"), d({ type: "Point", coordinates: m }, f, p);
|
|
465
465
|
}
|
|
466
|
-
function m
|
|
467
|
-
const
|
|
468
|
-
return p.id !== void 0 && (
|
|
466
|
+
function d(m, f = {}, p = {}) {
|
|
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 = m, y;
|
|
469
469
|
}
|
|
470
|
-
const u =
|
|
470
|
+
const u = l(s(e), s(t), n);
|
|
471
471
|
return u < 0 ? 360 + u : u;
|
|
472
|
-
}, labelAlpha = 0.8, pixelRatio = window.devicePixelRatio || 1, labelFont = `500 ${12 * pixelRatio}px Arial`, labelOutSize = 2 * pixelRatio, labelHeight = 10 * pixelRatio, fillRectRadius = (e, t, n, o,
|
|
473
|
-
e.beginPath(), e.moveTo(t +
|
|
472
|
+
}, 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) => {
|
|
473
|
+
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();
|
|
474
474
|
}, getPixelFromCoordinate = (e) => {
|
|
475
475
|
if (!e || e.length === 0)
|
|
476
476
|
throw new Error("Points array is empty or invalid.");
|
|
477
|
-
let t = 1 / 0, n = 1 / 0, o = -1 / 0,
|
|
478
|
-
for (const [r,
|
|
479
|
-
r < t && (t = r),
|
|
480
|
-
return [t, n, o,
|
|
477
|
+
let t = 1 / 0, n = 1 / 0, o = -1 / 0, i = -1 / 0;
|
|
478
|
+
for (const [r, l] of e)
|
|
479
|
+
r < t && (t = r), l < n && (n = l), r > o && (o = r), l > i && (i = l);
|
|
480
|
+
return [t, n, o, i];
|
|
481
481
|
}, calculatePolygonCentroid = (e) => {
|
|
482
482
|
if (!Array.isArray(e) || e.length < 3)
|
|
483
483
|
throw new Error("A polygon must have at least 3 coordinates.");
|
|
484
484
|
let t = 0, n = 0, o = 0;
|
|
485
|
-
const
|
|
486
|
-
for (let c = 0; c <
|
|
487
|
-
const [s,
|
|
488
|
-
o += f, t += (s + u) * f, n += (
|
|
485
|
+
const i = e.length;
|
|
486
|
+
for (let c = 0; c < i - 1; c++) {
|
|
487
|
+
const [s, d] = e[c], [u, m] = e[c + 1], f = s * m - u * d;
|
|
488
|
+
o += f, t += (s + u) * f, n += (d + m) * f;
|
|
489
489
|
}
|
|
490
490
|
if (o *= 0.5, o === 0)
|
|
491
491
|
throw new Error("多边形面积为零");
|
|
492
|
-
const r = t / (6 * o),
|
|
493
|
-
return [r,
|
|
492
|
+
const r = t / (6 * o), l = n / (6 * o);
|
|
493
|
+
return [r, l];
|
|
494
494
|
}, rotateShapeModel = (e, t) => {
|
|
495
|
-
const [n, o] = calculatePolygonCentroid(e),
|
|
495
|
+
const [n, o] = calculatePolygonCentroid(e), i = t * Math.PI / 180, r = Math.cos(i), l = Math.sin(i);
|
|
496
496
|
return e.map(([c, s]) => {
|
|
497
|
-
const
|
|
498
|
-
return [
|
|
497
|
+
const d = c - n, u = s - o, m = d * r - u * l + n, f = d * l + u * r + o;
|
|
498
|
+
return [m, f];
|
|
499
499
|
});
|
|
500
500
|
}, getTopLeftPoint = (e) => [e[0], e[3]], getBottomLeftPoint = (e) => [e[2], e[3]], getBottomRightPoint = (e) => [e[2], e[1]], getTopRighttPoint = (e) => [e[0], e[1]];
|
|
501
|
-
function calculateBounds(e, t, n, o,
|
|
502
|
-
let r,
|
|
503
|
-
const
|
|
501
|
+
function calculateBounds(e, t, n, o, i) {
|
|
502
|
+
let r, l, c, s;
|
|
503
|
+
const d = e[0], u = e[1];
|
|
504
504
|
switch (t) {
|
|
505
505
|
case 0:
|
|
506
|
-
r =
|
|
506
|
+
r = d + i, l = r + n, s = u - i, c = s - o;
|
|
507
507
|
break;
|
|
508
508
|
case 1:
|
|
509
|
-
r =
|
|
509
|
+
r = d + i, l = r + n, s = u + o / 2, c = s - o;
|
|
510
510
|
break;
|
|
511
511
|
case 2:
|
|
512
|
-
r =
|
|
512
|
+
r = d + i, l = r + n, s = u + i + o, c = s - o;
|
|
513
513
|
break;
|
|
514
514
|
case 3:
|
|
515
|
-
r =
|
|
515
|
+
r = d - n / 2, l = r + n, s = u + i + o, c = s - o;
|
|
516
516
|
break;
|
|
517
517
|
case 4:
|
|
518
|
-
|
|
518
|
+
l = d, r = l - n, s = u + i + o, c = s - o;
|
|
519
519
|
break;
|
|
520
520
|
case 5:
|
|
521
|
-
|
|
521
|
+
l = d - i, r = l - n, s = u + o / 2, c = s - o;
|
|
522
522
|
break;
|
|
523
523
|
case 6:
|
|
524
|
-
|
|
524
|
+
l = d, r = l - n, s = u - i, c = s - o;
|
|
525
525
|
break;
|
|
526
526
|
case 7:
|
|
527
|
-
r =
|
|
527
|
+
r = d - n / 2, l = r + n, s = u - i, c = s - o;
|
|
528
528
|
}
|
|
529
|
-
if (!(!r || !c || !
|
|
530
|
-
return [Math.min(r,
|
|
529
|
+
if (!(!r || !c || !l || !s))
|
|
530
|
+
return [Math.min(r, l), Math.min(c, s), Math.max(r, l), Math.max(c, s) + 1];
|
|
531
531
|
}
|
|
532
|
-
function calculateAnchorPoint(e, t, n = 70, o = 20,
|
|
532
|
+
function calculateAnchorPoint(e, t, n = 70, o = 20, i = 20) {
|
|
533
533
|
const r = [0, 0];
|
|
534
534
|
switch (t) {
|
|
535
535
|
case 0:
|
|
536
|
-
r[0] = e[0] +
|
|
536
|
+
r[0] = e[0] + i, r[1] = e[1] - i - o / 2;
|
|
537
537
|
break;
|
|
538
538
|
case 1:
|
|
539
|
-
r[0] = e[0] +
|
|
539
|
+
r[0] = e[0] + i, r[1] = e[1];
|
|
540
540
|
break;
|
|
541
541
|
case 2:
|
|
542
|
-
r[0] = e[0] +
|
|
542
|
+
r[0] = e[0] + i, r[1] = e[1] + i + o / 2;
|
|
543
543
|
break;
|
|
544
544
|
case 3:
|
|
545
|
-
r[0] = e[0], r[1] = e[1] +
|
|
545
|
+
r[0] = e[0], r[1] = e[1] + i + o / 4;
|
|
546
546
|
break;
|
|
547
547
|
case 4:
|
|
548
|
-
r[0] = Math.max(e[0] -
|
|
548
|
+
r[0] = Math.max(e[0] - i, e[0] - n / 2), r[1] = e[1] + i + o / 4;
|
|
549
549
|
break;
|
|
550
550
|
case 5:
|
|
551
|
-
r[0] = e[0] -
|
|
551
|
+
r[0] = e[0] - i, r[1] = e[1];
|
|
552
552
|
break;
|
|
553
553
|
case 6:
|
|
554
|
-
r[0] = Math.max(e[0] -
|
|
554
|
+
r[0] = Math.max(e[0] - i, e[0] - n / 2), r[1] = e[1] - i - o / 4;
|
|
555
555
|
break;
|
|
556
556
|
case 7:
|
|
557
|
-
r[0] = e[0], r[1] = e[1] -
|
|
557
|
+
r[0] = e[0], r[1] = e[1] - i - o / 4;
|
|
558
558
|
}
|
|
559
559
|
return r;
|
|
560
560
|
}
|
|
@@ -562,49 +562,49 @@ function drawLabelBody(e, t, n) {
|
|
|
562
562
|
if (!e) return;
|
|
563
563
|
const {
|
|
564
564
|
font: o,
|
|
565
|
-
labelOutSize:
|
|
565
|
+
labelOutSize: i = 2,
|
|
566
566
|
labelHeight: r,
|
|
567
|
-
center:
|
|
567
|
+
center: l,
|
|
568
568
|
text: c,
|
|
569
569
|
leftIcon: s,
|
|
570
|
-
shipColor:
|
|
570
|
+
shipColor: d,
|
|
571
571
|
lineLength: u = 20,
|
|
572
|
-
selected:
|
|
572
|
+
selected: m
|
|
573
573
|
} = n;
|
|
574
574
|
e.save(), o && (e.font = o);
|
|
575
|
-
let f = e.measureText(c).width + 4 *
|
|
576
|
-
(s ||
|
|
577
|
-
let p,
|
|
575
|
+
let f = e.measureText(c).width + 4 * i;
|
|
576
|
+
(s || d) && (f += r + 6 * i), e.restore();
|
|
577
|
+
let p, y = 20, h = -1, v = r + 3 * i;
|
|
578
578
|
if (u)
|
|
579
|
-
for (let
|
|
580
|
-
p = calculateBounds(
|
|
581
|
-
let
|
|
582
|
-
for (let
|
|
583
|
-
let
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
579
|
+
for (let M = 0; M < 8; M++) {
|
|
580
|
+
p = calculateBounds(l, M, f, v, u);
|
|
581
|
+
let S = !1;
|
|
582
|
+
for (let V = 0; V < t.length; ++V) {
|
|
583
|
+
let C = t[V].bounds, P = [
|
|
584
|
+
C[0] - y,
|
|
585
|
+
C[1] - y,
|
|
586
|
+
C[2] + y,
|
|
587
|
+
C[3] + y
|
|
588
588
|
];
|
|
589
|
-
if (p && isOverlapping(p,
|
|
590
|
-
|
|
589
|
+
if (p && isOverlapping(p, P)) {
|
|
590
|
+
S = !0;
|
|
591
591
|
break;
|
|
592
592
|
}
|
|
593
593
|
}
|
|
594
|
-
if (!
|
|
595
|
-
h =
|
|
594
|
+
if (!S) {
|
|
595
|
+
h = M;
|
|
596
596
|
break;
|
|
597
597
|
}
|
|
598
598
|
}
|
|
599
599
|
else
|
|
600
|
-
h = 0, p = calculateBounds(
|
|
601
|
-
if (
|
|
602
|
-
let
|
|
600
|
+
h = 0, p = calculateBounds(l, h, f, v, u);
|
|
601
|
+
if (m && h === -1 && (h = 0), h === 5 && (h = 0), p && h > -1) {
|
|
602
|
+
let M = getBottomLeftPoint(p), S = getTopRighttPoint(p);
|
|
603
603
|
return {
|
|
604
|
-
center:
|
|
605
|
-
x: calculateAnchorPoint(
|
|
606
|
-
l:
|
|
607
|
-
r:
|
|
604
|
+
center: l,
|
|
605
|
+
x: calculateAnchorPoint(l, h, f, v, u),
|
|
606
|
+
l: S,
|
|
607
|
+
r: M,
|
|
608
608
|
bounds: p,
|
|
609
609
|
position: h,
|
|
610
610
|
name: c
|
|
@@ -614,61 +614,61 @@ function drawLabelBody(e, t, n) {
|
|
|
614
614
|
}
|
|
615
615
|
const drawText = (e, t) => {
|
|
616
616
|
if (!e) return;
|
|
617
|
-
const { center: n, text: o, textColor:
|
|
617
|
+
const { center: n, text: o, textColor: i, leftIcon: r, rightIcons: l, font: c } = t;
|
|
618
618
|
e.save(), e.setTransform(1, 0, 0, 1, 0, 0);
|
|
619
|
-
let [s,
|
|
619
|
+
let [s, d] = n;
|
|
620
620
|
if (r) {
|
|
621
621
|
e.font = `${18 * pixelRatio}px map-iconfont`;
|
|
622
622
|
let u = getIconFont(r.icon);
|
|
623
|
-
e.fillStyle = r.color, e.fillText(u, s + labelOutSize - 3 * pixelRatio,
|
|
623
|
+
e.fillStyle = r.color, e.fillText(u, s + labelOutSize - 3 * pixelRatio, d + 2.6 * pixelRatio), s += 23 * pixelRatio;
|
|
624
624
|
}
|
|
625
|
-
if (
|
|
625
|
+
if (l != null && l.length) {
|
|
626
626
|
e.font = `${12 * pixelRatio}px map-iconfont`, e.fillStyle = "#3370ff";
|
|
627
627
|
const u = e.measureText(o).width + 6 * pixelRatio;
|
|
628
|
-
|
|
629
|
-
const p = getIconFont(
|
|
630
|
-
e.fillText(p, s + u +
|
|
628
|
+
l.forEach((m, f) => {
|
|
629
|
+
const p = getIconFont(m), y = 20 * pixelRatio * f;
|
|
630
|
+
e.fillText(p, s + u + y, d);
|
|
631
631
|
});
|
|
632
632
|
}
|
|
633
|
-
e.font = c || labelFont, e.fillStyle =
|
|
633
|
+
e.font = c || labelFont, e.fillStyle = i, e.fillText(o, s + 2, d), e.restore();
|
|
634
634
|
}, drawPolygon = (e, t) => {
|
|
635
635
|
let {
|
|
636
636
|
points: n,
|
|
637
637
|
strokeColor: o,
|
|
638
|
-
fillColor:
|
|
638
|
+
fillColor: i,
|
|
639
639
|
shouldClosePath: r,
|
|
640
|
-
translation:
|
|
640
|
+
translation: l,
|
|
641
641
|
rotation: c,
|
|
642
642
|
rotationCenter: s,
|
|
643
|
-
scale:
|
|
643
|
+
scale: d,
|
|
644
644
|
globalAlpha: u
|
|
645
645
|
} = t;
|
|
646
646
|
if (u || (u = 1), n && e) {
|
|
647
|
-
e.save(), e.beginPath(), c && c !== 0 && s == null && e.rotate(c),
|
|
648
|
-
for (let
|
|
649
|
-
e.lineTo(n[
|
|
650
|
-
r && e.closePath(), o && (e.strokeStyle = o, e.stroke()),
|
|
647
|
+
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), d && e.scale(d, d), e.moveTo(n[0][0], n[0][1]);
|
|
648
|
+
for (let m = 1; m < n.length; m++)
|
|
649
|
+
e.lineTo(n[m][0], n[m][1]);
|
|
650
|
+
r && e.closePath(), o && (e.strokeStyle = o, e.stroke()), i && r && (u && (e.globalAlpha = u), e.fillStyle = i, e.fill()), e.restore();
|
|
651
651
|
}
|
|
652
652
|
}, intervalIds = {}, drawLabel = (e, t, n, o) => {
|
|
653
|
-
var f, p,
|
|
654
|
-
let { center:
|
|
655
|
-
if (
|
|
656
|
-
const
|
|
653
|
+
var f, p, y, h, v, M, S;
|
|
654
|
+
let { center: i, text: r, color: l, textColor: c, bgColor: s, leftIcon: d, rightIcons: u, type: m } = t;
|
|
655
|
+
if (i && r) {
|
|
656
|
+
const V = {
|
|
657
657
|
font: labelFont,
|
|
658
658
|
labelOutSize,
|
|
659
659
|
labelHeight,
|
|
660
|
-
center:
|
|
660
|
+
center: i,
|
|
661
661
|
text: r,
|
|
662
|
-
leftIcon:
|
|
662
|
+
leftIcon: d,
|
|
663
663
|
selected: t.selected
|
|
664
664
|
};
|
|
665
665
|
(f = t.blinkColors) != null && f.length && t.fill && (s = t.fill, c = getForegroundColor(t.fill));
|
|
666
|
-
const
|
|
667
|
-
if (
|
|
668
|
-
const { x, bounds:
|
|
669
|
-
n.find((F) => F.name === r) || n.push(
|
|
670
|
-
points: [
|
|
671
|
-
strokeColor:
|
|
666
|
+
const C = drawLabelBody(e, n, V);
|
|
667
|
+
if (C) {
|
|
668
|
+
const { x: P, bounds: x, l: g } = C, w = [getTopLeftPoint(x), getBottomLeftPoint(x), getBottomRightPoint(x), getTopRighttPoint(x)];
|
|
669
|
+
n.find((F) => F.name === r) || n.push(C), drawPolygon(e, {
|
|
670
|
+
points: [i, P],
|
|
671
|
+
strokeColor: l,
|
|
672
672
|
fillColor: "#000",
|
|
673
673
|
shouldClosePath: !0,
|
|
674
674
|
translation: void 0,
|
|
@@ -677,34 +677,34 @@ const drawText = (e, t) => {
|
|
|
677
677
|
scale: void 0,
|
|
678
678
|
globalAlpha: labelAlpha
|
|
679
679
|
}), u != null && u.length && u.forEach(() => {
|
|
680
|
-
|
|
680
|
+
w[1][0] += pixelRatio * 18, w[2][0] += pixelRatio * 18;
|
|
681
681
|
});
|
|
682
682
|
const k = {
|
|
683
|
-
points:
|
|
684
|
-
strokeColor:
|
|
683
|
+
points: w,
|
|
684
|
+
strokeColor: l,
|
|
685
685
|
fillColor: s,
|
|
686
686
|
shouldClosePath: !0
|
|
687
|
-
}, [
|
|
688
|
-
center: [
|
|
687
|
+
}, [T, E] = g, I = {
|
|
688
|
+
center: [T, E + labelOutSize + labelHeight + 1],
|
|
689
689
|
text: r,
|
|
690
690
|
textColor: c,
|
|
691
|
-
leftIcon:
|
|
691
|
+
leftIcon: d,
|
|
692
692
|
rightIcons: u,
|
|
693
693
|
blinkColors: t.blinkColors
|
|
694
694
|
};
|
|
695
|
-
if (drawPolygon(e, k), drawText(e,
|
|
695
|
+
if (drawPolygon(e, k), drawText(e, I), t != null && t.blinkColors && t.blinkColors.length > 0) {
|
|
696
696
|
let F = Date.now(), $ = 0;
|
|
697
697
|
const R = t.blinkColors;
|
|
698
|
-
!!!((h = (
|
|
698
|
+
!!!((h = (y = (p = selectShipsLayer.value) == null ? void 0 : p.getSource()) == null ? void 0 : y.getFeatures()) != null && h.find((N) => {
|
|
699
699
|
var A;
|
|
700
700
|
return ((A = N.get("data")) == null ? void 0 : A.id) === t.id;
|
|
701
|
-
}) || (
|
|
701
|
+
}) || (S = (M = (v = shipsLayer.value) == null ? void 0 : v.getSource()) == null ? void 0 : M.getFeatures()) != null && S.find((N) => {
|
|
702
702
|
var A;
|
|
703
703
|
return ((A = N.get("data")) == null ? void 0 : A.id) === t.id;
|
|
704
704
|
})) || hiddenOrther.value ? (clearInterval(intervalIds[t.id]), deleteLabelFromArray(n, r)) : (intervalIds[t.id] && clearInterval(intervalIds[t.id]), intervalIds[t.id] = window.setInterval(() => {
|
|
705
705
|
var _, Z, U;
|
|
706
706
|
const N = Date.now();
|
|
707
|
-
N - F >= 500 && ($ = ($ + 1) % R.length, F = N, k.fillColor = R[$], drawPolygon(e, k),
|
|
707
|
+
N - F >= 500 && ($ = ($ + 1) % R.length, F = N, k.fillColor = R[$], drawPolygon(e, k), I.textColor = getForegroundColor(k.fillColor), drawText(e, I)), ((U = (Z = (_ = shipsLayer.value) == null ? void 0 : _.getSource()) == null ? void 0 : Z.getFeatures()) == null ? void 0 : U.some((z) => {
|
|
708
708
|
const O = z.get("data");
|
|
709
709
|
if ((O == null ? void 0 : O.id) === t.id) {
|
|
710
710
|
const D = o == null ? void 0 : o.getView().calculateExtent();
|
|
@@ -716,7 +716,7 @@ const drawText = (e, t) => {
|
|
|
716
716
|
})) || (clearInterval(intervalIds[t.id]), deleteLabelFromArray(n, r));
|
|
717
717
|
}, 10));
|
|
718
718
|
} else
|
|
719
|
-
shipLabels.value.find(($) => $.name === r) && (clearInterval(intervalIds[t.id]), drawPolygon(e, k), drawText(e,
|
|
719
|
+
shipLabels.value.find(($) => $.name === r) && (clearInterval(intervalIds[t.id]), drawPolygon(e, k), drawText(e, I));
|
|
720
720
|
}
|
|
721
721
|
}
|
|
722
722
|
return null;
|
|
@@ -744,23 +744,23 @@ function gcj02ToWgs84(e) {
|
|
|
744
744
|
if (outOfChina(t, n))
|
|
745
745
|
return `${t.toFixed(6)}, ${n.toFixed(6)}`;
|
|
746
746
|
{
|
|
747
|
-
let o = transformLat(t - 105, n - 35),
|
|
747
|
+
let o = transformLat(t - 105, n - 35), i = transformLng(t - 105, n - 35);
|
|
748
748
|
const r = n / 180 * PI;
|
|
749
|
-
let
|
|
750
|
-
|
|
751
|
-
const c = Math.sqrt(
|
|
752
|
-
o = o * 180 / (a * (1 - ee) / (
|
|
753
|
-
const s = n + o,
|
|
754
|
-
return `${(t * 2 -
|
|
749
|
+
let l = Math.sin(r);
|
|
750
|
+
l = 1 - ee * l * l;
|
|
751
|
+
const c = Math.sqrt(l);
|
|
752
|
+
o = o * 180 / (a * (1 - ee) / (l * c) * PI), i = i * 180 / (a / c * Math.cos(r) * PI);
|
|
753
|
+
const s = n + o, d = t + i;
|
|
754
|
+
return `${(t * 2 - d).toFixed(6)}, ${(n * 2 - s).toFixed(6)}`;
|
|
755
755
|
}
|
|
756
756
|
}
|
|
757
757
|
function calculateCirclePoints(e, t) {
|
|
758
|
-
const n = fromLonLat(e), o = t * 1e3,
|
|
758
|
+
const n = fromLonLat(e), o = t * 1e3, i = [
|
|
759
759
|
n[0] - o,
|
|
760
760
|
n[1] - o,
|
|
761
761
|
n[0] + o,
|
|
762
762
|
n[1] + o
|
|
763
|
-
], r = transformExtent(
|
|
763
|
+
], r = transformExtent(i, projection.mercator, projection.data);
|
|
764
764
|
return {
|
|
765
765
|
leftTopPoint: { lng: r[0], lat: r[3] },
|
|
766
766
|
rightTopPoint: { lng: r[2], lat: r[3] },
|
|
@@ -776,51 +776,60 @@ function lonLatToMercator(e) {
|
|
|
776
776
|
}
|
|
777
777
|
function mercatorToLonLat(e, t = "lonlat") {
|
|
778
778
|
const n = { lon: 0, lat: 0 }, o = e[0] / equatorialCircumference * 180;
|
|
779
|
-
let
|
|
780
|
-
return
|
|
779
|
+
let i = e[1] / equatorialCircumference * 180;
|
|
780
|
+
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];
|
|
781
781
|
}
|
|
782
782
|
function calculateBoundingBox(e) {
|
|
783
|
-
let t = 1 / 0, n = -1 / 0, o = 1 / 0,
|
|
783
|
+
let t = 1 / 0, n = -1 / 0, o = 1 / 0, i = -1 / 0;
|
|
784
784
|
e.forEach((h) => {
|
|
785
|
-
const [v,
|
|
786
|
-
t = Math.min(t,
|
|
785
|
+
const [v, M] = h;
|
|
786
|
+
t = Math.min(t, M), n = Math.max(n, M), o = Math.min(o, v), i = Math.max(i, v);
|
|
787
787
|
});
|
|
788
|
-
const r =
|
|
789
|
-
return [f, p,
|
|
788
|
+
const r = i - o, l = n - t, c = Math.max(r, l), s = (o + i) / 2, d = (t + n) / 2, u = c / 2, m = s - u, f = s + u, p = d - u, y = d + u;
|
|
789
|
+
return [f, p, m, y];
|
|
790
790
|
}
|
|
791
791
|
const transformUtils = {
|
|
792
792
|
gcj02ToWgs84,
|
|
793
793
|
calculateCirclePoints,
|
|
794
794
|
lonLatToMercator,
|
|
795
795
|
mercatorToLonLat,
|
|
796
|
-
calculateBoundingBox
|
|
796
|
+
calculateBoundingBox,
|
|
797
|
+
transform
|
|
797
798
|
}, mapInstance$7 = ref(), renderTrackStyleSetInstance = (e) => mapInstance$7.value = e, stopIcon = "", stopColor = "#E31818", slowIcon = "", slowColor = "#1890FF", dropletsIcon = "", trackList$1 = ref([]);
|
|
798
799
|
let animationFeature;
|
|
799
800
|
const renderTrackLine = (e, t, n) => {
|
|
800
|
-
var
|
|
801
|
+
var l, c, s;
|
|
801
802
|
const o = e[t];
|
|
802
803
|
if (!o) return;
|
|
803
|
-
allTracks.value[t] = o, trackList$1.value = []
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
804
|
+
allTracks.value[t] = o, trackList$1.value = [];
|
|
805
|
+
let i = o;
|
|
806
|
+
o.length > 5e3 ? o.filter((d, u) => u % 5 === 0) : o.length > 4e3 ? o.filter((d, u) => u % 4 === 0) : o.length > 2e3 && o.filter((d, u) => u % 2 === 0), trackList$1.value = i.map((d, u) => {
|
|
807
|
+
if (Number(d.lon) > 180 || Number(d.lat) > 180) {
|
|
808
|
+
const [m, f] = formatUtils.convertSixHundredThousandToLatLng(d.lon, d.lat);
|
|
809
|
+
d.lon = m, d.lat = f;
|
|
810
|
+
}
|
|
811
|
+
return d.center = [d.lon, d.lat], d.centerPoint = transformUtils.lonLatToMercator(d.center), d.id = t, d.index = u, d.time = hooks(d.createdAt).format("YYYY-MM-DD HH:mm:ss"), d;
|
|
812
|
+
});
|
|
813
|
+
const r = trackList$1.value.map((d) => d.centerPoint);
|
|
814
|
+
if (r.length >= 2) {
|
|
815
|
+
const d = new LineString(r), u = new Feature({ geometry: d });
|
|
816
|
+
u.setStyle(
|
|
808
817
|
new Style({
|
|
809
818
|
stroke: new Stroke({
|
|
810
819
|
color: n,
|
|
811
820
|
width: 2
|
|
812
821
|
})
|
|
813
822
|
})
|
|
814
|
-
),
|
|
815
|
-
const
|
|
816
|
-
|
|
817
|
-
const
|
|
823
|
+
), u.setId(t), u.set("type", "line"), (c = (l = shipTrackVectorLayer.value) == null ? void 0 : l.getSource()) == null || c.clear(), shipTrackLineFeatures.value = [];
|
|
824
|
+
const m = shipTrackLineFeatures.value.findIndex((p) => p.getId() === t);
|
|
825
|
+
m >= 0 ? shipTrackLineFeatures.value[m] = u : shipTrackLineFeatures.value.push(u);
|
|
826
|
+
const f = createAnimatedIconFeature(n, r);
|
|
818
827
|
trackLineVectorSource.value = new VectorSource({
|
|
819
828
|
features: [...shipTrackLineFeatures.value]
|
|
820
|
-
}), animationFeature =
|
|
829
|
+
}), animationFeature = f, console.log(animationFeature), shipTrackVectorLayer.value = new VectorLayer({
|
|
821
830
|
source: trackLineVectorSource.value,
|
|
822
831
|
zIndex: 102
|
|
823
|
-
}), renderPoint(n), (
|
|
832
|
+
}), renderPoint(n), (s = mapInstance$7.value) == null || s.addLayer(shipTrackVectorLayer.value);
|
|
824
833
|
}
|
|
825
834
|
}, handlePlay = (e, t) => {
|
|
826
835
|
const n = allTracks.value[String(e)];
|
|
@@ -854,23 +863,23 @@ let polyline, linePath, startMarker, position, geoMarker, vectorLayer;
|
|
|
854
863
|
const trackAnimating = ref(!1);
|
|
855
864
|
let distance = 0, lastTime = Date.now(), moveFeatureHandler = null;
|
|
856
865
|
const moveFeature = (e, t) => {
|
|
857
|
-
var
|
|
858
|
-
const n = Number(50 * t), o = ((
|
|
859
|
-
if (distance = (distance + n *
|
|
866
|
+
var m, f, p;
|
|
867
|
+
const n = Number(50 * t), o = ((m = e.frameState) == null ? void 0 : m.time) ?? Date.now(), i = o - lastTime;
|
|
868
|
+
if (distance = (distance + n * i / 1e6) % 2, lastTime = o, distance >= 1) {
|
|
860
869
|
stopAnimation();
|
|
861
870
|
return;
|
|
862
871
|
}
|
|
863
872
|
const r = linePath.getCoordinateAt(
|
|
864
873
|
distance > 1 ? 2 - distance : distance
|
|
865
|
-
),
|
|
874
|
+
), l = linePath.getCoordinateAt(
|
|
866
875
|
distance > 1 ? distance - 0.01 : distance
|
|
867
876
|
), c = linePath.getCoordinateAt(
|
|
868
877
|
distance > 1 ? 2 - distance : distance + 0.01
|
|
869
|
-
),
|
|
870
|
-
transformUtils.mercatorToLonLat(
|
|
878
|
+
), d = getRotation(
|
|
879
|
+
transformUtils.mercatorToLonLat(l, "array"),
|
|
871
880
|
transformUtils.mercatorToLonLat(c, "array")
|
|
872
881
|
) * Math.PI / 180;
|
|
873
|
-
(f = geoMarkerStyle.getText()) == null || f.setRotation(
|
|
882
|
+
(f = geoMarkerStyle.getText()) == null || f.setRotation(d), position.setCoordinates(r);
|
|
874
883
|
const u = getVectorContext(e);
|
|
875
884
|
u.context_.save(), u.setStyle(geoMarkerStyle), u.drawGeometry(position), u.context_.restore(), (p = mapInstance$7.value) == null || p.render();
|
|
876
885
|
}, startAnimation = () => {
|
|
@@ -901,42 +910,42 @@ const moveFeature = (e, t) => {
|
|
|
901
910
|
source: new VectorSource({
|
|
902
911
|
features: [geoMarker]
|
|
903
912
|
})
|
|
904
|
-
}), (o = mapInstance$7.value) == null || o.addLayer(vectorLayer), moveFeatureHandler = (
|
|
913
|
+
}), (o = mapInstance$7.value) == null || o.addLayer(vectorLayer), moveFeatureHandler = (i) => moveFeature(i, t), startAnimation();
|
|
905
914
|
}, renderPoint = (e) => {
|
|
906
915
|
if (!mapInstance$7.value) return;
|
|
907
916
|
const t = trackList$1.value || [];
|
|
908
917
|
if (!(t && t.length > 1)) return [];
|
|
909
|
-
const n = { 16: 24, 17: 15, default: 4 }, o = [],
|
|
910
|
-
for (let c = 0; c <
|
|
918
|
+
const n = { 16: 24, 17: 15, default: 4 }, o = [], i = t.length;
|
|
919
|
+
for (let c = 0; c < i; c++) {
|
|
911
920
|
t[c].index = c;
|
|
912
921
|
const s = mapInstance$7.value.getPixelFromCoordinate(t[c].centerPoint);
|
|
913
922
|
if (s) {
|
|
914
|
-
let
|
|
915
|
-
|
|
923
|
+
let d = s.concat(s);
|
|
924
|
+
d = adjustBounds(d, [20, 20]);
|
|
916
925
|
const u = mapInstance$7.value.getView().getZoom();
|
|
917
926
|
if (!u) return;
|
|
918
927
|
if (u > 15) {
|
|
919
928
|
const f = n[u] || n.default;
|
|
920
|
-
|
|
929
|
+
d = adjustBounds(d, [f, f]);
|
|
921
930
|
}
|
|
922
|
-
let
|
|
931
|
+
let m = !0;
|
|
923
932
|
if (t[c].state !== "0") {
|
|
924
933
|
for (let f = 0; f < o.length; f++)
|
|
925
|
-
if (isOverlapping(
|
|
926
|
-
|
|
934
|
+
if (isOverlapping(d, o[f].bounds)) {
|
|
935
|
+
m = !1;
|
|
927
936
|
break;
|
|
928
937
|
}
|
|
929
938
|
}
|
|
930
|
-
|
|
939
|
+
m && (t[c].bounds = d, o.push(t[c]));
|
|
931
940
|
}
|
|
932
941
|
}
|
|
933
|
-
const r = getIconStyle(stopIcon),
|
|
942
|
+
const r = getIconStyle(stopIcon), l = getIconStyle(slowIcon);
|
|
934
943
|
o.forEach((c, s) => {
|
|
935
|
-
var
|
|
936
|
-
const
|
|
944
|
+
var m, f;
|
|
945
|
+
const d = new Feature({
|
|
937
946
|
geometry: new Point(c.centerPoint)
|
|
938
947
|
});
|
|
939
|
-
|
|
948
|
+
d.set("type", "track_point"), d.set("data", c), d.setStyle([
|
|
940
949
|
new Style({
|
|
941
950
|
// 扩大交互热区
|
|
942
951
|
image: new CircleStyle({
|
|
@@ -952,7 +961,7 @@ const moveFeature = (e, t) => {
|
|
|
952
961
|
radius: 3
|
|
953
962
|
})
|
|
954
963
|
})
|
|
955
|
-
]), trackLineVectorSource.value.addFeature(
|
|
964
|
+
]), trackLineVectorSource.value.addFeature(d);
|
|
956
965
|
const u = new Feature({
|
|
957
966
|
geometry: new Point(fromLonLat(c.center))
|
|
958
967
|
});
|
|
@@ -963,7 +972,7 @@ const moveFeature = (e, t) => {
|
|
|
963
972
|
geometry: new Point(c.centerPoint)
|
|
964
973
|
});
|
|
965
974
|
p.set("type", "track_icon");
|
|
966
|
-
const
|
|
975
|
+
const y = new Style({
|
|
967
976
|
text: new Text({
|
|
968
977
|
font: "Normal 22px map-iconfont",
|
|
969
978
|
text: getIconFont(dropletsIcon),
|
|
@@ -971,27 +980,27 @@ const moveFeature = (e, t) => {
|
|
|
971
980
|
}),
|
|
972
981
|
zIndex: 99
|
|
973
982
|
}), h = [];
|
|
974
|
-
Number(c.state) === 0 ? ((
|
|
983
|
+
Number(c.state) === 0 ? ((m = y.getText()) == null || m.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);
|
|
975
984
|
}
|
|
976
985
|
}), renderArrow(o, e), renderIconPoint();
|
|
977
986
|
}, renderArrow = (e, t) => {
|
|
978
987
|
const n = e.length;
|
|
979
988
|
n || (e.push(trackList$1.value[0]), e.push(trackList$1.value[trackList$1.value.length - 1]));
|
|
980
989
|
for (let o = 0; o < n - 1; o++) {
|
|
981
|
-
let
|
|
982
|
-
const r = e[o],
|
|
983
|
-
if (
|
|
984
|
-
|
|
990
|
+
let i;
|
|
991
|
+
const r = e[o], l = (e[o + 1].index + r.index) / 2;
|
|
992
|
+
if (l % 2 === 0)
|
|
993
|
+
i = trackList$1.value[l].centerPoint;
|
|
985
994
|
else {
|
|
986
|
-
const c = trackList$1.value[Math.floor(
|
|
995
|
+
const c = trackList$1.value[Math.floor(l)], s = trackList$1.value[Math.ceil(l)];
|
|
987
996
|
if (c && s) {
|
|
988
|
-
const [
|
|
989
|
-
|
|
997
|
+
const [d, u] = c.centerPoint, [m, f] = s.centerPoint;
|
|
998
|
+
i = [(d + m) / 2, (u + f) / 2];
|
|
990
999
|
}
|
|
991
1000
|
}
|
|
992
|
-
if (
|
|
1001
|
+
if (i) {
|
|
993
1002
|
const c = new Feature({
|
|
994
|
-
geometry: new Point(
|
|
1003
|
+
geometry: new Point(i)
|
|
995
1004
|
});
|
|
996
1005
|
c.set("type", "track_arrow"), c.setStyle(
|
|
997
1006
|
new Style({
|
|
@@ -1011,18 +1020,18 @@ const moveFeature = (e, t) => {
|
|
|
1011
1020
|
}
|
|
1012
1021
|
}, renderIconPoint = () => {
|
|
1013
1022
|
const e = "", t = "#fcdc3f", n = "#ff0000";
|
|
1014
|
-
(trackList$1.value.length < 2 ? [trackList$1.value[0]] : [trackList$1.value[0], trackList$1.value[trackList$1.value.length - 1]]).forEach((
|
|
1023
|
+
(trackList$1.value.length < 2 ? [trackList$1.value[0]] : [trackList$1.value[0], trackList$1.value[trackList$1.value.length - 1]]).forEach((i) => {
|
|
1015
1024
|
const r = new Feature({
|
|
1016
|
-
geometry: new Point(
|
|
1025
|
+
geometry: new Point(i.centerPoint)
|
|
1017
1026
|
});
|
|
1018
|
-
r.set("type", "track_begin"), r.set("data",
|
|
1019
|
-
const
|
|
1027
|
+
r.set("type", "track_begin"), r.set("data", i);
|
|
1028
|
+
const l = i.index === 0 && trackList$1.value.length >= 2 ? t : n;
|
|
1020
1029
|
r.setStyle(
|
|
1021
1030
|
new Style({
|
|
1022
1031
|
text: new Text({
|
|
1023
1032
|
font: "Normal 14px map-iconfont",
|
|
1024
1033
|
text: getIconFont(e),
|
|
1025
|
-
fill: new Fill({ color:
|
|
1034
|
+
fill: new Fill({ color: l })
|
|
1026
1035
|
}),
|
|
1027
1036
|
zIndex: 101
|
|
1028
1037
|
})
|
|
@@ -1030,7 +1039,7 @@ const moveFeature = (e, t) => {
|
|
|
1030
1039
|
});
|
|
1031
1040
|
}, setTrackLabelStyle = (e, t) => new Style({
|
|
1032
1041
|
renderer: (n, o) => {
|
|
1033
|
-
const
|
|
1042
|
+
const i = o.context, c = {
|
|
1034
1043
|
id: e.id || "",
|
|
1035
1044
|
center: n,
|
|
1036
1045
|
text: e.time,
|
|
@@ -1040,7 +1049,7 @@ const moveFeature = (e, t) => {
|
|
|
1040
1049
|
selected: !0,
|
|
1041
1050
|
type: "TrackTime"
|
|
1042
1051
|
};
|
|
1043
|
-
drawLabel(
|
|
1052
|
+
drawLabel(i, c, trackLabels.value);
|
|
1044
1053
|
}
|
|
1045
1054
|
}), triangleModel = multiplyPixelRatio([
|
|
1046
1055
|
[0, -8],
|
|
@@ -1113,34 +1122,34 @@ const moveFeature = (e, t) => {
|
|
|
1113
1122
|
}), mapInstance$6 = ref(), renderShipStyleSetInstance = (e) => mapInstance$6.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({
|
|
1114
1123
|
renderer: (n, o) => {
|
|
1115
1124
|
n = n;
|
|
1116
|
-
const
|
|
1125
|
+
const i = o.context, r = o.feature.get("data");
|
|
1117
1126
|
if (!r) return;
|
|
1118
1127
|
o.feature.get("index") === 0 && (shipLabels.value = []);
|
|
1119
1128
|
try {
|
|
1120
|
-
const c = drawShipBody(
|
|
1121
|
-
c && (drawHeading(
|
|
1122
|
-
drawSelectBounds(
|
|
1123
|
-
}, 1)), drawShipLabel(
|
|
1129
|
+
const c = drawShipBody(i, r, n, t);
|
|
1130
|
+
c && (drawHeading(i, r, c, t), r.selected = e, e && setTimeout(() => {
|
|
1131
|
+
drawSelectBounds(i, c);
|
|
1132
|
+
}, 1)), drawShipLabel(i, r, n);
|
|
1124
1133
|
} catch {
|
|
1125
1134
|
return !1;
|
|
1126
1135
|
}
|
|
1127
1136
|
}
|
|
1128
1137
|
}), drawShipBody = (e, t, n, o) => {
|
|
1129
1138
|
if (!mapInstance$6.value) return;
|
|
1130
|
-
const
|
|
1131
|
-
if (!
|
|
1139
|
+
const i = Math.round(Number(mapInstance$6.value.getView().getZoom()));
|
|
1140
|
+
if (!i) return;
|
|
1132
1141
|
let r = [];
|
|
1133
|
-
const [
|
|
1134
|
-
if (
|
|
1135
|
-
r = rotateShapeModel(drawCurrentShipShapeModel(t,
|
|
1136
|
-
const [f, p] =
|
|
1137
|
-
return [s + f,
|
|
1142
|
+
const [l, c] = drawShipModelByZoom[i] || [0, 0], [s, d] = n;
|
|
1143
|
+
if (i <= mapZoom.shipModelMax && i > mapZoom.shipModelMin && t.length >= l && t.breadth >= c)
|
|
1144
|
+
r = rotateShapeModel(drawCurrentShipShapeModel(t, i), t.angle).map((m) => {
|
|
1145
|
+
const [f, p] = m;
|
|
1146
|
+
return [s + f, d + p];
|
|
1138
1147
|
});
|
|
1139
1148
|
else {
|
|
1140
1149
|
const u = rotateShapeModel(triangleModel, t.angle);
|
|
1141
|
-
n.length === 2 && (r = u.map((
|
|
1142
|
-
const [f, p] =
|
|
1143
|
-
return [s + f,
|
|
1150
|
+
n.length === 2 && (r = u.map((m) => {
|
|
1151
|
+
const [f, p] = m;
|
|
1152
|
+
return [s + f, d + p];
|
|
1144
1153
|
}));
|
|
1145
1154
|
}
|
|
1146
1155
|
if (!(r.length > 2)) return !1;
|
|
@@ -1159,45 +1168,45 @@ const moveFeature = (e, t) => {
|
|
|
1159
1168
|
e.lineTo(r[u][0], r[u][1]);
|
|
1160
1169
|
return e.closePath(), e.strokeStyle = o ? "#ff0000" : "#000", e.lineWidth = o ? 2 : 1, e.stroke(), e.fillStyle = t.fill, e.fill(), e.restore(), r;
|
|
1161
1170
|
}, drawHeading = (e, t, n, o) => {
|
|
1162
|
-
const [
|
|
1163
|
-
if (
|
|
1164
|
-
const c =
|
|
1165
|
-
const [
|
|
1166
|
-
return [
|
|
1171
|
+
const [i, r] = n[0], l = getShipDirectPath(t);
|
|
1172
|
+
if (l) {
|
|
1173
|
+
const c = l.map(function(s) {
|
|
1174
|
+
const [d, u] = s;
|
|
1175
|
+
return [d + i, u + r];
|
|
1167
1176
|
});
|
|
1168
1177
|
if (e.save(), e.beginPath(), t.angle > 0) {
|
|
1169
|
-
e.translate(
|
|
1178
|
+
e.translate(i, r);
|
|
1170
1179
|
const s = t.angle * Math.PI / 180;
|
|
1171
|
-
e.rotate(s), e.translate(-
|
|
1180
|
+
e.rotate(s), e.translate(-i, -r);
|
|
1172
1181
|
}
|
|
1173
|
-
e.moveTo(
|
|
1182
|
+
e.moveTo(i, r);
|
|
1174
1183
|
for (let s = 1; s < c.length; s++) {
|
|
1175
|
-
const [
|
|
1176
|
-
e.lineTo(
|
|
1184
|
+
const [d, u] = c[s];
|
|
1185
|
+
e.lineTo(d, u);
|
|
1177
1186
|
}
|
|
1178
1187
|
e.strokeStyle = o ? "#ff0000" : "#000", e.lineWidth = o ? 2 : 1, e.stroke(), e.restore();
|
|
1179
1188
|
}
|
|
1180
1189
|
}, drawSelectBounds = (e, t) => {
|
|
1181
|
-
let [n, o,
|
|
1182
|
-
const
|
|
1183
|
-
n -= c, o -= c,
|
|
1184
|
-
const s = 8 *
|
|
1185
|
-
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(
|
|
1190
|
+
let [n, o, i, r] = getPixelFromCoordinate(t);
|
|
1191
|
+
const l = window.devicePixelRatio || 1, c = 4;
|
|
1192
|
+
n -= c, o -= c, i += c, r += c, e.save(), e.strokeStyle = "#ff0000", e.lineWidth = 4 * l;
|
|
1193
|
+
const s = 8 * l;
|
|
1194
|
+
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();
|
|
1186
1195
|
}, drawShipLabel = (e, t, n) => {
|
|
1187
|
-
if (!t.selected && shipLabels.value.find((
|
|
1188
|
-
const [o,
|
|
1196
|
+
if (!t.selected && shipLabels.value.find((m) => m.name === t.name)) return;
|
|
1197
|
+
const [o, i] = n, r = o, l = i, c = t.name;
|
|
1189
1198
|
let s;
|
|
1190
1199
|
t.leftIconColor && (s = { color: t.leftIconColor, icon: "" });
|
|
1191
|
-
const
|
|
1200
|
+
const d = getShipCustomIcon(t), u = {
|
|
1192
1201
|
id: t.id,
|
|
1193
|
-
center: [r,
|
|
1202
|
+
center: [r, l],
|
|
1194
1203
|
text: c,
|
|
1195
1204
|
fill: t.fill,
|
|
1196
1205
|
color: "#fff",
|
|
1197
1206
|
textColor: "#000",
|
|
1198
1207
|
bgColor: "#fff",
|
|
1199
1208
|
leftIcon: s,
|
|
1200
|
-
rightIcons:
|
|
1209
|
+
rightIcons: d,
|
|
1201
1210
|
selected: t.selected,
|
|
1202
1211
|
blinkColors: t.blinkColors,
|
|
1203
1212
|
type: "ShipName"
|
|
@@ -1206,17 +1215,17 @@ const moveFeature = (e, t) => {
|
|
|
1206
1215
|
}, drawCurrentShipShapeModel = (e, t) => {
|
|
1207
1216
|
let n = 0;
|
|
1208
1217
|
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);
|
|
1209
|
-
const o = e.length / 4 * n,
|
|
1218
|
+
const o = e.length / 4 * n, i = e.breadth * n;
|
|
1210
1219
|
let r = cloneDeep(shipShapeModel);
|
|
1211
|
-
return r = r.map(([
|
|
1220
|
+
return r = r.map(([l, c]) => [l * i, c * o]), r;
|
|
1212
1221
|
}, getShipDirectPath = (e) => {
|
|
1213
1222
|
const { speed: t, hdg: n, cog: o } = e;
|
|
1214
|
-
let
|
|
1215
|
-
if (t && t > 1 && (n !== null && n != 511 && o !== null ? o - n >= 3 ?
|
|
1216
|
-
for (let
|
|
1217
|
-
const c = speedCondition[
|
|
1223
|
+
let i = "", r = null;
|
|
1224
|
+
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))
|
|
1225
|
+
for (let l = 0; l < speedCondition.length; l++) {
|
|
1226
|
+
const c = speedCondition[l];
|
|
1218
1227
|
if (t >= c[0] && t < c[1]) {
|
|
1219
|
-
r = shipDirectPath[
|
|
1228
|
+
r = shipDirectPath[i][l];
|
|
1220
1229
|
break;
|
|
1221
1230
|
}
|
|
1222
1231
|
}
|
|
@@ -1229,14 +1238,14 @@ let shipsMarkerList = [], shipsVectorSource, largeAmountShipsSource;
|
|
|
1229
1238
|
const selectedShipData = ref(null), selectedShips = ref([]);
|
|
1230
1239
|
let selectShipsVectorSource;
|
|
1231
1240
|
const renderShips = (e) => {
|
|
1232
|
-
var n, o,
|
|
1241
|
+
var n, o, i, r;
|
|
1233
1242
|
if (!mapInstance$5.value || showTrackLayer.value) return;
|
|
1234
1243
|
const t = Math.round(Number(mapInstance$5.value.getView().getZoom()));
|
|
1235
1244
|
if (selectedShipData.value && nextTick(() => {
|
|
1236
1245
|
selectSingleShipMarker(selectedShipData.value);
|
|
1237
|
-
}).then((
|
|
1246
|
+
}).then((l) => {
|
|
1238
1247
|
}), !(!t || t < mapZoom.shipGreenDotMax) && (allShips.value = [...e, ...selectedShips.value], !hiddenOrther.value))
|
|
1239
|
-
return t >= mapZoom.shipGreenDotMax && t < mapZoom.shipModelMin ? ((n = shipsLayer.value) == null || n.setVisible(!1), (o = largeAmountShipsLayer.value) == null || o.setVisible(!0), renderLargeAmountShips(allShips.value)) : ((
|
|
1248
|
+
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));
|
|
1240
1249
|
}, renderLargeAmountShips = (e) => {
|
|
1241
1250
|
if (!mapInstance$5.value) return;
|
|
1242
1251
|
const t = e.map((n) => ({
|
|
@@ -1291,16 +1300,16 @@ const renderShips = (e) => {
|
|
|
1291
1300
|
deleteAllShipMarkers();
|
|
1292
1301
|
let t = convertShipMapData(e);
|
|
1293
1302
|
if (t = customFilterShips(t), !!(t != null && t.length))
|
|
1294
|
-
return t.forEach((o,
|
|
1295
|
-
const r = [o.lon, o.lat],
|
|
1303
|
+
return t.forEach((o, i) => {
|
|
1304
|
+
const r = [o.lon, o.lat], l = new Feature({
|
|
1296
1305
|
geometry: new Point(fromLonLat(r))
|
|
1297
1306
|
}), c = 1;
|
|
1298
|
-
|
|
1307
|
+
l.set("clickGeometry", new Circle(fromLonLat(r), c)), l.set("data", o), l.set("index", i), l.setStyle(
|
|
1299
1308
|
setShipStyle(!1)
|
|
1300
1309
|
), shipsMarkerList.push({
|
|
1301
1310
|
ship: o,
|
|
1302
1311
|
lonlat: r,
|
|
1303
|
-
feature:
|
|
1312
|
+
feature: l
|
|
1304
1313
|
});
|
|
1305
1314
|
}), shipsVectorSource = new VectorSource({
|
|
1306
1315
|
features: shipsMarkerList.map((o) => o.feature)
|
|
@@ -1312,14 +1321,14 @@ const renderShips = (e) => {
|
|
|
1312
1321
|
var o;
|
|
1313
1322
|
let e = null, t = 0;
|
|
1314
1323
|
const n = 100;
|
|
1315
|
-
(o = mapInstance$5.value) == null || o.on("pointermove", function(
|
|
1316
|
-
var s,
|
|
1324
|
+
(o = mapInstance$5.value) == null || o.on("pointermove", function(i) {
|
|
1325
|
+
var s, d, u, m;
|
|
1317
1326
|
const r = Date.now();
|
|
1318
1327
|
if (r - t < n)
|
|
1319
1328
|
return;
|
|
1320
1329
|
t = r;
|
|
1321
|
-
const
|
|
1322
|
-
if (c && (c.style.cursor =
|
|
1330
|
+
const l = (s = mapInstance$5.value) == null ? void 0 : s.forEachFeatureAtPixel(i.pixel, (f) => f), c = (d = mapInstance$5.value) == null ? void 0 : d.getTargetElement();
|
|
1331
|
+
if (c && (c.style.cursor = l ? "pointer" : ""), e !== l) {
|
|
1323
1332
|
if (e) {
|
|
1324
1333
|
const f = e.get("data");
|
|
1325
1334
|
if (!(f != null && f.mmsi)) return;
|
|
@@ -1327,11 +1336,11 @@ const renderShips = (e) => {
|
|
|
1327
1336
|
setShipStyle(((u = selectedShipData.value) == null ? void 0 : u.id) === f.id, !1)
|
|
1328
1337
|
);
|
|
1329
1338
|
}
|
|
1330
|
-
if (
|
|
1331
|
-
const f =
|
|
1339
|
+
if (l) {
|
|
1340
|
+
const f = l.get("data");
|
|
1332
1341
|
if (!(f != null && f.mmsi)) return;
|
|
1333
|
-
e =
|
|
1334
|
-
setShipStyle(((
|
|
1342
|
+
e = l, l.setStyle(
|
|
1343
|
+
setShipStyle(((m = selectedShipData.value) == null ? void 0 : m.id) === f.id, !0)
|
|
1335
1344
|
);
|
|
1336
1345
|
} else
|
|
1337
1346
|
e = null;
|
|
@@ -1340,9 +1349,9 @@ const renderShips = (e) => {
|
|
|
1340
1349
|
}, customFilterShips = (e) => {
|
|
1341
1350
|
let t = cloneDeep(e);
|
|
1342
1351
|
return t = t.filter((n) => {
|
|
1343
|
-
var
|
|
1344
|
-
const o = getFilterItem(n).every(({ btnShow: r, value:
|
|
1345
|
-
return (switchBtnShow.value.camera || switchBtnShow.value.mobile || switchBtnShow.value.waterGauge) && ((
|
|
1352
|
+
var i;
|
|
1353
|
+
const o = getFilterItem(n).every(({ btnShow: r, value: l }) => r ? !!l : !0);
|
|
1354
|
+
return (switchBtnShow.value.camera || switchBtnShow.value.mobile || switchBtnShow.value.waterGauge) && ((i = selectedShipData.value) == null ? void 0 : i.id) === n.id && clearSelectFeature(), o;
|
|
1346
1355
|
}), t;
|
|
1347
1356
|
}, getFilterItem = (e) => [
|
|
1348
1357
|
{ btnShow: switchBtnShow.value.camera, value: e == null ? void 0 : e.existDevice },
|
|
@@ -1371,19 +1380,19 @@ const renderShips = (e) => {
|
|
|
1371
1380
|
}), selectShipsLayer.value = new VectorLayer({
|
|
1372
1381
|
source: selectShipsVectorSource
|
|
1373
1382
|
}), shipsVectorSource && setVisibleFeatureById(shipsVectorSource, selectSingleShipData.value.id, !0);
|
|
1374
|
-
const
|
|
1375
|
-
return
|
|
1383
|
+
const i = (r = shipsLayer.value) == null ? void 0 : r.getSource();
|
|
1384
|
+
return i && (t && setVisibleFeatureById(i, t.id, !0), setVisibleFeatureById(i, selectSingleShipData.value.id, !1)), mapInstance$5.value.addLayer(selectShipsLayer.value), selectShipsLayer.value.setVisible(!0), selectShipsLayer.value;
|
|
1376
1385
|
}, setVisibleFeatureById = (e, t, n) => {
|
|
1377
1386
|
e && e.forEachFeature((o) => {
|
|
1378
|
-
const
|
|
1379
|
-
|
|
1387
|
+
const i = o.get("data");
|
|
1388
|
+
i && i.id === t && o.setStyle(n ? setShipStyle(!1, i.id) : setBlankStyle());
|
|
1380
1389
|
});
|
|
1381
1390
|
}, findShip = (e, t, n = !0) => {
|
|
1382
|
-
var
|
|
1391
|
+
var i, r, l, c, s;
|
|
1383
1392
|
if (!e || !mapInstance$5.value) return;
|
|
1384
|
-
const o = (
|
|
1393
|
+
const o = (l = (r = (i = shipsLayer.value) == null ? void 0 : i.getSource()) == null ? void 0 : r.getFeatures()) == null ? void 0 : l.find((d) => {
|
|
1385
1394
|
var u;
|
|
1386
|
-
return ((u =
|
|
1395
|
+
return ((u = d.get("data")) == null ? void 0 : u.id) === e;
|
|
1387
1396
|
});
|
|
1388
1397
|
if (o)
|
|
1389
1398
|
selectedShipData.value = o.get("data");
|
|
@@ -1393,14 +1402,14 @@ const renderShips = (e) => {
|
|
|
1393
1402
|
console.error("找不到船舶");
|
|
1394
1403
|
return;
|
|
1395
1404
|
}
|
|
1396
|
-
if (selectedShips.value.some((
|
|
1405
|
+
if (selectedShips.value.some((d) => {
|
|
1397
1406
|
var u;
|
|
1398
|
-
return
|
|
1407
|
+
return d.id === ((u = selectedShipData.value) == null ? void 0 : u.id);
|
|
1399
1408
|
}) || selectedShips.value.push(selectedShipData.value), n && ((c = selectedShipData.value) != null && c.lon) && ((s = selectedShipData.value) != null && s.lat)) {
|
|
1400
|
-
const
|
|
1401
|
-
|
|
1402
|
-
const
|
|
1403
|
-
|
|
1409
|
+
const d = mapInstance$5.value.getView(), u = new Point([selectedShipData.value.lon, selectedShipData.value.lat]);
|
|
1410
|
+
d.setCenter(transform(u.getCoordinates(), projection.data, projection.mercator));
|
|
1411
|
+
const m = d.getZoom(), f = m < mapZoom.findShipMin ? mapZoom.findShip : m;
|
|
1412
|
+
d.setZoom(f);
|
|
1404
1413
|
}
|
|
1405
1414
|
return setTimeout(() => {
|
|
1406
1415
|
t && selectSingleShipMarker(t);
|
|
@@ -1429,73 +1438,73 @@ const renderShips = (e) => {
|
|
|
1429
1438
|
switchBtnShow.value[e] = t, renderShips(allShips.value);
|
|
1430
1439
|
}, rerenderShip = () => {
|
|
1431
1440
|
renderShips(allShips.value);
|
|
1432
|
-
}, mapInstance$4 = ref(), renderCustomOverlaySetInstance = (e) => mapInstance$4.value = e, drawCustomContent = (e, t, n, o = "top-left",
|
|
1433
|
-
var
|
|
1441
|
+
}, mapInstance$4 = ref(), renderCustomOverlaySetInstance = (e) => mapInstance$4.value = e, drawCustomContent = (e, t, n, o = "top-left", i = !1, r = !0) => {
|
|
1442
|
+
var m, f;
|
|
1434
1443
|
if (!t || !mapInstance$4.value) return;
|
|
1435
|
-
document.querySelectorAll(".truck-custom-content").forEach((
|
|
1436
|
-
var
|
|
1437
|
-
return (
|
|
1444
|
+
r && document.querySelectorAll(".truck-custom-content").forEach((p) => {
|
|
1445
|
+
var y;
|
|
1446
|
+
return (y = p.parentNode) == null ? void 0 : y.removeChild(p);
|
|
1438
1447
|
});
|
|
1439
|
-
const
|
|
1440
|
-
|
|
1441
|
-
const
|
|
1442
|
-
element:
|
|
1448
|
+
const l = document.createElement("div");
|
|
1449
|
+
l.innerHTML = n;
|
|
1450
|
+
const c = new Overlay({
|
|
1451
|
+
element: l,
|
|
1443
1452
|
position: t,
|
|
1444
1453
|
// 初始位置
|
|
1445
1454
|
positioning: o,
|
|
1446
|
-
stopEvent:
|
|
1455
|
+
stopEvent: i
|
|
1447
1456
|
// 设置不阻拦事件
|
|
1448
1457
|
});
|
|
1449
|
-
if (
|
|
1450
|
-
let
|
|
1451
|
-
|
|
1452
|
-
var
|
|
1453
|
-
|
|
1454
|
-
const
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
],
|
|
1459
|
-
}), document.addEventListener("mousemove", function(
|
|
1460
|
-
var
|
|
1461
|
-
if (
|
|
1462
|
-
const
|
|
1463
|
-
|
|
1458
|
+
if (i) {
|
|
1459
|
+
let p = !1, y = [0, 0], h = [0, 0], v = 0, M = 0;
|
|
1460
|
+
l.addEventListener("mousedown", function(S) {
|
|
1461
|
+
var C;
|
|
1462
|
+
p = !0, v = S.clientX, M = S.clientY;
|
|
1463
|
+
const V = (C = mapInstance$4.value) == null ? void 0 : C.getCoordinateFromPixel([S.clientX - 200, S.clientY - 200]);
|
|
1464
|
+
V && (y = V), h = [
|
|
1465
|
+
S.clientX - l.getBoundingClientRect().left + 160,
|
|
1466
|
+
S.clientY - l.getBoundingClientRect().top + 84
|
|
1467
|
+
], S.preventDefault(), console.log(e, v, M);
|
|
1468
|
+
}), document.addEventListener("mousemove", function(S) {
|
|
1469
|
+
var V;
|
|
1470
|
+
if (p) {
|
|
1471
|
+
const C = (V = mapInstance$4.value) == null ? void 0 : V.getCoordinateFromPixel([S.clientX - h[0], S.clientY - h[1]]), P = C[0] - y[0], x = C[1] - y[1];
|
|
1472
|
+
c.setPosition([y[0] + P, y[1] + x]);
|
|
1464
1473
|
}
|
|
1465
1474
|
}), document.addEventListener("mouseup", function() {
|
|
1466
|
-
|
|
1475
|
+
p = !1;
|
|
1467
1476
|
});
|
|
1468
1477
|
}
|
|
1469
|
-
(
|
|
1470
|
-
const
|
|
1471
|
-
|
|
1472
|
-
var
|
|
1473
|
-
(
|
|
1478
|
+
(m = mapInstance$4.value) == null || m.addOverlay(c);
|
|
1479
|
+
const s = l.querySelector(".close-button");
|
|
1480
|
+
s && s.addEventListener("click", () => {
|
|
1481
|
+
var p, y;
|
|
1482
|
+
(p = mapInstance$4.value) == null || p.removeOverlay(c), (y = l.parentNode) == null || y.removeChild(l);
|
|
1474
1483
|
});
|
|
1475
|
-
const
|
|
1476
|
-
return
|
|
1484
|
+
const d = JSON.parse(JSON.stringify(t)), u = (f = mapInstance$4.value) == null ? void 0 : f.getCoordinateFromPixel(d);
|
|
1485
|
+
return c.setPosition(u), c;
|
|
1477
1486
|
}, mapInstance$3 = ref(), renderTrackSetInstance = (e) => mapInstance$3.value = e, showTracks = ref([]), trackList = ref([]);
|
|
1478
1487
|
ref(null);
|
|
1479
|
-
const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o,
|
|
1488
|
+
const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, i = "ship") => {
|
|
1480
1489
|
var u;
|
|
1481
|
-
if (console.log(
|
|
1490
|
+
if (console.log(i), nextTick(() => {
|
|
1482
1491
|
hiddenAllShips();
|
|
1483
|
-
}).then((
|
|
1492
|
+
}).then((m) => {
|
|
1484
1493
|
}), (t == null ? void 0 : t.length) < 2) {
|
|
1485
|
-
((u = showTracks.value) == null ? void 0 : u.findIndex((
|
|
1494
|
+
((u = showTracks.value) == null ? void 0 : u.findIndex((m) => m.id === e)) < 0 && showTracks.value.push({ id: e, length: "" });
|
|
1486
1495
|
return;
|
|
1487
1496
|
}
|
|
1488
1497
|
const r = {};
|
|
1489
|
-
t.forEach((
|
|
1490
|
-
|
|
1498
|
+
t.forEach((m) => {
|
|
1499
|
+
m.state ? m.state = Number(m.state) : delete m.state;
|
|
1491
1500
|
}), trackId.value = e, r[e] = t, trackList.value = t;
|
|
1492
|
-
const
|
|
1493
|
-
(
|
|
1494
|
-
), s = new LineString(c),
|
|
1501
|
+
const l = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"], c = r[e].map(
|
|
1502
|
+
(m) => transform([m.lon, m.lat], projection.data, projection.mercator)
|
|
1503
|
+
), s = new LineString(c), d = formatUtils.formatLength(s, o) || "--";
|
|
1495
1504
|
nextTick(() => {
|
|
1496
1505
|
var f, p;
|
|
1497
|
-
const
|
|
1498
|
-
|
|
1506
|
+
const m = (f = showTracks.value) == null ? void 0 : f.findIndex((y) => y.id === e);
|
|
1507
|
+
m < 0 ? showTracks.value.push({ id: e, length: d }) : showTracks.value[m].length = d, ++cursor.value, cursor.value > l.length && (cursor.value = 0), renderTrackLine(r, e, n), nextTick(() => {
|
|
1499
1508
|
resetTrackView(e);
|
|
1500
1509
|
}).then(() => {
|
|
1501
1510
|
}), (p = mapInstance$3.value) == null || p.on("moveend", () => {
|
|
@@ -1507,14 +1516,14 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1507
1516
|
var t;
|
|
1508
1517
|
const e = ref(null);
|
|
1509
1518
|
(t = mapInstance$3.value) == null || t.on("pointermove", (n) => {
|
|
1510
|
-
var
|
|
1511
|
-
e.value && ((
|
|
1519
|
+
var i, r, l, c;
|
|
1520
|
+
e.value && ((i = mapInstance$3.value) == null || i.removeOverlay(e.value));
|
|
1512
1521
|
const o = (r = mapInstance$3.value) == null ? void 0 : r.forEachFeatureAtPixel(n.pixel, (s) => s);
|
|
1513
1522
|
if (o) {
|
|
1514
1523
|
const s = o.get("data");
|
|
1515
1524
|
if (!(s != null && s.time)) return;
|
|
1516
|
-
let
|
|
1517
|
-
s != null && s.stayTime && (
|
|
1525
|
+
let d = "";
|
|
1526
|
+
s != null && s.stayTime && (d = `
|
|
1518
1527
|
<div class="item w-100">
|
|
1519
1528
|
<div class="item-label">停泊时间约</div>
|
|
1520
1529
|
<div class="item-item">${formatMinutesToDDHHMM(Number(s.stayTime))}</div>
|
|
@@ -1550,10 +1559,10 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1550
1559
|
<div class="item-label">时间</div>
|
|
1551
1560
|
<div class="item-item">${s.time}</div>
|
|
1552
1561
|
</div>
|
|
1553
|
-
${
|
|
1554
|
-
</div>`,
|
|
1555
|
-
if (
|
|
1556
|
-
const f = drawCustomContent(s.time,
|
|
1562
|
+
${d ?? d}
|
|
1563
|
+
</div>`, m = (l = mapInstance$3.value) == null ? void 0 : l.getPixelFromCoordinate(n.coordinate);
|
|
1564
|
+
if (m) {
|
|
1565
|
+
const f = drawCustomContent(s.time, m, u, "top-left");
|
|
1557
1566
|
f && (e.value = f);
|
|
1558
1567
|
}
|
|
1559
1568
|
} else
|
|
@@ -1565,10 +1574,10 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1565
1574
|
}, playTrack = (e, t) => {
|
|
1566
1575
|
handlePlay(String(e), t);
|
|
1567
1576
|
}, resetTrackView = (e) => {
|
|
1568
|
-
var
|
|
1577
|
+
var i;
|
|
1569
1578
|
const t = mapInstance$3.value.getView(), n = e ? shipTrackLineFeatures.value.find((r) => r.getId() === e) : shipTrackLineFeatures.value[0];
|
|
1570
1579
|
if (!n) return;
|
|
1571
|
-
const o = (
|
|
1580
|
+
const o = (i = n == null ? void 0 : n.getGeometry()) == null ? void 0 : i.getExtent();
|
|
1572
1581
|
if (o != null && o.length)
|
|
1573
1582
|
try {
|
|
1574
1583
|
const r = buffer(o, Math.max(o[2] - o[0], o[3] - o[1]) * 0.02);
|
|
@@ -1577,8 +1586,8 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1577
1586
|
console.log(r);
|
|
1578
1587
|
}
|
|
1579
1588
|
}, formatMinutesToDDHHMM = (e) => {
|
|
1580
|
-
const t = hooks.duration(e, "minutes"), n = Math.floor(t.asDays()), o = t.hours(),
|
|
1581
|
-
let r = `${String(
|
|
1589
|
+
const t = hooks.duration(e, "minutes"), n = Math.floor(t.asDays()), o = t.hours(), i = t.minutes();
|
|
1590
|
+
let r = `${String(i).padStart(2, "0")}分`;
|
|
1582
1591
|
return o !== 0 && (r = `${String(o).padStart(2, "0")}时${r}`), n !== 0 && (r = `${String(n).padStart(2, "0")}天${r}`), r;
|
|
1583
1592
|
}, _hoisted_1$3 = {
|
|
1584
1593
|
key: 0,
|
|
@@ -1594,24 +1603,24 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1594
1603
|
},
|
|
1595
1604
|
emits: ["switchGreenDot", "switchMapTile"],
|
|
1596
1605
|
setup(e, { emit: t }) {
|
|
1597
|
-
var p,
|
|
1598
|
-
const n = inject("mapInstance"), o = e,
|
|
1599
|
-
o.disableGreenDot || r.value >= mapZoom.shipGreenDotMax || (s.value = !s.value,
|
|
1606
|
+
var p, y;
|
|
1607
|
+
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), d = () => {
|
|
1608
|
+
o.disableGreenDot || r.value >= mapZoom.shipGreenDotMax || (s.value = !s.value, i("switchGreenDot", s.value));
|
|
1600
1609
|
}, u = () => {
|
|
1601
|
-
|
|
1602
|
-
},
|
|
1610
|
+
i("switchMapTile", o.mapTileMode === BaseMapType.vector ? BaseMapType.satellite : BaseMapType.vector);
|
|
1611
|
+
}, m = () => {
|
|
1603
1612
|
var h, v;
|
|
1604
|
-
|
|
1613
|
+
l.value ? (showMeasure.value = !1, (h = c.value) == null || h.removeInteraction()) : (showMeasure.value = !0, (v = c.value) == null || v.addInteraction()), l.value = !l.value;
|
|
1605
1614
|
}, f = () => {
|
|
1606
1615
|
var h;
|
|
1607
|
-
(h = c.value) == null || h.removeInteraction(),
|
|
1616
|
+
(h = c.value) == null || h.removeInteraction(), l.value = !1;
|
|
1608
1617
|
};
|
|
1609
1618
|
return onMounted(() => {
|
|
1610
1619
|
nextTick(() => {
|
|
1611
1620
|
var h;
|
|
1612
1621
|
(h = n == null ? void 0 : n.value) == null || h.on("moveend", () => {
|
|
1613
|
-
var
|
|
1614
|
-
const v = (
|
|
1622
|
+
var M, S;
|
|
1623
|
+
const v = (S = (M = n == null ? void 0 : n.value) == null ? void 0 : M.getView()) == null ? void 0 : S.getZoom();
|
|
1615
1624
|
v && (r.value = v);
|
|
1616
1625
|
});
|
|
1617
1626
|
});
|
|
@@ -1623,8 +1632,8 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1623
1632
|
createElementVNode("div", _hoisted_2$1, [
|
|
1624
1633
|
h.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
|
|
1625
1634
|
key: 0,
|
|
1626
|
-
class: normalizeClass(["switch-btn", `${
|
|
1627
|
-
onClick:
|
|
1635
|
+
class: normalizeClass(["switch-btn", `${l.value && "active"}`]),
|
|
1636
|
+
onClick: m
|
|
1628
1637
|
}, v[5] || (v[5] = [
|
|
1629
1638
|
createElementVNode("i", { class: "map-iconfont icon-measure" }, null, -1),
|
|
1630
1639
|
createElementVNode("div", { class: "button-text" }, "测距", -1)
|
|
@@ -1632,7 +1641,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1632
1641
|
h.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
|
|
1633
1642
|
key: 1,
|
|
1634
1643
|
class: normalizeClass(`switch-btn ${s.value && "active"} ${(h.disableGreenDot || r.value >= unref(mapZoom).shipGreenDotMax) && "disabled"}`),
|
|
1635
|
-
onClick:
|
|
1644
|
+
onClick: d
|
|
1636
1645
|
}, v[6] || (v[6] = [
|
|
1637
1646
|
createElementVNode("i", { class: "map-iconfont icon-ship" }, null, -1),
|
|
1638
1647
|
createElementVNode("div", { class: "button-text" }, "绿点", -1)
|
|
@@ -1640,7 +1649,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1640
1649
|
h.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
|
|
1641
1650
|
key: 2,
|
|
1642
1651
|
class: normalizeClass(`switch-btn ${h.mapTileMode === unref(BaseMapType).satellite && "active"}`),
|
|
1643
|
-
onClick: v[0] || (v[0] = (
|
|
1652
|
+
onClick: v[0] || (v[0] = (M) => u())
|
|
1644
1653
|
}, v[7] || (v[7] = [
|
|
1645
1654
|
createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
|
|
1646
1655
|
createElementVNode("div", { class: "button-text" }, "图层", -1)
|
|
@@ -1648,7 +1657,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1648
1657
|
h.vehicleMode === "truck" ? (openBlock(), createElementBlock("div", {
|
|
1649
1658
|
key: 3,
|
|
1650
1659
|
class: normalizeClass(`switch-btn ${h.mapTileMode === unref(BaseMapType).satellite && "active"}`),
|
|
1651
|
-
onClick: v[1] || (v[1] = (
|
|
1660
|
+
onClick: v[1] || (v[1] = (M) => u())
|
|
1652
1661
|
}, v[8] || (v[8] = [
|
|
1653
1662
|
createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
|
|
1654
1663
|
createElementVNode("div", { class: "button-text" }, "卫星", -1)
|
|
@@ -1656,14 +1665,14 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1656
1665
|
h.showTrackLayer ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [
|
|
1657
1666
|
createElementVNode("div", {
|
|
1658
1667
|
class: "switch-btn multiple",
|
|
1659
|
-
onClick: v[2] || (v[2] = (
|
|
1668
|
+
onClick: v[2] || (v[2] = (M) => unref(playTrack)(unref(currentTrackId), 1))
|
|
1660
1669
|
}, v[9] || (v[9] = [
|
|
1661
1670
|
createElementVNode("i", { class: "map-iconfont icon-play" }, null, -1),
|
|
1662
1671
|
createElementVNode("div", { class: "button-text" }, "播放轨迹", -1)
|
|
1663
1672
|
])),
|
|
1664
1673
|
createElementVNode("div", {
|
|
1665
1674
|
class: "switch-btn multiple",
|
|
1666
|
-
onClick: v[3] || (v[3] = (
|
|
1675
|
+
onClick: v[3] || (v[3] = (M) => unref(resetTrackView)())
|
|
1667
1676
|
}, v[10] || (v[10] = [
|
|
1668
1677
|
createElementVNode("i", { class: "map-iconfont icon-center" }, null, -1),
|
|
1669
1678
|
createElementVNode("div", { class: "button-text" }, "轨迹居中", -1)
|
|
@@ -1674,8 +1683,8 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1674
1683
|
])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
1675
1684
|
h.vehicleMode === "ship" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
1676
1685
|
createElementVNode("div", {
|
|
1677
|
-
class: normalizeClass(["switch-btn", `${
|
|
1678
|
-
onClick:
|
|
1686
|
+
class: normalizeClass(["switch-btn", `${l.value && "active"}`]),
|
|
1687
|
+
onClick: m
|
|
1679
1688
|
}, v[11] || (v[11] = [
|
|
1680
1689
|
createElementVNode("i", { class: "map-iconfont icon-measure" }, null, -1),
|
|
1681
1690
|
createElementVNode("div", { class: "button-text" }, "测距", -1)
|
|
@@ -1683,7 +1692,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1683
1692
|
h.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
|
|
1684
1693
|
key: 0,
|
|
1685
1694
|
class: normalizeClass(`switch-btn ${s.value && "active"} ${(h.disableGreenDot || r.value >= unref(mapZoom).shipGreenDotMax) && "disabled"}`),
|
|
1686
|
-
onClick:
|
|
1695
|
+
onClick: d
|
|
1687
1696
|
}, v[12] || (v[12] = [
|
|
1688
1697
|
createElementVNode("i", { class: "map-iconfont icon-ship" }, null, -1),
|
|
1689
1698
|
createElementVNode("div", { class: "button-text" }, "绿点", -1)
|
|
@@ -1699,12 +1708,12 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1699
1708
|
], 64))
|
|
1700
1709
|
], 2),
|
|
1701
1710
|
createElementVNode("div", _hoisted_3, [
|
|
1702
|
-
|
|
1711
|
+
l.value ? (openBlock(), createBlock(Measure, {
|
|
1703
1712
|
key: 0,
|
|
1704
1713
|
ref_key: "measureRef",
|
|
1705
1714
|
ref: c,
|
|
1706
|
-
visible:
|
|
1707
|
-
"onUpdate:visible": v[4] || (v[4] = (
|
|
1715
|
+
visible: l.value,
|
|
1716
|
+
"onUpdate:visible": v[4] || (v[4] = (M) => l.value = M),
|
|
1708
1717
|
onClose: f,
|
|
1709
1718
|
"view-mode": h.viewMode
|
|
1710
1719
|
}, null, 8, ["visible", "view-mode"])) : createCommentVNode("", !0)
|
|
@@ -1716,15 +1725,15 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1716
1725
|
setup(e, { expose: t }) {
|
|
1717
1726
|
const n = inject("mapInstance");
|
|
1718
1727
|
return t({
|
|
1719
|
-
setScaleLine: (
|
|
1728
|
+
setScaleLine: (i) => {
|
|
1720
1729
|
var c;
|
|
1721
|
-
|
|
1730
|
+
i || (i = "metric");
|
|
1722
1731
|
const r = new ScaleLine$1({
|
|
1723
|
-
units:
|
|
1724
|
-
}),
|
|
1725
|
-
|
|
1732
|
+
units: i
|
|
1733
|
+
}), l = document.getElementById("scale-line-container");
|
|
1734
|
+
l && (r.setTarget(l), (c = n == null ? void 0 : n.value) == null || c.addControl(r));
|
|
1726
1735
|
}
|
|
1727
|
-
}), (
|
|
1736
|
+
}), (i, r) => (openBlock(), createElementBlock("div", _hoisted_1$2));
|
|
1728
1737
|
}
|
|
1729
1738
|
}), ScaleLine = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-d666f80d"]]), _hoisted_1$1 = { class: "zoom" }, _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
1730
1739
|
__name: "zoomControl",
|
|
@@ -1736,14 +1745,14 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1736
1745
|
setup(e) {
|
|
1737
1746
|
const t = inject("mapInstance"), n = () => {
|
|
1738
1747
|
if (!t.value) return;
|
|
1739
|
-
const
|
|
1740
|
-
r &&
|
|
1748
|
+
const i = t.value.getView(), r = i.getZoom();
|
|
1749
|
+
r && i.setZoom(r + 1);
|
|
1741
1750
|
}, o = () => {
|
|
1742
1751
|
if (!t.value) return;
|
|
1743
|
-
const
|
|
1744
|
-
r &&
|
|
1752
|
+
const i = t.value.getView(), r = i.getZoom();
|
|
1753
|
+
r && i.setZoom(r - 1);
|
|
1745
1754
|
};
|
|
1746
|
-
return (
|
|
1755
|
+
return (i, r) => (openBlock(), createElementBlock("div", _hoisted_1$1, [
|
|
1747
1756
|
createElementVNode("div", {
|
|
1748
1757
|
onClick: n,
|
|
1749
1758
|
class: "button big-button"
|
|
@@ -1762,10 +1771,10 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship")
|
|
|
1762
1771
|
},
|
|
1763
1772
|
setup(e) {
|
|
1764
1773
|
useCssVars((r) => ({
|
|
1765
|
-
ae2bbc28:
|
|
1774
|
+
ae2bbc28: i.value
|
|
1766
1775
|
}));
|
|
1767
|
-
const t = e, n = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? "map/tdt-copyright-h.svg" : `map/tdt-copyright-v${t.mapTile === BaseMapType.satellite ? "-w" : ""}.svg`), o = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? "400px" : "168px"),
|
|
1768
|
-
return (r,
|
|
1776
|
+
const t = e, n = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? "map/tdt-copyright-h.svg" : `map/tdt-copyright-v${t.mapTile === BaseMapType.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");
|
|
1777
|
+
return (r, l) => (openBlock(), createElementBlock("div", _hoisted_1, [
|
|
1769
1778
|
createElementVNode("img", {
|
|
1770
1779
|
src: unref(CDN_URL) + n.value,
|
|
1771
1780
|
width: o.value,
|
|
@@ -1787,30 +1796,30 @@ const loadImage = new Image();
|
|
|
1787
1796
|
loadImage.src = `${CDN_URL}/map/map-load.svg`;
|
|
1788
1797
|
loadImage.crossOrigin = "anonymous";
|
|
1789
1798
|
const setTruckStyle = (e, t, n, o) => new Style({
|
|
1790
|
-
renderer: (
|
|
1791
|
-
const
|
|
1792
|
-
|
|
1799
|
+
renderer: (i, r) => {
|
|
1800
|
+
const l = r.context;
|
|
1801
|
+
l.save();
|
|
1793
1802
|
let c = 1;
|
|
1794
|
-
|
|
1795
|
-
let [s,
|
|
1796
|
-
s = Number(s) / c - 20,
|
|
1797
|
-
const u = s - 70,
|
|
1803
|
+
l.scale(c, c);
|
|
1804
|
+
let [s, d] = i;
|
|
1805
|
+
s = Number(s) / c - 20, d = Number(d) / c;
|
|
1806
|
+
const u = s - 70, m = d - 68;
|
|
1798
1807
|
let f = 180;
|
|
1799
|
-
const p = 56,
|
|
1808
|
+
const p = 56, y = "#FFFFFF";
|
|
1800
1809
|
let h = 176;
|
|
1801
1810
|
const v = 52;
|
|
1802
|
-
let
|
|
1803
|
-
n === CAR_COLOR.YELLOW ? (h = 176,
|
|
1804
|
-
const
|
|
1805
|
-
if (
|
|
1806
|
-
const
|
|
1807
|
-
let
|
|
1811
|
+
let M = "#164AFF", S = "#FFFFFF";
|
|
1812
|
+
n === CAR_COLOR.YELLOW ? (h = 176, M = "#FFC81E", S = "rgba(0,0,0,0.88)") : n === CAR_COLOR.Y_GREEN && (f = 200, h = 196, M = "#8FED7C", S = "rgba(0,0,0,0.88)"), o != null && o.length && (f += o.length * 56), fillRectRadius(l, u, m, f, p, y), fillRectRadius(l, u + 2, m + 2, h, v, M), n === CAR_COLOR.Y_GREEN && fillRectRadius(l, u + 2, m + 2, 68, v, "#FFC81E"), l.save(), l.restore(), l.fillStyle = S, l.font = "bold 28px Arial", l.textAlign = "left", l.textBaseline = "middle";
|
|
1813
|
+
const V = `${t.slice(0, 2) + " · " + t.slice(2)}`;
|
|
1814
|
+
if (l.fillText(V, u + 12, m + 32), l.save(), l.restore(), o != null && o.length) {
|
|
1815
|
+
const P = l.measureText(V).width + 12;
|
|
1816
|
+
let x = 0;
|
|
1808
1817
|
o.forEach((g) => {
|
|
1809
|
-
g === DEVICE_TYPE.CAMERA && (
|
|
1818
|
+
g === DEVICE_TYPE.CAMERA && (l.drawImage(cameraImage, s - 54 + P + x * 56, d - 64, 50, 50), ++x), g === DEVICE_TYPE.LOAD && (l.drawImage(loadImage, s - 54 + P + x * 56, d - 64, 50, 50), ++x);
|
|
1810
1819
|
});
|
|
1811
1820
|
}
|
|
1812
|
-
const
|
|
1813
|
-
|
|
1821
|
+
const C = dotImage$1;
|
|
1822
|
+
l.drawImage(C, s + f / 2 - 90, d, 50 / c, 50 / c), l.restore();
|
|
1814
1823
|
}
|
|
1815
1824
|
}), mapInstance$2 = ref(), renderDashboardSetInstance = (e) => mapInstance$2.value = e;
|
|
1816
1825
|
ref([]);
|
|
@@ -1837,19 +1846,19 @@ const renderTrucksMarker = (e) => {
|
|
|
1837
1846
|
truckMarkerList.forEach((e) => {
|
|
1838
1847
|
e.feature && (trucksVectorSource == null || trucksVectorSource.removeFeature(e.feature));
|
|
1839
1848
|
}), truckMarkerList = [];
|
|
1840
|
-
}, mapInstance$1 = ref(), renderTruckSetInstance = (e) => mapInstance$1.value = e, vehicle = ref(null), focusShipData = ref(), currentTruckOverlay = ref(null), findTruck = async (e) => {
|
|
1849
|
+
}, mapInstance$1 = ref(), renderTruckSetInstance = (e) => mapInstance$1.value = e, vehicle = ref(null), focusShipData = ref(), currentTruckOverlay = ref(null), findTruck = async (e, t) => {
|
|
1841
1850
|
if (!mapInstance$1.value || (focusShipData.value = e, !(e != null && e.lon && (e != null && e.lat)))) return;
|
|
1842
|
-
const
|
|
1843
|
-
currentTruckOverlay.value = e ? drawTruckIcon(e.vno,
|
|
1844
|
-
const
|
|
1845
|
-
|
|
1851
|
+
const n = Math.abs(Number(e.lon)) > 180 ? formatUtils.convertSixHundredThousandToLatLng(e.lon, e.lat) : [e.lon, e.lat], o = mapInstance$1.value.getPixelFromCoordinate(transform(n, projection.data, projection.mercator));
|
|
1852
|
+
currentTruckOverlay.value = e ? drawTruckIcon(e.vno, o, (e == null ? void 0 : e.drc) ?? "", t) ?? null : null;
|
|
1853
|
+
const i = mapInstance$1.value.getView(), r = new Point(n);
|
|
1854
|
+
i.setCenter(transform(r.getCoordinates(), projection.data, projection.mercator));
|
|
1846
1855
|
}, clearAllTruck = () => {
|
|
1847
1856
|
vehicle.value.clearAllShip();
|
|
1848
|
-
}, drawTruckIcon = (e, t, n) => {
|
|
1849
|
-
|
|
1857
|
+
}, drawTruckIcon = (e, t, n, o) => {
|
|
1858
|
+
let i = `<div id="${e}" class="ol-custom-content truck-custom-content" style="width: 80px; height: 80px; transform: rotate(${n}deg);">
|
|
1850
1859
|
<img src="${CDN_URL}map/car-icon.gif" width="100%" height="100%" />
|
|
1851
1860
|
</div>`;
|
|
1852
|
-
return drawCustomContent(e, t,
|
|
1861
|
+
return o && (i += o), drawCustomContent(e, t, i, "center-center");
|
|
1853
1862
|
}, removeTruckIcon = () => {
|
|
1854
1863
|
var t;
|
|
1855
1864
|
const e = (t = currentTruckOverlay.value) == null ? void 0 : t.getElement();
|
|
@@ -1858,12 +1867,12 @@ const renderTrucksMarker = (e) => {
|
|
|
1858
1867
|
var r;
|
|
1859
1868
|
if (!mapInstance$1.value) return;
|
|
1860
1869
|
const e = mapInstance$1.value.getView().getZoom(), t = 120, n = 60;
|
|
1861
|
-
function o(
|
|
1862
|
-
return
|
|
1870
|
+
function o(l) {
|
|
1871
|
+
return l < 14 ? n : l >= 14 && l <= 18 ? Math.round((l - 14) * (t - n) / 4 + n) : t;
|
|
1863
1872
|
}
|
|
1864
|
-
const
|
|
1865
|
-
(r = document.querySelectorAll(".truck-custom-content")) == null || r.forEach((
|
|
1866
|
-
|
|
1873
|
+
const i = o(e);
|
|
1874
|
+
(r = document.querySelectorAll(".truck-custom-content")) == null || r.forEach((l) => {
|
|
1875
|
+
l.style.width = `${i}px`, l.style.height = `${i}px`;
|
|
1867
1876
|
});
|
|
1868
1877
|
}, mapInstance = ref(), drawPolygonSetInstance = (e) => mapInstance.value = e;
|
|
1869
1878
|
let layerState = "drawn", drawnState = "undrawn";
|
|
@@ -1909,13 +1918,13 @@ function createHelpTooltip() {
|
|
|
1909
1918
|
}
|
|
1910
1919
|
let squareLimitError = !1, lineLimitError = !1;
|
|
1911
1920
|
const validateSquareLimit = (e) => {
|
|
1912
|
-
let n = 1 / 0, o = -1 / 0,
|
|
1921
|
+
let n = 1 / 0, o = -1 / 0, i = 1 / 0, r = -1 / 0;
|
|
1913
1922
|
e == null || e.forEach((s) => {
|
|
1914
|
-
const
|
|
1915
|
-
n = Math.min(n,
|
|
1923
|
+
const d = transform(s, projection.mercator, projection.data), u = d[0], m = d[1];
|
|
1924
|
+
n = Math.min(n, m), o = Math.max(o, m), i = Math.min(i, u), r = Math.max(r, u);
|
|
1916
1925
|
});
|
|
1917
|
-
const
|
|
1918
|
-
squareLimitError =
|
|
1926
|
+
const l = (o - n) * 111, c = (r - i) * 111;
|
|
1927
|
+
squareLimitError = l > 150 || c > 150;
|
|
1919
1928
|
};
|
|
1920
1929
|
let storeFeature, callbackFunction = null;
|
|
1921
1930
|
const addInteraction = (e) => {
|
|
@@ -1927,11 +1936,11 @@ const addInteraction = (e) => {
|
|
|
1927
1936
|
style: [drawPolygonStyle.drawing, circleStyle]
|
|
1928
1937
|
}), (o = mapInstance.value) == null || o.addInteraction(draw), createMeasureTooltip(), createHelpTooltip();
|
|
1929
1938
|
let t;
|
|
1930
|
-
draw.on("drawstart", function(
|
|
1939
|
+
draw.on("drawstart", function(i) {
|
|
1931
1940
|
var r;
|
|
1932
|
-
layerState = "drawn", sketch =
|
|
1933
|
-
const c =
|
|
1934
|
-
if (lineLimitError = Number(getLength(
|
|
1941
|
+
layerState = "drawn", sketch = i.feature, t = (r = sketch.getGeometry()) == null ? void 0 : r.on("change", function(l) {
|
|
1942
|
+
const c = l.target, s = formatUtils.formatArea(c, LENGTH_UNIT.NM), u = c.getCoordinates()[0], m = new LineString([u[u.length - 2], u[u.length - 1]]), f = formatUtils.formatLength(m, LENGTH_UNIT.NM);
|
|
1943
|
+
if (lineLimitError = Number(getLength(m) / 1e3) > 150, validateSquareLimit(u), measureTooltipElement && s && (measureTooltipElement.innerHTML = `
|
|
1935
1944
|
<span class="text">面积:${s}${lineLimitError || squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
|
|
1936
1945
|
`), helpTooltipElement && s) {
|
|
1937
1946
|
let p = "";
|
|
@@ -1942,14 +1951,14 @@ const addInteraction = (e) => {
|
|
|
1942
1951
|
`;
|
|
1943
1952
|
}
|
|
1944
1953
|
}), drawnState = "drawing";
|
|
1945
|
-
}), draw.on("drawend", function(
|
|
1946
|
-
if (
|
|
1947
|
-
storeFeature =
|
|
1948
|
-
const r = endFn(
|
|
1954
|
+
}), draw.on("drawend", function(i) {
|
|
1955
|
+
if (i.feature.getGeometry()) {
|
|
1956
|
+
storeFeature = i.feature;
|
|
1957
|
+
const r = endFn(i.feature);
|
|
1949
1958
|
r != null && r.length && callbackFunction && callbackFunction(r);
|
|
1950
1959
|
}
|
|
1951
1960
|
if (sketch = null, measureTooltipElement = null, createMeasureTooltip(), t && unByKey(t), drawnState = "drawend", draw && mapInstance.value) {
|
|
1952
|
-
const r = mapInstance.value.getInteractions().getArray().find((
|
|
1961
|
+
const r = mapInstance.value.getInteractions().getArray().find((l) => getUid(l) === getUid(draw));
|
|
1953
1962
|
r && mapInstance.value.removeInteraction(r), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement);
|
|
1954
1963
|
}
|
|
1955
1964
|
});
|
|
@@ -1957,10 +1966,10 @@ const addInteraction = (e) => {
|
|
|
1957
1966
|
var e, t, n;
|
|
1958
1967
|
if (mapInstance.value) {
|
|
1959
1968
|
if (document.querySelectorAll(".ol-tooltip.ol-tooltip-draw-polygon").forEach((o) => {
|
|
1960
|
-
var
|
|
1961
|
-
(
|
|
1969
|
+
var i;
|
|
1970
|
+
(i = o == null ? void 0 : o.parentNode) == null || i.removeChild(o);
|
|
1962
1971
|
}), 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) {
|
|
1963
|
-
const o = mapInstance.value.getInteractions().getArray().find((
|
|
1972
|
+
const o = mapInstance.value.getInteractions().getArray().find((i) => getUid(i) === getUid(draw));
|
|
1964
1973
|
o && ((n = mapInstance.value) == null || n.removeInteraction(o));
|
|
1965
1974
|
}
|
|
1966
1975
|
drawnState = "undrawn", layerState = "destroyed";
|
|
@@ -1968,15 +1977,15 @@ const addInteraction = (e) => {
|
|
|
1968
1977
|
}, endFn = (e) => {
|
|
1969
1978
|
var t, n, o;
|
|
1970
1979
|
if (e.getGeometry()) {
|
|
1971
|
-
const
|
|
1972
|
-
(t =
|
|
1973
|
-
|
|
1980
|
+
const i = [], l = e.getGeometry().getCoordinates();
|
|
1981
|
+
(t = l[0]) == null || t.forEach((s) => {
|
|
1982
|
+
i.push(transform(s, projection.mercator, projection.data));
|
|
1974
1983
|
});
|
|
1975
|
-
const c =
|
|
1984
|
+
const c = l[0][l[0].length - 2];
|
|
1976
1985
|
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", () => {
|
|
1977
1986
|
reset();
|
|
1978
1987
|
}), !lineLimitError && !squareLimitError)
|
|
1979
|
-
return
|
|
1988
|
+
return i;
|
|
1980
1989
|
draw && ((o = mapInstance.value) == null || o.removeInteraction(draw)), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement);
|
|
1981
1990
|
}
|
|
1982
1991
|
}, initFeature = (e) => {
|
|
@@ -1984,14 +1993,14 @@ const addInteraction = (e) => {
|
|
|
1984
1993
|
if (e && (callbackFunction = e), layerState = "drawn", storeFeature) {
|
|
1985
1994
|
const o = storeFeature.getGeometry();
|
|
1986
1995
|
if (!o) return;
|
|
1987
|
-
const
|
|
1996
|
+
const i = formatUtils.formatArea(o, LENGTH_UNIT.NM);
|
|
1988
1997
|
measureTooltipElement && (measureTooltipElement.innerHTML = `
|
|
1989
|
-
<span class="text">面积:${
|
|
1998
|
+
<span class="text">面积:${i}${lineLimitError || squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
|
|
1990
1999
|
`), (t = drawVector.getSource()) == null || t.addFeature(storeFeature);
|
|
1991
2000
|
const r = endFn(storeFeature);
|
|
1992
2001
|
r != null && r.length && callbackFunction && callbackFunction(r);
|
|
1993
|
-
const
|
|
1994
|
-
(n = mapInstance.value) == null || n.getView().setCenter(
|
|
2002
|
+
const l = getCenter(storeFeature.getGeometry().getExtent());
|
|
2003
|
+
(n = mapInstance.value) == null || n.getView().setCenter(l);
|
|
1995
2004
|
}
|
|
1996
2005
|
}, pointerMoveHandler = function(e) {
|
|
1997
2006
|
var n;
|
|
@@ -2032,20 +2041,23 @@ dotImage.crossOrigin = "anonymous";
|
|
|
2032
2041
|
const dotActiveImage = new Image();
|
|
2033
2042
|
dotActiveImage.crossOrigin = "anonymous";
|
|
2034
2043
|
const setPointStyle = (e, t, n) => {
|
|
2035
|
-
const { color: o, url:
|
|
2036
|
-
return (r ||
|
|
2044
|
+
const { color: o, url: i, activeUrl: r, activeColor: l } = n;
|
|
2045
|
+
return (r || i) && (e ? dotActiveImage.src = CDN_URL + (r || i) : dotImage.src = CDN_URL + (i || r)), new Style({
|
|
2037
2046
|
renderer: (c, s) => {
|
|
2038
|
-
const
|
|
2039
|
-
|
|
2047
|
+
const d = s.context;
|
|
2048
|
+
d.save();
|
|
2040
2049
|
const u = window.devicePixelRatio || 1;
|
|
2041
|
-
let [
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
m.drawImage(I, d - I.width / 2, f - I.height / 2, 30 * u, 30 * u);
|
|
2050
|
+
let [m, f] = c;
|
|
2051
|
+
if (m = Number(m), f = Number(f), t) {
|
|
2052
|
+
d.font = `${12 * u}px Arial`;
|
|
2053
|
+
const p = d.measureText(t).width, y = m - p / 2 - (u <= 1 ? 8 : u), h = f + 6 * u, v = p + 4, M = 16 * u, S = e && l || o;
|
|
2054
|
+
fillRectRadius(d, y, h + 13 * u, v, M, S), d.save(), d.restore(), d.fillStyle = e ? "#FFFFFF" : "#000000", d.textAlign = "center", d.textBaseline = "middle", d.fillText(t, y + (p + 4) / 2, h + 22 * u), d.save(), d.restore();
|
|
2047
2055
|
}
|
|
2048
|
-
|
|
2056
|
+
if (i || r) {
|
|
2057
|
+
const p = e ? dotActiveImage : dotImage;
|
|
2058
|
+
d.drawImage(p, m - p.width / 2, f - p.height / 2, 30 * u, 30 * u);
|
|
2059
|
+
}
|
|
2060
|
+
d.restore();
|
|
2049
2061
|
}
|
|
2050
2062
|
});
|
|
2051
2063
|
};
|
|
@@ -2067,6 +2079,27 @@ class PointMarkerClass {
|
|
|
2067
2079
|
b(this, "pointLayer");
|
|
2068
2080
|
// 颜色等其他设置
|
|
2069
2081
|
b(this, "options");
|
|
2082
|
+
// 使用坐标点区域自动缩放地图层级
|
|
2083
|
+
b(this, "resetPointsView", (t) => {
|
|
2084
|
+
var r;
|
|
2085
|
+
if (!this.mapInstance || t.length === 0) return;
|
|
2086
|
+
const n = (r = this.mapInstance) == null ? void 0 : r.getView();
|
|
2087
|
+
if (!n) return;
|
|
2088
|
+
const i = t.map(
|
|
2089
|
+
(l) => transform(l, projection.data, projection.mercator)
|
|
2090
|
+
).reduce((l, c) => [
|
|
2091
|
+
Math.min(l[0], c[0]),
|
|
2092
|
+
Math.min(l[1], c[1]),
|
|
2093
|
+
Math.max(l[2], c[0]),
|
|
2094
|
+
Math.max(l[3], c[1])
|
|
2095
|
+
], [1 / 0, 1 / 0, -1 / 0, -1 / 0]);
|
|
2096
|
+
try {
|
|
2097
|
+
const l = buffer(i, Math.max(i[2] - i[0], i[3] - i[1]) * 0.02);
|
|
2098
|
+
n.fit(l);
|
|
2099
|
+
} catch (l) {
|
|
2100
|
+
console.error("Failed to zoom to points:", l);
|
|
2101
|
+
}
|
|
2102
|
+
});
|
|
2070
2103
|
this.mapInstance = t, this.options = n;
|
|
2071
2104
|
}
|
|
2072
2105
|
/**
|
|
@@ -2085,11 +2118,11 @@ class PointMarkerClass {
|
|
|
2085
2118
|
* pointType
|
|
2086
2119
|
*/
|
|
2087
2120
|
renderPointMarker(t) {
|
|
2088
|
-
if (
|
|
2121
|
+
if (!this.mapInstance) return;
|
|
2089
2122
|
let n = {};
|
|
2090
2123
|
t.forEach((o) => {
|
|
2091
2124
|
var r;
|
|
2092
|
-
const
|
|
2125
|
+
const i = [o.lon, o.lat];
|
|
2093
2126
|
if (((r = this.highlightPoint) == null ? void 0 : r.id) === o.id)
|
|
2094
2127
|
n = {
|
|
2095
2128
|
id: o.id,
|
|
@@ -2098,12 +2131,12 @@ class PointMarkerClass {
|
|
|
2098
2131
|
pointType: o.pointType
|
|
2099
2132
|
};
|
|
2100
2133
|
else {
|
|
2101
|
-
const
|
|
2134
|
+
const l = this.getFeature(o, i);
|
|
2102
2135
|
this.pointMarkerList.push({
|
|
2103
2136
|
id: o.id,
|
|
2104
2137
|
name: o.name,
|
|
2105
2138
|
lonlat: [Number(o.lon), Number(o.lat)],
|
|
2106
|
-
feature:
|
|
2139
|
+
feature: l,
|
|
2107
2140
|
pointType: o.pointType
|
|
2108
2141
|
});
|
|
2109
2142
|
}
|
|
@@ -2149,23 +2182,23 @@ class PointMarkerClass {
|
|
|
2149
2182
|
*/
|
|
2150
2183
|
highlightPointMarker(t) {
|
|
2151
2184
|
if (!this.mapInstance) return;
|
|
2152
|
-
const { id: n, name: o, fullName:
|
|
2185
|
+
const { id: n, name: o, fullName: i, lon: r, lat: l, pointType: c } = t, s = [Number(r), Number(l)];
|
|
2153
2186
|
this.highlightPoint = {
|
|
2154
2187
|
id: n,
|
|
2155
2188
|
name: o,
|
|
2156
|
-
fullName:
|
|
2189
|
+
fullName: i,
|
|
2157
2190
|
lonlat: s,
|
|
2158
2191
|
pointType: c
|
|
2159
2192
|
}, this.setPointCenter(s);
|
|
2160
2193
|
}
|
|
2161
2194
|
// 获取feature
|
|
2162
2195
|
getFeature(t, n) {
|
|
2163
|
-
var
|
|
2196
|
+
var i;
|
|
2164
2197
|
const o = new Feature({
|
|
2165
2198
|
geometry: new Point(fromLonLat(n))
|
|
2166
2199
|
});
|
|
2167
2200
|
return o.set("data", t), o.setStyle(
|
|
2168
|
-
setPointStyle(((
|
|
2201
|
+
setPointStyle(((i = this.highlightPoint) == null ? void 0 : i.id) === t.id, t.name, this.options)
|
|
2169
2202
|
), o;
|
|
2170
2203
|
}
|
|
2171
2204
|
/**
|
|
@@ -2178,8 +2211,8 @@ class PointMarkerClass {
|
|
|
2178
2211
|
*/
|
|
2179
2212
|
setPointCenter(t, n = { customZoom: mapZoom.findShip, type: 1 }) {
|
|
2180
2213
|
if (!this.mapInstance) return;
|
|
2181
|
-
const { customZoom: o = mapZoom.findShip, type:
|
|
2182
|
-
(
|
|
2214
|
+
const { customZoom: o = mapZoom.findShip, type: i = 1 } = n, r = this.mapInstance.getView(), l = r.getZoom();
|
|
2215
|
+
(i === 1 || l > o && i === 2 || l < o && i === 3) && r.setZoom(o);
|
|
2183
2216
|
const c = new Point(t);
|
|
2184
2217
|
r.setCenter(transform(c.getCoordinates(), projection.data, projection.mercator));
|
|
2185
2218
|
}
|
|
@@ -2199,14 +2232,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2199
2232
|
setup(e, { expose: t, emit: n }) {
|
|
2200
2233
|
const o = ref();
|
|
2201
2234
|
provide("mapInstance", o);
|
|
2202
|
-
const
|
|
2235
|
+
const i = ref(null), r = ref(null), l = ref(null), c = n, s = e, d = ref(s.zoom || mapZoom.default), u = ref(!1), m = ref(!0), f = ref(!0), p = {
|
|
2203
2236
|
tiandituTile: new TileLayer({ source: new XYZ({ url: baseMap.tiandituTile }) }),
|
|
2204
2237
|
tiandituTileMark: new TileLayer({ source: new XYZ({ url: baseMap.tiandituTileMark }) }),
|
|
2205
2238
|
tiandituImgTile: new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTile }), visible: !1 }),
|
|
2206
2239
|
tiandituImgTileMark: new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTileMark }), visible: !1 }),
|
|
2207
2240
|
greenMark: new TileLayer({ source: new XYZ({ url: baseMap.greenTile }) })
|
|
2208
|
-
},
|
|
2209
|
-
var
|
|
2241
|
+
}, y = () => {
|
|
2242
|
+
var w, L;
|
|
2210
2243
|
const g = {
|
|
2211
2244
|
projection: projection.mercator,
|
|
2212
2245
|
// 地图投影坐标系
|
|
@@ -2236,67 +2269,67 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2236
2269
|
p.greenMark
|
|
2237
2270
|
],
|
|
2238
2271
|
view: new View(g)
|
|
2239
|
-
}), h(), (
|
|
2272
|
+
}), h(), (w = r.value) == null || w.setScaleLine(s.vehicleMode === "ship" ? "nautical" : "metric"), (L = o.value) == null || L.on("moveend", V), v(g.zoom < mapZoom.shipGreenDotMax), S(s.vehicleMode === "ship" || s.viewMode === "findShip" ? BaseMapType.satellite : BaseMapType.vector), s.viewMode === "findShip" && s.mmsi && s.shipData && nextTick(() => {
|
|
2240
2273
|
findShip(String(s.mmsi), s.shipData);
|
|
2241
2274
|
}), onShipsMarkerHover();
|
|
2242
2275
|
};
|
|
2243
2276
|
onMounted(() => {
|
|
2244
|
-
|
|
2277
|
+
y();
|
|
2245
2278
|
});
|
|
2246
2279
|
const h = () => {
|
|
2247
2280
|
o.value && (renderCustomOverlaySetInstance(o.value), renderTruckSetInstance(o.value), drawPolygonSetInstance(o.value), renderShipStyleSetInstance(o.value), renderTrackStyleSetInstance(o.value), renderDashboardSetInstance(o.value), renderMarkerSetInstance(o.value), renderShipSetInstance(o.value), renderTrackSetInstance(o.value));
|
|
2248
2281
|
}, v = (g) => {
|
|
2249
|
-
var
|
|
2250
|
-
s.vehicleMode !== "ship" && (g = !1), (
|
|
2251
|
-
getUid(
|
|
2282
|
+
var w;
|
|
2283
|
+
s.vehicleMode !== "ship" && (g = !1), (w = o.value) == null || w.getLayers().forEach((L) => {
|
|
2284
|
+
getUid(L) === getUid(p.greenMark) && (L.setVisible(g), m.value = g);
|
|
2252
2285
|
});
|
|
2253
|
-
},
|
|
2254
|
-
var
|
|
2255
|
-
|
|
2256
|
-
(getUid(
|
|
2286
|
+
}, M = ref(BaseMapType.satellite), S = (g) => {
|
|
2287
|
+
var w;
|
|
2288
|
+
M.value = g, (w = o.value) == null || w.getLayers().forEach((L) => {
|
|
2289
|
+
(getUid(L) === getUid(p.tiandituTile) || getUid(L) === getUid(p.tiandituTileMark) || getUid(L) === getUid(p.tiandituImgTile) || getUid(L) === getUid(p.tiandituImgTileMark)) && L.setVisible(!1), (g === BaseMapType.vector && (getUid(L) === getUid(p.tiandituTile) || getUid(L) === getUid(p.tiandituTileMark)) || g === BaseMapType.satellite && (getUid(L) === getUid(p.tiandituImgTile) || getUid(L) === getUid(p.tiandituImgTileMark))) && L.setVisible(!0);
|
|
2257
2290
|
});
|
|
2258
|
-
},
|
|
2259
|
-
const g = o.value.getView(),
|
|
2260
|
-
|
|
2261
|
-
const
|
|
2262
|
-
|
|
2263
|
-
},
|
|
2264
|
-
var k,
|
|
2265
|
-
|
|
2266
|
-
const
|
|
2267
|
-
showTrackLayer.value ? (f.value = !1,
|
|
2268
|
-
},
|
|
2269
|
-
const
|
|
2270
|
-
c("extentChanged", { extent: [
|
|
2291
|
+
}, V = () => {
|
|
2292
|
+
const g = o.value.getView(), w = g.getZoom();
|
|
2293
|
+
w && C(w);
|
|
2294
|
+
const L = g.calculateExtent(o.value.getSize());
|
|
2295
|
+
L && w && P(L, w);
|
|
2296
|
+
}, C = (g) => {
|
|
2297
|
+
var k, T, E, I, F;
|
|
2298
|
+
d.value = g, v(g < mapZoom.shipGreenDotMax);
|
|
2299
|
+
const w = (k = o.value) == null ? void 0 : k.getLayers(), L = s.vehicleMode === "ship" ? w == null ? void 0 : w.getArray().find(($) => getUid($) === getUid(p.greenMark)) : void 0;
|
|
2300
|
+
showTrackLayer.value ? (f.value = !1, L == null || L.setVisible(!1), (T = shipsLayer.value) == null || T.setVisible(!1), (E = largeAmountShipsLayer.value) == null || E.setVisible(!1)) : !u.value && m.value && g <= mapZoom.shipGreenDotMax ? (f.value = !0, L == null || L.setVisible(!0), (I = shipsLayer.value) == null || I.setVisible(!1), (F = largeAmountShipsLayer.value) == null || F.setVisible(!1)) : (f.value = !1, L == null || L.setVisible(!1)), c("zoomChanged", g);
|
|
2301
|
+
}, P = (g, w) => {
|
|
2302
|
+
const L = transform([g[0], g[1]], projection.mercator, projection.data), k = transform([g[2], g[3]], projection.mercator, projection.data);
|
|
2303
|
+
c("extentChanged", { extent: [L, k], zoom: w });
|
|
2271
2304
|
};
|
|
2272
2305
|
return t({
|
|
2273
2306
|
mapInstance: o,
|
|
2274
|
-
initMap:
|
|
2275
|
-
pointRender: (g,
|
|
2307
|
+
initMap: y,
|
|
2308
|
+
pointRender: (g, w) => new PointMarkerClass(g, w),
|
|
2276
2309
|
renderTrucksMarker,
|
|
2277
2310
|
renderShip: renderShips,
|
|
2278
|
-
renderTrack: (g,
|
|
2279
|
-
var k,
|
|
2280
|
-
currentTrackId.value = g, showTrackLayer.value = !0, u.value = !0, hiddenAllShips(), (
|
|
2311
|
+
renderTrack: (g, w, L) => {
|
|
2312
|
+
var k, T;
|
|
2313
|
+
currentTrackId.value = g, showTrackLayer.value = !0, u.value = !0, hiddenAllShips(), (T = (k = largeAmountShipsLayer.value) == null ? void 0 : k.getSource()) == null || T.clear(), renderTrack(g, s.vehicleMode === "ship" ? w.reverse() : w, L, LENGTH_UNIT.NM);
|
|
2281
2314
|
},
|
|
2282
2315
|
findTruck,
|
|
2283
2316
|
removeTruckIcon,
|
|
2284
2317
|
clearAllTruck,
|
|
2285
2318
|
closeTrack: () => {
|
|
2286
|
-
var g,
|
|
2287
|
-
showTrackLayer.value = !1, (g = shipTrackVectorLayer.value) == null || g.setVisible(!1), (
|
|
2319
|
+
var g, w;
|
|
2320
|
+
showTrackLayer.value = !1, (g = shipTrackVectorLayer.value) == null || g.setVisible(!1), (w = selectShipsLayer.value) == null || w.setVisible(!0), u.value = !1, v(d.value < mapZoom.shipGreenDotMax), allTracks.value = [], stopAnimation();
|
|
2288
2321
|
},
|
|
2289
2322
|
closeTruckTrack: () => {
|
|
2290
|
-
var g,
|
|
2291
|
-
showTrackLayer.value = !1, (g = shipTrackVectorLayer.value) == null || g.setVisible(!1), (
|
|
2323
|
+
var g, w;
|
|
2324
|
+
showTrackLayer.value = !1, (g = shipTrackVectorLayer.value) == null || g.setVisible(!1), (w = selectShipsLayer.value) == null || w.setVisible(!0), stopAnimation();
|
|
2292
2325
|
},
|
|
2293
2326
|
resetTrackView,
|
|
2294
2327
|
playTrack,
|
|
2295
2328
|
clearSelectFeature,
|
|
2296
2329
|
findShip,
|
|
2297
|
-
focusShip: (g,
|
|
2298
|
-
var k,
|
|
2299
|
-
hiddenOrther.value =
|
|
2330
|
+
focusShip: (g, w, L = !0) => {
|
|
2331
|
+
var k, T;
|
|
2332
|
+
hiddenOrther.value = L, (k = shipsLayer.value) == null || k.setVisible(!L), (T = largeAmountShipsLayer.value) == null || T.setVisible(!1), findShip(g, w);
|
|
2300
2333
|
},
|
|
2301
2334
|
showTracks,
|
|
2302
2335
|
removeAllTrackLayer,
|
|
@@ -2304,27 +2337,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2304
2337
|
rerenderShip,
|
|
2305
2338
|
switchGreenDot: () => v(!1),
|
|
2306
2339
|
zoomTruckIcon,
|
|
2307
|
-
renderTruckTrack: (g,
|
|
2308
|
-
showTrackLayer.value = !0, renderTrack(g,
|
|
2340
|
+
renderTruckTrack: (g, w, L) => {
|
|
2341
|
+
showTrackLayer.value = !0, renderTrack(g, w, L, LENGTH_UNIT.KM, "truck");
|
|
2309
2342
|
},
|
|
2343
|
+
drawCustomContent,
|
|
2310
2344
|
removerLayer: removeShipTrackLineFeatureByIndex,
|
|
2311
2345
|
renderMarker,
|
|
2312
2346
|
setMarkerPosition: (g) => {
|
|
2313
2347
|
u.value = !0, setMarkerPosition(g);
|
|
2314
2348
|
},
|
|
2315
2349
|
getZoomAndCenter: () => {
|
|
2316
|
-
var
|
|
2317
|
-
const g = (
|
|
2350
|
+
var T;
|
|
2351
|
+
const g = (T = o.value) == null ? void 0 : T.getView();
|
|
2318
2352
|
if (!g) return null;
|
|
2319
|
-
const
|
|
2320
|
-
return { zoom:
|
|
2353
|
+
const w = Math.round(Number(g.getZoom())), { lon: L, lat: k } = transformUtils.mercatorToLonLat(g.getCenter());
|
|
2354
|
+
return { zoom: w, center: [L, k] };
|
|
2321
2355
|
},
|
|
2322
2356
|
setCenter: (g) => {
|
|
2323
2357
|
var k;
|
|
2324
|
-
const
|
|
2325
|
-
if (!
|
|
2326
|
-
const
|
|
2327
|
-
|
|
2358
|
+
const w = (k = o.value) == null ? void 0 : k.getView();
|
|
2359
|
+
if (!w) return null;
|
|
2360
|
+
const L = new Point(g);
|
|
2361
|
+
w.setCenter(transform(L.getCoordinates(), projection.data, projection.mercator));
|
|
2328
2362
|
},
|
|
2329
2363
|
drawPolygonTool,
|
|
2330
2364
|
setMapInstance: h,
|
|
@@ -2339,12 +2373,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2339
2373
|
transform: transformUtils,
|
|
2340
2374
|
format: formatUtils
|
|
2341
2375
|
}
|
|
2342
|
-
}), (g,
|
|
2376
|
+
}), (g, w) => (openBlock(), createElementBlock("div", {
|
|
2343
2377
|
class: "map-page map-container",
|
|
2344
2378
|
ref_key: "pageRef",
|
|
2345
|
-
ref:
|
|
2379
|
+
ref: i
|
|
2346
2380
|
}, [
|
|
2347
|
-
|
|
2381
|
+
w[0] || (w[0] = createElementVNode("div", {
|
|
2348
2382
|
id: "map",
|
|
2349
2383
|
class: "map"
|
|
2350
2384
|
}, null, -1)),
|
|
@@ -2353,9 +2387,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2353
2387
|
"view-mode": g.viewMode,
|
|
2354
2388
|
"disable-green-dot": u.value,
|
|
2355
2389
|
"show-track-layer": unref(showTrackLayer),
|
|
2356
|
-
"map-tile-mode":
|
|
2390
|
+
"map-tile-mode": M.value,
|
|
2357
2391
|
onSwitchGreenDot: v,
|
|
2358
|
-
onSwitchMapTile:
|
|
2392
|
+
onSwitchMapTile: S
|
|
2359
2393
|
}, {
|
|
2360
2394
|
toolPanel: withCtx(() => [
|
|
2361
2395
|
renderSlot(g.$slots, "toolPanel", {}, void 0, !0)
|
|
@@ -2369,16 +2403,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2369
2403
|
}, null, 512),
|
|
2370
2404
|
createVNode(ZoomControl, {
|
|
2371
2405
|
ref_key: "zoomControl",
|
|
2372
|
-
ref:
|
|
2406
|
+
ref: l
|
|
2373
2407
|
}, null, 512)
|
|
2374
2408
|
], 64)) : createCommentVNode("", !0),
|
|
2375
2409
|
createVNode(Copyright, {
|
|
2376
2410
|
type: g.logoType,
|
|
2377
|
-
"map-tile":
|
|
2411
|
+
"map-tile": M.value
|
|
2378
2412
|
}, null, 8, ["type", "map-tile"])
|
|
2379
2413
|
], 512));
|
|
2380
2414
|
}
|
|
2381
|
-
}), Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
2415
|
+
}), Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0cb9105e"]]), ZhMap = withInstall(Map);
|
|
2382
2416
|
export {
|
|
2383
2417
|
BaseMapType as B,
|
|
2384
2418
|
CDN_URL as C,
|