zhihao-ui 1.2.38 → 1.2.39
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/{BaseInfo-BjqSNfhB.js → BaseInfo-VzgiaCKn.js} +1 -1
- package/dist/es/{BaseItem-Da1CQtVm.js → BaseItem-D1xoWSGo.js} +3 -3
- package/dist/es/{Button-CKHqdHWj.js → Button-CNEQmoqP.js} +2 -2
- package/dist/es/{DatePicker-BOkpRWph.js → DatePicker-Dh8sksac.js} +3 -3
- package/dist/es/{DetailHeader-CL5Fin_g.js → DetailHeader-CSC9DAQc.js} +3 -3
- package/dist/es/{DetailSubTitle-Derdb7AV.js → DetailSubTitle-1ZjJAmet.js} +2 -2
- package/dist/es/{Dialog-CGN6pFzA.js → Dialog-BuGbBs3k.js} +3 -3
- package/dist/es/{DiyDataTable-CUbUe8NL.js → DiyDataTable-B8z44XT3.js} +4 -4
- package/dist/es/{EditInfoPair-Dd_u_yvQ.js → EditInfoPair-Dx0KRj7O.js} +3 -3
- package/dist/es/{FileWrapper-CGoXaXk9.js → FileWrapper-CS2RTMEV.js} +4 -4
- package/dist/es/{Grid-Dr8kPvc8.js → Grid-BQYUct2W.js} +2 -2
- package/dist/es/{InfoPair-B2VzU1pL.js → InfoPair-C3sCcJVT.js} +3 -3
- package/dist/es/{Input-DbqCWZ3K.js → Input-CcYpobcm.js} +3 -3
- package/dist/es/{Loading-Dimy_7_w.js → Loading-DCEW1FE_.js} +2 -2
- package/dist/es/{Map-BM9UCaCC.js → Map-Bo9f4Uus.js} +485 -477
- package/dist/es/{MessageBox-B54tNjcZ.js → MessageBox-ByLWEDby.js} +2 -2
- package/dist/es/{MoneyInput-uw4tR9WE.js → MoneyInput-DevlnT8p.js} +5 -5
- package/dist/es/{PageHeadPanel-CgR9a7c6.js → PageHeadPanel-C5A4n2ie.js} +2 -2
- package/dist/es/{Table-BdySjJta.js → Table-BoMGydAp.js} +5 -5
- package/dist/es/{ToolTips-BHQkWmMR.js → ToolTips-6ETyGI4m.js} +3 -3
- package/dist/es/index.js +23 -23
- package/dist/es/{utils-DUHqvTHl.js → utils-BSQSj8Ii.js} +1 -1
- package/dist/es/{vendor-B7FHttiN.js → vendor-DaYdW1_n.js} +13 -13
- package/dist/index.css +1 -1
- package/dist/types/components/Map/Map.vue.d.ts +3 -0
- package/dist/types/components/Map/components/measure.vue.d.ts +2 -2
- package/dist/types/components/Map/index.d.ts +9 -0
- package/dist/types/components/Map/utils/store.d.ts +2 -0
- package/dist/umd/index.css +1 -1
- package/dist/umd/index.umd.cjs +3 -3
- package/package.json +1 -1
|
@@ -1,118 +1,118 @@
|
|
|
1
1
|
var U = Object.defineProperty;
|
|
2
|
-
var z = (e, t,
|
|
3
|
-
var
|
|
2
|
+
var z = (e, t, n) => t in e ? U(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
|
|
3
|
+
var b = (e, t, n) => z(e, typeof t != "symbol" ? t + "" : t, n);
|
|
4
4
|
import { defineComponent, inject, useModel, ref, watch, openBlock, createElementBlock, createElementVNode, createVNode, unref, withCtx, Fragment, renderList, toDisplayString, createCommentVNode, mergeModels, nextTick, onMounted, normalizeClass, renderSlot, createBlock, useCssVars, computed, provide } from "vue";
|
|
5
|
-
import { p as getArea, q as getLength, V as VectorSource, r as VectorLayer, S as Style, C as CircleStyle, F as Fill, s as Stroke, D as Draw, O as Overlay, u as unByKey, t as ElSelect, v as ElOption, w as fromLonLat, P as Point,
|
|
6
|
-
import { _ as _export_sfc } from "./Button-
|
|
7
|
-
import { g as getForegroundColor } from "./DatePicker-
|
|
8
|
-
import { w as withInstall } from "./utils-
|
|
5
|
+
import { p as getArea, q as getLength, V as VectorSource, r as VectorLayer, S as Style, C as CircleStyle, F as Fill, s as Stroke, D as Draw, O as Overlay, u as unByKey, t as ElSelect, v as ElOption, w as getUid, x as fromLonLat, P as Point, y as transform, z as Feature, T as Text, I as Icon, A as Translate, B as toLonLat, i as cloneDeep, G as GeoJSON, W as WebGLPointsLayer, H as Circle, J as transformExtent, h as hooks, L as LineString, K as Polyline, M as getVectorContext, N as buffer, Q as ScaleLine$1, R as MultiPoint, U as getCenter, X as TileLayer, Y as XYZ, Z as Map$1, _ as View } from "./vendor-DaYdW1_n.js";
|
|
6
|
+
import { _ as _export_sfc } from "./Button-CNEQmoqP.js";
|
|
7
|
+
import { g as getForegroundColor } from "./DatePicker-Dh8sksac.js";
|
|
8
|
+
import { w as withInstall } from "./utils-BSQSj8Ii.js";
|
|
9
9
|
var BaseMapType = /* @__PURE__ */ ((e) => (e[e.vector = 0] = "vector", e[e.satellite = 1] = "satellite", e))(BaseMapType || {}), SEARCH_TYPE = /* @__PURE__ */ ((e) => (e[e.SEARCH_SHIP = 0] = "SEARCH_SHIP", e[e.SEARCH_PORT = 1] = "SEARCH_PORT", e[e.SEARCH_CUSTOM = 2] = "SEARCH_CUSTOM", e))(SEARCH_TYPE || {}), COPY_RIGHT_TYPE = /* @__PURE__ */ ((e) => (e[e.HORIZONTAL = 0] = "HORIZONTAL", e[e.VERTICAL = 1] = "VERTICAL", e))(COPY_RIGHT_TYPE || {}), CAR_COLOR = /* @__PURE__ */ ((e) => (e[e.BLUE = 1] = "BLUE", e[e.YELLOW = 2] = "YELLOW", e[e.Y_GREEN = 3] = "Y_GREEN", e))(CAR_COLOR || {}), DEVICE_TYPE = /* @__PURE__ */ ((e) => (e[e.HOST = 1] = "HOST", e[e.TALK = 2] = "TALK", e[e.STORAGE = 3] = "STORAGE", e[e.INTERNET = 4] = "INTERNET", e[e.CAMERA = 5] = "CAMERA", e[e.LOAD = 6] = "LOAD", e))(DEVICE_TYPE || {}), LENGTH_UNIT = /* @__PURE__ */ ((e) => (e[e.M = 1] = "M", e[e.KM = 2] = "KM", e[e.NM = 3] = "NM", e))(LENGTH_UNIT || {}), SWITCH_BTN = /* @__PURE__ */ ((e) => (e.Camera = "camera", e.Mobile = "mobile", e.WaterGauge = "waterGauge", e))(SWITCH_BTN || {}), SHIP_SAIL_STATUS = /* @__PURE__ */ ((e) => (e[e.发动机使用中 = 0] = "发动机使用中", e[e.锚泊 = 1] = "锚泊", e[e.未操作 = 2] = "未操作", e[e.操纵能力受限 = 3] = "操纵能力受限", e[e.吃水受限 = 4] = "吃水受限", e[e.系泊 = 5] = "系泊", e[e.搁浅 = 6] = "搁浅", e[e.从事捕捞 = 7] = "从事捕捞", e[e.航行中 = 8] = "航行中", e[e.留作将来修正导航状态 = 9] = "留作将来修正导航状态", e[e.高速船留用 = 10] = "高速船留用", e[e.机动船尾推作业 = 11] = "机动船尾推作业", e[e.机动船顶推或侧推作业 = 12] = "机动船顶推或侧推作业", e[e.飞翼船留用 = 13] = "飞翼船留用", e[e.现行的 = 14] = "现行的", e[e.未定义 = 15] = "未定义", e))(SHIP_SAIL_STATUS || {});
|
|
10
10
|
class ShipMapData {
|
|
11
|
-
constructor(t,
|
|
12
|
-
|
|
11
|
+
constructor(t, n, o, l, r, i, c, s, m, u, d, f, p, y, h, g, k, T, I, x, F, P, v, L) {
|
|
12
|
+
b(this, "id");
|
|
13
13
|
// mmsi
|
|
14
|
-
|
|
14
|
+
b(this, "mmsi");
|
|
15
15
|
// 船舶三角形填充色
|
|
16
|
-
|
|
16
|
+
b(this, "fill");
|
|
17
17
|
// 船类型 "7": "货船",
|
|
18
|
-
|
|
18
|
+
b(this, "shipType");
|
|
19
19
|
// 船名
|
|
20
|
-
|
|
20
|
+
b(this, "name");
|
|
21
21
|
// 长度
|
|
22
|
-
|
|
22
|
+
b(this, "length");
|
|
23
23
|
// 宽度
|
|
24
|
-
|
|
24
|
+
b(this, "breadth");
|
|
25
25
|
// 经度
|
|
26
|
-
|
|
26
|
+
b(this, "lon");
|
|
27
27
|
// 纬度
|
|
28
|
-
|
|
28
|
+
b(this, "lat");
|
|
29
29
|
// 时间
|
|
30
|
-
|
|
30
|
+
b(this, "createdAt");
|
|
31
31
|
// 速度
|
|
32
|
-
|
|
32
|
+
b(this, "speed");
|
|
33
33
|
// 来源
|
|
34
|
-
|
|
34
|
+
b(this, "from");
|
|
35
35
|
// 船状态 "stop":"静止","sail":"航行","work":"作业","danger":"危险","other":"其他"
|
|
36
|
-
|
|
36
|
+
b(this, "sailStatus");
|
|
37
37
|
// 船艏向
|
|
38
|
-
|
|
38
|
+
b(this, "hdg");
|
|
39
39
|
// 航迹向
|
|
40
|
-
|
|
40
|
+
b(this, "cog");
|
|
41
41
|
// 设备定位类型
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
b(this, "posType");
|
|
43
|
+
b(this, "type");
|
|
44
44
|
// 航向角度
|
|
45
|
-
|
|
45
|
+
b(this, "angle");
|
|
46
46
|
// 左侧是否显示色块
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
this.id = t, this.mmsi =
|
|
47
|
+
b(this, "leftIconColor");
|
|
48
|
+
b(this, "existDevice");
|
|
49
|
+
b(this, "existMobile");
|
|
50
|
+
b(this, "existWaterGauge");
|
|
51
|
+
b(this, "selected");
|
|
52
|
+
b(this, "blinkColors");
|
|
53
|
+
this.id = t, this.mmsi = n, this.fill = o, this.shipType = l, this.name = r, this.length = i, this.breadth = c, this.lon = s, this.lat = m, this.createdAt = u, this.speed = d, this.from = f, this.sailStatus = p, this.hdg = y, this.cog = h, this.posType = g, this.type = k, this.angle = T, this.leftIconColor = I, this.existDevice = x, this.existMobile = F, this.existWaterGauge = P, this.selected = v, this.blinkColors = L;
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
const formatLength = function(e, t) {
|
|
57
|
-
const
|
|
57
|
+
const o = getLength(e);
|
|
58
58
|
let l = "";
|
|
59
59
|
switch (t) {
|
|
60
60
|
case LENGTH_UNIT.M:
|
|
61
|
-
l = Math.round(
|
|
61
|
+
l = Math.round(o * 100) / 100 + " m";
|
|
62
62
|
break;
|
|
63
63
|
case LENGTH_UNIT.KM:
|
|
64
|
-
l = Math.round(
|
|
64
|
+
l = Math.round(o / 1e3 * 100) / 100 + " km";
|
|
65
65
|
break;
|
|
66
66
|
case LENGTH_UNIT.NM:
|
|
67
|
-
l = (Math.round(
|
|
67
|
+
l = (Math.round(o / 1e3 * 100) / 100 / 1.852).toFixed(2) + " nm";
|
|
68
68
|
break;
|
|
69
69
|
}
|
|
70
70
|
return l;
|
|
71
71
|
}, convertSixHundredThousandToLatLng = function(e, t) {
|
|
72
|
-
const
|
|
73
|
-
return [Number(e) / 6e5,
|
|
72
|
+
const n = Number(t) / 6e5;
|
|
73
|
+
return [Number(e) / 6e5, n];
|
|
74
74
|
}, formatArea = (e, t) => {
|
|
75
|
-
const
|
|
75
|
+
const o = getArea(e);
|
|
76
76
|
let l;
|
|
77
77
|
switch (t) {
|
|
78
78
|
case LENGTH_UNIT.KM:
|
|
79
|
-
|
|
79
|
+
o > 1e4 ? l = Math.round(o / 1e6 * 100) / 100 + " km<sup>2</sup>" : l = 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
|
-
|
|
83
|
+
o > 1e4 ? l = Math.round(o / 1e6 / r * 100) / 100 + " nm<sup>2</sup>" : l = Math.round(o * 100) / 100 + " m<sup>2</sup>";
|
|
84
84
|
break;
|
|
85
85
|
}
|
|
86
86
|
return l;
|
|
87
87
|
}, convertShipMapData = (e) => {
|
|
88
|
-
const t = (
|
|
89
|
-
|
|
90
|
-
|
|
88
|
+
const t = (n) => new ShipMapData(
|
|
89
|
+
n.id,
|
|
90
|
+
n.id,
|
|
91
91
|
// 船舶三角形填充色
|
|
92
|
-
|
|
92
|
+
n.fill || "#04C900",
|
|
93
93
|
"70",
|
|
94
|
-
(
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
94
|
+
(n.cnname || n.enname || n.name || n.id) + `${n.existName ? n.existName : ""}`,
|
|
95
|
+
n.len || n.length,
|
|
96
|
+
n.wid || n.breadth,
|
|
97
|
+
n.lon,
|
|
98
|
+
n.lat,
|
|
99
99
|
(/* @__PURE__ */ new Date()).getTime(),
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
Number(
|
|
104
|
-
|
|
105
|
-
Number(
|
|
100
|
+
n.spd,
|
|
101
|
+
n.from,
|
|
102
|
+
n.status,
|
|
103
|
+
Number(n.hdg),
|
|
104
|
+
n.cog,
|
|
105
|
+
Number(n.postype),
|
|
106
106
|
"other",
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
107
|
+
n.cog,
|
|
108
|
+
n.leftIconColor,
|
|
109
|
+
n.existDevice,
|
|
110
|
+
n.existMobile,
|
|
111
|
+
n.existWaterGauge,
|
|
112
|
+
n.selected,
|
|
113
|
+
n.blinkColors
|
|
114
114
|
);
|
|
115
|
-
return Array.isArray(e) ? e.map((
|
|
115
|
+
return Array.isArray(e) ? e.map((n) => t(n)) : t(e);
|
|
116
116
|
}, formatUtils = {
|
|
117
117
|
formatLength,
|
|
118
118
|
convertSixHundredThousandToLatLng,
|
|
@@ -129,8 +129,8 @@ const formatLength = function(e, t) {
|
|
|
129
129
|
visibleModifiers: {}
|
|
130
130
|
}),
|
|
131
131
|
emits: /* @__PURE__ */ mergeModels(["close"], ["update:visible"]),
|
|
132
|
-
setup(e, { expose: t, emit:
|
|
133
|
-
const
|
|
132
|
+
setup(e, { expose: t, emit: n }) {
|
|
133
|
+
const o = inject("mapInstance"), l = n, r = useModel(e, "visible"), i = ref("3"), c = ref([]), s = ref(!1), m = new VectorSource();
|
|
134
134
|
let u, d, f, p, y;
|
|
135
135
|
const h = new VectorLayer({
|
|
136
136
|
source: m,
|
|
@@ -144,16 +144,17 @@ const formatLength = function(e, t) {
|
|
|
144
144
|
}), g = function(S) {
|
|
145
145
|
if (S.dragging)
|
|
146
146
|
return;
|
|
147
|
-
let
|
|
148
|
-
u && (
|
|
147
|
+
let M = "点击选择起点";
|
|
148
|
+
u && (M = "单击继续,双击结束"), d && (d.innerHTML = M, f.setPosition(S.coordinate), d.classList.remove("hidden"));
|
|
149
149
|
}, k = () => {
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
150
|
+
var S, M;
|
|
151
|
+
o != null && o.value && ((S = o == null ? void 0 : o.value) == null || S.on("pointermove", g), (M = o == null ? void 0 : o.value) == null || M.getViewport().addEventListener("mouseout", function() {
|
|
152
|
+
var C;
|
|
153
|
+
(C = d == null ? void 0 : d.classList) == null || C.add("hidden");
|
|
153
154
|
}), s.value = !0);
|
|
154
155
|
};
|
|
155
|
-
let
|
|
156
|
-
const
|
|
156
|
+
let T;
|
|
157
|
+
const I = new Style({
|
|
157
158
|
fill: new Fill({
|
|
158
159
|
color: "rgba(255, 255, 255, 0.2)"
|
|
159
160
|
}),
|
|
@@ -173,40 +174,44 @@ const formatLength = function(e, t) {
|
|
|
173
174
|
})
|
|
174
175
|
});
|
|
175
176
|
function x() {
|
|
176
|
-
var S,
|
|
177
|
-
if (
|
|
178
|
-
if (c.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((
|
|
179
|
-
var
|
|
180
|
-
(
|
|
181
|
-
}), m.clear(),
|
|
182
|
-
const
|
|
183
|
-
|
|
177
|
+
var S, M;
|
|
178
|
+
if (o != null && o.value) {
|
|
179
|
+
if (c.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((C) => {
|
|
180
|
+
var E;
|
|
181
|
+
(E = C == null ? void 0 : C.parentNode) == null || E.removeChild(C);
|
|
182
|
+
}), m.clear(), T) {
|
|
183
|
+
const C = o.value.getInteractions().getArray().find((E) => getUid(E) === getUid(T));
|
|
184
|
+
C && ((S = o.value) == null || S.removeInteraction(C));
|
|
184
185
|
}
|
|
185
|
-
(
|
|
186
|
+
(M = o.value) == null || M.removeLayer(h), d != null && d.parentNode && d.parentNode.removeChild(d), p != null && p.parentNode && p.parentNode.removeChild(p);
|
|
186
187
|
}
|
|
187
188
|
}
|
|
188
189
|
function F() {
|
|
189
|
-
var
|
|
190
|
-
x(), (
|
|
190
|
+
var M, C;
|
|
191
|
+
x(), (M = o == null ? void 0 : o.value) == null || M.addLayer(h), T = new Draw({
|
|
191
192
|
source: m,
|
|
192
193
|
type: "LineString",
|
|
193
194
|
style: function() {
|
|
194
|
-
return
|
|
195
|
+
return I;
|
|
196
|
+
},
|
|
197
|
+
// 添加条件函数,判断是否应该触发绘制
|
|
198
|
+
condition: function(E) {
|
|
199
|
+
return E.originalEvent.target.tagName !== "DIV";
|
|
195
200
|
}
|
|
196
|
-
}), (
|
|
201
|
+
}), (C = o == null ? void 0 : o.value) == null || C.addInteraction(T), v(), P();
|
|
197
202
|
let S;
|
|
198
|
-
|
|
203
|
+
T.on("drawstart", function(E) {
|
|
199
204
|
var N;
|
|
200
|
-
u =
|
|
205
|
+
u = E.feature;
|
|
201
206
|
let V;
|
|
202
207
|
S = (N = u.getGeometry()) == null ? void 0 : N.on("change", function(A) {
|
|
203
208
|
const $ = A.target;
|
|
204
209
|
let R = formatUtils.formatLength($, Number(i.value));
|
|
205
210
|
V = $.getLastCoordinate(), p && R && (p.innerHTML = R), y.setPosition(V);
|
|
206
211
|
});
|
|
207
|
-
}),
|
|
208
|
-
var
|
|
209
|
-
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
|
+
}), T.on("drawend", function() {
|
|
213
|
+
var E, V;
|
|
214
|
+
p && (p.className = "ol-tooltip ol-tooltip-static ol-tooltip-measure"), p != null && p.innerHTML && (c.value.push(p == null ? void 0 : p.innerHTML), p.innerHTML = `${p.innerHTML}<div class="ol-tooltip-delete-button" data-index="${((E = c.value) == null ? void 0 : E.length) - 1}"><i class="map-iconfont icon-delete"></i></div>`), (V = document.querySelector(".ol-selectable:has(.ol-tooltip-delete-button):last-child .ol-tooltip-delete-button")) == null || V.addEventListener("click", (N) => {
|
|
210
215
|
var $;
|
|
211
216
|
N.preventDefault(), N.stopPropagation();
|
|
212
217
|
const A = ($ = N.target) == null ? void 0 : $.getAttribute("data-index");
|
|
@@ -220,7 +225,7 @@ const formatLength = function(e, t) {
|
|
|
220
225
|
element: d,
|
|
221
226
|
offset: [15, 0],
|
|
222
227
|
positioning: "center-left"
|
|
223
|
-
}), (S =
|
|
228
|
+
}), (S = o == null ? void 0 : o.value) == null || S.addOverlay(f);
|
|
224
229
|
}
|
|
225
230
|
function v() {
|
|
226
231
|
var S;
|
|
@@ -230,15 +235,15 @@ const formatLength = function(e, t) {
|
|
|
230
235
|
positioning: "bottom-center",
|
|
231
236
|
stopEvent: !1,
|
|
232
237
|
insertFirst: !1
|
|
233
|
-
}), (S =
|
|
238
|
+
}), (S = o == null ? void 0 : o.value) == null || S.addOverlay(y);
|
|
234
239
|
}
|
|
235
240
|
const L = (S) => {
|
|
236
|
-
var
|
|
241
|
+
var E, V;
|
|
237
242
|
c.value[S] && c.value.splice(S, 1);
|
|
238
|
-
const
|
|
239
|
-
|
|
240
|
-
const
|
|
241
|
-
|
|
243
|
+
const M = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
|
|
244
|
+
M[S] && ((V = (E = M[S]) == null ? void 0 : E.parentNode) == null || V.removeChild(M[S]));
|
|
245
|
+
const C = m.getFeatures();
|
|
246
|
+
C[S] && m.removeFeature(C[S]);
|
|
242
247
|
}, w = () => {
|
|
243
248
|
l("close");
|
|
244
249
|
};
|
|
@@ -247,20 +252,20 @@ const formatLength = function(e, t) {
|
|
|
247
252
|
}, { deep: !0, immediate: !0 }), t({
|
|
248
253
|
addInteraction: F,
|
|
249
254
|
removeInteraction: x
|
|
250
|
-
}), (S,
|
|
255
|
+
}), (S, M) => r.value && S.viewMode !== "WxMiniprogram" ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
|
|
251
256
|
createElementVNode("div", { class: "header" }, [
|
|
252
|
-
|
|
257
|
+
M[1] || (M[1] = createElementVNode("div", { class: "title" }, "测量", -1)),
|
|
253
258
|
createElementVNode("i", {
|
|
254
259
|
onClick: w,
|
|
255
260
|
class: "map-iconfont icon-close"
|
|
256
261
|
})
|
|
257
262
|
]),
|
|
258
263
|
createElementVNode("div", _hoisted_2$2, [
|
|
259
|
-
|
|
264
|
+
M[2] || (M[2] = createElementVNode("div", { class: "tips" }, "在地图上点击多个点测量距离,距离单位", -1)),
|
|
260
265
|
createVNode(unref(ElSelect), {
|
|
261
266
|
class: "select-length-unit",
|
|
262
267
|
modelValue: i.value,
|
|
263
|
-
"onUpdate:modelValue":
|
|
268
|
+
"onUpdate:modelValue": M[0] || (M[0] = (C) => i.value = C)
|
|
264
269
|
}, {
|
|
265
270
|
default: withCtx(() => [
|
|
266
271
|
createVNode(unref(ElOption), {
|
|
@@ -280,26 +285,26 @@ const formatLength = function(e, t) {
|
|
|
280
285
|
}, 8, ["modelValue"])
|
|
281
286
|
]),
|
|
282
287
|
createElementVNode("div", _hoisted_3$1, [
|
|
283
|
-
(openBlock(!0), createElementBlock(Fragment, null, renderList(c.value, (
|
|
288
|
+
(openBlock(!0), createElementBlock(Fragment, null, renderList(c.value, (C, E) => (openBlock(), createElementBlock("div", {
|
|
284
289
|
class: "measure-history-item",
|
|
285
|
-
key:
|
|
290
|
+
key: E
|
|
286
291
|
}, [
|
|
287
292
|
createElementVNode("div", _hoisted_4, [
|
|
288
|
-
|
|
289
|
-
createElementVNode("span", _hoisted_5, "线段" + toDisplayString(
|
|
290
|
-
createElementVNode("span", _hoisted_6, toDisplayString(
|
|
293
|
+
M[3] || (M[3] = createElementVNode("i", { class: "map-iconfont icon-line" }, null, -1)),
|
|
294
|
+
createElementVNode("span", _hoisted_5, "线段" + toDisplayString(E + 1), 1),
|
|
295
|
+
createElementVNode("span", _hoisted_6, toDisplayString(C), 1)
|
|
291
296
|
]),
|
|
292
297
|
createElementVNode("div", {
|
|
293
298
|
class: "delete-button",
|
|
294
|
-
onClick: (V) => L(
|
|
295
|
-
},
|
|
299
|
+
onClick: (V) => L(E)
|
|
300
|
+
}, M[4] || (M[4] = [
|
|
296
301
|
createElementVNode("i", { class: "map-iconfont icon-delete" }, null, -1)
|
|
297
302
|
]), 8, _hoisted_7)
|
|
298
303
|
]))), 128))
|
|
299
304
|
])
|
|
300
305
|
])) : createCommentVNode("", !0);
|
|
301
306
|
}
|
|
302
|
-
}), Measure = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-
|
|
307
|
+
}), Measure = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-9b1d2f55"]]), mapInstance$8 = ref(), renderMarkerSetInstance = (e) => mapInstance$8.value = e, markerPosition = ref(""), marker = ref(), createIconStyle = (e) => new Style({
|
|
303
308
|
image: new Icon({
|
|
304
309
|
src: CDN_URL + "map/poi-marker-default.png",
|
|
305
310
|
anchor: [0.5, 1]
|
|
@@ -328,14 +333,14 @@ const formatLength = function(e, t) {
|
|
|
328
333
|
padding: [2, 2, 2, 2]
|
|
329
334
|
// 设置文本背景的内边距
|
|
330
335
|
})
|
|
331
|
-
}), renderMarker = (e, t = !0,
|
|
336
|
+
}), renderMarker = (e, t = !0, n = !0) => {
|
|
332
337
|
var u;
|
|
333
338
|
if (!mapInstance$8.value || !e || e.split(",").length !== 2) return;
|
|
334
|
-
const [
|
|
339
|
+
const [o, l] = e.split(",").map(Number);
|
|
335
340
|
marker.value = new Feature({
|
|
336
|
-
geometry: new Point(fromLonLat([
|
|
341
|
+
geometry: new Point(fromLonLat([o, l]))
|
|
337
342
|
});
|
|
338
|
-
const r =
|
|
343
|
+
const r = n ? `${o}, ${l}` : "";
|
|
339
344
|
(u = marker.value) == null || u.setStyle(createIconStyle(r));
|
|
340
345
|
const i = new VectorSource({
|
|
341
346
|
features: [marker.value]
|
|
@@ -352,15 +357,15 @@ const formatLength = function(e, t) {
|
|
|
352
357
|
markerPosition.value = `${y[0].toFixed(6)}, ${y[1].toFixed(6)}`, (h = marker.value) == null || h.setStyle(createIconStyle(markerPosition.value));
|
|
353
358
|
}), mapInstance$8.value.addInteraction(d);
|
|
354
359
|
}
|
|
355
|
-
const m = new Point([
|
|
360
|
+
const m = new Point([o, l]);
|
|
356
361
|
s.setCenter(transform(m.getCoordinates(), projection.data, projection.mercator)), s.setZoom(mapZoom.findShip);
|
|
357
362
|
}, setMarkerPosition = (e) => {
|
|
358
363
|
var l, r;
|
|
359
364
|
if (!mapInstance$8.value) return;
|
|
360
|
-
const t = mapInstance$8.value.getView(),
|
|
361
|
-
(r = (l = marker.value) == null ? void 0 : l.getGeometry()) == null || r.setCoordinates(fromLonLat([
|
|
362
|
-
const
|
|
363
|
-
t.setCenter(transform(
|
|
365
|
+
const t = mapInstance$8.value.getView(), n = e.split(",").map(Number);
|
|
366
|
+
(r = (l = marker.value) == null ? void 0 : l.getGeometry()) == null || r.setCoordinates(fromLonLat([n[0], n[1]]));
|
|
367
|
+
const o = new Point([n[0], n[1]]);
|
|
368
|
+
t.setCenter(transform(o.getCoordinates(), projection.data, projection.mercator)), t.setZoom(mapZoom.markerPosition);
|
|
364
369
|
}, CDN_URL = "https://static.zhihaoscm.cn/", tiandituKey = "a6e8f78974f2581f2ca00485b40c948f", zhongkeKey = "15c81cc0a191a232e0a0ca1a51c3ca81", baseMap = {
|
|
365
370
|
// 矢量底图
|
|
366
371
|
// zhongkeTile: `https://api.open.geovisearth.com/map/v1/vec/{z}/{x}/{y}?token=${zhongkeKey}&format=png&tmsIds=w`,
|
|
@@ -409,13 +414,13 @@ ref();
|
|
|
409
414
|
const trucksLayer = ref(), shipTrackLineFeatures = ref([]), trackLineVectorSource = ref(), shipTrackVectorLayer = ref();
|
|
410
415
|
ref();
|
|
411
416
|
ref();
|
|
412
|
-
const shipLabels = ref([]), trackLabels = ref([]), showTrackLayer = ref(!1), allTracks = ref([]), currentTrackId = ref(""), showTrackAnimatMarker = ref(!1), hiddenOrther = ref(!1);
|
|
417
|
+
const shipLabels = ref([]), trackLabels = ref([]), showTrackLayer = ref(!1), allTracks = ref([]), currentTrackId = ref(""), showTrackAnimatMarker = ref(!1), hiddenOrther = ref(!1), showMeasure = ref(!1), getShowMeasure = () => showMeasure.value;
|
|
413
418
|
function getIconFont(unicode = "") {
|
|
414
419
|
return unicode.indexOf("&") !== -1 && (unicode = unicode.replace("&", "&")), unicode.indexOf("&") !== -1 && (unicode = unicode.replace("&", "&")), eval('("' + unicode.replace("&#x", "\\u").replace(";", "") + '")');
|
|
415
420
|
}
|
|
416
421
|
const multiplyPixelRatio = (e) => {
|
|
417
422
|
const t = window.devicePixelRatio || 1;
|
|
418
|
-
return e.map((
|
|
423
|
+
return e.map((n) => n.map((o) => o * t));
|
|
419
424
|
}, adjustBounds = (e, t) => t.length === 2 ? [e[0] - t[0], e[1] - t[1], e[2] + t[0], e[3] + t[1]] : [e[0] + t[0], e[1] + t[1], e[2] + t[2], e[3] + t[3]], isOverlapping = (e, t) => e[0] <= t[2] && e[2] >= t[0] && e[1] <= t[3] && e[3] >= t[1], getIconStyle = (e) => new Style({
|
|
420
425
|
text: new Text({
|
|
421
426
|
font: "Normal 14px map-iconfont",
|
|
@@ -424,8 +429,8 @@ const multiplyPixelRatio = (e) => {
|
|
|
424
429
|
offsetY: -14
|
|
425
430
|
}),
|
|
426
431
|
zIndex: 100
|
|
427
|
-
}), getRotation = (e, t,
|
|
428
|
-
function
|
|
432
|
+
}), getRotation = (e, t, n) => {
|
|
433
|
+
function o(d) {
|
|
429
434
|
return 180 * (d % (2 * Math.PI)) / Math.PI;
|
|
430
435
|
}
|
|
431
436
|
function l(d) {
|
|
@@ -449,8 +454,8 @@ const multiplyPixelRatio = (e) => {
|
|
|
449
454
|
return function(P, v) {
|
|
450
455
|
return (i(v, P) + 180) % 360;
|
|
451
456
|
}(d, f);
|
|
452
|
-
const y = r(d), h = r(f), g = l(y[0]), k = l(h[0]),
|
|
453
|
-
return
|
|
457
|
+
const y = r(d), h = r(f), g = l(y[0]), k = l(h[0]), T = l(y[1]), I = l(h[1]), x = Math.sin(k - g) * Math.cos(I), F = Math.cos(T) * Math.sin(I) - Math.sin(T) * Math.cos(I) * Math.cos(k - g);
|
|
458
|
+
return o(Math.atan2(x, F));
|
|
454
459
|
}
|
|
455
460
|
function c(d) {
|
|
456
461
|
return !isNaN(d) && d !== null && !Array.isArray(d);
|
|
@@ -462,7 +467,7 @@ const multiplyPixelRatio = (e) => {
|
|
|
462
467
|
const y = { type: "Feature" };
|
|
463
468
|
return p.id !== void 0 && (y.id = p.id), p.bbox && (y.bbox = p.bbox), y.properties = f || {}, y.geometry = d, y;
|
|
464
469
|
}
|
|
465
|
-
const u = i(s(e), s(t),
|
|
470
|
+
const u = i(s(e), s(t), n);
|
|
466
471
|
return u < 0 ? 360 + u : u;
|
|
467
472
|
}, triangleModel = multiplyPixelRatio([
|
|
468
473
|
[0, -8],
|
|
@@ -533,26 +538,26 @@ const multiplyPixelRatio = (e) => {
|
|
|
533
538
|
radius: 0
|
|
534
539
|
})
|
|
535
540
|
}), mapInstance$7 = ref(), renderShipStyleSetInstance = (e) => mapInstance$7.value = e, speedCondition = [[1, 10], [10, 20], [20, 1 / 0]], drawShipModelByZoom = { 14: [200, 30], 15: [115, 15], 16: [55, 8], 17: [25, 5], 18: [1, 1] }, setShipStyle = (e, t = !1) => new Style({
|
|
536
|
-
renderer: (
|
|
537
|
-
|
|
538
|
-
const l =
|
|
541
|
+
renderer: (n, o) => {
|
|
542
|
+
n = n;
|
|
543
|
+
const l = o.context, r = o.feature.get("data");
|
|
539
544
|
if (!r) return;
|
|
540
|
-
|
|
545
|
+
o.feature.get("index") === 0 && (shipLabels.value = []);
|
|
541
546
|
try {
|
|
542
|
-
const c = drawShipBody(l, r,
|
|
547
|
+
const c = drawShipBody(l, r, n, t);
|
|
543
548
|
c && (drawHeading(l, r, c, t), r.selected = e, e && setTimeout(() => {
|
|
544
549
|
drawSelectBounds(l, c);
|
|
545
|
-
}, 50)), drawShipLabel(l, r,
|
|
550
|
+
}, 50)), drawShipLabel(l, r, n);
|
|
546
551
|
} catch {
|
|
547
552
|
return !1;
|
|
548
553
|
}
|
|
549
554
|
}
|
|
550
|
-
}), drawShipBody = (e, t,
|
|
555
|
+
}), drawShipBody = (e, t, n, o) => {
|
|
551
556
|
if (!mapInstance$7.value) return;
|
|
552
557
|
const l = Math.round(Number(mapInstance$7.value.getView().getZoom()));
|
|
553
558
|
if (!l) return;
|
|
554
559
|
let r = [];
|
|
555
|
-
const [i, c] = drawShipModelByZoom[l] || [0, 0], [s, m] =
|
|
560
|
+
const [i, c] = drawShipModelByZoom[l] || [0, 0], [s, m] = n;
|
|
556
561
|
if (l <= mapZoom.shipModelMax && l > mapZoom.shipModelMin && t.length >= i && t.breadth >= c)
|
|
557
562
|
r = rotateShapeModel(drawCurrentShipShapeModel(t, l), t.angle).map((d) => {
|
|
558
563
|
const [f, p] = d;
|
|
@@ -560,7 +565,7 @@ const multiplyPixelRatio = (e) => {
|
|
|
560
565
|
});
|
|
561
566
|
else {
|
|
562
567
|
const u = rotateShapeModel(triangleModel, t.angle);
|
|
563
|
-
|
|
568
|
+
n.length === 2 && (r = u.map((d) => {
|
|
564
569
|
const [f, p] = d;
|
|
565
570
|
return [s + f, m + p];
|
|
566
571
|
}));
|
|
@@ -569,8 +574,8 @@ const multiplyPixelRatio = (e) => {
|
|
|
569
574
|
if (t != null && t.length) {
|
|
570
575
|
const u = r.length === 3 ? 30 : t.length * 0.4;
|
|
571
576
|
e.beginPath(), e.arc(
|
|
572
|
-
|
|
573
|
-
|
|
577
|
+
n[0],
|
|
578
|
+
n[1],
|
|
574
579
|
u,
|
|
575
580
|
0,
|
|
576
581
|
2 * Math.PI
|
|
@@ -579,9 +584,9 @@ const multiplyPixelRatio = (e) => {
|
|
|
579
584
|
e.save(), e.beginPath(), e.moveTo(r[0][0], r[0][1]);
|
|
580
585
|
for (let u = 1; u < r.length; u++)
|
|
581
586
|
e.lineTo(r[u][0], r[u][1]);
|
|
582
|
-
return e.closePath(), e.strokeStyle =
|
|
583
|
-
}, drawHeading = (e, t,
|
|
584
|
-
const [l, r] =
|
|
587
|
+
return e.closePath(), e.strokeStyle = o ? "#ff0000" : "#000", e.lineWidth = o ? 2 : 1, e.stroke(), e.fillStyle = t.fill, e.fill(), e.restore(), r;
|
|
588
|
+
}, drawHeading = (e, t, n, o) => {
|
|
589
|
+
const [l, r] = n[0], i = getShipDirectPath(t);
|
|
585
590
|
if (i) {
|
|
586
591
|
const c = i.map(function(s) {
|
|
587
592
|
const [m, u] = s;
|
|
@@ -597,17 +602,17 @@ const multiplyPixelRatio = (e) => {
|
|
|
597
602
|
const [m, u] = c[s];
|
|
598
603
|
e.lineTo(m, u);
|
|
599
604
|
}
|
|
600
|
-
e.strokeStyle =
|
|
605
|
+
e.strokeStyle = o ? "#ff0000" : "#000", e.lineWidth = o ? 2 : 1, e.stroke(), e.restore();
|
|
601
606
|
}
|
|
602
607
|
}, drawSelectBounds = (e, t) => {
|
|
603
|
-
let [
|
|
608
|
+
let [n, o, l, r] = getPixelFromCoordinate(t);
|
|
604
609
|
const i = 4;
|
|
605
|
-
|
|
610
|
+
n -= i, o -= i, l += i, r += i, e.save(), e.strokeStyle = "#ff0000", e.lineWidth = 4;
|
|
606
611
|
const c = 8;
|
|
607
|
-
e.beginPath(), e.moveTo(
|
|
608
|
-
}, drawShipLabel = (e, t,
|
|
612
|
+
e.beginPath(), e.moveTo(n + c, r), e.lineTo(n, r), e.lineTo(n, r - c), e.moveTo(n, o + c), e.lineTo(n, o), e.lineTo(n + c, o), e.moveTo(l - c, o), e.lineTo(l, o), e.lineTo(l, o + c), e.moveTo(l, r - c), e.lineTo(l, r), e.lineTo(l - c, r), e.stroke(), e.restore();
|
|
613
|
+
}, drawShipLabel = (e, t, n) => {
|
|
609
614
|
if (!t.selected && shipLabels.value.find((d) => d.name === t.name)) return;
|
|
610
|
-
const [
|
|
615
|
+
const [o, l] = n, r = o, i = l, c = t.name;
|
|
611
616
|
let s;
|
|
612
617
|
t.leftIconColor && (s = { color: t.leftIconColor, icon: "" });
|
|
613
618
|
const m = getShipCustomIcon(t), u = {
|
|
@@ -626,15 +631,15 @@ const multiplyPixelRatio = (e) => {
|
|
|
626
631
|
};
|
|
627
632
|
drawLabel(e, u, shipLabels.value);
|
|
628
633
|
}, drawCurrentShipShapeModel = (e, t) => {
|
|
629
|
-
let
|
|
630
|
-
t <= 14 ?
|
|
631
|
-
const
|
|
634
|
+
let n = 0;
|
|
635
|
+
t <= 14 ? n = 0.058 : t === 15 ? n = 0.12 : t === 16 ? n = 0.22 : t === 17 ? n = 0.435 : t === 18 && (n = 0.857);
|
|
636
|
+
const o = e.length / 4 * n, l = e.breadth * n;
|
|
632
637
|
let r = cloneDeep(shipShapeModel);
|
|
633
|
-
return r = r.map(([i, c]) => [i * l, c *
|
|
638
|
+
return r = r.map(([i, c]) => [i * l, c * o]), r;
|
|
634
639
|
}, getShipDirectPath = (e) => {
|
|
635
|
-
const { speed: t, hdg:
|
|
640
|
+
const { speed: t, hdg: n, cog: o } = e;
|
|
636
641
|
let l = "", r = null;
|
|
637
|
-
if (t && t > 1 && (
|
|
642
|
+
if (t && t > 1 && (n !== null && n != 511 && o !== null ? o - n >= 3 ? l = "left" : o - n <= -3 ? l = "right" : l = "front" : l = "front", l && t))
|
|
638
643
|
for (let i = 0; i < speedCondition.length; i++) {
|
|
639
644
|
const c = speedCondition[i];
|
|
640
645
|
if (t >= c[0] && t < c[1]) {
|
|
@@ -651,23 +656,23 @@ let shipsMarkerList = [], shipsVectorSource, largeAmountShipsSource;
|
|
|
651
656
|
const selectedShipData = ref(null), selectedShips = ref([]);
|
|
652
657
|
let selectShipsVectorSource;
|
|
653
658
|
const renderShips = (e) => {
|
|
654
|
-
var
|
|
659
|
+
var n, o, l, r;
|
|
655
660
|
if (!mapInstance$6.value || showTrackLayer.value) return;
|
|
656
661
|
const t = Math.round(Number(mapInstance$6.value.getView().getZoom()));
|
|
657
662
|
if (selectedShipData.value && nextTick(() => {
|
|
658
663
|
selectSingleShipMarker(selectedShipData.value);
|
|
659
664
|
}).then((i) => {
|
|
660
665
|
}), !(!t || t < mapZoom.shipGreenDotMax) && (allShips.value = [...e, ...selectedShips.value], !hiddenOrther.value))
|
|
661
|
-
return t >= mapZoom.shipGreenDotMax && t < mapZoom.shipModelMin ? ((
|
|
666
|
+
return t >= mapZoom.shipGreenDotMax && t < mapZoom.shipModelMin ? ((n = shipsLayer.value) == null || n.setVisible(!1), (o = largeAmountShipsLayer.value) == null || o.setVisible(!0), renderLargeAmountShips(allShips.value)) : ((l = largeAmountShipsLayer.value) == null || l.setVisible(!1), (r = shipsLayer.value) == null || r.setVisible(!0), renderShipsMarker(allShips.value));
|
|
662
667
|
}, renderLargeAmountShips = (e) => {
|
|
663
668
|
if (!mapInstance$6.value) return;
|
|
664
|
-
const t = e.map((
|
|
669
|
+
const t = e.map((n) => ({
|
|
665
670
|
type: "Feature",
|
|
666
671
|
geometry: {
|
|
667
672
|
type: "Point",
|
|
668
|
-
coordinates: [
|
|
673
|
+
coordinates: [n.lon, n.lat]
|
|
669
674
|
},
|
|
670
|
-
properties:
|
|
675
|
+
properties: n
|
|
671
676
|
}));
|
|
672
677
|
return largeAmountShipsSource == null || largeAmountShipsSource.clear(), largeAmountShipsSource = new VectorSource({
|
|
673
678
|
features: new GeoJSON().readFeatures({
|
|
@@ -708,36 +713,36 @@ const renderShips = (e) => {
|
|
|
708
713
|
}
|
|
709
714
|
}), mapInstance$6.value.addLayer(largeAmountShipsLayer.value), largeAmountShipsLayer.value;
|
|
710
715
|
}, renderShipsMarker = (e) => {
|
|
711
|
-
var
|
|
716
|
+
var n;
|
|
712
717
|
if (!mapInstance$6.value) return;
|
|
713
718
|
deleteAllShipMarkers();
|
|
714
719
|
let t = convertShipMapData(e);
|
|
715
720
|
if (t = customFilterShips(t), !!(t != null && t.length))
|
|
716
|
-
return t.forEach((
|
|
717
|
-
const r = [
|
|
721
|
+
return t.forEach((o, l) => {
|
|
722
|
+
const r = [o.lon, o.lat], i = new Feature({
|
|
718
723
|
geometry: new Point(fromLonLat(r))
|
|
719
724
|
}), c = 1;
|
|
720
|
-
i.set("clickGeometry", new Circle(fromLonLat(r), c)), i.set("data",
|
|
725
|
+
i.set("clickGeometry", new Circle(fromLonLat(r), c)), i.set("data", o), i.set("index", l), i.setStyle(
|
|
721
726
|
setShipStyle(!1)
|
|
722
727
|
), shipsMarkerList.push({
|
|
723
|
-
ship:
|
|
728
|
+
ship: o,
|
|
724
729
|
lonlat: r,
|
|
725
730
|
feature: i
|
|
726
731
|
});
|
|
727
732
|
}), shipsVectorSource = new VectorSource({
|
|
728
|
-
features: shipsMarkerList.map((
|
|
733
|
+
features: shipsMarkerList.map((o) => o.feature)
|
|
729
734
|
}), shipsLayer.value = new VectorLayer({
|
|
730
735
|
source: shipsVectorSource,
|
|
731
736
|
zIndex: 100
|
|
732
|
-
}), (
|
|
737
|
+
}), (n = mapInstance$6.value) == null || n.addLayer(shipsLayer.value), shipsLayer.value;
|
|
733
738
|
}, onShipsMarkerHover = () => {
|
|
734
|
-
var
|
|
739
|
+
var o;
|
|
735
740
|
let e = null, t = 0;
|
|
736
|
-
const
|
|
737
|
-
(
|
|
741
|
+
const n = 100;
|
|
742
|
+
(o = mapInstance$6.value) == null || o.on("pointermove", function(l) {
|
|
738
743
|
var s, m;
|
|
739
744
|
const r = Date.now();
|
|
740
|
-
if (r - t <
|
|
745
|
+
if (r - t < n)
|
|
741
746
|
return;
|
|
742
747
|
t = r;
|
|
743
748
|
const i = (s = mapInstance$6.value) == null ? void 0 : s.forEachFeatureAtPixel(l.pixel, (u) => u), c = (m = mapInstance$6.value) == null ? void 0 : m.getTargetElement();
|
|
@@ -761,10 +766,10 @@ const renderShips = (e) => {
|
|
|
761
766
|
});
|
|
762
767
|
}, customFilterShips = (e) => {
|
|
763
768
|
let t = cloneDeep(e);
|
|
764
|
-
return t = t.filter((
|
|
769
|
+
return t = t.filter((n) => {
|
|
765
770
|
var l;
|
|
766
|
-
const
|
|
767
|
-
return (switchBtnShow.value.camera || switchBtnShow.value.mobile || switchBtnShow.value.waterGauge) && ((l = selectedShipData.value) == null ? void 0 : l.id) ===
|
|
771
|
+
const o = getFilterItem(n).every(({ btnShow: r, value: i }) => r ? !!i : !0);
|
|
772
|
+
return (switchBtnShow.value.camera || switchBtnShow.value.mobile || switchBtnShow.value.waterGauge) && ((l = selectedShipData.value) == null ? void 0 : l.id) === n.id && clearSelectFeature(), o;
|
|
768
773
|
}), t;
|
|
769
774
|
}, getFilterItem = (e) => [
|
|
770
775
|
{ btnShow: switchBtnShow.value.camera, value: e == null ? void 0 : e.existDevice },
|
|
@@ -779,36 +784,36 @@ const renderShips = (e) => {
|
|
|
779
784
|
if (!mapInstance$6.value) return;
|
|
780
785
|
const t = cloneDeep(selectSingleShipData.value);
|
|
781
786
|
selectSingleShipData.value = convertShipMapData(e);
|
|
782
|
-
const
|
|
783
|
-
geometry: new Point(fromLonLat(
|
|
787
|
+
const n = [selectSingleShipData.value.lon, selectSingleShipData.value.lat], o = new Feature({
|
|
788
|
+
geometry: new Point(fromLonLat(n))
|
|
784
789
|
});
|
|
785
|
-
|
|
790
|
+
o.set("data", selectSingleShipData.value), o.setStyle(
|
|
786
791
|
setShipStyle(!0)
|
|
787
792
|
), shipsMarkerList.push({
|
|
788
793
|
ship: selectSingleShipData.value,
|
|
789
|
-
lonlat:
|
|
790
|
-
feature:
|
|
794
|
+
lonlat: n,
|
|
795
|
+
feature: o
|
|
791
796
|
}), selectShipsVectorSource == null || selectShipsVectorSource.clear(), selectShipsVectorSource = new VectorSource({
|
|
792
|
-
features: [
|
|
797
|
+
features: [o]
|
|
793
798
|
}), selectShipsLayer.value = new VectorLayer({
|
|
794
799
|
source: selectShipsVectorSource
|
|
795
800
|
}), shipsVectorSource && setVisibleFeatureById(shipsVectorSource, selectSingleShipData.value.id, !0);
|
|
796
801
|
const l = (r = shipsLayer.value) == null ? void 0 : r.getSource();
|
|
797
802
|
return l && (t && setVisibleFeatureById(l, t.id, !0), setVisibleFeatureById(l, selectSingleShipData.value.id, !1)), mapInstance$6.value.addLayer(selectShipsLayer.value), selectShipsLayer.value.setVisible(!0), selectShipsLayer.value;
|
|
798
|
-
}, setVisibleFeatureById = (e, t,
|
|
799
|
-
e && e.forEachFeature((
|
|
800
|
-
const l =
|
|
801
|
-
l && l.id === t &&
|
|
803
|
+
}, setVisibleFeatureById = (e, t, n) => {
|
|
804
|
+
e && e.forEachFeature((o) => {
|
|
805
|
+
const l = o.get("data");
|
|
806
|
+
l && l.id === t && o.setStyle(n ? setShipStyle(!1, l.id) : setBlankStyle());
|
|
802
807
|
});
|
|
803
|
-
}, findShip = (e, t,
|
|
808
|
+
}, findShip = (e, t, n = !0) => {
|
|
804
809
|
var l, r, i, c, s;
|
|
805
810
|
if (!e || !mapInstance$6.value) return;
|
|
806
|
-
const
|
|
811
|
+
const o = (i = (r = (l = shipsLayer.value) == null ? void 0 : l.getSource()) == null ? void 0 : r.getFeatures()) == null ? void 0 : i.find((m) => {
|
|
807
812
|
var u;
|
|
808
813
|
return ((u = m.get("data")) == null ? void 0 : u.id) === e;
|
|
809
814
|
});
|
|
810
|
-
if (
|
|
811
|
-
selectedShipData.value =
|
|
815
|
+
if (o)
|
|
816
|
+
selectedShipData.value = o.get("data");
|
|
812
817
|
else if (t)
|
|
813
818
|
selectedShipData.value = t;
|
|
814
819
|
else {
|
|
@@ -818,7 +823,7 @@ const renderShips = (e) => {
|
|
|
818
823
|
if (selectedShips.value.some((m) => {
|
|
819
824
|
var u;
|
|
820
825
|
return m.id === ((u = selectedShipData.value) == null ? void 0 : u.id);
|
|
821
|
-
}) || selectedShips.value.push(selectedShipData.value),
|
|
826
|
+
}) || selectedShips.value.push(selectedShipData.value), n && ((c = selectedShipData.value) != null && c.lon) && ((s = selectedShipData.value) != null && s.lat)) {
|
|
822
827
|
const m = mapInstance$6.value.getView(), u = new Point([selectedShipData.value.lon, selectedShipData.value.lat]);
|
|
823
828
|
m.setCenter(transform(u.getCoordinates(), projection.data, projection.mercator));
|
|
824
829
|
const d = m.getZoom(), f = d < mapZoom.findShipMin ? mapZoom.findShip : d;
|
|
@@ -826,7 +831,7 @@ const renderShips = (e) => {
|
|
|
826
831
|
}
|
|
827
832
|
return setTimeout(() => {
|
|
828
833
|
t && selectSingleShipMarker(t);
|
|
829
|
-
}, 50),
|
|
834
|
+
}, 50), o;
|
|
830
835
|
}, clearSelectFeature = () => {
|
|
831
836
|
var e;
|
|
832
837
|
if (selectedShipData.value && shipsVectorSource && selectSingleShipData.value) {
|
|
@@ -851,99 +856,99 @@ const renderShips = (e) => {
|
|
|
851
856
|
switchBtnShow.value[e] = t, renderShips(allShips.value);
|
|
852
857
|
}, rerenderShip = () => {
|
|
853
858
|
renderShips(allShips.value);
|
|
854
|
-
}, labelAlpha = 0.8, pixelRatio = window.devicePixelRatio || 1, labelFont = `500 ${12 * pixelRatio}px Arial`, labelOutSize = 2 * pixelRatio, labelHeight = 10 * pixelRatio, fillRectRadius = (e, t,
|
|
855
|
-
e.beginPath(), e.moveTo(t + i,
|
|
859
|
+
}, labelAlpha = 0.8, pixelRatio = window.devicePixelRatio || 1, labelFont = `500 ${12 * pixelRatio}px Arial`, labelOutSize = 2 * pixelRatio, labelHeight = 10 * pixelRatio, fillRectRadius = (e, t, n, o, l, r, i = 4) => {
|
|
860
|
+
e.beginPath(), e.moveTo(t + i, n), e.arcTo(t + o, n, t + o, n + i, i), e.arcTo(t + o, n + l, t + o - i, n + l, i), e.arcTo(t, n + l, t, n + l - i, i), e.arcTo(t, n, t + i, n, i), e.closePath(), e.fillStyle = r, e.fill();
|
|
856
861
|
}, getPixelFromCoordinate = (e) => {
|
|
857
862
|
if (!e || e.length === 0)
|
|
858
863
|
throw new Error("Points array is empty or invalid.");
|
|
859
|
-
let t = 1 / 0,
|
|
864
|
+
let t = 1 / 0, n = 1 / 0, o = -1 / 0, l = -1 / 0;
|
|
860
865
|
for (const [r, i] of e)
|
|
861
|
-
r < t && (t = r), i <
|
|
862
|
-
return [t,
|
|
866
|
+
r < t && (t = r), i < n && (n = i), r > o && (o = r), i > l && (l = i);
|
|
867
|
+
return [t, n, o, l];
|
|
863
868
|
}, calculatePolygonCentroid = (e) => {
|
|
864
869
|
if (!Array.isArray(e) || e.length < 3)
|
|
865
870
|
throw new Error("A polygon must have at least 3 coordinates.");
|
|
866
|
-
let t = 0,
|
|
871
|
+
let t = 0, n = 0, o = 0;
|
|
867
872
|
const l = e.length;
|
|
868
873
|
for (let c = 0; c < l - 1; c++) {
|
|
869
874
|
const [s, m] = e[c], [u, d] = e[c + 1], f = s * d - u * m;
|
|
870
|
-
|
|
875
|
+
o += f, t += (s + u) * f, n += (m + d) * f;
|
|
871
876
|
}
|
|
872
|
-
if (
|
|
877
|
+
if (o *= 0.5, o === 0)
|
|
873
878
|
throw new Error("多边形面积为零");
|
|
874
|
-
const r = t / (6 *
|
|
879
|
+
const r = t / (6 * o), i = n / (6 * o);
|
|
875
880
|
return [r, i];
|
|
876
881
|
}, rotateShapeModel = (e, t) => {
|
|
877
|
-
const [
|
|
882
|
+
const [n, o] = calculatePolygonCentroid(e), l = t * Math.PI / 180, r = Math.cos(l), i = Math.sin(l);
|
|
878
883
|
return e.map(([c, s]) => {
|
|
879
|
-
const m = c -
|
|
884
|
+
const m = c - n, u = s - o, d = m * r - u * i + n, f = m * i + u * r + o;
|
|
880
885
|
return [d, f];
|
|
881
886
|
});
|
|
882
887
|
}, getTopLeftPoint = (e) => [e[0], e[3]], getBottomLeftPoint = (e) => [e[2], e[3]], getBottomRightPoint = (e) => [e[2], e[1]], getTopRighttPoint = (e) => [e[0], e[1]];
|
|
883
|
-
function calculateBounds(e, t,
|
|
888
|
+
function calculateBounds(e, t, n, o, l) {
|
|
884
889
|
let r, i, c, s;
|
|
885
890
|
const m = e[0], u = e[1];
|
|
886
891
|
switch (t) {
|
|
887
892
|
case 0:
|
|
888
|
-
r = m + l, i = r +
|
|
893
|
+
r = m + l, i = r + n, s = u - l, c = s - o;
|
|
889
894
|
break;
|
|
890
895
|
case 1:
|
|
891
|
-
r = m + l, i = r +
|
|
896
|
+
r = m + l, i = r + n, s = u + o / 2, c = s - o;
|
|
892
897
|
break;
|
|
893
898
|
case 2:
|
|
894
|
-
r = m + l, i = r +
|
|
899
|
+
r = m + l, i = r + n, s = u + l + o, c = s - o;
|
|
895
900
|
break;
|
|
896
901
|
case 3:
|
|
897
|
-
r = m -
|
|
902
|
+
r = m - n / 2, i = r + n, s = u + l + o, c = s - o;
|
|
898
903
|
break;
|
|
899
904
|
case 4:
|
|
900
|
-
i = m, r = i -
|
|
905
|
+
i = m, r = i - n, s = u + l + o, c = s - o;
|
|
901
906
|
break;
|
|
902
907
|
case 5:
|
|
903
|
-
i = m - l, r = i -
|
|
908
|
+
i = m - l, r = i - n, s = u + o / 2, c = s - o;
|
|
904
909
|
break;
|
|
905
910
|
case 6:
|
|
906
|
-
i = m, r = i -
|
|
911
|
+
i = m, r = i - n, s = u - l, c = s - o;
|
|
907
912
|
break;
|
|
908
913
|
case 7:
|
|
909
|
-
r = m -
|
|
914
|
+
r = m - n / 2, i = r + n, s = u - l, c = s - o;
|
|
910
915
|
}
|
|
911
916
|
if (!(!r || !c || !i || !s))
|
|
912
917
|
return [Math.min(r, i), Math.min(c, s), Math.max(r, i), Math.max(c, s) + 1];
|
|
913
918
|
}
|
|
914
|
-
function calculateAnchorPoint(e, t,
|
|
919
|
+
function calculateAnchorPoint(e, t, n = 70, o = 20, l = 20) {
|
|
915
920
|
const r = [0, 0];
|
|
916
921
|
switch (t) {
|
|
917
922
|
case 0:
|
|
918
|
-
r[0] = e[0] + l, r[1] = e[1] - l -
|
|
923
|
+
r[0] = e[0] + l, r[1] = e[1] - l - o / 2;
|
|
919
924
|
break;
|
|
920
925
|
case 1:
|
|
921
926
|
r[0] = e[0] + l, r[1] = e[1];
|
|
922
927
|
break;
|
|
923
928
|
case 2:
|
|
924
|
-
r[0] = e[0] + l, r[1] = e[1] + l +
|
|
929
|
+
r[0] = e[0] + l, r[1] = e[1] + l + o / 2;
|
|
925
930
|
break;
|
|
926
931
|
case 3:
|
|
927
|
-
r[0] = e[0], r[1] = e[1] + l +
|
|
932
|
+
r[0] = e[0], r[1] = e[1] + l + o / 4;
|
|
928
933
|
break;
|
|
929
934
|
case 4:
|
|
930
|
-
r[0] = Math.max(e[0] - l, e[0] -
|
|
935
|
+
r[0] = Math.max(e[0] - l, e[0] - n / 2), r[1] = e[1] + l + o / 4;
|
|
931
936
|
break;
|
|
932
937
|
case 5:
|
|
933
938
|
r[0] = e[0] - l, r[1] = e[1];
|
|
934
939
|
break;
|
|
935
940
|
case 6:
|
|
936
|
-
r[0] = Math.max(e[0] - l, e[0] -
|
|
941
|
+
r[0] = Math.max(e[0] - l, e[0] - n / 2), r[1] = e[1] - l - o / 4;
|
|
937
942
|
break;
|
|
938
943
|
case 7:
|
|
939
|
-
r[0] = e[0], r[1] = e[1] - l -
|
|
944
|
+
r[0] = e[0], r[1] = e[1] - l - o / 4;
|
|
940
945
|
}
|
|
941
946
|
return r;
|
|
942
947
|
}
|
|
943
|
-
function drawLabelBody(e, t,
|
|
948
|
+
function drawLabelBody(e, t, n) {
|
|
944
949
|
if (!e) return;
|
|
945
950
|
const {
|
|
946
|
-
font:
|
|
951
|
+
font: o,
|
|
947
952
|
labelOutSize: l = 2,
|
|
948
953
|
labelHeight: r,
|
|
949
954
|
center: i,
|
|
@@ -952,28 +957,28 @@ function drawLabelBody(e, t, o) {
|
|
|
952
957
|
shipColor: m,
|
|
953
958
|
lineLength: u = 20,
|
|
954
959
|
selected: d
|
|
955
|
-
} =
|
|
956
|
-
e.save(),
|
|
960
|
+
} = n;
|
|
961
|
+
e.save(), o && (e.font = o);
|
|
957
962
|
let f = e.measureText(c).width + 4 * l;
|
|
958
963
|
(s || m) && (f += r + 6 * l), e.restore();
|
|
959
964
|
let p, y = 20, h = -1, g = r + 3 * l;
|
|
960
965
|
if (u)
|
|
961
966
|
for (let k = 0; k < 8; k++) {
|
|
962
967
|
p = calculateBounds(i, k, f, g, u);
|
|
963
|
-
let
|
|
964
|
-
for (let
|
|
965
|
-
let x = t[
|
|
968
|
+
let T = !1;
|
|
969
|
+
for (let I = 0; I < t.length; ++I) {
|
|
970
|
+
let x = t[I].bounds, F = [
|
|
966
971
|
x[0] - y,
|
|
967
972
|
x[1] - y,
|
|
968
973
|
x[2] + y,
|
|
969
974
|
x[3] + y
|
|
970
975
|
];
|
|
971
976
|
if (p && isOverlapping(p, F)) {
|
|
972
|
-
|
|
977
|
+
T = !0;
|
|
973
978
|
break;
|
|
974
979
|
}
|
|
975
980
|
}
|
|
976
|
-
if (!
|
|
981
|
+
if (!T) {
|
|
977
982
|
h = k;
|
|
978
983
|
break;
|
|
979
984
|
}
|
|
@@ -981,11 +986,11 @@ function drawLabelBody(e, t, o) {
|
|
|
981
986
|
else
|
|
982
987
|
h = 0, p = calculateBounds(i, h, f, g, u);
|
|
983
988
|
if (d && h === -1 && (h = 0), p && h > -1) {
|
|
984
|
-
let k = getBottomLeftPoint(p),
|
|
989
|
+
let k = getBottomLeftPoint(p), T = getTopRighttPoint(p);
|
|
985
990
|
return {
|
|
986
991
|
center: i,
|
|
987
992
|
x: calculateAnchorPoint(i, h, f, g, u),
|
|
988
|
-
l:
|
|
993
|
+
l: T,
|
|
989
994
|
r: k,
|
|
990
995
|
bounds: p,
|
|
991
996
|
position: h,
|
|
@@ -996,9 +1001,9 @@ function drawLabelBody(e, t, o) {
|
|
|
996
1001
|
}
|
|
997
1002
|
const drawText = (e, t) => {
|
|
998
1003
|
if (!e) return;
|
|
999
|
-
const { center:
|
|
1004
|
+
const { center: n, text: o, textColor: l, leftIcon: r, rightIcons: i, font: c } = t;
|
|
1000
1005
|
e.save(), e.setTransform(1, 0, 0, 1, 0, 0);
|
|
1001
|
-
let [s, m] =
|
|
1006
|
+
let [s, m] = n;
|
|
1002
1007
|
if (r) {
|
|
1003
1008
|
e.font = `${18 * pixelRatio}px map-iconfont`;
|
|
1004
1009
|
let u = getIconFont(r.icon);
|
|
@@ -1006,17 +1011,17 @@ const drawText = (e, t) => {
|
|
|
1006
1011
|
}
|
|
1007
1012
|
if (i != null && i.length) {
|
|
1008
1013
|
e.font = `${12 * pixelRatio}px map-iconfont`, e.fillStyle = "#3370ff";
|
|
1009
|
-
const u = e.measureText(
|
|
1014
|
+
const u = e.measureText(o).width + 6 * pixelRatio;
|
|
1010
1015
|
i.forEach((d, f) => {
|
|
1011
1016
|
const p = getIconFont(d), y = 20 * pixelRatio * f;
|
|
1012
1017
|
e.fillText(p, s + u + y, m);
|
|
1013
1018
|
});
|
|
1014
1019
|
}
|
|
1015
|
-
e.font = c || labelFont, e.fillStyle = l, e.fillText(
|
|
1020
|
+
e.font = c || labelFont, e.fillStyle = l, e.fillText(o, s + 2, m), e.restore();
|
|
1016
1021
|
}, drawPolygon = (e, t) => {
|
|
1017
1022
|
let {
|
|
1018
|
-
points:
|
|
1019
|
-
strokeColor:
|
|
1023
|
+
points: n,
|
|
1024
|
+
strokeColor: o,
|
|
1020
1025
|
fillColor: l,
|
|
1021
1026
|
shouldClosePath: r,
|
|
1022
1027
|
translation: i,
|
|
@@ -1025,31 +1030,31 @@ const drawText = (e, t) => {
|
|
|
1025
1030
|
scale: m,
|
|
1026
1031
|
globalAlpha: u
|
|
1027
1032
|
} = t;
|
|
1028
|
-
if (u || (u = 1),
|
|
1029
|
-
e.save(), e.beginPath(), c && c !== 0 && s == null && e.rotate(c), i && e.translate(i[0], i[1]), c && (s != null && s.length) && e.rotate(c), m && e.scale(m, m), e.moveTo(
|
|
1030
|
-
for (let d = 1; d <
|
|
1031
|
-
e.lineTo(
|
|
1032
|
-
r && e.closePath(),
|
|
1033
|
+
if (u || (u = 1), n && e) {
|
|
1034
|
+
e.save(), e.beginPath(), c && c !== 0 && s == null && e.rotate(c), i && e.translate(i[0], i[1]), c && (s != null && s.length) && e.rotate(c), m && e.scale(m, m), e.moveTo(n[0][0], n[0][1]);
|
|
1035
|
+
for (let d = 1; d < n.length; d++)
|
|
1036
|
+
e.lineTo(n[d][0], n[d][1]);
|
|
1037
|
+
r && e.closePath(), o && (e.strokeStyle = o, e.stroke()), l && r && (u && (e.globalAlpha = u), e.fillStyle = l, e.fill()), e.restore();
|
|
1033
1038
|
}
|
|
1034
|
-
}, intervalIds = {}, drawLabel = (e, t,
|
|
1039
|
+
}, intervalIds = {}, drawLabel = (e, t, n) => {
|
|
1035
1040
|
var d, f, p, y, h, g, k;
|
|
1036
|
-
let { center:
|
|
1037
|
-
if (
|
|
1038
|
-
const
|
|
1041
|
+
let { center: o, text: l, color: r, textColor: i, bgColor: c, leftIcon: s, rightIcons: m, type: u } = t;
|
|
1042
|
+
if (o && l) {
|
|
1043
|
+
const T = {
|
|
1039
1044
|
font: labelFont,
|
|
1040
1045
|
labelOutSize,
|
|
1041
1046
|
labelHeight,
|
|
1042
|
-
center:
|
|
1047
|
+
center: o,
|
|
1043
1048
|
text: l,
|
|
1044
1049
|
leftIcon: s,
|
|
1045
1050
|
selected: t.selected
|
|
1046
1051
|
};
|
|
1047
1052
|
(d = t.blinkColors) != null && d.length && t.fill && (c = t.fill, i = getForegroundColor(t.fill));
|
|
1048
|
-
const
|
|
1049
|
-
if (
|
|
1050
|
-
const { x, bounds: F, l: P } =
|
|
1051
|
-
|
|
1052
|
-
points: [
|
|
1053
|
+
const I = drawLabelBody(e, n, T);
|
|
1054
|
+
if (I) {
|
|
1055
|
+
const { x, bounds: F, l: P } = I, v = [getTopLeftPoint(F), getBottomLeftPoint(F), getBottomRightPoint(F), getTopRighttPoint(F)];
|
|
1056
|
+
n.find((E) => E.name === l) || n.push(I), drawPolygon(e, {
|
|
1057
|
+
points: [o, x],
|
|
1053
1058
|
strokeColor: r,
|
|
1054
1059
|
fillColor: "#000",
|
|
1055
1060
|
shouldClosePath: !0,
|
|
@@ -1058,7 +1063,7 @@ const drawText = (e, t) => {
|
|
|
1058
1063
|
rotationCenter: void 0,
|
|
1059
1064
|
scale: void 0,
|
|
1060
1065
|
globalAlpha: labelAlpha
|
|
1061
|
-
}), m != null && m.length && m.forEach((
|
|
1066
|
+
}), m != null && m.length && m.forEach((E, V) => {
|
|
1062
1067
|
v[1][0] += 34 + V * 2, v[2][0] += 34 + V * 2;
|
|
1063
1068
|
});
|
|
1064
1069
|
const w = {
|
|
@@ -1066,16 +1071,16 @@ const drawText = (e, t) => {
|
|
|
1066
1071
|
strokeColor: r,
|
|
1067
1072
|
fillColor: c,
|
|
1068
1073
|
shouldClosePath: !0
|
|
1069
|
-
}, [S,
|
|
1070
|
-
center: [S,
|
|
1074
|
+
}, [S, M] = P, C = {
|
|
1075
|
+
center: [S, M + labelOutSize + labelHeight + 1],
|
|
1071
1076
|
text: l,
|
|
1072
1077
|
textColor: i,
|
|
1073
1078
|
leftIcon: s,
|
|
1074
1079
|
rightIcons: m,
|
|
1075
1080
|
blinkColors: t.blinkColors
|
|
1076
1081
|
};
|
|
1077
|
-
if (drawPolygon(e, w), drawText(e,
|
|
1078
|
-
let
|
|
1082
|
+
if (drawPolygon(e, w), drawText(e, C), t != null && t.blinkColors && t.blinkColors.length > 0) {
|
|
1083
|
+
let E = Date.now(), V = 0;
|
|
1079
1084
|
const N = t.blinkColors;
|
|
1080
1085
|
!!!((y = (p = (f = selectShipsLayer.value) == null ? void 0 : f.getSource()) == null ? void 0 : p.getFeatures()) != null && y.find(($) => {
|
|
1081
1086
|
var R;
|
|
@@ -1083,10 +1088,10 @@ const drawText = (e, t) => {
|
|
|
1083
1088
|
}) || (k = (g = (h = shipsLayer.value) == null ? void 0 : h.getSource()) == null ? void 0 : g.getFeatures()) != null && k.find(($) => {
|
|
1084
1089
|
var R;
|
|
1085
1090
|
return ((R = $.get("data")) == null ? void 0 : R.id) === t.id;
|
|
1086
|
-
})) || hiddenOrther.value ? (clearInterval(intervalIds[t.id]), deleteLabelFromArray(
|
|
1091
|
+
})) || hiddenOrther.value ? (clearInterval(intervalIds[t.id]), deleteLabelFromArray(n, l)) : (intervalIds[t.id] && clearInterval(intervalIds[t.id]), intervalIds[t.id] = window.setInterval(() => {
|
|
1087
1092
|
var D, G, _;
|
|
1088
1093
|
const $ = Date.now();
|
|
1089
|
-
$ -
|
|
1094
|
+
$ - E >= 500 && (V = (V + 1) % N.length, E = $, w.fillColor = N[V], drawPolygon(e, w), C.textColor = getForegroundColor(w.fillColor), drawText(e, C));
|
|
1090
1095
|
const R = shipsMarkerList == null ? void 0 : shipsMarkerList.some((O) => {
|
|
1091
1096
|
var B;
|
|
1092
1097
|
return ((B = O.ship) == null ? void 0 : B.id) === t.id;
|
|
@@ -1094,10 +1099,10 @@ const drawText = (e, t) => {
|
|
|
1094
1099
|
const B = O.get("data");
|
|
1095
1100
|
return (B == null ? void 0 : B.id) === t.id;
|
|
1096
1101
|
});
|
|
1097
|
-
!R && !Z && (clearInterval(intervalIds[t.id]), deleteLabelFromArray(
|
|
1102
|
+
!R && !Z && (clearInterval(intervalIds[t.id]), deleteLabelFromArray(n, l));
|
|
1098
1103
|
}, 10));
|
|
1099
1104
|
} else
|
|
1100
|
-
shipLabels.value.find((V) => V.name === l) && (clearInterval(intervalIds[t.id]), drawPolygon(e, w), drawText(e,
|
|
1105
|
+
shipLabels.value.find((V) => V.name === l) && (clearInterval(intervalIds[t.id]), drawPolygon(e, w), drawText(e, C));
|
|
1101
1106
|
}
|
|
1102
1107
|
}
|
|
1103
1108
|
return null;
|
|
@@ -1106,41 +1111,41 @@ const drawText = (e, t) => {
|
|
|
1106
1111
|
clearInterval(e);
|
|
1107
1112
|
});
|
|
1108
1113
|
}, deleteLabelFromArray = (e, t) => {
|
|
1109
|
-
const
|
|
1110
|
-
|
|
1114
|
+
const n = e.findIndex((o) => o.name === t);
|
|
1115
|
+
n !== -1 && e.splice(n, 1);
|
|
1111
1116
|
}, PI = Math.PI, a = 6378245, ee = 0.006693421622965943;
|
|
1112
1117
|
function transformLat(e, t) {
|
|
1113
|
-
let
|
|
1114
|
-
return
|
|
1118
|
+
let n = -100 + 2 * e + 3 * t + 0.2 * t * t + 0.1 * e * t + 0.2 * Math.sqrt(Math.abs(e));
|
|
1119
|
+
return n += (20 * Math.sin(6 * e * PI) + 20 * Math.sin(2 * e * PI)) * 2 / 3, n += (20 * Math.sin(t * PI) + 40 * Math.sin(t / 3 * PI)) * 2 / 3, n += (160 * Math.sin(t / 12 * PI) + 320 * Math.sin(t * PI / 30)) * 2 / 3, n;
|
|
1115
1120
|
}
|
|
1116
1121
|
function transformLng(e, t) {
|
|
1117
|
-
let
|
|
1118
|
-
return
|
|
1122
|
+
let n = 300 + e + 2 * t + 0.1 * e * e + 0.1 * e * t + 0.1 * Math.sqrt(Math.abs(e));
|
|
1123
|
+
return n += (20 * Math.sin(6 * e * PI) + 20 * Math.sin(2 * e * PI)) * 2 / 3, n += (20 * Math.sin(e * PI) + 40 * Math.sin(e / 3 * PI)) * 2 / 3, n += (150 * Math.sin(e / 12 * PI) + 300 * Math.sin(e / 30 * PI)) * 2 / 3, n;
|
|
1119
1124
|
}
|
|
1120
1125
|
function outOfChina(e, t) {
|
|
1121
1126
|
return !(e > 73.66 && e < 135.05 && t > 3.86 && t < 53.55);
|
|
1122
1127
|
}
|
|
1123
1128
|
function gcj02ToWgs84(e) {
|
|
1124
|
-
const [t,
|
|
1125
|
-
if (outOfChina(t,
|
|
1126
|
-
return `${t.toFixed(6)}, ${
|
|
1129
|
+
const [t, n] = e.split(",").map(Number);
|
|
1130
|
+
if (outOfChina(t, n))
|
|
1131
|
+
return `${t.toFixed(6)}, ${n.toFixed(6)}`;
|
|
1127
1132
|
{
|
|
1128
|
-
let
|
|
1129
|
-
const r =
|
|
1133
|
+
let o = transformLat(t - 105, n - 35), l = transformLng(t - 105, n - 35);
|
|
1134
|
+
const r = n / 180 * PI;
|
|
1130
1135
|
let i = Math.sin(r);
|
|
1131
1136
|
i = 1 - ee * i * i;
|
|
1132
1137
|
const c = Math.sqrt(i);
|
|
1133
|
-
|
|
1134
|
-
const s =
|
|
1135
|
-
return `${(t * 2 - m).toFixed(6)}, ${(
|
|
1138
|
+
o = o * 180 / (a * (1 - ee) / (i * c) * PI), l = l * 180 / (a / c * Math.cos(r) * PI);
|
|
1139
|
+
const s = n + o, m = t + l;
|
|
1140
|
+
return `${(t * 2 - m).toFixed(6)}, ${(n * 2 - s).toFixed(6)}`;
|
|
1136
1141
|
}
|
|
1137
1142
|
}
|
|
1138
1143
|
function calculateCirclePoints(e, t) {
|
|
1139
|
-
const
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
+
const n = fromLonLat(e), o = t * 1e3, l = [
|
|
1145
|
+
n[0] - o,
|
|
1146
|
+
n[1] - o,
|
|
1147
|
+
n[0] + o,
|
|
1148
|
+
n[1] + o
|
|
1144
1149
|
], r = transformExtent(l, projection.mercator, projection.data);
|
|
1145
1150
|
return {
|
|
1146
1151
|
leftTopPoint: { lng: r[0], lat: r[3] },
|
|
@@ -1152,21 +1157,21 @@ function calculateCirclePoints(e, t) {
|
|
|
1152
1157
|
const equatorialCircumference = 2003750834e-2;
|
|
1153
1158
|
function lonLatToMercator(e) {
|
|
1154
1159
|
const t = e[0] * equatorialCircumference / 180;
|
|
1155
|
-
let
|
|
1156
|
-
return
|
|
1160
|
+
let n = Math.log(Math.tan((90 + e[1]) * Math.PI / 360)) / (Math.PI / 180);
|
|
1161
|
+
return n = n * equatorialCircumference / 180, [t, n];
|
|
1157
1162
|
}
|
|
1158
1163
|
function mercatorToLonLat(e, t = "lonlat") {
|
|
1159
|
-
const
|
|
1164
|
+
const n = { lon: 0, lat: 0 }, o = e[0] / equatorialCircumference * 180;
|
|
1160
1165
|
let l = e[1] / equatorialCircumference * 180;
|
|
1161
|
-
return l = 180 / Math.PI * (2 * Math.atan(Math.exp(l * Math.PI / 180)) - Math.PI / 2),
|
|
1166
|
+
return l = 180 / Math.PI * (2 * Math.atan(Math.exp(l * Math.PI / 180)) - Math.PI / 2), n.lon = o, n.lat = l, t === "lonlat" ? n : [o, l];
|
|
1162
1167
|
}
|
|
1163
1168
|
function calculateBoundingBox(e) {
|
|
1164
|
-
let t = 1 / 0,
|
|
1169
|
+
let t = 1 / 0, n = -1 / 0, o = 1 / 0, l = -1 / 0;
|
|
1165
1170
|
e.forEach((h) => {
|
|
1166
1171
|
const [g, k] = h;
|
|
1167
|
-
t = Math.min(t, k),
|
|
1172
|
+
t = Math.min(t, k), n = Math.max(n, k), o = Math.min(o, g), l = Math.max(l, g);
|
|
1168
1173
|
});
|
|
1169
|
-
const r = l -
|
|
1174
|
+
const r = l - o, i = n - t, c = Math.max(r, i), s = (o + l) / 2, m = (t + n) / 2, u = c / 2, d = s - u, f = s + u, p = m - u, y = m + u;
|
|
1170
1175
|
return [f, p, d, y];
|
|
1171
1176
|
}
|
|
1172
1177
|
const transformUtils = {
|
|
@@ -1177,51 +1182,51 @@ const transformUtils = {
|
|
|
1177
1182
|
calculateBoundingBox
|
|
1178
1183
|
}, mapInstance$5 = ref(), renderTrackStyleSetInstance = (e) => mapInstance$5.value = e, stopIcon = "", stopColor = "#E31818", slowIcon = "", slowColor = "#1890FF", dropletsIcon = "", trackList$1 = ref([]);
|
|
1179
1184
|
let animationFeature;
|
|
1180
|
-
const renderTrackLine = (e, t,
|
|
1185
|
+
const renderTrackLine = (e, t, n) => {
|
|
1181
1186
|
var r, i, c;
|
|
1182
|
-
const
|
|
1183
|
-
if (!
|
|
1184
|
-
allTracks.value[t] =
|
|
1187
|
+
const o = e[t];
|
|
1188
|
+
if (!o) return;
|
|
1189
|
+
allTracks.value[t] = o, trackList$1.value = [], trackList$1.value = o.map((s, m) => (s.center = [s.lon, s.lat], s.centerPoint = transformUtils.lonLatToMercator(s.center), s.id = t, s.index = m, s.time = hooks(s.createdAt).format("YYYY-MM-DD HH:mm:ss"), s));
|
|
1185
1190
|
const l = trackList$1.value.map((s) => s.centerPoint);
|
|
1186
1191
|
if (l.length >= 2) {
|
|
1187
1192
|
const s = new LineString(l), m = new Feature({ geometry: s });
|
|
1188
1193
|
m.setStyle(
|
|
1189
1194
|
new Style({
|
|
1190
1195
|
stroke: new Stroke({
|
|
1191
|
-
color:
|
|
1196
|
+
color: n,
|
|
1192
1197
|
width: 2
|
|
1193
1198
|
})
|
|
1194
1199
|
})
|
|
1195
1200
|
), m.setId(t), m.set("type", "line"), (i = (r = shipTrackVectorLayer.value) == null ? void 0 : r.getSource()) == null || i.clear(), shipTrackLineFeatures.value = [];
|
|
1196
1201
|
const u = shipTrackLineFeatures.value.findIndex((f) => f.getId() === t);
|
|
1197
1202
|
u >= 0 ? shipTrackLineFeatures.value[u] = m : shipTrackLineFeatures.value.push(m);
|
|
1198
|
-
const d = createAnimatedIconFeature(
|
|
1203
|
+
const d = createAnimatedIconFeature(n, l);
|
|
1199
1204
|
trackLineVectorSource.value = new VectorSource({
|
|
1200
1205
|
features: [...shipTrackLineFeatures.value]
|
|
1201
1206
|
}), animationFeature = d, console.log(animationFeature), shipTrackVectorLayer.value = new VectorLayer({
|
|
1202
1207
|
source: trackLineVectorSource.value,
|
|
1203
1208
|
zIndex: 102
|
|
1204
|
-
}), renderPoint(
|
|
1209
|
+
}), renderPoint(n), (c = mapInstance$5.value) == null || c.addLayer(shipTrackVectorLayer.value);
|
|
1205
1210
|
}
|
|
1206
1211
|
}, handlePlay = (e, t) => {
|
|
1207
|
-
const
|
|
1208
|
-
playAnimation(
|
|
1212
|
+
const n = allTracks.value[String(e)];
|
|
1213
|
+
playAnimation(n.map((o) => [o.lon, o.lat]), t);
|
|
1209
1214
|
}, removeShipTrackLineFeatureByIndex = (e, t) => {
|
|
1210
1215
|
e >= 0 && e < shipTrackLineFeatures.value.length && (shipTrackLineFeatures.value.splice(e, 1), delete allTracks.value[t]), trackLineVectorSource.value = new VectorSource({
|
|
1211
1216
|
features: [...shipTrackLineFeatures.value]
|
|
1212
1217
|
}), shipTrackVectorLayer.value && shipTrackVectorLayer.value.setSource(trackLineVectorSource.value);
|
|
1213
1218
|
}, createAnimatedIconFeature = (e, t) => {
|
|
1214
|
-
const
|
|
1219
|
+
const n = new Feature({
|
|
1215
1220
|
geometry: new Point(fromLonLat([t[0][0], t[0][1]]))
|
|
1216
1221
|
// 初始位置
|
|
1217
|
-
}),
|
|
1222
|
+
}), o = new Style({
|
|
1218
1223
|
text: new Text({
|
|
1219
1224
|
font: "700 14px map-iconfont",
|
|
1220
1225
|
text: getIconFont(""),
|
|
1221
1226
|
fill: new Fill({ color: e })
|
|
1222
1227
|
})
|
|
1223
1228
|
});
|
|
1224
|
-
return
|
|
1229
|
+
return n.setStyle(o), n;
|
|
1225
1230
|
}, geoMarkerStyle = new Style({
|
|
1226
1231
|
text: new Text({
|
|
1227
1232
|
font: "700 20px map-iconfont",
|
|
@@ -1236,8 +1241,8 @@ const trackAnimating = ref(!1);
|
|
|
1236
1241
|
let distance = 0, lastTime = Date.now(), moveFeatureHandler = null;
|
|
1237
1242
|
const moveFeature = (e, t) => {
|
|
1238
1243
|
var d, f, p;
|
|
1239
|
-
const
|
|
1240
|
-
if (distance = (distance +
|
|
1244
|
+
const n = Number(50 * t), o = ((d = e.frameState) == null ? void 0 : d.time) ?? Date.now(), l = o - lastTime;
|
|
1245
|
+
if (distance = (distance + n * l / 1e6) % 2, lastTime = o, distance >= 1) {
|
|
1241
1246
|
stopAnimation();
|
|
1242
1247
|
return;
|
|
1243
1248
|
}
|
|
@@ -1261,7 +1266,7 @@ const moveFeature = (e, t) => {
|
|
|
1261
1266
|
var e;
|
|
1262
1267
|
trackAnimating.value && (trackAnimating.value = !1, geoMarker == null || geoMarker.setGeometry(void 0), moveFeatureHandler && vectorLayer && vectorLayer.un("postrender", moveFeatureHandler), vectorLayer && ((e = mapInstance$5.value) == null || e.removeLayer(vectorLayer)), vectorLayer = null, geoMarker = null);
|
|
1263
1268
|
}, playAnimation = (e, t) => {
|
|
1264
|
-
var
|
|
1269
|
+
var o;
|
|
1265
1270
|
trackAnimating.value && stopAnimation(), polyline = new Polyline({
|
|
1266
1271
|
factor: 1e6
|
|
1267
1272
|
}).writeGeometry(new LineString(e)), linePath = new Polyline({
|
|
@@ -1273,8 +1278,8 @@ const moveFeature = (e, t) => {
|
|
|
1273
1278
|
type: "icon",
|
|
1274
1279
|
geometry: new Point(linePath.getFirstCoordinate())
|
|
1275
1280
|
});
|
|
1276
|
-
const
|
|
1277
|
-
position =
|
|
1281
|
+
const n = startMarker.getGeometry();
|
|
1282
|
+
position = n ? n.clone() : new Point([0, 0]), geoMarker = new Feature({
|
|
1278
1283
|
type: "geoMarker",
|
|
1279
1284
|
style: geoMarkerStyle,
|
|
1280
1285
|
geometry: position
|
|
@@ -1282,12 +1287,12 @@ const moveFeature = (e, t) => {
|
|
|
1282
1287
|
source: new VectorSource({
|
|
1283
1288
|
features: [geoMarker]
|
|
1284
1289
|
})
|
|
1285
|
-
}), (
|
|
1290
|
+
}), (o = mapInstance$5.value) == null || o.addLayer(vectorLayer), moveFeatureHandler = (l) => moveFeature(l, t), startAnimation();
|
|
1286
1291
|
}, renderPoint = (e) => {
|
|
1287
1292
|
if (!mapInstance$5.value) return;
|
|
1288
1293
|
const t = trackList$1.value || [];
|
|
1289
1294
|
if (!(t && t.length > 1)) return [];
|
|
1290
|
-
const
|
|
1295
|
+
const n = { 16: 24, 17: 15, default: 4 }, o = [], l = t.length;
|
|
1291
1296
|
for (let c = 0; c < l; c++) {
|
|
1292
1297
|
t[c].index = c;
|
|
1293
1298
|
const s = mapInstance$5.value.getPixelFromCoordinate(t[c].centerPoint);
|
|
@@ -1297,22 +1302,22 @@ const moveFeature = (e, t) => {
|
|
|
1297
1302
|
const u = mapInstance$5.value.getView().getZoom();
|
|
1298
1303
|
if (!u) return;
|
|
1299
1304
|
if (u > 15) {
|
|
1300
|
-
const f =
|
|
1305
|
+
const f = n[u] || n.default;
|
|
1301
1306
|
m = adjustBounds(m, [f, f]);
|
|
1302
1307
|
}
|
|
1303
1308
|
let d = !0;
|
|
1304
1309
|
if (t[c].state !== "0") {
|
|
1305
|
-
for (let f = 0; f <
|
|
1306
|
-
if (isOverlapping(m,
|
|
1310
|
+
for (let f = 0; f < o.length; f++)
|
|
1311
|
+
if (isOverlapping(m, o[f].bounds)) {
|
|
1307
1312
|
d = !1;
|
|
1308
1313
|
break;
|
|
1309
1314
|
}
|
|
1310
1315
|
}
|
|
1311
|
-
d && (t[c].bounds = m,
|
|
1316
|
+
d && (t[c].bounds = m, o.push(t[c]));
|
|
1312
1317
|
}
|
|
1313
1318
|
}
|
|
1314
1319
|
const r = getIconStyle(stopIcon), i = getIconStyle(slowIcon);
|
|
1315
|
-
|
|
1320
|
+
o.forEach((c, s) => {
|
|
1316
1321
|
var d, f;
|
|
1317
1322
|
const m = new Feature({
|
|
1318
1323
|
geometry: new Point(c.centerPoint)
|
|
@@ -1354,13 +1359,13 @@ const moveFeature = (e, t) => {
|
|
|
1354
1359
|
}), h = [];
|
|
1355
1360
|
Number(c.state) === 0 ? ((d = y.getText()) == null || d.setFill(new Fill({ color: stopColor })), h.push(r)) : Number(c.state) === 1 && ((f = y.getText()) == null || f.setFill(new Fill({ color: slowColor })), h.push(i)), h.push(y), p.setStyle(h), trackLineVectorSource.value.addFeature(p);
|
|
1356
1361
|
}
|
|
1357
|
-
}), renderArrow(
|
|
1362
|
+
}), renderArrow(o, e), renderIconPoint();
|
|
1358
1363
|
}, renderArrow = (e, t) => {
|
|
1359
|
-
const
|
|
1360
|
-
|
|
1361
|
-
for (let
|
|
1364
|
+
const n = e.length;
|
|
1365
|
+
n || (e.push(trackList$1.value[0]), e.push(trackList$1.value[trackList$1.value.length - 1]));
|
|
1366
|
+
for (let o = 0; o < n - 1; o++) {
|
|
1362
1367
|
let l;
|
|
1363
|
-
const r = e[
|
|
1368
|
+
const r = e[o], i = (e[o + 1].index + r.index) / 2;
|
|
1364
1369
|
if (i % 2 === 0)
|
|
1365
1370
|
l = trackList$1.value[i].centerPoint;
|
|
1366
1371
|
else {
|
|
@@ -1382,8 +1387,8 @@ const moveFeature = (e, t) => {
|
|
|
1382
1387
|
fill: new Fill({ color: t }),
|
|
1383
1388
|
// 设置箭头旋转 角度转为弧度
|
|
1384
1389
|
rotation: getRotation(
|
|
1385
|
-
e[
|
|
1386
|
-
e[
|
|
1390
|
+
e[o].center,
|
|
1391
|
+
e[o + 1].center
|
|
1387
1392
|
) * (Math.PI / 180)
|
|
1388
1393
|
})
|
|
1389
1394
|
})
|
|
@@ -1391,13 +1396,13 @@ const moveFeature = (e, t) => {
|
|
|
1391
1396
|
}
|
|
1392
1397
|
}
|
|
1393
1398
|
}, renderIconPoint = () => {
|
|
1394
|
-
const e = "", t = "#fcdc3f",
|
|
1399
|
+
const e = "", t = "#fcdc3f", n = "#ff0000";
|
|
1395
1400
|
(trackList$1.value.length < 2 ? [trackList$1.value[0]] : [trackList$1.value[0], trackList$1.value[trackList$1.value.length - 1]]).forEach((l) => {
|
|
1396
1401
|
const r = new Feature({
|
|
1397
1402
|
geometry: new Point(l.centerPoint)
|
|
1398
1403
|
});
|
|
1399
1404
|
r.set("type", "track_begin"), r.set("data", l);
|
|
1400
|
-
const i = l.index === 0 && trackList$1.value.length >= 2 ? t :
|
|
1405
|
+
const i = l.index === 0 && trackList$1.value.length >= 2 ? t : n;
|
|
1401
1406
|
r.setStyle(
|
|
1402
1407
|
new Style({
|
|
1403
1408
|
text: new Text({
|
|
@@ -1410,10 +1415,10 @@ const moveFeature = (e, t) => {
|
|
|
1410
1415
|
), trackLineVectorSource.value.addFeature(r);
|
|
1411
1416
|
});
|
|
1412
1417
|
}, setTrackLabelStyle = (e, t) => new Style({
|
|
1413
|
-
renderer: (
|
|
1414
|
-
const l =
|
|
1418
|
+
renderer: (n, o) => {
|
|
1419
|
+
const l = o.context, c = {
|
|
1415
1420
|
id: e.id || "",
|
|
1416
|
-
center:
|
|
1421
|
+
center: n,
|
|
1417
1422
|
text: e.time,
|
|
1418
1423
|
color: t,
|
|
1419
1424
|
textColor: "#000",
|
|
@@ -1423,7 +1428,7 @@ const moveFeature = (e, t) => {
|
|
|
1423
1428
|
};
|
|
1424
1429
|
drawLabel(l, c, trackLabels.value);
|
|
1425
1430
|
}
|
|
1426
|
-
}), mapInstance$4 = ref(), renderCustomOverlaySetInstance = (e) => mapInstance$4.value = e, drawCustomContent = (e, t,
|
|
1431
|
+
}), mapInstance$4 = ref(), renderCustomOverlaySetInstance = (e) => mapInstance$4.value = e, drawCustomContent = (e, t, n, o = "top-left", l = !1) => {
|
|
1427
1432
|
var u, d;
|
|
1428
1433
|
if (!t || !mapInstance$4.value) return;
|
|
1429
1434
|
document.querySelectorAll(".truck-custom-content").forEach((f) => {
|
|
@@ -1431,29 +1436,29 @@ const moveFeature = (e, t) => {
|
|
|
1431
1436
|
return (p = f.parentNode) == null ? void 0 : p.removeChild(f);
|
|
1432
1437
|
});
|
|
1433
1438
|
const r = document.createElement("div");
|
|
1434
|
-
r.innerHTML =
|
|
1439
|
+
r.innerHTML = n;
|
|
1435
1440
|
const i = new Overlay({
|
|
1436
1441
|
element: r,
|
|
1437
1442
|
position: t,
|
|
1438
1443
|
// 初始位置
|
|
1439
|
-
positioning:
|
|
1444
|
+
positioning: o,
|
|
1440
1445
|
stopEvent: l
|
|
1441
1446
|
// 设置不阻拦事件
|
|
1442
1447
|
});
|
|
1443
1448
|
if (l) {
|
|
1444
1449
|
let f = !1, p = [0, 0], y = [0, 0], h = 0, g = 0;
|
|
1445
1450
|
r.addEventListener("mousedown", function(k) {
|
|
1446
|
-
var
|
|
1451
|
+
var I;
|
|
1447
1452
|
f = !0, h = k.clientX, g = k.clientY;
|
|
1448
|
-
const
|
|
1449
|
-
|
|
1453
|
+
const T = (I = mapInstance$4.value) == null ? void 0 : I.getCoordinateFromPixel([k.clientX - 200, k.clientY - 200]);
|
|
1454
|
+
T && (p = T), y = [
|
|
1450
1455
|
k.clientX - r.getBoundingClientRect().left + 160,
|
|
1451
1456
|
k.clientY - r.getBoundingClientRect().top + 84
|
|
1452
1457
|
], k.preventDefault(), console.log(e, h, g);
|
|
1453
1458
|
}), document.addEventListener("mousemove", function(k) {
|
|
1454
|
-
var
|
|
1459
|
+
var T;
|
|
1455
1460
|
if (f) {
|
|
1456
|
-
const
|
|
1461
|
+
const I = (T = mapInstance$4.value) == null ? void 0 : T.getCoordinateFromPixel([k.clientX - y[0], k.clientY - y[1]]), x = I[0] - p[0], F = I[1] - p[1];
|
|
1457
1462
|
i.setPosition([p[0] + x, p[1] + F]);
|
|
1458
1463
|
}
|
|
1459
1464
|
}), document.addEventListener("mouseup", function() {
|
|
@@ -1470,7 +1475,7 @@ const moveFeature = (e, t) => {
|
|
|
1470
1475
|
return i.setPosition(m), i;
|
|
1471
1476
|
}, mapInstance$3 = ref(), renderTrackSetInstance = (e) => mapInstance$3.value = e, showTracks = ref([]), trackList = ref([]);
|
|
1472
1477
|
ref(null);
|
|
1473
|
-
const trackId = ref(""), cursor = ref(0), renderTrack = (e, t,
|
|
1478
|
+
const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, l = "ship") => {
|
|
1474
1479
|
var u;
|
|
1475
1480
|
if (console.log(l), nextTick(() => {
|
|
1476
1481
|
hiddenAllShips();
|
|
@@ -1485,27 +1490,27 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1485
1490
|
}), trackId.value = e, r[e] = t, trackList.value = t;
|
|
1486
1491
|
const i = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"], c = r[e].map(
|
|
1487
1492
|
(d) => transform([d.lon, d.lat], projection.data, projection.mercator)
|
|
1488
|
-
), s = new LineString(c), m = formatUtils.formatLength(s,
|
|
1493
|
+
), s = new LineString(c), m = formatUtils.formatLength(s, o) || "--";
|
|
1489
1494
|
nextTick(() => {
|
|
1490
1495
|
var f, p;
|
|
1491
1496
|
const d = (f = showTracks.value) == null ? void 0 : f.findIndex((y) => y.id === e);
|
|
1492
|
-
d < 0 ? showTracks.value.push({ id: e, length: m }) : showTracks.value[d].length = m, ++cursor.value, cursor.value > i.length && (cursor.value = 0), renderTrackLine(r, e,
|
|
1497
|
+
d < 0 ? showTracks.value.push({ id: e, length: m }) : showTracks.value[d].length = m, ++cursor.value, cursor.value > i.length && (cursor.value = 0), renderTrackLine(r, e, n), nextTick(() => {
|
|
1493
1498
|
resetTrackView(e);
|
|
1494
1499
|
}).then(() => {
|
|
1495
1500
|
}), (p = mapInstance$3.value) == null || p.on("moveend", () => {
|
|
1496
|
-
showTrackLayer.value && (trackLabels.value = [], renderTrackLine(r, e,
|
|
1501
|
+
showTrackLayer.value && (trackLabels.value = [], renderTrackLine(r, e, n));
|
|
1497
1502
|
}), renderTrackPointPopup();
|
|
1498
1503
|
}).then(() => {
|
|
1499
1504
|
});
|
|
1500
1505
|
}, renderTrackPointPopup = () => {
|
|
1501
1506
|
var t;
|
|
1502
1507
|
const e = ref(null);
|
|
1503
|
-
(t = mapInstance$3.value) == null || t.on("pointermove", (
|
|
1508
|
+
(t = mapInstance$3.value) == null || t.on("pointermove", (n) => {
|
|
1504
1509
|
var l, r, i, c;
|
|
1505
1510
|
e.value && ((l = mapInstance$3.value) == null || l.removeOverlay(e.value));
|
|
1506
|
-
const
|
|
1507
|
-
if (
|
|
1508
|
-
const s =
|
|
1511
|
+
const o = (r = mapInstance$3.value) == null ? void 0 : r.forEachFeatureAtPixel(n.pixel, (s) => s);
|
|
1512
|
+
if (o) {
|
|
1513
|
+
const s = o.get("data");
|
|
1509
1514
|
if (!(s != null && s.time)) return;
|
|
1510
1515
|
let m = "";
|
|
1511
1516
|
s != null && s.stayTime && (m = `
|
|
@@ -1545,7 +1550,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1545
1550
|
<div class="item-item">${s.time}</div>
|
|
1546
1551
|
</div>
|
|
1547
1552
|
${m ?? m}
|
|
1548
|
-
</div>`, d = (i = mapInstance$3.value) == null ? void 0 : i.getPixelFromCoordinate(
|
|
1553
|
+
</div>`, d = (i = mapInstance$3.value) == null ? void 0 : i.getPixelFromCoordinate(n.coordinate);
|
|
1549
1554
|
if (d) {
|
|
1550
1555
|
const f = drawCustomContent(s.time, d, u, "top-left");
|
|
1551
1556
|
f && (e.value = f);
|
|
@@ -1560,20 +1565,20 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1560
1565
|
handlePlay(String(e), t);
|
|
1561
1566
|
}, resetTrackView = (e) => {
|
|
1562
1567
|
var l;
|
|
1563
|
-
const t = mapInstance$3.value.getView(),
|
|
1564
|
-
if (!
|
|
1565
|
-
const
|
|
1566
|
-
if (
|
|
1568
|
+
const t = mapInstance$3.value.getView(), n = e ? shipTrackLineFeatures.value.find((r) => r.getId() === e) : shipTrackLineFeatures.value[0];
|
|
1569
|
+
if (!n) return;
|
|
1570
|
+
const o = (l = n == null ? void 0 : n.getGeometry()) == null ? void 0 : l.getExtent();
|
|
1571
|
+
if (o != null && o.length)
|
|
1567
1572
|
try {
|
|
1568
|
-
const r = buffer(
|
|
1573
|
+
const r = buffer(o, Math.max(o[2] - o[0], o[3] - o[1]) * 0.02);
|
|
1569
1574
|
t.fit(r);
|
|
1570
1575
|
} catch (r) {
|
|
1571
1576
|
console.log(r);
|
|
1572
1577
|
}
|
|
1573
1578
|
}, formatMinutesToDDHHMM = (e) => {
|
|
1574
|
-
const t = hooks.duration(e, "minutes"),
|
|
1579
|
+
const t = hooks.duration(e, "minutes"), n = Math.floor(t.asDays()), o = t.hours(), l = t.minutes();
|
|
1575
1580
|
let r = `${String(l).padStart(2, "0")}分`;
|
|
1576
|
-
return
|
|
1581
|
+
return o !== 0 && (r = `${String(o).padStart(2, "0")}时${r}`), n !== 0 && (r = `${String(n).padStart(2, "0")}天${r}`), r;
|
|
1577
1582
|
}, _hoisted_1$3 = {
|
|
1578
1583
|
key: 0,
|
|
1579
1584
|
class: "more-tool-panel"
|
|
@@ -1589,13 +1594,13 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1589
1594
|
emits: ["switchGreenDot", "switchMapTile"],
|
|
1590
1595
|
setup(e, { emit: t }) {
|
|
1591
1596
|
var p, y;
|
|
1592
|
-
const
|
|
1593
|
-
|
|
1597
|
+
const n = inject("mapInstance"), o = e, l = t, r = ref(((y = (p = n == null ? void 0 : n.value) == null ? void 0 : p.getView()) == null ? void 0 : y.getZoom()) || mapZoom.default), i = ref(!1), c = ref(null), s = ref(!0), m = () => {
|
|
1598
|
+
o.disableGreenDot || r.value >= mapZoom.shipGreenDotMax || (s.value = !s.value, l("switchGreenDot", s.value));
|
|
1594
1599
|
}, u = () => {
|
|
1595
|
-
l("switchMapTile",
|
|
1600
|
+
l("switchMapTile", o.mapTileMode === BaseMapType.vector ? BaseMapType.satellite : BaseMapType.vector);
|
|
1596
1601
|
}, d = () => {
|
|
1597
1602
|
var h, g;
|
|
1598
|
-
i.value ? (h = c.value) == null || h.removeInteraction() : (g = c.value) == null || g.addInteraction(), i.value = !i.value;
|
|
1603
|
+
i.value ? (showMeasure.value = !1, (h = c.value) == null || h.removeInteraction()) : (showMeasure.value = !0, (g = c.value) == null || g.addInteraction()), i.value = !i.value;
|
|
1599
1604
|
}, f = () => {
|
|
1600
1605
|
var h;
|
|
1601
1606
|
(h = c.value) == null || h.removeInteraction(), i.value = !1;
|
|
@@ -1603,9 +1608,9 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1603
1608
|
return onMounted(() => {
|
|
1604
1609
|
nextTick(() => {
|
|
1605
1610
|
var h;
|
|
1606
|
-
(h =
|
|
1607
|
-
var k,
|
|
1608
|
-
const g = (
|
|
1611
|
+
(h = n == null ? void 0 : n.value) == null || h.on("moveend", () => {
|
|
1612
|
+
var k, T;
|
|
1613
|
+
const g = (T = (k = n == null ? void 0 : n.value) == null ? void 0 : k.getView()) == null ? void 0 : T.getZoom();
|
|
1609
1614
|
g && (r.value = g);
|
|
1610
1615
|
});
|
|
1611
1616
|
});
|
|
@@ -1705,10 +1710,10 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1705
1710
|
])
|
|
1706
1711
|
], 64));
|
|
1707
1712
|
}
|
|
1708
|
-
}), ToolPanel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-
|
|
1713
|
+
}), ToolPanel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-6b24cf3c"]]), _hoisted_1$2 = { id: "scale-line-container" }, _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
1709
1714
|
__name: "scaleLine",
|
|
1710
1715
|
setup(e, { expose: t }) {
|
|
1711
|
-
const
|
|
1716
|
+
const n = inject("mapInstance");
|
|
1712
1717
|
return t({
|
|
1713
1718
|
setScaleLine: (l) => {
|
|
1714
1719
|
var c;
|
|
@@ -1716,7 +1721,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1716
1721
|
const r = new ScaleLine$1({
|
|
1717
1722
|
units: l
|
|
1718
1723
|
}), i = document.getElementById("scale-line-container");
|
|
1719
|
-
i && (r.setTarget(i), (c =
|
|
1724
|
+
i && (r.setTarget(i), (c = n == null ? void 0 : n.value) == null || c.addControl(r));
|
|
1720
1725
|
}
|
|
1721
1726
|
}), (l, r) => (openBlock(), createElementBlock("div", _hoisted_1$2));
|
|
1722
1727
|
}
|
|
@@ -1728,27 +1733,27 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1728
1733
|
}
|
|
1729
1734
|
},
|
|
1730
1735
|
setup(e) {
|
|
1731
|
-
const t = inject("mapInstance"),
|
|
1736
|
+
const t = inject("mapInstance"), n = () => {
|
|
1732
1737
|
if (!t.value) return;
|
|
1733
1738
|
const l = t.value.getView(), r = l.getZoom();
|
|
1734
1739
|
r && l.setZoom(r + 1);
|
|
1735
|
-
},
|
|
1740
|
+
}, o = () => {
|
|
1736
1741
|
if (!t.value) return;
|
|
1737
1742
|
const l = t.value.getView(), r = l.getZoom();
|
|
1738
1743
|
r && l.setZoom(r - 1);
|
|
1739
1744
|
};
|
|
1740
1745
|
return (l, r) => (openBlock(), createElementBlock("div", _hoisted_1$1, [
|
|
1741
1746
|
createElementVNode("div", {
|
|
1742
|
-
onClick:
|
|
1747
|
+
onClick: n,
|
|
1743
1748
|
class: "button big-button"
|
|
1744
1749
|
}, "+"),
|
|
1745
1750
|
createElementVNode("div", {
|
|
1746
|
-
onClick:
|
|
1751
|
+
onClick: o,
|
|
1747
1752
|
class: "button small-button"
|
|
1748
1753
|
}, "-")
|
|
1749
1754
|
]));
|
|
1750
1755
|
}
|
|
1751
|
-
}), ZoomControl = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-
|
|
1756
|
+
}), ZoomControl = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-ee822625"]]), _hoisted_1 = { class: "copyright" }, _hoisted_2 = ["src", "width"], _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
1752
1757
|
__name: "copyright",
|
|
1753
1758
|
props: {
|
|
1754
1759
|
type: { default: COPY_RIGHT_TYPE.HORIZONTAL }
|
|
@@ -1757,11 +1762,11 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1757
1762
|
useCssVars((r) => ({
|
|
1758
1763
|
"4bfada56": l.value
|
|
1759
1764
|
}));
|
|
1760
|
-
const t = e,
|
|
1765
|
+
const t = e, n = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? "map/tdt-copyright-h.svg" : `map/tdt-copyright-v${mapTile === "satellite" ? "-w" : ""}.svg`), o = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? "400px" : "168px"), l = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? "auto auto 0 5px" : "0 auto auto 5px");
|
|
1761
1766
|
return (r, i) => (openBlock(), createElementBlock("div", _hoisted_1, [
|
|
1762
1767
|
createElementVNode("img", {
|
|
1763
|
-
src: unref(CDN_URL) +
|
|
1764
|
-
width:
|
|
1768
|
+
src: unref(CDN_URL) + n.value,
|
|
1769
|
+
width: o.value,
|
|
1765
1770
|
class: "logo",
|
|
1766
1771
|
alt: ""
|
|
1767
1772
|
}, null, 8, _hoisted_2)
|
|
@@ -1779,7 +1784,7 @@ cameraImage.crossOrigin = "anonymous";
|
|
|
1779
1784
|
const loadImage = new Image();
|
|
1780
1785
|
loadImage.src = `${CDN_URL}/map/map-load.svg`;
|
|
1781
1786
|
loadImage.crossOrigin = "anonymous";
|
|
1782
|
-
const setTruckStyle = (e, t,
|
|
1787
|
+
const setTruckStyle = (e, t, n, o) => new Style({
|
|
1783
1788
|
renderer: (l, r) => {
|
|
1784
1789
|
const i = r.context;
|
|
1785
1790
|
i.save();
|
|
@@ -1792,13 +1797,13 @@ const setTruckStyle = (e, t, o, n) => new Style({
|
|
|
1792
1797
|
const p = 56, y = "#FFFFFF";
|
|
1793
1798
|
let h = 176;
|
|
1794
1799
|
const g = 52;
|
|
1795
|
-
let k = "#164AFF",
|
|
1796
|
-
|
|
1797
|
-
const
|
|
1798
|
-
if (i.fillText(
|
|
1799
|
-
const F = i.measureText(
|
|
1800
|
+
let k = "#164AFF", T = "#FFFFFF";
|
|
1801
|
+
n === CAR_COLOR.YELLOW ? (h = 176, k = "#FFC81E", T = "rgba(0,0,0,0.88)") : n === CAR_COLOR.Y_GREEN && (f = 200, h = 196, k = "#8FED7C", T = "rgba(0,0,0,0.88)"), o != null && o.length && (f += o.length * 56), fillRectRadius(i, u, d, f, p, y), fillRectRadius(i, u + 2, d + 2, h, g, k), n === CAR_COLOR.Y_GREEN && fillRectRadius(i, u + 2, d + 2, 68, g, "#FFC81E"), i.save(), i.restore(), i.fillStyle = T, i.font = "bold 28px Arial", i.textAlign = "left", i.textBaseline = "middle";
|
|
1802
|
+
const I = `${t.slice(0, 2) + " · " + t.slice(2)}`;
|
|
1803
|
+
if (i.fillText(I, u + 12, d + 32), i.save(), i.restore(), o != null && o.length) {
|
|
1804
|
+
const F = i.measureText(I).width + 12;
|
|
1800
1805
|
let P = 0;
|
|
1801
|
-
|
|
1806
|
+
o.forEach((v) => {
|
|
1802
1807
|
v === DEVICE_TYPE.CAMERA && (i.drawImage(cameraImage, s - 54 + F + P * 56, m - 64, 50, 50), ++P), v === DEVICE_TYPE.LOAD && (i.drawImage(loadImage, s - 54 + F + P * 56, m - 64, 50, 50), ++P);
|
|
1803
1808
|
});
|
|
1804
1809
|
}
|
|
@@ -1811,15 +1816,15 @@ let truckMarkerList = [], trucksVectorSource;
|
|
|
1811
1816
|
const renderTrucksMarker = (e) => {
|
|
1812
1817
|
if (deleteAllTruckMarkers(), !!mapInstance$2.value)
|
|
1813
1818
|
return e.forEach((t) => {
|
|
1814
|
-
const
|
|
1815
|
-
geometry: new Point(fromLonLat(
|
|
1819
|
+
const n = formatUtils.convertSixHundredThousandToLatLng(t.lon, t.lat), o = new Feature({
|
|
1820
|
+
geometry: new Point(fromLonLat(n))
|
|
1816
1821
|
});
|
|
1817
|
-
|
|
1822
|
+
o.set("data", t), o.setStyle(
|
|
1818
1823
|
setTruckStyle(!1, t.vno, t.vclColor ?? 0, t.icons ?? [])
|
|
1819
1824
|
), truckMarkerList.push({
|
|
1820
1825
|
name: t.vno,
|
|
1821
|
-
lonlat:
|
|
1822
|
-
feature:
|
|
1826
|
+
lonlat: n,
|
|
1827
|
+
feature: o
|
|
1823
1828
|
});
|
|
1824
1829
|
}), trucksVectorSource = new VectorSource({
|
|
1825
1830
|
features: truckMarkerList.map((t) => t.feature)
|
|
@@ -1832,17 +1837,17 @@ const renderTrucksMarker = (e) => {
|
|
|
1832
1837
|
}), truckMarkerList = [];
|
|
1833
1838
|
}, mapInstance$1 = ref(), renderTruckSetInstance = (e) => mapInstance$1.value = e, vehicle = ref(null), focusShipData = ref(), currentTruckOverlay = ref(null), findTruck = async (e) => {
|
|
1834
1839
|
if (!mapInstance$1.value || (focusShipData.value = e, !(e != null && e.lon && (e != null && e.lat)))) return;
|
|
1835
|
-
const t = formatUtils.convertSixHundredThousandToLatLng(e.lon, e.lat),
|
|
1836
|
-
currentTruckOverlay.value = e ? drawTruckIcon(e.vno,
|
|
1837
|
-
const
|
|
1838
|
-
|
|
1840
|
+
const t = formatUtils.convertSixHundredThousandToLatLng(e.lon, e.lat), n = mapInstance$1.value.getPixelFromCoordinate(transform(t, projection.data, projection.mercator));
|
|
1841
|
+
currentTruckOverlay.value = e ? drawTruckIcon(e.vno, n, (e == null ? void 0 : e.drc) ?? "") ?? null : null;
|
|
1842
|
+
const o = mapInstance$1.value.getView(), l = new Point(t);
|
|
1843
|
+
o.setCenter(transform(l.getCoordinates(), projection.data, projection.mercator));
|
|
1839
1844
|
}, clearAllTruck = () => {
|
|
1840
1845
|
vehicle.value.clearAllShip();
|
|
1841
|
-
}, drawTruckIcon = (e, t,
|
|
1842
|
-
const
|
|
1846
|
+
}, drawTruckIcon = (e, t, n) => {
|
|
1847
|
+
const o = `<div id="${e}" class="ol-custom-content truck-custom-content" style="width: 80px; height: 80px; transform: rotate(${n}deg);">
|
|
1843
1848
|
<img src="${CDN_URL}map/car-icon.gif" width="100%" height="100%" />
|
|
1844
1849
|
</div>`;
|
|
1845
|
-
return drawCustomContent(e, t,
|
|
1850
|
+
return drawCustomContent(e, t, o, "center-center");
|
|
1846
1851
|
}, removeTruckIcon = () => {
|
|
1847
1852
|
var t;
|
|
1848
1853
|
const e = (t = currentTruckOverlay.value) == null ? void 0 : t.getElement();
|
|
@@ -1850,11 +1855,11 @@ const renderTrucksMarker = (e) => {
|
|
|
1850
1855
|
}, zoomTruckIcon = () => {
|
|
1851
1856
|
var r;
|
|
1852
1857
|
if (!mapInstance$1.value) return;
|
|
1853
|
-
const e = mapInstance$1.value.getView().getZoom(), t = 120,
|
|
1854
|
-
function
|
|
1855
|
-
return i < 14 ?
|
|
1858
|
+
const e = mapInstance$1.value.getView().getZoom(), t = 120, n = 60;
|
|
1859
|
+
function o(i) {
|
|
1860
|
+
return i < 14 ? n : i >= 14 && i <= 18 ? Math.round((i - 14) * (t - n) / 4 + n) : t;
|
|
1856
1861
|
}
|
|
1857
|
-
const l =
|
|
1862
|
+
const l = o(e);
|
|
1858
1863
|
(r = document.querySelectorAll(".truck-custom-content")) == null || r.forEach((i) => {
|
|
1859
1864
|
i.style.width = `${l}px`, i.style.height = `${l}px`;
|
|
1860
1865
|
});
|
|
@@ -1902,23 +1907,23 @@ function createHelpTooltip() {
|
|
|
1902
1907
|
}
|
|
1903
1908
|
let squareLimitError = !1, lineLimitError = !1;
|
|
1904
1909
|
const validateSquareLimit = (e) => {
|
|
1905
|
-
let
|
|
1910
|
+
let n = 1 / 0, o = -1 / 0, l = 1 / 0, r = -1 / 0;
|
|
1906
1911
|
e == null || e.forEach((s) => {
|
|
1907
1912
|
const m = transform(s, projection.mercator, projection.data), u = m[0], d = m[1];
|
|
1908
|
-
|
|
1913
|
+
n = Math.min(n, d), o = Math.max(o, d), l = Math.min(l, u), r = Math.max(r, u);
|
|
1909
1914
|
});
|
|
1910
|
-
const i = (
|
|
1915
|
+
const i = (o - n) * 111, c = (r - l) * 111;
|
|
1911
1916
|
squareLimitError = i > 150 || c > 150;
|
|
1912
1917
|
};
|
|
1913
1918
|
let storeFeature, callbackFunction = null;
|
|
1914
1919
|
const addInteraction = (e) => {
|
|
1915
|
-
var
|
|
1916
|
-
e && (callbackFunction = e), drawVector || init(), drawnState = "undrawn", layerState = "drawn", (
|
|
1920
|
+
var n, o;
|
|
1921
|
+
e && (callbackFunction = e), drawVector || init(), drawnState = "undrawn", layerState = "drawn", (n = mapInstance.value) == null || n.addLayer(drawVector), draw = new Draw({
|
|
1917
1922
|
type: "Polygon",
|
|
1918
1923
|
source,
|
|
1919
1924
|
trace: !0,
|
|
1920
1925
|
style: [drawPolygonStyle.drawing, circleStyle]
|
|
1921
|
-
}), (
|
|
1926
|
+
}), (o = mapInstance.value) == null || o.addInteraction(draw), createMeasureTooltip(), createHelpTooltip();
|
|
1922
1927
|
let t;
|
|
1923
1928
|
draw.on("drawstart", function(l) {
|
|
1924
1929
|
var r;
|
|
@@ -1947,51 +1952,51 @@ const addInteraction = (e) => {
|
|
|
1947
1952
|
}
|
|
1948
1953
|
});
|
|
1949
1954
|
}, removeInteraction = () => {
|
|
1950
|
-
var e, t,
|
|
1955
|
+
var e, t, n;
|
|
1951
1956
|
if (mapInstance.value) {
|
|
1952
|
-
if (document.querySelectorAll(".ol-tooltip.ol-tooltip-draw-polygon").forEach((
|
|
1957
|
+
if (document.querySelectorAll(".ol-tooltip.ol-tooltip-draw-polygon").forEach((o) => {
|
|
1953
1958
|
var l;
|
|
1954
|
-
(l =
|
|
1959
|
+
(l = o == null ? void 0 : o.parentNode) == null || l.removeChild(o);
|
|
1955
1960
|
}), source.clear(), (e = mapInstance.value) == null || e.removeLayer(drawVector), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement), ((t = mapInstance.value) == null ? void 0 : t.getTargetElement()).style.cursor = "", document.querySelector("#map").style.cursor = "", draw) {
|
|
1956
|
-
const
|
|
1957
|
-
|
|
1961
|
+
const o = mapInstance.value.getInteractions().getArray().find((l) => getUid(l) === getUid(draw));
|
|
1962
|
+
o && ((n = mapInstance.value) == null || n.removeInteraction(o));
|
|
1958
1963
|
}
|
|
1959
1964
|
drawnState = "undrawn", layerState = "destroyed";
|
|
1960
1965
|
}
|
|
1961
1966
|
}, endFn = (e) => {
|
|
1962
|
-
var t,
|
|
1967
|
+
var t, n, o;
|
|
1963
1968
|
if (e.getGeometry()) {
|
|
1964
1969
|
const l = [], i = e.getGeometry().getCoordinates();
|
|
1965
1970
|
(t = i[0]) == null || t.forEach((s) => {
|
|
1966
1971
|
l.push(transform(s, projection.mercator, projection.data));
|
|
1967
1972
|
});
|
|
1968
1973
|
const c = i[0][i[0].length - 2];
|
|
1969
|
-
if (c && measureTooltip.setPosition(c), measureTooltip.setOffset([10, 0]), measureTooltipElement && (measureTooltipElement.innerHTML += '<span class="delete-icon"><i class="map-iconfont icon-delete" /></div>'), (
|
|
1974
|
+
if (c && measureTooltip.setPosition(c), measureTooltip.setOffset([10, 0]), measureTooltipElement && (measureTooltipElement.innerHTML += '<span class="delete-icon"><i class="map-iconfont icon-delete" /></div>'), (n = document.querySelector(".delete-icon")) == null || n.addEventListener("click", () => {
|
|
1970
1975
|
reset();
|
|
1971
1976
|
}), !lineLimitError && !squareLimitError)
|
|
1972
1977
|
return l;
|
|
1973
|
-
draw && ((
|
|
1978
|
+
draw && ((o = mapInstance.value) == null || o.removeInteraction(draw)), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement);
|
|
1974
1979
|
}
|
|
1975
1980
|
}, initFeature = (e) => {
|
|
1976
|
-
var t,
|
|
1981
|
+
var t, n;
|
|
1977
1982
|
if (e && (callbackFunction = e), layerState = "drawn", storeFeature) {
|
|
1978
|
-
const
|
|
1979
|
-
if (!
|
|
1980
|
-
const l = formatUtils.formatArea(
|
|
1983
|
+
const o = storeFeature.getGeometry();
|
|
1984
|
+
if (!o) return;
|
|
1985
|
+
const l = formatUtils.formatArea(o, LENGTH_UNIT.NM);
|
|
1981
1986
|
measureTooltipElement && (measureTooltipElement.innerHTML = `
|
|
1982
1987
|
<span class="text">面积:${l}${lineLimitError || squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
|
|
1983
1988
|
`), (t = drawVector.getSource()) == null || t.addFeature(storeFeature);
|
|
1984
1989
|
const r = endFn(storeFeature);
|
|
1985
1990
|
r != null && r.length && callbackFunction && callbackFunction(r);
|
|
1986
1991
|
const i = getCenter(storeFeature.getGeometry().getExtent());
|
|
1987
|
-
(
|
|
1992
|
+
(n = mapInstance.value) == null || n.getView().setCenter(i);
|
|
1988
1993
|
}
|
|
1989
1994
|
}, pointerMoveHandler = function(e) {
|
|
1990
|
-
var
|
|
1995
|
+
var n;
|
|
1991
1996
|
if (e.dragging)
|
|
1992
1997
|
return;
|
|
1993
1998
|
let t = "点击选择起点";
|
|
1994
|
-
sketch && (t = "单击继续,双击结束"), helpTooltipElement && (helpTooltipElement.innerHTML = t, helpTooltip.setPosition(e.coordinate), helpTooltipElement.classList.remove("hidden")), layerState === "drawn" && (((
|
|
1999
|
+
sketch && (t = "单击继续,双击结束"), helpTooltipElement && (helpTooltipElement.innerHTML = t, helpTooltip.setPosition(e.coordinate), helpTooltipElement.classList.remove("hidden")), layerState === "drawn" && (((n = mapInstance.value) == null ? void 0 : n.getTargetElement()).style.cursor = "crosshair");
|
|
1995
2000
|
}, init = () => {
|
|
1996
2001
|
mapInstance.value && (circleStyle = new Style({
|
|
1997
2002
|
image: new CircleStyle({
|
|
@@ -2024,8 +2029,8 @@ const addInteraction = (e) => {
|
|
|
2024
2029
|
dotImage.crossOrigin = "anonymous";
|
|
2025
2030
|
const dotActiveImage = new Image();
|
|
2026
2031
|
dotActiveImage.crossOrigin = "anonymous";
|
|
2027
|
-
const setPointStyle = (e, t,
|
|
2028
|
-
const { color:
|
|
2032
|
+
const setPointStyle = (e, t, n) => {
|
|
2033
|
+
const { color: o, url: l, activeUrl: r, activeColor: i } = n;
|
|
2029
2034
|
return (r || l) && (e ? dotActiveImage.src = CDN_URL + (r || l) : dotImage.src = CDN_URL + (l || r)), new Style({
|
|
2030
2035
|
renderer: (c, s) => {
|
|
2031
2036
|
const m = s.context;
|
|
@@ -2033,10 +2038,10 @@ const setPointStyle = (e, t, o) => {
|
|
|
2033
2038
|
const u = window.devicePixelRatio || 1;
|
|
2034
2039
|
let [d, f] = c;
|
|
2035
2040
|
d = Number(d), f = Number(f), m.font = `${12 * u}px Arial`;
|
|
2036
|
-
const p = m.measureText(t).width, y = d - p / 2 + 6, h = f + 6 * u, g = p + 4, k = 16 * u,
|
|
2037
|
-
if (fillRectRadius(m, y, h +
|
|
2038
|
-
const
|
|
2039
|
-
m.drawImage(
|
|
2041
|
+
const p = m.measureText(t).width, y = d - p / 2 + 6, h = f + 6 * u, g = p + 4, k = 16 * u, T = e && i || o;
|
|
2042
|
+
if (fillRectRadius(m, y, h + 13 * u, g, k, T), m.save(), m.restore(), m.fillStyle = e ? "#FFFFFF" : "#000000", m.textAlign = "center", m.textBaseline = "middle", m.fillText(t, y + (p + 4) / 2, h + 22 * u), m.save(), m.restore(), l || r) {
|
|
2043
|
+
const I = e ? dotActiveImage : dotImage;
|
|
2044
|
+
m.drawImage(I, d - I.width / 2, f - I.height / 2, 30 * u, 30 * u);
|
|
2040
2045
|
}
|
|
2041
2046
|
m.restore();
|
|
2042
2047
|
}
|
|
@@ -2049,18 +2054,18 @@ class PointMarkerClass {
|
|
|
2049
2054
|
* 配置渲染点的样式
|
|
2050
2055
|
* @param options
|
|
2051
2056
|
*/
|
|
2052
|
-
constructor(t,
|
|
2053
|
-
|
|
2057
|
+
constructor(t, n) {
|
|
2058
|
+
b(this, "mapInstance");
|
|
2054
2059
|
// 渲染的数据
|
|
2055
|
-
|
|
2060
|
+
b(this, "pointMarkerList", []);
|
|
2056
2061
|
// 绘制点渲染层数据
|
|
2057
|
-
|
|
2062
|
+
b(this, "pointsVectorSource");
|
|
2058
2063
|
// 当前高亮的数据
|
|
2059
|
-
|
|
2060
|
-
|
|
2064
|
+
b(this, "highlightPoint");
|
|
2065
|
+
b(this, "pointLayer");
|
|
2061
2066
|
// 颜色等其他设置
|
|
2062
|
-
|
|
2063
|
-
this.mapInstance = t, this.options =
|
|
2067
|
+
b(this, "options");
|
|
2068
|
+
this.mapInstance = t, this.options = n;
|
|
2064
2069
|
}
|
|
2065
2070
|
/**
|
|
2066
2071
|
* 渲染
|
|
@@ -2079,48 +2084,48 @@ class PointMarkerClass {
|
|
|
2079
2084
|
*/
|
|
2080
2085
|
renderPointMarker(t) {
|
|
2081
2086
|
if (this.deleteAllPointMarkers(), !this.mapInstance) return;
|
|
2082
|
-
let
|
|
2083
|
-
t.forEach((
|
|
2087
|
+
let n = {};
|
|
2088
|
+
t.forEach((o) => {
|
|
2084
2089
|
var r;
|
|
2085
|
-
const l = [
|
|
2086
|
-
if (((r = this.highlightPoint) == null ? void 0 : r.id) ===
|
|
2087
|
-
|
|
2088
|
-
id:
|
|
2089
|
-
name:
|
|
2090
|
-
lonlat: [Number(
|
|
2091
|
-
pointType:
|
|
2090
|
+
const l = [o.lon, o.lat];
|
|
2091
|
+
if (((r = this.highlightPoint) == null ? void 0 : r.id) === o.id)
|
|
2092
|
+
n = {
|
|
2093
|
+
id: o.id,
|
|
2094
|
+
name: o.name,
|
|
2095
|
+
lonlat: [Number(o.lon), Number(o.lat)],
|
|
2096
|
+
pointType: o.pointType
|
|
2092
2097
|
};
|
|
2093
2098
|
else {
|
|
2094
|
-
const i = this.getFeature(
|
|
2099
|
+
const i = this.getFeature(o, l);
|
|
2095
2100
|
this.pointMarkerList.push({
|
|
2096
|
-
id:
|
|
2097
|
-
name:
|
|
2098
|
-
lonlat: [Number(
|
|
2101
|
+
id: o.id,
|
|
2102
|
+
name: o.name,
|
|
2103
|
+
lonlat: [Number(o.lon), Number(o.lat)],
|
|
2099
2104
|
feature: i,
|
|
2100
|
-
pointType:
|
|
2105
|
+
pointType: o.pointType
|
|
2101
2106
|
});
|
|
2102
2107
|
}
|
|
2103
|
-
}),
|
|
2104
|
-
features: [...this.pointMarkerList.map((
|
|
2108
|
+
}), n && n.lonlat && (n.feature = this.getFeature(n, n.lonlat), this.pointMarkerList.push(n)), this.pointsVectorSource = new VectorSource({
|
|
2109
|
+
features: [...this.pointMarkerList.map((o) => o.feature)]
|
|
2105
2110
|
}), this.pointLayer = new VectorLayer({
|
|
2106
2111
|
source: this.pointsVectorSource
|
|
2107
2112
|
}), this.mapInstance.addLayer(this.pointLayer);
|
|
2108
2113
|
}
|
|
2109
2114
|
// 删除 未选中的渲染点
|
|
2110
2115
|
deleteAllPointMarkers(t) {
|
|
2111
|
-
this.pointMarkerList.forEach((
|
|
2112
|
-
var
|
|
2113
|
-
|
|
2116
|
+
this.pointMarkerList.forEach((n) => {
|
|
2117
|
+
var o;
|
|
2118
|
+
n.feature && t !== n.id && ((o = this.pointsVectorSource) == null || o.removeFeature(n.feature));
|
|
2114
2119
|
});
|
|
2115
2120
|
}
|
|
2116
2121
|
// 取消高亮
|
|
2117
2122
|
cancelHighlightTruckMarker() {
|
|
2118
2123
|
if (!this.highlightPoint)
|
|
2119
2124
|
return;
|
|
2120
|
-
const { id: t, name:
|
|
2121
|
-
this.highlightPoint = void 0, this.pointMarkerList.find((
|
|
2122
|
-
|
|
2123
|
-
setPointStyle(!1,
|
|
2125
|
+
const { id: t, name: n } = this.highlightPoint;
|
|
2126
|
+
this.highlightPoint = void 0, this.pointMarkerList.find((o) => {
|
|
2127
|
+
o.id === t && o.feature.setStyle(
|
|
2128
|
+
setPointStyle(!1, n, this.options)
|
|
2124
2129
|
);
|
|
2125
2130
|
});
|
|
2126
2131
|
}
|
|
@@ -2142,24 +2147,24 @@ class PointMarkerClass {
|
|
|
2142
2147
|
*/
|
|
2143
2148
|
highlightPointMarker(t) {
|
|
2144
2149
|
if (!this.mapInstance) return;
|
|
2145
|
-
const { id:
|
|
2150
|
+
const { id: n, name: o, fullName: l, lon: r, lat: i, pointType: c } = t, s = [Number(r), Number(i)];
|
|
2146
2151
|
this.highlightPoint = {
|
|
2147
|
-
id:
|
|
2148
|
-
name:
|
|
2152
|
+
id: n,
|
|
2153
|
+
name: o,
|
|
2149
2154
|
fullName: l,
|
|
2150
2155
|
lonlat: s,
|
|
2151
2156
|
pointType: c
|
|
2152
2157
|
}, this.setPointCenter(s);
|
|
2153
2158
|
}
|
|
2154
2159
|
// 获取feature
|
|
2155
|
-
getFeature(t,
|
|
2160
|
+
getFeature(t, n) {
|
|
2156
2161
|
var l;
|
|
2157
|
-
const
|
|
2158
|
-
geometry: new Point(fromLonLat(
|
|
2162
|
+
const o = new Feature({
|
|
2163
|
+
geometry: new Point(fromLonLat(n))
|
|
2159
2164
|
});
|
|
2160
|
-
return
|
|
2165
|
+
return o.set("data", t), o.setStyle(
|
|
2161
2166
|
setPointStyle(((l = this.highlightPoint) == null ? void 0 : l.id) === t.id, t.name, this.options)
|
|
2162
|
-
),
|
|
2167
|
+
), o;
|
|
2163
2168
|
}
|
|
2164
2169
|
/**
|
|
2165
2170
|
*
|
|
@@ -2169,10 +2174,10 @@ class PointMarkerClass {
|
|
|
2169
2174
|
* type 0: 不改变地图大小 1: 等于customZoom 2: 地图当前zoom > 传入的customZoom(缩小地图) 3: 地图当前zoom < 传入的customZoom(放大地图)
|
|
2170
2175
|
* }
|
|
2171
2176
|
*/
|
|
2172
|
-
setPointCenter(t,
|
|
2177
|
+
setPointCenter(t, n = { customZoom: mapZoom.findShip, type: 1 }) {
|
|
2173
2178
|
if (!this.mapInstance) return;
|
|
2174
|
-
const { customZoom:
|
|
2175
|
-
(l === 1 || i >
|
|
2179
|
+
const { customZoom: o = mapZoom.findShip, type: l = 1 } = n, r = this.mapInstance.getView(), i = r.getZoom();
|
|
2180
|
+
(l === 1 || i > o && l === 2 || i < o && l === 3) && r.setZoom(o);
|
|
2176
2181
|
const c = new Point(t);
|
|
2177
2182
|
r.setCenter(transform(c.getCoordinates(), projection.data, projection.mercator));
|
|
2178
2183
|
}
|
|
@@ -2189,10 +2194,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2189
2194
|
logoType: {}
|
|
2190
2195
|
},
|
|
2191
2196
|
emits: ["zoomChanged", "extentChanged"],
|
|
2192
|
-
setup(e, { expose: t, emit:
|
|
2193
|
-
const
|
|
2194
|
-
provide("mapInstance",
|
|
2195
|
-
const l = ref(null), r = ref(null), i = ref(null), c =
|
|
2197
|
+
setup(e, { expose: t, emit: n }) {
|
|
2198
|
+
const o = ref();
|
|
2199
|
+
provide("mapInstance", o);
|
|
2200
|
+
const l = ref(null), r = ref(null), i = ref(null), c = n, s = e, m = ref(s.zoom || mapZoom.default), u = ref(!1), d = ref(!0), f = ref(!0), p = {
|
|
2196
2201
|
tiandituTile: new TileLayer({ source: new XYZ({ url: baseMap.tiandituTile }) }),
|
|
2197
2202
|
tiandituTileMark: new TileLayer({ source: new XYZ({ url: baseMap.tiandituTileMark }) }),
|
|
2198
2203
|
tiandituImgTile: new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTile }), visible: !1 }),
|
|
@@ -2217,7 +2222,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2217
2222
|
// 禁用旋转
|
|
2218
2223
|
multiWorld: !0
|
|
2219
2224
|
};
|
|
2220
|
-
|
|
2225
|
+
o.value = new Map$1({
|
|
2221
2226
|
target: "map",
|
|
2222
2227
|
// 对应页面里 id 为 map 的元素
|
|
2223
2228
|
layers: [
|
|
@@ -2229,7 +2234,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2229
2234
|
p.greenMark
|
|
2230
2235
|
],
|
|
2231
2236
|
view: new View(v)
|
|
2232
|
-
}), h(), (L = r.value) == null || L.setScaleLine(s.vehicleMode === "ship" ? "nautical" : "metric"), (w =
|
|
2237
|
+
}), h(), (L = r.value) == null || L.setScaleLine(s.vehicleMode === "ship" ? "nautical" : "metric"), (w = o.value) == null || w.on("moveend", I), g(v.zoom < mapZoom.shipGreenDotMax), T(s.vehicleMode === "ship" || s.viewMode === "findShip" ? BaseMapType.satellite : BaseMapType.vector), s.viewMode === "findShip" && s.mmsi && s.shipData && nextTick(() => {
|
|
2233
2238
|
findShip(String(s.mmsi), s.shipData);
|
|
2234
2239
|
}), onShipsMarkerHover();
|
|
2235
2240
|
};
|
|
@@ -2237,40 +2242,40 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2237
2242
|
y();
|
|
2238
2243
|
});
|
|
2239
2244
|
const h = () => {
|
|
2240
|
-
|
|
2245
|
+
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));
|
|
2241
2246
|
}, g = (v) => {
|
|
2242
2247
|
var L;
|
|
2243
|
-
s.vehicleMode !== "ship" && (v = !1), (L =
|
|
2248
|
+
s.vehicleMode !== "ship" && (v = !1), (L = o.value) == null || L.getLayers().forEach((w) => {
|
|
2244
2249
|
getUid(w) === getUid(p.greenMark) && (w.setVisible(v), d.value = v);
|
|
2245
2250
|
});
|
|
2246
|
-
}, k = ref(BaseMapType.satellite),
|
|
2251
|
+
}, k = ref(BaseMapType.satellite), T = (v) => {
|
|
2247
2252
|
var L;
|
|
2248
|
-
k.value = v, (L =
|
|
2253
|
+
k.value = v, (L = o.value) == null || L.getLayers().forEach((w) => {
|
|
2249
2254
|
(getUid(w) === getUid(p.tiandituTile) || getUid(w) === getUid(p.tiandituTileMark) || getUid(w) === getUid(p.tiandituImgTile) || getUid(w) === getUid(p.tiandituImgTileMark)) && w.setVisible(!1), (v === BaseMapType.vector && (getUid(w) === getUid(p.tiandituTile) || getUid(w) === getUid(p.tiandituTileMark)) || v === BaseMapType.satellite && (getUid(w) === getUid(p.tiandituImgTile) || getUid(w) === getUid(p.tiandituImgTileMark))) && w.setVisible(!0);
|
|
2250
2255
|
});
|
|
2251
|
-
},
|
|
2252
|
-
const v =
|
|
2256
|
+
}, I = () => {
|
|
2257
|
+
const v = o.value.getView(), L = v.getZoom();
|
|
2253
2258
|
L && x(L);
|
|
2254
|
-
const w = v.calculateExtent(
|
|
2259
|
+
const w = v.calculateExtent(o.value.getSize());
|
|
2255
2260
|
w && L && F(w, L);
|
|
2256
2261
|
}, x = (v) => {
|
|
2257
|
-
var S,
|
|
2262
|
+
var S, M, C, E, V;
|
|
2258
2263
|
m.value = v, g(v < mapZoom.shipGreenDotMax);
|
|
2259
|
-
const L = (S =
|
|
2260
|
-
showTrackLayer.value ? (f.value = !1, w == null || w.setVisible(!1), (
|
|
2264
|
+
const L = (S = o.value) == null ? void 0 : S.getLayers(), w = s.vehicleMode === "ship" ? L == null ? void 0 : L.getArray().find((N) => getUid(N) === getUid(p.greenMark)) : void 0;
|
|
2265
|
+
showTrackLayer.value ? (f.value = !1, w == null || w.setVisible(!1), (M = shipsLayer.value) == null || M.setVisible(!1), (C = largeAmountShipsLayer.value) == null || C.setVisible(!1)) : !u.value && d.value && v <= mapZoom.shipGreenDotMax ? (f.value = !0, w == null || w.setVisible(!0), (E = shipsLayer.value) == null || E.setVisible(!1), (V = largeAmountShipsLayer.value) == null || V.setVisible(!1)) : (f.value = !1, w == null || w.setVisible(!1)), c("zoomChanged", v);
|
|
2261
2266
|
}, F = (v, L) => {
|
|
2262
2267
|
const w = transform([v[0], v[1]], projection.mercator, projection.data), S = transform([v[2], v[3]], projection.mercator, projection.data);
|
|
2263
2268
|
c("extentChanged", { extent: [w, S], zoom: L });
|
|
2264
2269
|
};
|
|
2265
2270
|
return t({
|
|
2266
|
-
mapInstance:
|
|
2271
|
+
mapInstance: o,
|
|
2267
2272
|
initMap: y,
|
|
2268
2273
|
pointRender: (v, L) => new PointMarkerClass(v, L),
|
|
2269
2274
|
renderTrucksMarker,
|
|
2270
2275
|
renderShip: renderShips,
|
|
2271
2276
|
renderTrack: (v, L, w) => {
|
|
2272
|
-
var S,
|
|
2273
|
-
currentTrackId.value = v, showTrackLayer.value = !0, u.value = !0, hiddenAllShips(), (
|
|
2277
|
+
var S, M;
|
|
2278
|
+
currentTrackId.value = v, showTrackLayer.value = !0, u.value = !0, hiddenAllShips(), (M = (S = largeAmountShipsLayer.value) == null ? void 0 : S.getSource()) == null || M.clear(), renderTrack(v, s.vehicleMode === "ship" ? L.reverse() : L, w, LENGTH_UNIT.NM);
|
|
2274
2279
|
},
|
|
2275
2280
|
findTruck,
|
|
2276
2281
|
removeTruckIcon,
|
|
@@ -2288,8 +2293,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2288
2293
|
clearSelectFeature,
|
|
2289
2294
|
findShip,
|
|
2290
2295
|
focusShip: (v, L, w = !0) => {
|
|
2291
|
-
var S,
|
|
2292
|
-
hiddenOrther.value = w, (S = shipsLayer.value) == null || S.setVisible(!w), (
|
|
2296
|
+
var S, M;
|
|
2297
|
+
hiddenOrther.value = w, (S = shipsLayer.value) == null || S.setVisible(!w), (M = largeAmountShipsLayer.value) == null || M.setVisible(!1), findShip(v, L);
|
|
2293
2298
|
},
|
|
2294
2299
|
showTracks,
|
|
2295
2300
|
removeAllTrackLayer,
|
|
@@ -2306,21 +2311,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2306
2311
|
u.value = !0, setMarkerPosition(v);
|
|
2307
2312
|
},
|
|
2308
2313
|
getZoomAndCenter: () => {
|
|
2309
|
-
var
|
|
2310
|
-
const v = (
|
|
2314
|
+
var M;
|
|
2315
|
+
const v = (M = o.value) == null ? void 0 : M.getView();
|
|
2311
2316
|
if (!v) return null;
|
|
2312
2317
|
const L = Math.round(Number(v.getZoom())), { lon: w, lat: S } = transformUtils.mercatorToLonLat(v.getCenter());
|
|
2313
2318
|
return { zoom: L, center: [w, S] };
|
|
2314
2319
|
},
|
|
2315
2320
|
setCenter: (v) => {
|
|
2316
2321
|
var S;
|
|
2317
|
-
const L = (S =
|
|
2322
|
+
const L = (S = o.value) == null ? void 0 : S.getView();
|
|
2318
2323
|
if (!L) return null;
|
|
2319
2324
|
const w = new Point(v);
|
|
2320
2325
|
L.setCenter(transform(w.getCoordinates(), projection.data, projection.mercator));
|
|
2321
2326
|
},
|
|
2322
2327
|
drawPolygonTool,
|
|
2323
2328
|
setMapInstance: h,
|
|
2329
|
+
store: {
|
|
2330
|
+
getShowMeasure: getShowMeasure()
|
|
2331
|
+
},
|
|
2324
2332
|
config: {
|
|
2325
2333
|
mapZoom,
|
|
2326
2334
|
projection
|
|
@@ -2345,7 +2353,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2345
2353
|
"show-track-layer": unref(showTrackLayer),
|
|
2346
2354
|
"map-tile-mode": k.value,
|
|
2347
2355
|
onSwitchGreenDot: g,
|
|
2348
|
-
onSwitchMapTile:
|
|
2356
|
+
onSwitchMapTile: T
|
|
2349
2357
|
}, {
|
|
2350
2358
|
toolPanel: withCtx(() => [
|
|
2351
2359
|
renderSlot(v.$slots, "toolPanel", {}, void 0, !0)
|
|
@@ -2368,7 +2376,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2368
2376
|
}, null, 8, ["type", "map-tile"])
|
|
2369
2377
|
], 512));
|
|
2370
2378
|
}
|
|
2371
|
-
}), Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
2379
|
+
}), Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bb886e27"]]), ZhMap = withInstall(Map);
|
|
2372
2380
|
export {
|
|
2373
2381
|
BaseMapType as B,
|
|
2374
2382
|
CDN_URL as C,
|