zhihao-ui 1.2.38 → 1.2.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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-C5b6b8Iq.js} +757 -751
- 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, i, r, l, c, s, m, d, u, 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 = i, this.name = r, this.length = l, this.breadth = c, this.lon = s, this.lat = m, this.createdAt = d, this.speed = u, this.from = f, this.sailStatus = p, this.hdg = y, this.cog = h, this.posType = g, this.type = k, this.angle = T, this.leftIconColor = I, this.existDevice = x, this.existMobile = F, this.existWaterGauge = P, this.selected = v, this.blinkColors = L;
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
const formatLength = function(e, t) {
|
|
57
|
-
const
|
|
58
|
-
let
|
|
57
|
+
const o = getLength(e);
|
|
58
|
+
let i = "";
|
|
59
59
|
switch (t) {
|
|
60
60
|
case LENGTH_UNIT.M:
|
|
61
|
-
|
|
61
|
+
i = Math.round(o * 100) / 100 + " m";
|
|
62
62
|
break;
|
|
63
63
|
case LENGTH_UNIT.KM:
|
|
64
|
-
|
|
64
|
+
i = Math.round(o / 1e3 * 100) / 100 + " km";
|
|
65
65
|
break;
|
|
66
66
|
case LENGTH_UNIT.NM:
|
|
67
|
-
|
|
67
|
+
i = (Math.round(o / 1e3 * 100) / 100 / 1.852).toFixed(2) + " nm";
|
|
68
68
|
break;
|
|
69
69
|
}
|
|
70
|
-
return
|
|
70
|
+
return i;
|
|
71
71
|
}, convertSixHundredThousandToLatLng = function(e, t) {
|
|
72
|
-
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
|
|
76
|
-
let
|
|
75
|
+
const o = getArea(e);
|
|
76
|
+
let i;
|
|
77
77
|
switch (t) {
|
|
78
78
|
case LENGTH_UNIT.KM:
|
|
79
|
-
|
|
79
|
+
o > 1e4 ? i = Math.round(o / 1e6 * 100) / 100 + " km<sup>2</sup>" : i = Math.round(o * 100) / 100 + " m<sup>2</sup>";
|
|
80
80
|
break;
|
|
81
81
|
case LENGTH_UNIT.NM:
|
|
82
82
|
const r = Math.pow(1.852, 2);
|
|
83
|
-
|
|
83
|
+
o > 1e4 ? i = Math.round(o / 1e6 / r * 100) / 100 + " nm<sup>2</sup>" : i = Math.round(o * 100) / 100 + " m<sup>2</sup>";
|
|
84
84
|
break;
|
|
85
85
|
}
|
|
86
|
-
return
|
|
86
|
+
return i;
|
|
87
87
|
}, convertShipMapData = (e) => {
|
|
88
|
-
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,9 +129,9 @@ 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
|
|
134
|
-
let
|
|
132
|
+
setup(e, { expose: t, emit: n }) {
|
|
133
|
+
const o = inject("mapInstance"), i = n, r = useModel(e, "visible"), l = ref("3"), c = ref([]), s = ref(!1), m = new VectorSource();
|
|
134
|
+
let d, u, f, p, y;
|
|
135
135
|
const h = new VectorLayer({
|
|
136
136
|
source: m,
|
|
137
137
|
style: {
|
|
@@ -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
|
-
|
|
147
|
+
let M = "点击选择起点";
|
|
148
|
+
d && (M = "单击继续,双击结束"), u && (u.innerHTML = M, f.setPosition(S.coordinate), u.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 = u == null ? void 0 : u.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,54 +174,58 @@ 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), u != null && u.parentNode && u.parentNode.removeChild(u), 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
|
-
|
|
205
|
+
d = E.feature;
|
|
201
206
|
let V;
|
|
202
|
-
S = (N =
|
|
207
|
+
S = (N = d.getGeometry()) == null ? void 0 : N.on("change", function(A) {
|
|
203
208
|
const $ = A.target;
|
|
204
|
-
let R = formatUtils.formatLength($, Number(
|
|
209
|
+
let R = formatUtils.formatLength($, Number(l.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");
|
|
213
218
|
A && L(Number(A));
|
|
214
|
-
}), y.setOffset([0, -7]),
|
|
219
|
+
}), y.setOffset([0, -7]), d = null, p = null, v(), S && unByKey(S);
|
|
215
220
|
});
|
|
216
221
|
}
|
|
217
222
|
function P() {
|
|
218
223
|
var S;
|
|
219
|
-
|
|
220
|
-
element:
|
|
224
|
+
u != null && u.parentNode && u.parentNode.removeChild(u), u = document.createElement("div"), u.className = "ol-tooltip hidden", f = new Overlay({
|
|
225
|
+
element: u,
|
|
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,37 +235,37 @@ 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
|
+
i("close");
|
|
244
249
|
};
|
|
245
250
|
return watch(() => r, () => {
|
|
246
251
|
r.value && !s.value && (k(), F());
|
|
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
|
-
modelValue:
|
|
263
|
-
"onUpdate:modelValue":
|
|
267
|
+
modelValue: l.value,
|
|
268
|
+
"onUpdate:modelValue": M[0] || (M[0] = (C) => l.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,39 +333,39 @@ const formatLength = function(e, t) {
|
|
|
328
333
|
padding: [2, 2, 2, 2]
|
|
329
334
|
// 设置文本背景的内边距
|
|
330
335
|
})
|
|
331
|
-
}), renderMarker = (e, t = !0,
|
|
332
|
-
var
|
|
336
|
+
}), renderMarker = (e, t = !0, n = !0) => {
|
|
337
|
+
var d;
|
|
333
338
|
if (!mapInstance$8.value || !e || e.split(",").length !== 2) return;
|
|
334
|
-
const [
|
|
339
|
+
const [o, i] = e.split(",").map(Number);
|
|
335
340
|
marker.value = new Feature({
|
|
336
|
-
geometry: new Point(fromLonLat([
|
|
341
|
+
geometry: new Point(fromLonLat([o, i]))
|
|
337
342
|
});
|
|
338
|
-
const r =
|
|
339
|
-
(
|
|
340
|
-
const
|
|
343
|
+
const r = n ? `${o}, ${i}` : "";
|
|
344
|
+
(d = marker.value) == null || d.setStyle(createIconStyle(r));
|
|
345
|
+
const l = new VectorSource({
|
|
341
346
|
features: [marker.value]
|
|
342
347
|
}), c = new VectorLayer({
|
|
343
|
-
source:
|
|
348
|
+
source: l
|
|
344
349
|
}), s = mapInstance$8.value.getView();
|
|
345
350
|
if (mapInstance$8.value.addLayer(c), t) {
|
|
346
|
-
const
|
|
351
|
+
const u = new Translate({
|
|
347
352
|
layers: [c]
|
|
348
353
|
});
|
|
349
|
-
|
|
354
|
+
u.on("translating", function(f) {
|
|
350
355
|
var h;
|
|
351
356
|
const p = f.features.item(0).getGeometry().getCoordinates(), y = toLonLat(p);
|
|
352
357
|
markerPosition.value = `${y[0].toFixed(6)}, ${y[1].toFixed(6)}`, (h = marker.value) == null || h.setStyle(createIconStyle(markerPosition.value));
|
|
353
|
-
}), mapInstance$8.value.addInteraction(
|
|
358
|
+
}), mapInstance$8.value.addInteraction(u);
|
|
354
359
|
}
|
|
355
|
-
const m = new Point([
|
|
360
|
+
const m = new Point([o, i]);
|
|
356
361
|
s.setCenter(transform(m.getCoordinates(), projection.data, projection.mercator)), s.setZoom(mapZoom.findShip);
|
|
357
362
|
}, setMarkerPosition = (e) => {
|
|
358
|
-
var
|
|
363
|
+
var i, r;
|
|
359
364
|
if (!mapInstance$8.value) return;
|
|
360
|
-
const t = mapInstance$8.value.getView(),
|
|
361
|
-
(r = (
|
|
362
|
-
const
|
|
363
|
-
t.setCenter(transform(
|
|
365
|
+
const t = mapInstance$8.value.getView(), n = e.split(",").map(Number);
|
|
366
|
+
(r = (i = marker.value) == null ? void 0 : i.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,46 +429,46 @@ const multiplyPixelRatio = (e) => {
|
|
|
424
429
|
offsetY: -14
|
|
425
430
|
}),
|
|
426
431
|
zIndex: 100
|
|
427
|
-
}), getRotation = (e, t,
|
|
428
|
-
function
|
|
429
|
-
return 180 * (
|
|
432
|
+
}), getRotation = (e, t, n) => {
|
|
433
|
+
function o(u) {
|
|
434
|
+
return 180 * (u % (2 * Math.PI)) / Math.PI;
|
|
430
435
|
}
|
|
431
|
-
function
|
|
432
|
-
return
|
|
436
|
+
function i(u) {
|
|
437
|
+
return u % 360 * Math.PI / 180;
|
|
433
438
|
}
|
|
434
|
-
function r(
|
|
435
|
-
if (!
|
|
436
|
-
if (!Array.isArray(
|
|
437
|
-
if (
|
|
438
|
-
return
|
|
439
|
-
if (
|
|
439
|
+
function r(u) {
|
|
440
|
+
if (!u) throw new Error("Coordinate is required");
|
|
441
|
+
if (!Array.isArray(u)) {
|
|
442
|
+
if (u.type === "Feature" && u.geometry !== null && u.geometry.type === "Point")
|
|
443
|
+
return u.geometry.coordinates;
|
|
444
|
+
if (u.type === "Point") return u.coordinates;
|
|
440
445
|
}
|
|
441
|
-
if (Array.isArray(
|
|
442
|
-
return
|
|
446
|
+
if (Array.isArray(u) && u.length >= 2 && !Array.isArray(u[0]) && !Array.isArray(u[1]))
|
|
447
|
+
return u;
|
|
443
448
|
throw new Error(
|
|
444
449
|
"Coordinate must be GeoJSON Point or an Array of numbers"
|
|
445
450
|
);
|
|
446
451
|
}
|
|
447
|
-
function
|
|
452
|
+
function l(u, f, p = {}) {
|
|
448
453
|
if (p.final)
|
|
449
454
|
return function(P, v) {
|
|
450
|
-
return (
|
|
451
|
-
}(
|
|
452
|
-
const y = r(
|
|
453
|
-
return
|
|
455
|
+
return (l(v, P) + 180) % 360;
|
|
456
|
+
}(u, f);
|
|
457
|
+
const y = r(u), h = r(f), g = i(y[0]), k = i(h[0]), T = i(y[1]), I = i(h[1]), x = Math.sin(k - g) * Math.cos(I), F = Math.cos(T) * Math.sin(I) - Math.sin(T) * Math.cos(I) * Math.cos(k - g);
|
|
458
|
+
return o(Math.atan2(x, F));
|
|
454
459
|
}
|
|
455
|
-
function c(
|
|
456
|
-
return !isNaN(
|
|
460
|
+
function c(u) {
|
|
461
|
+
return !isNaN(u) && u !== null && !Array.isArray(u);
|
|
457
462
|
}
|
|
458
|
-
function s(
|
|
459
|
-
return
|
|
463
|
+
function s(u, f = {}, p = {}) {
|
|
464
|
+
return u || console.log("Coordinates are required"), Array.isArray(u) || console.log("Coordinates must be an Array"), u.length < 2 && console.log("Coordinates must be at least 2 numbers long"), (!c(u[0]) || !c(u[1])) && console.log("Coordinates must contain numbers"), m({ type: "Point", coordinates: u }, f, p);
|
|
460
465
|
}
|
|
461
|
-
function m(
|
|
466
|
+
function m(u, f = {}, p = {}) {
|
|
462
467
|
const y = { type: "Feature" };
|
|
463
|
-
return p.id !== void 0 && (y.id = p.id), p.bbox && (y.bbox = p.bbox), y.properties = f || {}, y.geometry =
|
|
468
|
+
return p.id !== void 0 && (y.id = p.id), p.bbox && (y.bbox = p.bbox), y.properties = f || {}, y.geometry = u, y;
|
|
464
469
|
}
|
|
465
|
-
const
|
|
466
|
-
return
|
|
470
|
+
const d = l(s(e), s(t), n);
|
|
471
|
+
return d < 0 ? 360 + d : d;
|
|
467
472
|
}, triangleModel = multiplyPixelRatio([
|
|
468
473
|
[0, -8],
|
|
469
474
|
[5, 8],
|
|
@@ -533,86 +538,84 @@ 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
|
|
541
|
+
renderer: (n, o) => {
|
|
542
|
+
n = n;
|
|
543
|
+
const i = 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(
|
|
543
|
-
c && (drawHeading(
|
|
544
|
-
drawSelectBounds(l, c);
|
|
545
|
-
}, 50)), drawShipLabel(l, r, o);
|
|
547
|
+
const c = drawShipBody(i, r, n, t);
|
|
548
|
+
c && (drawHeading(i, r, c, t), r.selected = e, e && drawSelectBounds(i, c)), drawShipLabel(i, r, n);
|
|
546
549
|
} catch {
|
|
547
550
|
return !1;
|
|
548
551
|
}
|
|
549
552
|
}
|
|
550
|
-
}), drawShipBody = (e, t,
|
|
553
|
+
}), drawShipBody = (e, t, n, o) => {
|
|
551
554
|
if (!mapInstance$7.value) return;
|
|
552
|
-
const
|
|
553
|
-
if (!
|
|
555
|
+
const i = Math.round(Number(mapInstance$7.value.getView().getZoom()));
|
|
556
|
+
if (!i) return;
|
|
554
557
|
let r = [];
|
|
555
|
-
const [
|
|
556
|
-
if (
|
|
557
|
-
r = rotateShapeModel(drawCurrentShipShapeModel(t,
|
|
558
|
-
const [f, p] =
|
|
558
|
+
const [l, c] = drawShipModelByZoom[i] || [0, 0], [s, m] = n;
|
|
559
|
+
if (i <= mapZoom.shipModelMax && i > mapZoom.shipModelMin && t.length >= l && t.breadth >= c)
|
|
560
|
+
r = rotateShapeModel(drawCurrentShipShapeModel(t, i), t.angle).map((u) => {
|
|
561
|
+
const [f, p] = u;
|
|
559
562
|
return [s + f, m + p];
|
|
560
563
|
});
|
|
561
564
|
else {
|
|
562
|
-
const
|
|
563
|
-
|
|
564
|
-
const [f, p] =
|
|
565
|
+
const d = rotateShapeModel(triangleModel, t.angle);
|
|
566
|
+
n.length === 2 && (r = d.map((u) => {
|
|
567
|
+
const [f, p] = u;
|
|
565
568
|
return [s + f, m + p];
|
|
566
569
|
}));
|
|
567
570
|
}
|
|
568
571
|
if (!(r.length > 2)) return !1;
|
|
569
572
|
if (t != null && t.length) {
|
|
570
|
-
const
|
|
573
|
+
const d = r.length === 3 ? 30 : t.length * 0.4;
|
|
571
574
|
e.beginPath(), e.arc(
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
+
n[0],
|
|
576
|
+
n[1],
|
|
577
|
+
d,
|
|
575
578
|
0,
|
|
576
579
|
2 * Math.PI
|
|
577
580
|
), e.fillStyle = "rgba(255, 255, 255, 0.001)", e.fill();
|
|
578
581
|
}
|
|
579
582
|
e.save(), e.beginPath(), e.moveTo(r[0][0], r[0][1]);
|
|
580
|
-
for (let
|
|
581
|
-
e.lineTo(r[
|
|
582
|
-
return e.closePath(), e.strokeStyle =
|
|
583
|
-
}, drawHeading = (e, t,
|
|
584
|
-
const [
|
|
585
|
-
if (
|
|
586
|
-
const c =
|
|
587
|
-
const [m,
|
|
588
|
-
return [m +
|
|
583
|
+
for (let d = 1; d < r.length; d++)
|
|
584
|
+
e.lineTo(r[d][0], r[d][1]);
|
|
585
|
+
return e.closePath(), e.strokeStyle = o ? "#ff0000" : "#000", e.lineWidth = o ? 2 : 1, e.stroke(), e.fillStyle = t.fill, e.fill(), e.restore(), r;
|
|
586
|
+
}, drawHeading = (e, t, n, o) => {
|
|
587
|
+
const [i, r] = n[0], l = getShipDirectPath(t);
|
|
588
|
+
if (l) {
|
|
589
|
+
const c = l.map(function(s) {
|
|
590
|
+
const [m, d] = s;
|
|
591
|
+
return [m + i, d + r];
|
|
589
592
|
});
|
|
590
593
|
if (e.save(), e.beginPath(), t.angle > 0) {
|
|
591
|
-
e.translate(
|
|
594
|
+
e.translate(i, r);
|
|
592
595
|
const s = t.angle * Math.PI / 180;
|
|
593
|
-
e.rotate(s), e.translate(-
|
|
596
|
+
e.rotate(s), e.translate(-i, -r);
|
|
594
597
|
}
|
|
595
|
-
e.moveTo(
|
|
598
|
+
e.moveTo(i, r);
|
|
596
599
|
for (let s = 1; s < c.length; s++) {
|
|
597
|
-
const [m,
|
|
598
|
-
e.lineTo(m,
|
|
600
|
+
const [m, d] = c[s];
|
|
601
|
+
e.lineTo(m, d);
|
|
599
602
|
}
|
|
600
|
-
e.strokeStyle =
|
|
603
|
+
e.strokeStyle = o ? "#ff0000" : "#000", e.lineWidth = o ? 2 : 1, e.stroke(), e.restore();
|
|
601
604
|
}
|
|
602
605
|
}, drawSelectBounds = (e, t) => {
|
|
603
|
-
let [
|
|
604
|
-
const
|
|
605
|
-
|
|
606
|
-
const
|
|
607
|
-
e.beginPath(), e.moveTo(
|
|
608
|
-
}, drawShipLabel = (e, t,
|
|
609
|
-
if (!t.selected && shipLabels.value.find((
|
|
610
|
-
const [
|
|
606
|
+
let [n, o, i, r] = getPixelFromCoordinate(t);
|
|
607
|
+
const l = window.devicePixelRatio || 1, c = 4;
|
|
608
|
+
n -= c, o -= c, i += c, r += c, e.save(), e.strokeStyle = "#ff0000", e.lineWidth = 4 * l;
|
|
609
|
+
const s = 8 * l;
|
|
610
|
+
e.beginPath(), e.moveTo(n + s, r), e.lineTo(n, r), e.lineTo(n, r - s), e.moveTo(n, o + s), e.lineTo(n, o), e.lineTo(n + s, o), e.moveTo(i - s, o), e.lineTo(i, o), e.lineTo(i, o + s), e.moveTo(i, r - s), e.lineTo(i, r), e.lineTo(i - s, r), e.stroke(), e.restore();
|
|
611
|
+
}, drawShipLabel = (e, t, n) => {
|
|
612
|
+
if (!t.selected && shipLabels.value.find((u) => u.name === t.name)) return;
|
|
613
|
+
const [o, i] = n, r = o, l = i, c = t.name;
|
|
611
614
|
let s;
|
|
612
615
|
t.leftIconColor && (s = { color: t.leftIconColor, icon: "" });
|
|
613
|
-
const m = getShipCustomIcon(t),
|
|
616
|
+
const m = getShipCustomIcon(t), d = {
|
|
614
617
|
id: t.id,
|
|
615
|
-
center: [r,
|
|
618
|
+
center: [r, l],
|
|
616
619
|
text: c,
|
|
617
620
|
fill: t.fill,
|
|
618
621
|
color: "#fff",
|
|
@@ -624,21 +627,21 @@ const multiplyPixelRatio = (e) => {
|
|
|
624
627
|
blinkColors: t.blinkColors,
|
|
625
628
|
type: "ShipName"
|
|
626
629
|
};
|
|
627
|
-
drawLabel(e,
|
|
630
|
+
drawLabel(e, d, shipLabels.value);
|
|
628
631
|
}, drawCurrentShipShapeModel = (e, t) => {
|
|
629
|
-
let
|
|
630
|
-
t <= 14 ?
|
|
631
|
-
const
|
|
632
|
+
let n = 0;
|
|
633
|
+
t <= 14 ? n = 0.058 : t === 15 ? n = 0.12 : t === 16 ? n = 0.22 : t === 17 ? n = 0.435 : t === 18 && (n = 0.857);
|
|
634
|
+
const o = e.length / 4 * n, i = e.breadth * n;
|
|
632
635
|
let r = cloneDeep(shipShapeModel);
|
|
633
|
-
return r = r.map(([
|
|
636
|
+
return r = r.map(([l, c]) => [l * i, c * o]), r;
|
|
634
637
|
}, getShipDirectPath = (e) => {
|
|
635
|
-
const { speed: t, hdg:
|
|
636
|
-
let
|
|
637
|
-
if (t && t > 1 && (
|
|
638
|
-
for (let
|
|
639
|
-
const c = speedCondition[
|
|
638
|
+
const { speed: t, hdg: n, cog: o } = e;
|
|
639
|
+
let i = "", r = null;
|
|
640
|
+
if (t && t > 1 && (n !== null && n != 511 && o !== null ? o - n >= 3 ? i = "left" : o - n <= -3 ? i = "right" : i = "front" : i = "front", i && t))
|
|
641
|
+
for (let l = 0; l < speedCondition.length; l++) {
|
|
642
|
+
const c = speedCondition[l];
|
|
640
643
|
if (t >= c[0] && t < c[1]) {
|
|
641
|
-
r = shipDirectPath[
|
|
644
|
+
r = shipDirectPath[i][l];
|
|
642
645
|
break;
|
|
643
646
|
}
|
|
644
647
|
}
|
|
@@ -651,23 +654,23 @@ let shipsMarkerList = [], shipsVectorSource, largeAmountShipsSource;
|
|
|
651
654
|
const selectedShipData = ref(null), selectedShips = ref([]);
|
|
652
655
|
let selectShipsVectorSource;
|
|
653
656
|
const renderShips = (e) => {
|
|
654
|
-
var
|
|
657
|
+
var n, o, i, r;
|
|
655
658
|
if (!mapInstance$6.value || showTrackLayer.value) return;
|
|
656
659
|
const t = Math.round(Number(mapInstance$6.value.getView().getZoom()));
|
|
657
660
|
if (selectedShipData.value && nextTick(() => {
|
|
658
661
|
selectSingleShipMarker(selectedShipData.value);
|
|
659
|
-
}).then((
|
|
662
|
+
}).then((l) => {
|
|
660
663
|
}), !(!t || t < mapZoom.shipGreenDotMax) && (allShips.value = [...e, ...selectedShips.value], !hiddenOrther.value))
|
|
661
|
-
return t >= mapZoom.shipGreenDotMax && t < mapZoom.shipModelMin ? ((
|
|
664
|
+
return t >= mapZoom.shipGreenDotMax && t < mapZoom.shipModelMin ? ((n = shipsLayer.value) == null || n.setVisible(!1), (o = largeAmountShipsLayer.value) == null || o.setVisible(!0), renderLargeAmountShips(allShips.value)) : ((i = largeAmountShipsLayer.value) == null || i.setVisible(!1), (r = shipsLayer.value) == null || r.setVisible(!0), renderShipsMarker(allShips.value));
|
|
662
665
|
}, renderLargeAmountShips = (e) => {
|
|
663
666
|
if (!mapInstance$6.value) return;
|
|
664
|
-
const t = e.map((
|
|
667
|
+
const t = e.map((n) => ({
|
|
665
668
|
type: "Feature",
|
|
666
669
|
geometry: {
|
|
667
670
|
type: "Point",
|
|
668
|
-
coordinates: [
|
|
671
|
+
coordinates: [n.lon, n.lat]
|
|
669
672
|
},
|
|
670
|
-
properties:
|
|
673
|
+
properties: n
|
|
671
674
|
}));
|
|
672
675
|
return largeAmountShipsSource == null || largeAmountShipsSource.clear(), largeAmountShipsSource = new VectorSource({
|
|
673
676
|
features: new GeoJSON().readFeatures({
|
|
@@ -708,52 +711,52 @@ const renderShips = (e) => {
|
|
|
708
711
|
}
|
|
709
712
|
}), mapInstance$6.value.addLayer(largeAmountShipsLayer.value), largeAmountShipsLayer.value;
|
|
710
713
|
}, renderShipsMarker = (e) => {
|
|
711
|
-
var
|
|
714
|
+
var n;
|
|
712
715
|
if (!mapInstance$6.value) return;
|
|
713
716
|
deleteAllShipMarkers();
|
|
714
717
|
let t = convertShipMapData(e);
|
|
715
718
|
if (t = customFilterShips(t), !!(t != null && t.length))
|
|
716
|
-
return t.forEach((
|
|
717
|
-
const r = [
|
|
719
|
+
return t.forEach((o, i) => {
|
|
720
|
+
const r = [o.lon, o.lat], l = new Feature({
|
|
718
721
|
geometry: new Point(fromLonLat(r))
|
|
719
722
|
}), c = 1;
|
|
720
|
-
|
|
723
|
+
l.set("clickGeometry", new Circle(fromLonLat(r), c)), l.set("data", o), l.set("index", i), l.setStyle(
|
|
721
724
|
setShipStyle(!1)
|
|
722
725
|
), shipsMarkerList.push({
|
|
723
|
-
ship:
|
|
726
|
+
ship: o,
|
|
724
727
|
lonlat: r,
|
|
725
|
-
feature:
|
|
728
|
+
feature: l
|
|
726
729
|
});
|
|
727
730
|
}), shipsVectorSource = new VectorSource({
|
|
728
|
-
features: shipsMarkerList.map((
|
|
731
|
+
features: shipsMarkerList.map((o) => o.feature)
|
|
729
732
|
}), shipsLayer.value = new VectorLayer({
|
|
730
733
|
source: shipsVectorSource,
|
|
731
734
|
zIndex: 100
|
|
732
|
-
}), (
|
|
735
|
+
}), (n = mapInstance$6.value) == null || n.addLayer(shipsLayer.value), shipsLayer.value;
|
|
733
736
|
}, onShipsMarkerHover = () => {
|
|
734
|
-
var
|
|
737
|
+
var o;
|
|
735
738
|
let e = null, t = 0;
|
|
736
|
-
const
|
|
737
|
-
(
|
|
738
|
-
var s, m;
|
|
739
|
+
const n = 100;
|
|
740
|
+
(o = mapInstance$6.value) == null || o.on("pointermove", function(i) {
|
|
741
|
+
var s, m, d, u;
|
|
739
742
|
const r = Date.now();
|
|
740
|
-
if (r - t <
|
|
743
|
+
if (r - t < n)
|
|
741
744
|
return;
|
|
742
745
|
t = r;
|
|
743
|
-
const
|
|
744
|
-
if (c && (c.style.cursor =
|
|
746
|
+
const l = (s = mapInstance$6.value) == null ? void 0 : s.forEachFeatureAtPixel(i.pixel, (f) => f), c = (m = mapInstance$6.value) == null ? void 0 : m.getTargetElement();
|
|
747
|
+
if (c && (c.style.cursor = l ? "pointer" : ""), e !== l) {
|
|
745
748
|
if (e) {
|
|
746
|
-
const
|
|
747
|
-
if (!(
|
|
749
|
+
const f = e.get("data");
|
|
750
|
+
if (!(f != null && f.mmsi)) return;
|
|
748
751
|
e.setStyle(
|
|
749
|
-
setShipStyle(
|
|
752
|
+
setShipStyle(((d = selectedShipData.value) == null ? void 0 : d.id) === f.id, !1)
|
|
750
753
|
);
|
|
751
754
|
}
|
|
752
|
-
if (
|
|
753
|
-
const
|
|
754
|
-
if (!(
|
|
755
|
-
e =
|
|
756
|
-
setShipStyle(
|
|
755
|
+
if (l) {
|
|
756
|
+
const f = l.get("data");
|
|
757
|
+
if (!(f != null && f.mmsi)) return;
|
|
758
|
+
e = l, l.setStyle(
|
|
759
|
+
setShipStyle(((u = selectedShipData.value) == null ? void 0 : u.id) === f.id, !0)
|
|
757
760
|
);
|
|
758
761
|
} else
|
|
759
762
|
e = null;
|
|
@@ -761,10 +764,10 @@ const renderShips = (e) => {
|
|
|
761
764
|
});
|
|
762
765
|
}, customFilterShips = (e) => {
|
|
763
766
|
let t = cloneDeep(e);
|
|
764
|
-
return t = t.filter((
|
|
765
|
-
var
|
|
766
|
-
const
|
|
767
|
-
return (switchBtnShow.value.camera || switchBtnShow.value.mobile || switchBtnShow.value.waterGauge) && ((
|
|
767
|
+
return t = t.filter((n) => {
|
|
768
|
+
var i;
|
|
769
|
+
const o = getFilterItem(n).every(({ btnShow: r, value: l }) => r ? !!l : !0);
|
|
770
|
+
return (switchBtnShow.value.camera || switchBtnShow.value.mobile || switchBtnShow.value.waterGauge) && ((i = selectedShipData.value) == null ? void 0 : i.id) === n.id && clearSelectFeature(), o;
|
|
768
771
|
}), t;
|
|
769
772
|
}, getFilterItem = (e) => [
|
|
770
773
|
{ btnShow: switchBtnShow.value.camera, value: e == null ? void 0 : e.existDevice },
|
|
@@ -779,36 +782,36 @@ const renderShips = (e) => {
|
|
|
779
782
|
if (!mapInstance$6.value) return;
|
|
780
783
|
const t = cloneDeep(selectSingleShipData.value);
|
|
781
784
|
selectSingleShipData.value = convertShipMapData(e);
|
|
782
|
-
const
|
|
783
|
-
geometry: new Point(fromLonLat(
|
|
785
|
+
const n = [selectSingleShipData.value.lon, selectSingleShipData.value.lat], o = new Feature({
|
|
786
|
+
geometry: new Point(fromLonLat(n))
|
|
784
787
|
});
|
|
785
|
-
|
|
788
|
+
o.set("data", selectSingleShipData.value), o.setStyle(
|
|
786
789
|
setShipStyle(!0)
|
|
787
790
|
), shipsMarkerList.push({
|
|
788
791
|
ship: selectSingleShipData.value,
|
|
789
|
-
lonlat:
|
|
790
|
-
feature:
|
|
792
|
+
lonlat: n,
|
|
793
|
+
feature: o
|
|
791
794
|
}), selectShipsVectorSource == null || selectShipsVectorSource.clear(), selectShipsVectorSource = new VectorSource({
|
|
792
|
-
features: [
|
|
795
|
+
features: [o]
|
|
793
796
|
}), selectShipsLayer.value = new VectorLayer({
|
|
794
797
|
source: selectShipsVectorSource
|
|
795
798
|
}), shipsVectorSource && setVisibleFeatureById(shipsVectorSource, selectSingleShipData.value.id, !0);
|
|
796
|
-
const
|
|
797
|
-
return
|
|
798
|
-
}, setVisibleFeatureById = (e, t,
|
|
799
|
-
e && e.forEachFeature((
|
|
800
|
-
const
|
|
801
|
-
|
|
799
|
+
const i = (r = shipsLayer.value) == null ? void 0 : r.getSource();
|
|
800
|
+
return i && (t && setVisibleFeatureById(i, t.id, !0), setVisibleFeatureById(i, selectSingleShipData.value.id, !1)), mapInstance$6.value.addLayer(selectShipsLayer.value), selectShipsLayer.value.setVisible(!0), selectShipsLayer.value;
|
|
801
|
+
}, setVisibleFeatureById = (e, t, n) => {
|
|
802
|
+
e && e.forEachFeature((o) => {
|
|
803
|
+
const i = o.get("data");
|
|
804
|
+
i && i.id === t && o.setStyle(n ? setShipStyle(!1, i.id) : setBlankStyle());
|
|
802
805
|
});
|
|
803
|
-
}, findShip = (e, t,
|
|
804
|
-
var
|
|
806
|
+
}, findShip = (e, t, n = !0) => {
|
|
807
|
+
var i, r, l, c, s;
|
|
805
808
|
if (!e || !mapInstance$6.value) return;
|
|
806
|
-
const
|
|
807
|
-
var
|
|
808
|
-
return ((
|
|
809
|
+
const o = (l = (r = (i = shipsLayer.value) == null ? void 0 : i.getSource()) == null ? void 0 : r.getFeatures()) == null ? void 0 : l.find((m) => {
|
|
810
|
+
var d;
|
|
811
|
+
return ((d = m.get("data")) == null ? void 0 : d.id) === e;
|
|
809
812
|
});
|
|
810
|
-
if (
|
|
811
|
-
selectedShipData.value =
|
|
813
|
+
if (o)
|
|
814
|
+
selectedShipData.value = o.get("data");
|
|
812
815
|
else if (t)
|
|
813
816
|
selectedShipData.value = t;
|
|
814
817
|
else {
|
|
@@ -816,17 +819,17 @@ const renderShips = (e) => {
|
|
|
816
819
|
return;
|
|
817
820
|
}
|
|
818
821
|
if (selectedShips.value.some((m) => {
|
|
819
|
-
var
|
|
820
|
-
return m.id === ((
|
|
821
|
-
}) || selectedShips.value.push(selectedShipData.value),
|
|
822
|
-
const m = mapInstance$6.value.getView(),
|
|
823
|
-
m.setCenter(transform(
|
|
824
|
-
const
|
|
822
|
+
var d;
|
|
823
|
+
return m.id === ((d = selectedShipData.value) == null ? void 0 : d.id);
|
|
824
|
+
}) || selectedShips.value.push(selectedShipData.value), n && ((c = selectedShipData.value) != null && c.lon) && ((s = selectedShipData.value) != null && s.lat)) {
|
|
825
|
+
const m = mapInstance$6.value.getView(), d = new Point([selectedShipData.value.lon, selectedShipData.value.lat]);
|
|
826
|
+
m.setCenter(transform(d.getCoordinates(), projection.data, projection.mercator));
|
|
827
|
+
const u = m.getZoom(), f = u < mapZoom.findShipMin ? mapZoom.findShip : u;
|
|
825
828
|
m.setZoom(f);
|
|
826
829
|
}
|
|
827
830
|
return setTimeout(() => {
|
|
828
831
|
t && selectSingleShipMarker(t);
|
|
829
|
-
}, 50),
|
|
832
|
+
}, 50), o;
|
|
830
833
|
}, clearSelectFeature = () => {
|
|
831
834
|
var e;
|
|
832
835
|
if (selectedShipData.value && shipsVectorSource && selectSingleShipData.value) {
|
|
@@ -851,141 +854,141 @@ const renderShips = (e) => {
|
|
|
851
854
|
switchBtnShow.value[e] = t, renderShips(allShips.value);
|
|
852
855
|
}, rerenderShip = () => {
|
|
853
856
|
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 +
|
|
857
|
+
}, labelAlpha = 0.8, pixelRatio = window.devicePixelRatio || 1, labelFont = `500 ${12 * pixelRatio}px Arial`, labelOutSize = 2 * pixelRatio, labelHeight = 10 * pixelRatio, fillRectRadius = (e, t, n, o, i, r, l = 4) => {
|
|
858
|
+
e.beginPath(), e.moveTo(t + l, n), e.arcTo(t + o, n, t + o, n + l, l), e.arcTo(t + o, n + i, t + o - l, n + i, l), e.arcTo(t, n + i, t, n + i - l, l), e.arcTo(t, n, t + l, n, l), e.closePath(), e.fillStyle = r, e.fill();
|
|
856
859
|
}, getPixelFromCoordinate = (e) => {
|
|
857
860
|
if (!e || e.length === 0)
|
|
858
861
|
throw new Error("Points array is empty or invalid.");
|
|
859
|
-
let t = 1 / 0,
|
|
860
|
-
for (const [r,
|
|
861
|
-
r < t && (t = r),
|
|
862
|
-
return [t,
|
|
862
|
+
let t = 1 / 0, n = 1 / 0, o = -1 / 0, i = -1 / 0;
|
|
863
|
+
for (const [r, l] of e)
|
|
864
|
+
r < t && (t = r), l < n && (n = l), r > o && (o = r), l > i && (i = l);
|
|
865
|
+
return [t, n, o, i];
|
|
863
866
|
}, calculatePolygonCentroid = (e) => {
|
|
864
867
|
if (!Array.isArray(e) || e.length < 3)
|
|
865
868
|
throw new Error("A polygon must have at least 3 coordinates.");
|
|
866
|
-
let t = 0,
|
|
867
|
-
const
|
|
868
|
-
for (let c = 0; c <
|
|
869
|
-
const [s, m] = e[c], [
|
|
870
|
-
|
|
869
|
+
let t = 0, n = 0, o = 0;
|
|
870
|
+
const i = e.length;
|
|
871
|
+
for (let c = 0; c < i - 1; c++) {
|
|
872
|
+
const [s, m] = e[c], [d, u] = e[c + 1], f = s * u - d * m;
|
|
873
|
+
o += f, t += (s + d) * f, n += (m + u) * f;
|
|
871
874
|
}
|
|
872
|
-
if (
|
|
875
|
+
if (o *= 0.5, o === 0)
|
|
873
876
|
throw new Error("多边形面积为零");
|
|
874
|
-
const r = t / (6 *
|
|
875
|
-
return [r,
|
|
877
|
+
const r = t / (6 * o), l = n / (6 * o);
|
|
878
|
+
return [r, l];
|
|
876
879
|
}, rotateShapeModel = (e, t) => {
|
|
877
|
-
const [
|
|
880
|
+
const [n, o] = calculatePolygonCentroid(e), i = t * Math.PI / 180, r = Math.cos(i), l = Math.sin(i);
|
|
878
881
|
return e.map(([c, s]) => {
|
|
879
|
-
const m = c -
|
|
880
|
-
return [
|
|
882
|
+
const m = c - n, d = s - o, u = m * r - d * l + n, f = m * l + d * r + o;
|
|
883
|
+
return [u, f];
|
|
881
884
|
});
|
|
882
885
|
}, getTopLeftPoint = (e) => [e[0], e[3]], getBottomLeftPoint = (e) => [e[2], e[3]], getBottomRightPoint = (e) => [e[2], e[1]], getTopRighttPoint = (e) => [e[0], e[1]];
|
|
883
|
-
function calculateBounds(e, t,
|
|
884
|
-
let r,
|
|
885
|
-
const m = e[0],
|
|
886
|
+
function calculateBounds(e, t, n, o, i) {
|
|
887
|
+
let r, l, c, s;
|
|
888
|
+
const m = e[0], d = e[1];
|
|
886
889
|
switch (t) {
|
|
887
890
|
case 0:
|
|
888
|
-
r = m +
|
|
891
|
+
r = m + i, l = r + n, s = d - i, c = s - o;
|
|
889
892
|
break;
|
|
890
893
|
case 1:
|
|
891
|
-
r = m +
|
|
894
|
+
r = m + i, l = r + n, s = d + o / 2, c = s - o;
|
|
892
895
|
break;
|
|
893
896
|
case 2:
|
|
894
|
-
r = m +
|
|
897
|
+
r = m + i, l = r + n, s = d + i + o, c = s - o;
|
|
895
898
|
break;
|
|
896
899
|
case 3:
|
|
897
|
-
r = m -
|
|
900
|
+
r = m - n / 2, l = r + n, s = d + i + o, c = s - o;
|
|
898
901
|
break;
|
|
899
902
|
case 4:
|
|
900
|
-
|
|
903
|
+
l = m, r = l - n, s = d + i + o, c = s - o;
|
|
901
904
|
break;
|
|
902
905
|
case 5:
|
|
903
|
-
|
|
906
|
+
l = m - i, r = l - n, s = d + o / 2, c = s - o;
|
|
904
907
|
break;
|
|
905
908
|
case 6:
|
|
906
|
-
|
|
909
|
+
l = m, r = l - n, s = d - i, c = s - o;
|
|
907
910
|
break;
|
|
908
911
|
case 7:
|
|
909
|
-
r = m -
|
|
912
|
+
r = m - n / 2, l = r + n, s = d - i, c = s - o;
|
|
910
913
|
}
|
|
911
|
-
if (!(!r || !c || !
|
|
912
|
-
return [Math.min(r,
|
|
914
|
+
if (!(!r || !c || !l || !s))
|
|
915
|
+
return [Math.min(r, l), Math.min(c, s), Math.max(r, l), Math.max(c, s) + 1];
|
|
913
916
|
}
|
|
914
|
-
function calculateAnchorPoint(e, t,
|
|
917
|
+
function calculateAnchorPoint(e, t, n = 70, o = 20, i = 20) {
|
|
915
918
|
const r = [0, 0];
|
|
916
919
|
switch (t) {
|
|
917
920
|
case 0:
|
|
918
|
-
r[0] = e[0] +
|
|
921
|
+
r[0] = e[0] + i, r[1] = e[1] - i - o / 2;
|
|
919
922
|
break;
|
|
920
923
|
case 1:
|
|
921
|
-
r[0] = e[0] +
|
|
924
|
+
r[0] = e[0] + i, r[1] = e[1];
|
|
922
925
|
break;
|
|
923
926
|
case 2:
|
|
924
|
-
r[0] = e[0] +
|
|
927
|
+
r[0] = e[0] + i, r[1] = e[1] + i + o / 2;
|
|
925
928
|
break;
|
|
926
929
|
case 3:
|
|
927
|
-
r[0] = e[0], r[1] = e[1] +
|
|
930
|
+
r[0] = e[0], r[1] = e[1] + i + o / 4;
|
|
928
931
|
break;
|
|
929
932
|
case 4:
|
|
930
|
-
r[0] = Math.max(e[0] -
|
|
933
|
+
r[0] = Math.max(e[0] - i, e[0] - n / 2), r[1] = e[1] + i + o / 4;
|
|
931
934
|
break;
|
|
932
935
|
case 5:
|
|
933
|
-
r[0] = e[0] -
|
|
936
|
+
r[0] = e[0] - i, r[1] = e[1];
|
|
934
937
|
break;
|
|
935
938
|
case 6:
|
|
936
|
-
r[0] = Math.max(e[0] -
|
|
939
|
+
r[0] = Math.max(e[0] - i, e[0] - n / 2), r[1] = e[1] - i - o / 4;
|
|
937
940
|
break;
|
|
938
941
|
case 7:
|
|
939
|
-
r[0] = e[0], r[1] = e[1] -
|
|
942
|
+
r[0] = e[0], r[1] = e[1] - i - o / 4;
|
|
940
943
|
}
|
|
941
944
|
return r;
|
|
942
945
|
}
|
|
943
|
-
function drawLabelBody(e, t,
|
|
946
|
+
function drawLabelBody(e, t, n) {
|
|
944
947
|
if (!e) return;
|
|
945
948
|
const {
|
|
946
|
-
font:
|
|
947
|
-
labelOutSize:
|
|
949
|
+
font: o,
|
|
950
|
+
labelOutSize: i = 2,
|
|
948
951
|
labelHeight: r,
|
|
949
|
-
center:
|
|
952
|
+
center: l,
|
|
950
953
|
text: c,
|
|
951
954
|
leftIcon: s,
|
|
952
955
|
shipColor: m,
|
|
953
|
-
lineLength:
|
|
954
|
-
selected:
|
|
955
|
-
} =
|
|
956
|
-
e.save(),
|
|
957
|
-
let f = e.measureText(c).width + 4 *
|
|
958
|
-
(s || m) && (f += r + 6 *
|
|
959
|
-
let p, y = 20, h = -1, g = r + 3 *
|
|
960
|
-
if (
|
|
956
|
+
lineLength: d = 20,
|
|
957
|
+
selected: u
|
|
958
|
+
} = n;
|
|
959
|
+
e.save(), o && (e.font = o);
|
|
960
|
+
let f = e.measureText(c).width + 4 * i;
|
|
961
|
+
(s || m) && (f += r + 6 * i), e.restore();
|
|
962
|
+
let p, y = 20, h = -1, g = r + 3 * i;
|
|
963
|
+
if (d)
|
|
961
964
|
for (let k = 0; k < 8; k++) {
|
|
962
|
-
p = calculateBounds(
|
|
963
|
-
let
|
|
964
|
-
for (let
|
|
965
|
-
let x = t[
|
|
965
|
+
p = calculateBounds(l, k, f, g, d);
|
|
966
|
+
let T = !1;
|
|
967
|
+
for (let I = 0; I < t.length; ++I) {
|
|
968
|
+
let x = t[I].bounds, F = [
|
|
966
969
|
x[0] - y,
|
|
967
970
|
x[1] - y,
|
|
968
971
|
x[2] + y,
|
|
969
972
|
x[3] + y
|
|
970
973
|
];
|
|
971
974
|
if (p && isOverlapping(p, F)) {
|
|
972
|
-
|
|
975
|
+
T = !0;
|
|
973
976
|
break;
|
|
974
977
|
}
|
|
975
978
|
}
|
|
976
|
-
if (!
|
|
979
|
+
if (!T) {
|
|
977
980
|
h = k;
|
|
978
981
|
break;
|
|
979
982
|
}
|
|
980
983
|
}
|
|
981
984
|
else
|
|
982
|
-
h = 0, p = calculateBounds(
|
|
983
|
-
if (
|
|
984
|
-
let k = getBottomLeftPoint(p),
|
|
985
|
+
h = 0, p = calculateBounds(l, h, f, g, d);
|
|
986
|
+
if (u && h === -1 && (h = 0), p && h > -1) {
|
|
987
|
+
let k = getBottomLeftPoint(p), T = getTopRighttPoint(p);
|
|
985
988
|
return {
|
|
986
|
-
center:
|
|
987
|
-
x: calculateAnchorPoint(
|
|
988
|
-
l:
|
|
989
|
+
center: l,
|
|
990
|
+
x: calculateAnchorPoint(l, h, f, g, d),
|
|
991
|
+
l: T,
|
|
989
992
|
r: k,
|
|
990
993
|
bounds: p,
|
|
991
994
|
position: h,
|
|
@@ -996,60 +999,60 @@ function drawLabelBody(e, t, o) {
|
|
|
996
999
|
}
|
|
997
1000
|
const drawText = (e, t) => {
|
|
998
1001
|
if (!e) return;
|
|
999
|
-
const { center:
|
|
1002
|
+
const { center: n, text: o, textColor: i, leftIcon: r, rightIcons: l, font: c } = t;
|
|
1000
1003
|
e.save(), e.setTransform(1, 0, 0, 1, 0, 0);
|
|
1001
|
-
let [s, m] =
|
|
1004
|
+
let [s, m] = n;
|
|
1002
1005
|
if (r) {
|
|
1003
1006
|
e.font = `${18 * pixelRatio}px map-iconfont`;
|
|
1004
|
-
let
|
|
1005
|
-
e.fillStyle = r.color, e.fillText(
|
|
1007
|
+
let d = getIconFont(r.icon);
|
|
1008
|
+
e.fillStyle = r.color, e.fillText(d, s + labelOutSize - 3 * pixelRatio, m + 2.6 * pixelRatio), s += 23 * pixelRatio;
|
|
1006
1009
|
}
|
|
1007
|
-
if (
|
|
1010
|
+
if (l != null && l.length) {
|
|
1008
1011
|
e.font = `${12 * pixelRatio}px map-iconfont`, e.fillStyle = "#3370ff";
|
|
1009
|
-
const
|
|
1010
|
-
|
|
1011
|
-
const p = getIconFont(
|
|
1012
|
-
e.fillText(p, s +
|
|
1012
|
+
const d = e.measureText(o).width + 6 * pixelRatio;
|
|
1013
|
+
l.forEach((u, f) => {
|
|
1014
|
+
const p = getIconFont(u), y = 20 * pixelRatio * f;
|
|
1015
|
+
e.fillText(p, s + d + y, m);
|
|
1013
1016
|
});
|
|
1014
1017
|
}
|
|
1015
|
-
e.font = c || labelFont, e.fillStyle =
|
|
1018
|
+
e.font = c || labelFont, e.fillStyle = i, e.fillText(o, s + 2, m), e.restore();
|
|
1016
1019
|
}, drawPolygon = (e, t) => {
|
|
1017
1020
|
let {
|
|
1018
|
-
points:
|
|
1019
|
-
strokeColor:
|
|
1020
|
-
fillColor:
|
|
1021
|
+
points: n,
|
|
1022
|
+
strokeColor: o,
|
|
1023
|
+
fillColor: i,
|
|
1021
1024
|
shouldClosePath: r,
|
|
1022
|
-
translation:
|
|
1025
|
+
translation: l,
|
|
1023
1026
|
rotation: c,
|
|
1024
1027
|
rotationCenter: s,
|
|
1025
1028
|
scale: m,
|
|
1026
|
-
globalAlpha:
|
|
1029
|
+
globalAlpha: d
|
|
1027
1030
|
} = t;
|
|
1028
|
-
if (
|
|
1029
|
-
e.save(), e.beginPath(), c && c !== 0 && s == null && e.rotate(c),
|
|
1030
|
-
for (let
|
|
1031
|
-
e.lineTo(
|
|
1032
|
-
r && e.closePath(),
|
|
1031
|
+
if (d || (d = 1), n && e) {
|
|
1032
|
+
e.save(), e.beginPath(), c && c !== 0 && s == null && e.rotate(c), l && e.translate(l[0], l[1]), c && (s != null && s.length) && e.rotate(c), m && e.scale(m, m), e.moveTo(n[0][0], n[0][1]);
|
|
1033
|
+
for (let u = 1; u < n.length; u++)
|
|
1034
|
+
e.lineTo(n[u][0], n[u][1]);
|
|
1035
|
+
r && e.closePath(), o && (e.strokeStyle = o, e.stroke()), i && r && (d && (e.globalAlpha = d), e.fillStyle = i, e.fill()), e.restore();
|
|
1033
1036
|
}
|
|
1034
|
-
}, intervalIds = {}, drawLabel = (e, t,
|
|
1035
|
-
var
|
|
1036
|
-
let { center:
|
|
1037
|
-
if (
|
|
1038
|
-
const
|
|
1037
|
+
}, intervalIds = {}, drawLabel = (e, t, n) => {
|
|
1038
|
+
var u, f, p, y, h, g, k;
|
|
1039
|
+
let { center: o, text: i, color: r, textColor: l, bgColor: c, leftIcon: s, rightIcons: m, type: d } = t;
|
|
1040
|
+
if (o && i) {
|
|
1041
|
+
const T = {
|
|
1039
1042
|
font: labelFont,
|
|
1040
1043
|
labelOutSize,
|
|
1041
1044
|
labelHeight,
|
|
1042
|
-
center:
|
|
1043
|
-
text:
|
|
1045
|
+
center: o,
|
|
1046
|
+
text: i,
|
|
1044
1047
|
leftIcon: s,
|
|
1045
1048
|
selected: t.selected
|
|
1046
1049
|
};
|
|
1047
|
-
(
|
|
1048
|
-
const
|
|
1049
|
-
if (
|
|
1050
|
-
const { x, bounds: F, l: P } =
|
|
1051
|
-
|
|
1052
|
-
points: [
|
|
1050
|
+
(u = t.blinkColors) != null && u.length && t.fill && (c = t.fill, l = getForegroundColor(t.fill));
|
|
1051
|
+
const I = drawLabelBody(e, n, T);
|
|
1052
|
+
if (I) {
|
|
1053
|
+
const { x, bounds: F, l: P } = I, v = [getTopLeftPoint(F), getBottomLeftPoint(F), getBottomRightPoint(F), getTopRighttPoint(F)];
|
|
1054
|
+
n.find((E) => E.name === i) || n.push(I), drawPolygon(e, {
|
|
1055
|
+
points: [o, x],
|
|
1053
1056
|
strokeColor: r,
|
|
1054
1057
|
fillColor: "#000",
|
|
1055
1058
|
shouldClosePath: !0,
|
|
@@ -1058,24 +1061,24 @@ const drawText = (e, t) => {
|
|
|
1058
1061
|
rotationCenter: void 0,
|
|
1059
1062
|
scale: void 0,
|
|
1060
1063
|
globalAlpha: labelAlpha
|
|
1061
|
-
}), m != null && m.length && m.forEach((
|
|
1062
|
-
v[1][0] +=
|
|
1064
|
+
}), m != null && m.length && m.forEach((E, V) => {
|
|
1065
|
+
v[1][0] += 28 + V * pixelRatio, v[2][0] += 28 + V * pixelRatio;
|
|
1063
1066
|
});
|
|
1064
1067
|
const w = {
|
|
1065
1068
|
points: v,
|
|
1066
1069
|
strokeColor: r,
|
|
1067
1070
|
fillColor: c,
|
|
1068
1071
|
shouldClosePath: !0
|
|
1069
|
-
}, [S,
|
|
1070
|
-
center: [S,
|
|
1071
|
-
text:
|
|
1072
|
-
textColor:
|
|
1072
|
+
}, [S, M] = P, C = {
|
|
1073
|
+
center: [S, M + labelOutSize + labelHeight + 1],
|
|
1074
|
+
text: i,
|
|
1075
|
+
textColor: l,
|
|
1073
1076
|
leftIcon: s,
|
|
1074
1077
|
rightIcons: m,
|
|
1075
1078
|
blinkColors: t.blinkColors
|
|
1076
1079
|
};
|
|
1077
|
-
if (drawPolygon(e, w), drawText(e,
|
|
1078
|
-
let
|
|
1080
|
+
if (drawPolygon(e, w), drawText(e, C), t != null && t.blinkColors && t.blinkColors.length > 0) {
|
|
1081
|
+
let E = Date.now(), V = 0;
|
|
1079
1082
|
const N = t.blinkColors;
|
|
1080
1083
|
!!!((y = (p = (f = selectShipsLayer.value) == null ? void 0 : f.getSource()) == null ? void 0 : p.getFeatures()) != null && y.find(($) => {
|
|
1081
1084
|
var R;
|
|
@@ -1083,10 +1086,10 @@ const drawText = (e, t) => {
|
|
|
1083
1086
|
}) || (k = (g = (h = shipsLayer.value) == null ? void 0 : h.getSource()) == null ? void 0 : g.getFeatures()) != null && k.find(($) => {
|
|
1084
1087
|
var R;
|
|
1085
1088
|
return ((R = $.get("data")) == null ? void 0 : R.id) === t.id;
|
|
1086
|
-
})) || hiddenOrther.value ? (clearInterval(intervalIds[t.id]), deleteLabelFromArray(
|
|
1089
|
+
})) || hiddenOrther.value ? (clearInterval(intervalIds[t.id]), deleteLabelFromArray(n, i)) : (intervalIds[t.id] && clearInterval(intervalIds[t.id]), intervalIds[t.id] = window.setInterval(() => {
|
|
1087
1090
|
var D, G, _;
|
|
1088
1091
|
const $ = Date.now();
|
|
1089
|
-
$ -
|
|
1092
|
+
$ - E >= 500 && (V = (V + 1) % N.length, E = $, w.fillColor = N[V], drawPolygon(e, w), C.textColor = getForegroundColor(w.fillColor), drawText(e, C));
|
|
1090
1093
|
const R = shipsMarkerList == null ? void 0 : shipsMarkerList.some((O) => {
|
|
1091
1094
|
var B;
|
|
1092
1095
|
return ((B = O.ship) == null ? void 0 : B.id) === t.id;
|
|
@@ -1094,10 +1097,10 @@ const drawText = (e, t) => {
|
|
|
1094
1097
|
const B = O.get("data");
|
|
1095
1098
|
return (B == null ? void 0 : B.id) === t.id;
|
|
1096
1099
|
});
|
|
1097
|
-
!R && !Z && (clearInterval(intervalIds[t.id]), deleteLabelFromArray(
|
|
1100
|
+
!R && !Z && (clearInterval(intervalIds[t.id]), deleteLabelFromArray(n, i));
|
|
1098
1101
|
}, 10));
|
|
1099
1102
|
} else
|
|
1100
|
-
shipLabels.value.find((V) => V.name ===
|
|
1103
|
+
shipLabels.value.find((V) => V.name === i) && (clearInterval(intervalIds[t.id]), drawPolygon(e, w), drawText(e, C));
|
|
1101
1104
|
}
|
|
1102
1105
|
}
|
|
1103
1106
|
return null;
|
|
@@ -1106,42 +1109,42 @@ const drawText = (e, t) => {
|
|
|
1106
1109
|
clearInterval(e);
|
|
1107
1110
|
});
|
|
1108
1111
|
}, deleteLabelFromArray = (e, t) => {
|
|
1109
|
-
const
|
|
1110
|
-
|
|
1112
|
+
const n = e.findIndex((o) => o.name === t);
|
|
1113
|
+
n !== -1 && e.splice(n, 1);
|
|
1111
1114
|
}, PI = Math.PI, a = 6378245, ee = 0.006693421622965943;
|
|
1112
1115
|
function transformLat(e, t) {
|
|
1113
|
-
let
|
|
1114
|
-
return
|
|
1116
|
+
let n = -100 + 2 * e + 3 * t + 0.2 * t * t + 0.1 * e * t + 0.2 * Math.sqrt(Math.abs(e));
|
|
1117
|
+
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
1118
|
}
|
|
1116
1119
|
function transformLng(e, t) {
|
|
1117
|
-
let
|
|
1118
|
-
return
|
|
1120
|
+
let n = 300 + e + 2 * t + 0.1 * e * e + 0.1 * e * t + 0.1 * Math.sqrt(Math.abs(e));
|
|
1121
|
+
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
1122
|
}
|
|
1120
1123
|
function outOfChina(e, t) {
|
|
1121
1124
|
return !(e > 73.66 && e < 135.05 && t > 3.86 && t < 53.55);
|
|
1122
1125
|
}
|
|
1123
1126
|
function gcj02ToWgs84(e) {
|
|
1124
|
-
const [t,
|
|
1125
|
-
if (outOfChina(t,
|
|
1126
|
-
return `${t.toFixed(6)}, ${
|
|
1127
|
+
const [t, n] = e.split(",").map(Number);
|
|
1128
|
+
if (outOfChina(t, n))
|
|
1129
|
+
return `${t.toFixed(6)}, ${n.toFixed(6)}`;
|
|
1127
1130
|
{
|
|
1128
|
-
let
|
|
1129
|
-
const r =
|
|
1130
|
-
let
|
|
1131
|
-
|
|
1132
|
-
const c = Math.sqrt(
|
|
1133
|
-
|
|
1134
|
-
const s =
|
|
1135
|
-
return `${(t * 2 - m).toFixed(6)}, ${(
|
|
1131
|
+
let o = transformLat(t - 105, n - 35), i = transformLng(t - 105, n - 35);
|
|
1132
|
+
const r = n / 180 * PI;
|
|
1133
|
+
let l = Math.sin(r);
|
|
1134
|
+
l = 1 - ee * l * l;
|
|
1135
|
+
const c = Math.sqrt(l);
|
|
1136
|
+
o = o * 180 / (a * (1 - ee) / (l * c) * PI), i = i * 180 / (a / c * Math.cos(r) * PI);
|
|
1137
|
+
const s = n + o, m = t + i;
|
|
1138
|
+
return `${(t * 2 - m).toFixed(6)}, ${(n * 2 - s).toFixed(6)}`;
|
|
1136
1139
|
}
|
|
1137
1140
|
}
|
|
1138
1141
|
function calculateCirclePoints(e, t) {
|
|
1139
|
-
const
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
], r = transformExtent(
|
|
1142
|
+
const n = fromLonLat(e), o = t * 1e3, i = [
|
|
1143
|
+
n[0] - o,
|
|
1144
|
+
n[1] - o,
|
|
1145
|
+
n[0] + o,
|
|
1146
|
+
n[1] + o
|
|
1147
|
+
], r = transformExtent(i, projection.mercator, projection.data);
|
|
1145
1148
|
return {
|
|
1146
1149
|
leftTopPoint: { lng: r[0], lat: r[3] },
|
|
1147
1150
|
rightTopPoint: { lng: r[2], lat: r[3] },
|
|
@@ -1152,22 +1155,22 @@ function calculateCirclePoints(e, t) {
|
|
|
1152
1155
|
const equatorialCircumference = 2003750834e-2;
|
|
1153
1156
|
function lonLatToMercator(e) {
|
|
1154
1157
|
const t = e[0] * equatorialCircumference / 180;
|
|
1155
|
-
let
|
|
1156
|
-
return
|
|
1158
|
+
let n = Math.log(Math.tan((90 + e[1]) * Math.PI / 360)) / (Math.PI / 180);
|
|
1159
|
+
return n = n * equatorialCircumference / 180, [t, n];
|
|
1157
1160
|
}
|
|
1158
1161
|
function mercatorToLonLat(e, t = "lonlat") {
|
|
1159
|
-
const
|
|
1160
|
-
let
|
|
1161
|
-
return
|
|
1162
|
+
const n = { lon: 0, lat: 0 }, o = e[0] / equatorialCircumference * 180;
|
|
1163
|
+
let i = e[1] / equatorialCircumference * 180;
|
|
1164
|
+
return i = 180 / Math.PI * (2 * Math.atan(Math.exp(i * Math.PI / 180)) - Math.PI / 2), n.lon = o, n.lat = i, t === "lonlat" ? n : [o, i];
|
|
1162
1165
|
}
|
|
1163
1166
|
function calculateBoundingBox(e) {
|
|
1164
|
-
let t = 1 / 0,
|
|
1167
|
+
let t = 1 / 0, n = -1 / 0, o = 1 / 0, i = -1 / 0;
|
|
1165
1168
|
e.forEach((h) => {
|
|
1166
1169
|
const [g, k] = h;
|
|
1167
|
-
t = Math.min(t, k),
|
|
1170
|
+
t = Math.min(t, k), n = Math.max(n, k), o = Math.min(o, g), i = Math.max(i, g);
|
|
1168
1171
|
});
|
|
1169
|
-
const r =
|
|
1170
|
-
return [f, p,
|
|
1172
|
+
const r = i - o, l = n - t, c = Math.max(r, l), s = (o + i) / 2, m = (t + n) / 2, d = c / 2, u = s - d, f = s + d, p = m - d, y = m + d;
|
|
1173
|
+
return [f, p, u, y];
|
|
1171
1174
|
}
|
|
1172
1175
|
const transformUtils = {
|
|
1173
1176
|
gcj02ToWgs84,
|
|
@@ -1177,51 +1180,51 @@ const transformUtils = {
|
|
|
1177
1180
|
calculateBoundingBox
|
|
1178
1181
|
}, mapInstance$5 = ref(), renderTrackStyleSetInstance = (e) => mapInstance$5.value = e, stopIcon = "", stopColor = "#E31818", slowIcon = "", slowColor = "#1890FF", dropletsIcon = "", trackList$1 = ref([]);
|
|
1179
1182
|
let animationFeature;
|
|
1180
|
-
const renderTrackLine = (e, t,
|
|
1181
|
-
var r,
|
|
1182
|
-
const
|
|
1183
|
-
if (!
|
|
1184
|
-
allTracks.value[t] =
|
|
1185
|
-
const
|
|
1186
|
-
if (
|
|
1187
|
-
const s = new LineString(
|
|
1183
|
+
const renderTrackLine = (e, t, n) => {
|
|
1184
|
+
var r, l, c;
|
|
1185
|
+
const o = e[t];
|
|
1186
|
+
if (!o) return;
|
|
1187
|
+
allTracks.value[t] = o, trackList$1.value = [], trackList$1.value = o.map((s, m) => (s.center = [s.lon, s.lat], s.centerPoint = transformUtils.lonLatToMercator(s.center), s.id = t, s.index = m, s.time = hooks(s.createdAt).format("YYYY-MM-DD HH:mm:ss"), s));
|
|
1188
|
+
const i = trackList$1.value.map((s) => s.centerPoint);
|
|
1189
|
+
if (i.length >= 2) {
|
|
1190
|
+
const s = new LineString(i), m = new Feature({ geometry: s });
|
|
1188
1191
|
m.setStyle(
|
|
1189
1192
|
new Style({
|
|
1190
1193
|
stroke: new Stroke({
|
|
1191
|
-
color:
|
|
1194
|
+
color: n,
|
|
1192
1195
|
width: 2
|
|
1193
1196
|
})
|
|
1194
1197
|
})
|
|
1195
|
-
), m.setId(t), m.set("type", "line"), (
|
|
1196
|
-
const
|
|
1197
|
-
|
|
1198
|
-
const
|
|
1198
|
+
), m.setId(t), m.set("type", "line"), (l = (r = shipTrackVectorLayer.value) == null ? void 0 : r.getSource()) == null || l.clear(), shipTrackLineFeatures.value = [];
|
|
1199
|
+
const d = shipTrackLineFeatures.value.findIndex((f) => f.getId() === t);
|
|
1200
|
+
d >= 0 ? shipTrackLineFeatures.value[d] = m : shipTrackLineFeatures.value.push(m);
|
|
1201
|
+
const u = createAnimatedIconFeature(n, i);
|
|
1199
1202
|
trackLineVectorSource.value = new VectorSource({
|
|
1200
1203
|
features: [...shipTrackLineFeatures.value]
|
|
1201
|
-
}), animationFeature =
|
|
1204
|
+
}), animationFeature = u, console.log(animationFeature), shipTrackVectorLayer.value = new VectorLayer({
|
|
1202
1205
|
source: trackLineVectorSource.value,
|
|
1203
1206
|
zIndex: 102
|
|
1204
|
-
}), renderPoint(
|
|
1207
|
+
}), renderPoint(n), (c = mapInstance$5.value) == null || c.addLayer(shipTrackVectorLayer.value);
|
|
1205
1208
|
}
|
|
1206
1209
|
}, handlePlay = (e, t) => {
|
|
1207
|
-
const
|
|
1208
|
-
playAnimation(
|
|
1210
|
+
const n = allTracks.value[String(e)];
|
|
1211
|
+
playAnimation(n.map((o) => [o.lon, o.lat]), t);
|
|
1209
1212
|
}, removeShipTrackLineFeatureByIndex = (e, t) => {
|
|
1210
1213
|
e >= 0 && e < shipTrackLineFeatures.value.length && (shipTrackLineFeatures.value.splice(e, 1), delete allTracks.value[t]), trackLineVectorSource.value = new VectorSource({
|
|
1211
1214
|
features: [...shipTrackLineFeatures.value]
|
|
1212
1215
|
}), shipTrackVectorLayer.value && shipTrackVectorLayer.value.setSource(trackLineVectorSource.value);
|
|
1213
1216
|
}, createAnimatedIconFeature = (e, t) => {
|
|
1214
|
-
const
|
|
1217
|
+
const n = new Feature({
|
|
1215
1218
|
geometry: new Point(fromLonLat([t[0][0], t[0][1]]))
|
|
1216
1219
|
// 初始位置
|
|
1217
|
-
}),
|
|
1220
|
+
}), o = new Style({
|
|
1218
1221
|
text: new Text({
|
|
1219
1222
|
font: "700 14px map-iconfont",
|
|
1220
1223
|
text: getIconFont(""),
|
|
1221
1224
|
fill: new Fill({ color: e })
|
|
1222
1225
|
})
|
|
1223
1226
|
});
|
|
1224
|
-
return
|
|
1227
|
+
return n.setStyle(o), n;
|
|
1225
1228
|
}, geoMarkerStyle = new Style({
|
|
1226
1229
|
text: new Text({
|
|
1227
1230
|
font: "700 20px map-iconfont",
|
|
@@ -1235,25 +1238,25 @@ let polyline, linePath, startMarker, position, geoMarker, vectorLayer;
|
|
|
1235
1238
|
const trackAnimating = ref(!1);
|
|
1236
1239
|
let distance = 0, lastTime = Date.now(), moveFeatureHandler = null;
|
|
1237
1240
|
const moveFeature = (e, t) => {
|
|
1238
|
-
var
|
|
1239
|
-
const
|
|
1240
|
-
if (distance = (distance +
|
|
1241
|
+
var u, f, p;
|
|
1242
|
+
const n = Number(50 * t), o = ((u = e.frameState) == null ? void 0 : u.time) ?? Date.now(), i = o - lastTime;
|
|
1243
|
+
if (distance = (distance + n * i / 1e6) % 2, lastTime = o, distance >= 1) {
|
|
1241
1244
|
stopAnimation();
|
|
1242
1245
|
return;
|
|
1243
1246
|
}
|
|
1244
1247
|
const r = linePath.getCoordinateAt(
|
|
1245
1248
|
distance > 1 ? 2 - distance : distance
|
|
1246
|
-
),
|
|
1249
|
+
), l = linePath.getCoordinateAt(
|
|
1247
1250
|
distance > 1 ? distance - 0.01 : distance
|
|
1248
1251
|
), c = linePath.getCoordinateAt(
|
|
1249
1252
|
distance > 1 ? 2 - distance : distance + 0.01
|
|
1250
1253
|
), m = getRotation(
|
|
1251
|
-
transformUtils.mercatorToLonLat(
|
|
1254
|
+
transformUtils.mercatorToLonLat(l, "array"),
|
|
1252
1255
|
transformUtils.mercatorToLonLat(c, "array")
|
|
1253
1256
|
) * Math.PI / 180;
|
|
1254
1257
|
(f = geoMarkerStyle.getText()) == null || f.setRotation(m), position.setCoordinates(r);
|
|
1255
|
-
const
|
|
1256
|
-
|
|
1258
|
+
const d = getVectorContext(e);
|
|
1259
|
+
d.context_.save(), d.setStyle(geoMarkerStyle), d.drawGeometry(position), d.context_.restore(), (p = mapInstance$5.value) == null || p.render();
|
|
1257
1260
|
}, startAnimation = () => {
|
|
1258
1261
|
var e;
|
|
1259
1262
|
trackAnimating.value = !0, showTrackAnimatMarker.value = !0, lastTime = Date.now(), distance = 0, position = ((e = startMarker.getGeometry()) == null ? void 0 : e.clone()) || new Point([0, 0]), moveFeatureHandler && (vectorLayer == null || vectorLayer.on("postrender", moveFeatureHandler)), geoMarker == null || geoMarker.setGeometry(void 0);
|
|
@@ -1261,7 +1264,7 @@ const moveFeature = (e, t) => {
|
|
|
1261
1264
|
var e;
|
|
1262
1265
|
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
1266
|
}, playAnimation = (e, t) => {
|
|
1264
|
-
var
|
|
1267
|
+
var o;
|
|
1265
1268
|
trackAnimating.value && stopAnimation(), polyline = new Polyline({
|
|
1266
1269
|
factor: 1e6
|
|
1267
1270
|
}).writeGeometry(new LineString(e)), linePath = new Polyline({
|
|
@@ -1273,8 +1276,8 @@ const moveFeature = (e, t) => {
|
|
|
1273
1276
|
type: "icon",
|
|
1274
1277
|
geometry: new Point(linePath.getFirstCoordinate())
|
|
1275
1278
|
});
|
|
1276
|
-
const
|
|
1277
|
-
position =
|
|
1279
|
+
const n = startMarker.getGeometry();
|
|
1280
|
+
position = n ? n.clone() : new Point([0, 0]), geoMarker = new Feature({
|
|
1278
1281
|
type: "geoMarker",
|
|
1279
1282
|
style: geoMarkerStyle,
|
|
1280
1283
|
geometry: position
|
|
@@ -1282,38 +1285,38 @@ const moveFeature = (e, t) => {
|
|
|
1282
1285
|
source: new VectorSource({
|
|
1283
1286
|
features: [geoMarker]
|
|
1284
1287
|
})
|
|
1285
|
-
}), (
|
|
1288
|
+
}), (o = mapInstance$5.value) == null || o.addLayer(vectorLayer), moveFeatureHandler = (i) => moveFeature(i, t), startAnimation();
|
|
1286
1289
|
}, renderPoint = (e) => {
|
|
1287
1290
|
if (!mapInstance$5.value) return;
|
|
1288
1291
|
const t = trackList$1.value || [];
|
|
1289
1292
|
if (!(t && t.length > 1)) return [];
|
|
1290
|
-
const
|
|
1291
|
-
for (let c = 0; c <
|
|
1293
|
+
const n = { 16: 24, 17: 15, default: 4 }, o = [], i = t.length;
|
|
1294
|
+
for (let c = 0; c < i; c++) {
|
|
1292
1295
|
t[c].index = c;
|
|
1293
1296
|
const s = mapInstance$5.value.getPixelFromCoordinate(t[c].centerPoint);
|
|
1294
1297
|
if (s) {
|
|
1295
1298
|
let m = s.concat(s);
|
|
1296
1299
|
m = adjustBounds(m, [20, 20]);
|
|
1297
|
-
const
|
|
1298
|
-
if (!
|
|
1299
|
-
if (
|
|
1300
|
-
const f =
|
|
1300
|
+
const d = mapInstance$5.value.getView().getZoom();
|
|
1301
|
+
if (!d) return;
|
|
1302
|
+
if (d > 15) {
|
|
1303
|
+
const f = n[d] || n.default;
|
|
1301
1304
|
m = adjustBounds(m, [f, f]);
|
|
1302
1305
|
}
|
|
1303
|
-
let
|
|
1306
|
+
let u = !0;
|
|
1304
1307
|
if (t[c].state !== "0") {
|
|
1305
|
-
for (let f = 0; f <
|
|
1306
|
-
if (isOverlapping(m,
|
|
1307
|
-
|
|
1308
|
+
for (let f = 0; f < o.length; f++)
|
|
1309
|
+
if (isOverlapping(m, o[f].bounds)) {
|
|
1310
|
+
u = !1;
|
|
1308
1311
|
break;
|
|
1309
1312
|
}
|
|
1310
1313
|
}
|
|
1311
|
-
|
|
1314
|
+
u && (t[c].bounds = m, o.push(t[c]));
|
|
1312
1315
|
}
|
|
1313
1316
|
}
|
|
1314
|
-
const r = getIconStyle(stopIcon),
|
|
1315
|
-
|
|
1316
|
-
var
|
|
1317
|
+
const r = getIconStyle(stopIcon), l = getIconStyle(slowIcon);
|
|
1318
|
+
o.forEach((c, s) => {
|
|
1319
|
+
var u, f;
|
|
1317
1320
|
const m = new Feature({
|
|
1318
1321
|
geometry: new Point(c.centerPoint)
|
|
1319
1322
|
});
|
|
@@ -1334,12 +1337,12 @@ const moveFeature = (e, t) => {
|
|
|
1334
1337
|
})
|
|
1335
1338
|
})
|
|
1336
1339
|
]), trackLineVectorSource.value.addFeature(m);
|
|
1337
|
-
const
|
|
1340
|
+
const d = new Feature({
|
|
1338
1341
|
geometry: new Point(fromLonLat(c.center))
|
|
1339
1342
|
});
|
|
1340
|
-
if (
|
|
1343
|
+
if (d.set("type", "track_label"), d.set("track_label_index", s), d.setStyle(
|
|
1341
1344
|
setTrackLabelStyle(c, e)
|
|
1342
|
-
), trackLineVectorSource.value.addFeature(
|
|
1345
|
+
), trackLineVectorSource.value.addFeature(d), typeof c == "object" && c.hasOwnProperty("state")) {
|
|
1343
1346
|
const p = new Feature({
|
|
1344
1347
|
geometry: new Point(c.centerPoint)
|
|
1345
1348
|
});
|
|
@@ -1352,27 +1355,27 @@ const moveFeature = (e, t) => {
|
|
|
1352
1355
|
}),
|
|
1353
1356
|
zIndex: 99
|
|
1354
1357
|
}), h = [];
|
|
1355
|
-
Number(c.state) === 0 ? ((
|
|
1358
|
+
Number(c.state) === 0 ? ((u = y.getText()) == null || u.setFill(new Fill({ color: stopColor })), h.push(r)) : Number(c.state) === 1 && ((f = y.getText()) == null || f.setFill(new Fill({ color: slowColor })), h.push(l)), h.push(y), p.setStyle(h), trackLineVectorSource.value.addFeature(p);
|
|
1356
1359
|
}
|
|
1357
|
-
}), renderArrow(
|
|
1360
|
+
}), renderArrow(o, e), renderIconPoint();
|
|
1358
1361
|
}, renderArrow = (e, t) => {
|
|
1359
|
-
const
|
|
1360
|
-
|
|
1361
|
-
for (let
|
|
1362
|
-
let
|
|
1363
|
-
const r = e[
|
|
1364
|
-
if (
|
|
1365
|
-
|
|
1362
|
+
const n = e.length;
|
|
1363
|
+
n || (e.push(trackList$1.value[0]), e.push(trackList$1.value[trackList$1.value.length - 1]));
|
|
1364
|
+
for (let o = 0; o < n - 1; o++) {
|
|
1365
|
+
let i;
|
|
1366
|
+
const r = e[o], l = (e[o + 1].index + r.index) / 2;
|
|
1367
|
+
if (l % 2 === 0)
|
|
1368
|
+
i = trackList$1.value[l].centerPoint;
|
|
1366
1369
|
else {
|
|
1367
|
-
const c = trackList$1.value[Math.floor(
|
|
1370
|
+
const c = trackList$1.value[Math.floor(l)], s = trackList$1.value[Math.ceil(l)];
|
|
1368
1371
|
if (c && s) {
|
|
1369
|
-
const [m,
|
|
1370
|
-
|
|
1372
|
+
const [m, d] = c.centerPoint, [u, f] = s.centerPoint;
|
|
1373
|
+
i = [(m + u) / 2, (d + f) / 2];
|
|
1371
1374
|
}
|
|
1372
1375
|
}
|
|
1373
|
-
if (
|
|
1376
|
+
if (i) {
|
|
1374
1377
|
const c = new Feature({
|
|
1375
|
-
geometry: new Point(
|
|
1378
|
+
geometry: new Point(i)
|
|
1376
1379
|
});
|
|
1377
1380
|
c.set("type", "track_arrow"), c.setStyle(
|
|
1378
1381
|
new Style({
|
|
@@ -1382,8 +1385,8 @@ const moveFeature = (e, t) => {
|
|
|
1382
1385
|
fill: new Fill({ color: t }),
|
|
1383
1386
|
// 设置箭头旋转 角度转为弧度
|
|
1384
1387
|
rotation: getRotation(
|
|
1385
|
-
e[
|
|
1386
|
-
e[
|
|
1388
|
+
e[o].center,
|
|
1389
|
+
e[o + 1].center
|
|
1387
1390
|
) * (Math.PI / 180)
|
|
1388
1391
|
})
|
|
1389
1392
|
})
|
|
@@ -1391,29 +1394,29 @@ const moveFeature = (e, t) => {
|
|
|
1391
1394
|
}
|
|
1392
1395
|
}
|
|
1393
1396
|
}, renderIconPoint = () => {
|
|
1394
|
-
const e = "", t = "#fcdc3f",
|
|
1395
|
-
(trackList$1.value.length < 2 ? [trackList$1.value[0]] : [trackList$1.value[0], trackList$1.value[trackList$1.value.length - 1]]).forEach((
|
|
1397
|
+
const e = "", t = "#fcdc3f", n = "#ff0000";
|
|
1398
|
+
(trackList$1.value.length < 2 ? [trackList$1.value[0]] : [trackList$1.value[0], trackList$1.value[trackList$1.value.length - 1]]).forEach((i) => {
|
|
1396
1399
|
const r = new Feature({
|
|
1397
|
-
geometry: new Point(
|
|
1400
|
+
geometry: new Point(i.centerPoint)
|
|
1398
1401
|
});
|
|
1399
|
-
r.set("type", "track_begin"), r.set("data",
|
|
1400
|
-
const
|
|
1402
|
+
r.set("type", "track_begin"), r.set("data", i);
|
|
1403
|
+
const l = i.index === 0 && trackList$1.value.length >= 2 ? t : n;
|
|
1401
1404
|
r.setStyle(
|
|
1402
1405
|
new Style({
|
|
1403
1406
|
text: new Text({
|
|
1404
1407
|
font: "Normal 14px map-iconfont",
|
|
1405
1408
|
text: getIconFont(e),
|
|
1406
|
-
fill: new Fill({ color:
|
|
1409
|
+
fill: new Fill({ color: l })
|
|
1407
1410
|
}),
|
|
1408
1411
|
zIndex: 101
|
|
1409
1412
|
})
|
|
1410
1413
|
), trackLineVectorSource.value.addFeature(r);
|
|
1411
1414
|
});
|
|
1412
1415
|
}, setTrackLabelStyle = (e, t) => new Style({
|
|
1413
|
-
renderer: (
|
|
1414
|
-
const
|
|
1416
|
+
renderer: (n, o) => {
|
|
1417
|
+
const i = o.context, c = {
|
|
1415
1418
|
id: e.id || "",
|
|
1416
|
-
center:
|
|
1419
|
+
center: n,
|
|
1417
1420
|
text: e.time,
|
|
1418
1421
|
color: t,
|
|
1419
1422
|
textColor: "#000",
|
|
@@ -1421,91 +1424,91 @@ const moveFeature = (e, t) => {
|
|
|
1421
1424
|
selected: !0,
|
|
1422
1425
|
type: "TrackTime"
|
|
1423
1426
|
};
|
|
1424
|
-
drawLabel(
|
|
1427
|
+
drawLabel(i, c, trackLabels.value);
|
|
1425
1428
|
}
|
|
1426
|
-
}), mapInstance$4 = ref(), renderCustomOverlaySetInstance = (e) => mapInstance$4.value = e, drawCustomContent = (e, t,
|
|
1427
|
-
var
|
|
1429
|
+
}), mapInstance$4 = ref(), renderCustomOverlaySetInstance = (e) => mapInstance$4.value = e, drawCustomContent = (e, t, n, o = "top-left", i = !1) => {
|
|
1430
|
+
var d, u;
|
|
1428
1431
|
if (!t || !mapInstance$4.value) return;
|
|
1429
1432
|
document.querySelectorAll(".truck-custom-content").forEach((f) => {
|
|
1430
1433
|
var p;
|
|
1431
1434
|
return (p = f.parentNode) == null ? void 0 : p.removeChild(f);
|
|
1432
1435
|
});
|
|
1433
1436
|
const r = document.createElement("div");
|
|
1434
|
-
r.innerHTML =
|
|
1435
|
-
const
|
|
1437
|
+
r.innerHTML = n;
|
|
1438
|
+
const l = new Overlay({
|
|
1436
1439
|
element: r,
|
|
1437
1440
|
position: t,
|
|
1438
1441
|
// 初始位置
|
|
1439
|
-
positioning:
|
|
1440
|
-
stopEvent:
|
|
1442
|
+
positioning: o,
|
|
1443
|
+
stopEvent: i
|
|
1441
1444
|
// 设置不阻拦事件
|
|
1442
1445
|
});
|
|
1443
|
-
if (
|
|
1446
|
+
if (i) {
|
|
1444
1447
|
let f = !1, p = [0, 0], y = [0, 0], h = 0, g = 0;
|
|
1445
1448
|
r.addEventListener("mousedown", function(k) {
|
|
1446
|
-
var
|
|
1449
|
+
var I;
|
|
1447
1450
|
f = !0, h = k.clientX, g = k.clientY;
|
|
1448
|
-
const
|
|
1449
|
-
|
|
1451
|
+
const T = (I = mapInstance$4.value) == null ? void 0 : I.getCoordinateFromPixel([k.clientX - 200, k.clientY - 200]);
|
|
1452
|
+
T && (p = T), y = [
|
|
1450
1453
|
k.clientX - r.getBoundingClientRect().left + 160,
|
|
1451
1454
|
k.clientY - r.getBoundingClientRect().top + 84
|
|
1452
1455
|
], k.preventDefault(), console.log(e, h, g);
|
|
1453
1456
|
}), document.addEventListener("mousemove", function(k) {
|
|
1454
|
-
var
|
|
1457
|
+
var T;
|
|
1455
1458
|
if (f) {
|
|
1456
|
-
const
|
|
1457
|
-
|
|
1459
|
+
const I = (T = mapInstance$4.value) == null ? void 0 : T.getCoordinateFromPixel([k.clientX - y[0], k.clientY - y[1]]), x = I[0] - p[0], F = I[1] - p[1];
|
|
1460
|
+
l.setPosition([p[0] + x, p[1] + F]);
|
|
1458
1461
|
}
|
|
1459
1462
|
}), document.addEventListener("mouseup", function() {
|
|
1460
1463
|
f = !1;
|
|
1461
1464
|
});
|
|
1462
1465
|
}
|
|
1463
|
-
(
|
|
1466
|
+
(d = mapInstance$4.value) == null || d.addOverlay(l);
|
|
1464
1467
|
const c = r.querySelector(".close-button");
|
|
1465
1468
|
c && c.addEventListener("click", () => {
|
|
1466
1469
|
var f, p;
|
|
1467
|
-
(f = mapInstance$4.value) == null || f.removeOverlay(
|
|
1470
|
+
(f = mapInstance$4.value) == null || f.removeOverlay(l), (p = r.parentNode) == null || p.removeChild(r);
|
|
1468
1471
|
});
|
|
1469
|
-
const s = JSON.parse(JSON.stringify(t)), m = (
|
|
1470
|
-
return
|
|
1472
|
+
const s = JSON.parse(JSON.stringify(t)), m = (u = mapInstance$4.value) == null ? void 0 : u.getCoordinateFromPixel(s);
|
|
1473
|
+
return l.setPosition(m), l;
|
|
1471
1474
|
}, mapInstance$3 = ref(), renderTrackSetInstance = (e) => mapInstance$3.value = e, showTracks = ref([]), trackList = ref([]);
|
|
1472
1475
|
ref(null);
|
|
1473
|
-
const trackId = ref(""), cursor = ref(0), renderTrack = (e, t,
|
|
1474
|
-
var
|
|
1475
|
-
if (console.log(
|
|
1476
|
+
const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, i = "ship") => {
|
|
1477
|
+
var d;
|
|
1478
|
+
if (console.log(i), nextTick(() => {
|
|
1476
1479
|
hiddenAllShips();
|
|
1477
|
-
}).then((
|
|
1480
|
+
}).then((u) => {
|
|
1478
1481
|
}), (t == null ? void 0 : t.length) < 2) {
|
|
1479
|
-
((
|
|
1482
|
+
((d = showTracks.value) == null ? void 0 : d.findIndex((u) => u.id === e)) < 0 && showTracks.value.push({ id: e, length: "" });
|
|
1480
1483
|
return;
|
|
1481
1484
|
}
|
|
1482
1485
|
const r = {};
|
|
1483
|
-
t.forEach((
|
|
1484
|
-
|
|
1486
|
+
t.forEach((u) => {
|
|
1487
|
+
u.state ? u.state = Number(u.state) : delete u.state;
|
|
1485
1488
|
}), trackId.value = e, r[e] = t, trackList.value = t;
|
|
1486
|
-
const
|
|
1487
|
-
(
|
|
1488
|
-
), s = new LineString(c), m = formatUtils.formatLength(s,
|
|
1489
|
+
const l = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"], c = r[e].map(
|
|
1490
|
+
(u) => transform([u.lon, u.lat], projection.data, projection.mercator)
|
|
1491
|
+
), s = new LineString(c), m = formatUtils.formatLength(s, o) || "--";
|
|
1489
1492
|
nextTick(() => {
|
|
1490
1493
|
var f, p;
|
|
1491
|
-
const
|
|
1492
|
-
|
|
1494
|
+
const u = (f = showTracks.value) == null ? void 0 : f.findIndex((y) => y.id === e);
|
|
1495
|
+
u < 0 ? showTracks.value.push({ id: e, length: m }) : showTracks.value[u].length = m, ++cursor.value, cursor.value > l.length && (cursor.value = 0), renderTrackLine(r, e, n), nextTick(() => {
|
|
1493
1496
|
resetTrackView(e);
|
|
1494
1497
|
}).then(() => {
|
|
1495
1498
|
}), (p = mapInstance$3.value) == null || p.on("moveend", () => {
|
|
1496
|
-
showTrackLayer.value && (trackLabels.value = [], renderTrackLine(r, e,
|
|
1499
|
+
showTrackLayer.value && (trackLabels.value = [], renderTrackLine(r, e, n));
|
|
1497
1500
|
}), renderTrackPointPopup();
|
|
1498
1501
|
}).then(() => {
|
|
1499
1502
|
});
|
|
1500
1503
|
}, renderTrackPointPopup = () => {
|
|
1501
1504
|
var t;
|
|
1502
1505
|
const e = ref(null);
|
|
1503
|
-
(t = mapInstance$3.value) == null || t.on("pointermove", (
|
|
1504
|
-
var
|
|
1505
|
-
e.value && ((
|
|
1506
|
-
const
|
|
1507
|
-
if (
|
|
1508
|
-
const s =
|
|
1506
|
+
(t = mapInstance$3.value) == null || t.on("pointermove", (n) => {
|
|
1507
|
+
var i, r, l, c;
|
|
1508
|
+
e.value && ((i = mapInstance$3.value) == null || i.removeOverlay(e.value));
|
|
1509
|
+
const o = (r = mapInstance$3.value) == null ? void 0 : r.forEachFeatureAtPixel(n.pixel, (s) => s);
|
|
1510
|
+
if (o) {
|
|
1511
|
+
const s = o.get("data");
|
|
1509
1512
|
if (!(s != null && s.time)) return;
|
|
1510
1513
|
let m = "";
|
|
1511
1514
|
s != null && s.stayTime && (m = `
|
|
@@ -1514,7 +1517,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1514
1517
|
<div class="item-item">${formatMinutesToDDHHMM(Number(s.stayTime))}</div>
|
|
1515
1518
|
</div>
|
|
1516
1519
|
`);
|
|
1517
|
-
const
|
|
1520
|
+
const d = `
|
|
1518
1521
|
<div class="track-point-popup">
|
|
1519
1522
|
<div class="item">
|
|
1520
1523
|
<div class="item-label">状态</div>
|
|
@@ -1545,9 +1548,9 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1545
1548
|
<div class="item-item">${s.time}</div>
|
|
1546
1549
|
</div>
|
|
1547
1550
|
${m ?? m}
|
|
1548
|
-
</div>`,
|
|
1549
|
-
if (
|
|
1550
|
-
const f = drawCustomContent(s.time,
|
|
1551
|
+
</div>`, u = (l = mapInstance$3.value) == null ? void 0 : l.getPixelFromCoordinate(n.coordinate);
|
|
1552
|
+
if (u) {
|
|
1553
|
+
const f = drawCustomContent(s.time, u, d, "top-left");
|
|
1551
1554
|
f && (e.value = f);
|
|
1552
1555
|
}
|
|
1553
1556
|
} else
|
|
@@ -1559,21 +1562,21 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1559
1562
|
}, playTrack = (e, t) => {
|
|
1560
1563
|
handlePlay(String(e), t);
|
|
1561
1564
|
}, resetTrackView = (e) => {
|
|
1562
|
-
var
|
|
1563
|
-
const t = mapInstance$3.value.getView(),
|
|
1564
|
-
if (!
|
|
1565
|
-
const
|
|
1566
|
-
if (
|
|
1565
|
+
var i;
|
|
1566
|
+
const t = mapInstance$3.value.getView(), n = e ? shipTrackLineFeatures.value.find((r) => r.getId() === e) : shipTrackLineFeatures.value[0];
|
|
1567
|
+
if (!n) return;
|
|
1568
|
+
const o = (i = n == null ? void 0 : n.getGeometry()) == null ? void 0 : i.getExtent();
|
|
1569
|
+
if (o != null && o.length)
|
|
1567
1570
|
try {
|
|
1568
|
-
const r = buffer(
|
|
1571
|
+
const r = buffer(o, Math.max(o[2] - o[0], o[3] - o[1]) * 0.02);
|
|
1569
1572
|
t.fit(r);
|
|
1570
1573
|
} catch (r) {
|
|
1571
1574
|
console.log(r);
|
|
1572
1575
|
}
|
|
1573
1576
|
}, formatMinutesToDDHHMM = (e) => {
|
|
1574
|
-
const t = hooks.duration(e, "minutes"),
|
|
1575
|
-
let r = `${String(
|
|
1576
|
-
return
|
|
1577
|
+
const t = hooks.duration(e, "minutes"), n = Math.floor(t.asDays()), o = t.hours(), i = t.minutes();
|
|
1578
|
+
let r = `${String(i).padStart(2, "0")}分`;
|
|
1579
|
+
return o !== 0 && (r = `${String(o).padStart(2, "0")}时${r}`), n !== 0 && (r = `${String(n).padStart(2, "0")}天${r}`), r;
|
|
1577
1580
|
}, _hoisted_1$3 = {
|
|
1578
1581
|
key: 0,
|
|
1579
1582
|
class: "more-tool-panel"
|
|
@@ -1589,23 +1592,23 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1589
1592
|
emits: ["switchGreenDot", "switchMapTile"],
|
|
1590
1593
|
setup(e, { emit: t }) {
|
|
1591
1594
|
var p, y;
|
|
1592
|
-
const
|
|
1593
|
-
|
|
1594
|
-
}, u = () => {
|
|
1595
|
-
l("switchMapTile", n.mapTileMode === BaseMapType.vector ? BaseMapType.satellite : BaseMapType.vector);
|
|
1595
|
+
const n = inject("mapInstance"), o = e, i = t, r = ref(((y = (p = n == null ? void 0 : n.value) == null ? void 0 : p.getView()) == null ? void 0 : y.getZoom()) || mapZoom.default), l = ref(!1), c = ref(null), s = ref(!0), m = () => {
|
|
1596
|
+
o.disableGreenDot || r.value >= mapZoom.shipGreenDotMax || (s.value = !s.value, i("switchGreenDot", s.value));
|
|
1596
1597
|
}, d = () => {
|
|
1598
|
+
i("switchMapTile", o.mapTileMode === BaseMapType.vector ? BaseMapType.satellite : BaseMapType.vector);
|
|
1599
|
+
}, u = () => {
|
|
1597
1600
|
var h, g;
|
|
1598
|
-
|
|
1601
|
+
l.value ? (showMeasure.value = !1, (h = c.value) == null || h.removeInteraction()) : (showMeasure.value = !0, (g = c.value) == null || g.addInteraction()), l.value = !l.value;
|
|
1599
1602
|
}, f = () => {
|
|
1600
1603
|
var h;
|
|
1601
|
-
(h = c.value) == null || h.removeInteraction(),
|
|
1604
|
+
(h = c.value) == null || h.removeInteraction(), l.value = !1;
|
|
1602
1605
|
};
|
|
1603
1606
|
return onMounted(() => {
|
|
1604
1607
|
nextTick(() => {
|
|
1605
1608
|
var h;
|
|
1606
|
-
(h =
|
|
1607
|
-
var k,
|
|
1608
|
-
const g = (
|
|
1609
|
+
(h = n == null ? void 0 : n.value) == null || h.on("moveend", () => {
|
|
1610
|
+
var k, T;
|
|
1611
|
+
const g = (T = (k = n == null ? void 0 : n.value) == null ? void 0 : k.getView()) == null ? void 0 : T.getZoom();
|
|
1609
1612
|
g && (r.value = g);
|
|
1610
1613
|
});
|
|
1611
1614
|
});
|
|
@@ -1617,8 +1620,8 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1617
1620
|
createElementVNode("div", _hoisted_2$1, [
|
|
1618
1621
|
h.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
|
|
1619
1622
|
key: 0,
|
|
1620
|
-
class: normalizeClass(["switch-btn", `${
|
|
1621
|
-
onClick:
|
|
1623
|
+
class: normalizeClass(["switch-btn", `${l.value && "active"}`]),
|
|
1624
|
+
onClick: u
|
|
1622
1625
|
}, g[5] || (g[5] = [
|
|
1623
1626
|
createElementVNode("i", { class: "map-iconfont icon-measure" }, null, -1),
|
|
1624
1627
|
createElementVNode("div", { class: "button-text" }, "测距", -1)
|
|
@@ -1634,7 +1637,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1634
1637
|
h.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
|
|
1635
1638
|
key: 2,
|
|
1636
1639
|
class: normalizeClass(`switch-btn ${h.mapTileMode === unref(BaseMapType).satellite && "active"}`),
|
|
1637
|
-
onClick: g[0] || (g[0] = (k) =>
|
|
1640
|
+
onClick: g[0] || (g[0] = (k) => d())
|
|
1638
1641
|
}, g[7] || (g[7] = [
|
|
1639
1642
|
createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
|
|
1640
1643
|
createElementVNode("div", { class: "button-text" }, "图层", -1)
|
|
@@ -1642,7 +1645,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1642
1645
|
h.vehicleMode === "truck" ? (openBlock(), createElementBlock("div", {
|
|
1643
1646
|
key: 3,
|
|
1644
1647
|
class: normalizeClass(`switch-btn ${h.mapTileMode === unref(BaseMapType).satellite && "active"}`),
|
|
1645
|
-
onClick: g[1] || (g[1] = (k) =>
|
|
1648
|
+
onClick: g[1] || (g[1] = (k) => d())
|
|
1646
1649
|
}, g[8] || (g[8] = [
|
|
1647
1650
|
createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
|
|
1648
1651
|
createElementVNode("div", { class: "button-text" }, "卫星", -1)
|
|
@@ -1668,8 +1671,8 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1668
1671
|
])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
1669
1672
|
h.vehicleMode === "ship" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
1670
1673
|
createElementVNode("div", {
|
|
1671
|
-
class: normalizeClass(["switch-btn", `${
|
|
1672
|
-
onClick:
|
|
1674
|
+
class: normalizeClass(["switch-btn", `${l.value && "active"}`]),
|
|
1675
|
+
onClick: u
|
|
1673
1676
|
}, g[11] || (g[11] = [
|
|
1674
1677
|
createElementVNode("i", { class: "map-iconfont icon-measure" }, null, -1),
|
|
1675
1678
|
createElementVNode("div", { class: "button-text" }, "测距", -1)
|
|
@@ -1685,7 +1688,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1685
1688
|
], 64)) : createCommentVNode("", !0),
|
|
1686
1689
|
createElementVNode("div", {
|
|
1687
1690
|
class: normalizeClass(["switch-btn", { active: h.mapTileMode === unref(BaseMapType).satellite }]),
|
|
1688
|
-
onClick:
|
|
1691
|
+
onClick: d
|
|
1689
1692
|
}, g[13] || (g[13] = [
|
|
1690
1693
|
createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
|
|
1691
1694
|
createElementVNode("div", { class: "button-text" }, "卫星", -1)
|
|
@@ -1693,32 +1696,32 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1693
1696
|
], 64))
|
|
1694
1697
|
], 2),
|
|
1695
1698
|
createElementVNode("div", _hoisted_3, [
|
|
1696
|
-
|
|
1699
|
+
l.value ? (openBlock(), createBlock(Measure, {
|
|
1697
1700
|
key: 0,
|
|
1698
1701
|
ref_key: "measureRef",
|
|
1699
1702
|
ref: c,
|
|
1700
|
-
visible:
|
|
1701
|
-
"onUpdate:visible": g[4] || (g[4] = (k) =>
|
|
1703
|
+
visible: l.value,
|
|
1704
|
+
"onUpdate:visible": g[4] || (g[4] = (k) => l.value = k),
|
|
1702
1705
|
onClose: f,
|
|
1703
1706
|
"view-mode": h.viewMode
|
|
1704
1707
|
}, null, 8, ["visible", "view-mode"])) : createCommentVNode("", !0)
|
|
1705
1708
|
])
|
|
1706
1709
|
], 64));
|
|
1707
1710
|
}
|
|
1708
|
-
}), ToolPanel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-
|
|
1711
|
+
}), ToolPanel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-6b24cf3c"]]), _hoisted_1$2 = { id: "scale-line-container" }, _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
1709
1712
|
__name: "scaleLine",
|
|
1710
1713
|
setup(e, { expose: t }) {
|
|
1711
|
-
const
|
|
1714
|
+
const n = inject("mapInstance");
|
|
1712
1715
|
return t({
|
|
1713
|
-
setScaleLine: (
|
|
1716
|
+
setScaleLine: (i) => {
|
|
1714
1717
|
var c;
|
|
1715
|
-
|
|
1718
|
+
i || (i = "metric");
|
|
1716
1719
|
const r = new ScaleLine$1({
|
|
1717
|
-
units:
|
|
1718
|
-
}),
|
|
1719
|
-
|
|
1720
|
+
units: i
|
|
1721
|
+
}), l = document.getElementById("scale-line-container");
|
|
1722
|
+
l && (r.setTarget(l), (c = n == null ? void 0 : n.value) == null || c.addControl(r));
|
|
1720
1723
|
}
|
|
1721
|
-
}), (
|
|
1724
|
+
}), (i, r) => (openBlock(), createElementBlock("div", _hoisted_1$2));
|
|
1722
1725
|
}
|
|
1723
1726
|
}), ScaleLine = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-d666f80d"]]), _hoisted_1$1 = { class: "zoom" }, _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
1724
1727
|
__name: "zoomControl",
|
|
@@ -1728,40 +1731,40 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1728
1731
|
}
|
|
1729
1732
|
},
|
|
1730
1733
|
setup(e) {
|
|
1731
|
-
const t = inject("mapInstance"),
|
|
1734
|
+
const t = inject("mapInstance"), n = () => {
|
|
1732
1735
|
if (!t.value) return;
|
|
1733
|
-
const
|
|
1734
|
-
r &&
|
|
1735
|
-
},
|
|
1736
|
+
const i = t.value.getView(), r = i.getZoom();
|
|
1737
|
+
r && i.setZoom(r + 1);
|
|
1738
|
+
}, o = () => {
|
|
1736
1739
|
if (!t.value) return;
|
|
1737
|
-
const
|
|
1738
|
-
r &&
|
|
1740
|
+
const i = t.value.getView(), r = i.getZoom();
|
|
1741
|
+
r && i.setZoom(r - 1);
|
|
1739
1742
|
};
|
|
1740
|
-
return (
|
|
1743
|
+
return (i, r) => (openBlock(), createElementBlock("div", _hoisted_1$1, [
|
|
1741
1744
|
createElementVNode("div", {
|
|
1742
|
-
onClick:
|
|
1745
|
+
onClick: n,
|
|
1743
1746
|
class: "button big-button"
|
|
1744
1747
|
}, "+"),
|
|
1745
1748
|
createElementVNode("div", {
|
|
1746
|
-
onClick:
|
|
1749
|
+
onClick: o,
|
|
1747
1750
|
class: "button small-button"
|
|
1748
1751
|
}, "-")
|
|
1749
1752
|
]));
|
|
1750
1753
|
}
|
|
1751
|
-
}), ZoomControl = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-
|
|
1754
|
+
}), 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
1755
|
__name: "copyright",
|
|
1753
1756
|
props: {
|
|
1754
1757
|
type: { default: COPY_RIGHT_TYPE.HORIZONTAL }
|
|
1755
1758
|
},
|
|
1756
1759
|
setup(e) {
|
|
1757
1760
|
useCssVars((r) => ({
|
|
1758
|
-
"4bfada56":
|
|
1761
|
+
"4bfada56": i.value
|
|
1759
1762
|
}));
|
|
1760
|
-
const t = e,
|
|
1761
|
-
return (r,
|
|
1763
|
+
const t = e, n = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? "map/tdt-copyright-h.svg" : `map/tdt-copyright-v${mapTile === "satellite" ? "-w" : ""}.svg`), o = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? "400px" : "168px"), i = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? "auto auto 0 5px" : "0 auto auto 5px");
|
|
1764
|
+
return (r, l) => (openBlock(), createElementBlock("div", _hoisted_1, [
|
|
1762
1765
|
createElementVNode("img", {
|
|
1763
|
-
src: unref(CDN_URL) +
|
|
1764
|
-
width:
|
|
1766
|
+
src: unref(CDN_URL) + n.value,
|
|
1767
|
+
width: o.value,
|
|
1765
1768
|
class: "logo",
|
|
1766
1769
|
alt: ""
|
|
1767
1770
|
}, null, 8, _hoisted_2)
|
|
@@ -1779,31 +1782,31 @@ cameraImage.crossOrigin = "anonymous";
|
|
|
1779
1782
|
const loadImage = new Image();
|
|
1780
1783
|
loadImage.src = `${CDN_URL}/map/map-load.svg`;
|
|
1781
1784
|
loadImage.crossOrigin = "anonymous";
|
|
1782
|
-
const setTruckStyle = (e, t,
|
|
1783
|
-
renderer: (
|
|
1784
|
-
const
|
|
1785
|
-
|
|
1785
|
+
const setTruckStyle = (e, t, n, o) => new Style({
|
|
1786
|
+
renderer: (i, r) => {
|
|
1787
|
+
const l = r.context;
|
|
1788
|
+
l.save();
|
|
1786
1789
|
let c = 1;
|
|
1787
|
-
|
|
1788
|
-
let [s, m] =
|
|
1790
|
+
l.scale(c, c);
|
|
1791
|
+
let [s, m] = i;
|
|
1789
1792
|
s = Number(s) / c - 20, m = Number(m) / c;
|
|
1790
|
-
const
|
|
1793
|
+
const d = s - 70, u = m - 68;
|
|
1791
1794
|
let f = 180;
|
|
1792
1795
|
const p = 56, y = "#FFFFFF";
|
|
1793
1796
|
let h = 176;
|
|
1794
1797
|
const g = 52;
|
|
1795
|
-
let k = "#164AFF",
|
|
1796
|
-
|
|
1797
|
-
const
|
|
1798
|
-
if (
|
|
1799
|
-
const F =
|
|
1798
|
+
let k = "#164AFF", T = "#FFFFFF";
|
|
1799
|
+
n === CAR_COLOR.YELLOW ? (h = 176, k = "#FFC81E", T = "rgba(0,0,0,0.88)") : n === CAR_COLOR.Y_GREEN && (f = 200, h = 196, k = "#8FED7C", T = "rgba(0,0,0,0.88)"), o != null && o.length && (f += o.length * 56), fillRectRadius(l, d, u, f, p, y), fillRectRadius(l, d + 2, u + 2, h, g, k), n === CAR_COLOR.Y_GREEN && fillRectRadius(l, d + 2, u + 2, 68, g, "#FFC81E"), l.save(), l.restore(), l.fillStyle = T, l.font = "bold 28px Arial", l.textAlign = "left", l.textBaseline = "middle";
|
|
1800
|
+
const I = `${t.slice(0, 2) + " · " + t.slice(2)}`;
|
|
1801
|
+
if (l.fillText(I, d + 12, u + 32), l.save(), l.restore(), o != null && o.length) {
|
|
1802
|
+
const F = l.measureText(I).width + 12;
|
|
1800
1803
|
let P = 0;
|
|
1801
|
-
|
|
1802
|
-
v === DEVICE_TYPE.CAMERA && (
|
|
1804
|
+
o.forEach((v) => {
|
|
1805
|
+
v === DEVICE_TYPE.CAMERA && (l.drawImage(cameraImage, s - 54 + F + P * 56, m - 64, 50, 50), ++P), v === DEVICE_TYPE.LOAD && (l.drawImage(loadImage, s - 54 + F + P * 56, m - 64, 50, 50), ++P);
|
|
1803
1806
|
});
|
|
1804
1807
|
}
|
|
1805
1808
|
const x = dotImage$1;
|
|
1806
|
-
|
|
1809
|
+
l.drawImage(x, s + f / 2 - 90, m, 50 / c, 50 / c), l.restore();
|
|
1807
1810
|
}
|
|
1808
1811
|
}), mapInstance$2 = ref(), renderDashboardSetInstance = (e) => mapInstance$2.value = e;
|
|
1809
1812
|
ref([]);
|
|
@@ -1811,15 +1814,15 @@ let truckMarkerList = [], trucksVectorSource;
|
|
|
1811
1814
|
const renderTrucksMarker = (e) => {
|
|
1812
1815
|
if (deleteAllTruckMarkers(), !!mapInstance$2.value)
|
|
1813
1816
|
return e.forEach((t) => {
|
|
1814
|
-
const
|
|
1815
|
-
geometry: new Point(fromLonLat(
|
|
1817
|
+
const n = formatUtils.convertSixHundredThousandToLatLng(t.lon, t.lat), o = new Feature({
|
|
1818
|
+
geometry: new Point(fromLonLat(n))
|
|
1816
1819
|
});
|
|
1817
|
-
|
|
1820
|
+
o.set("data", t), o.setStyle(
|
|
1818
1821
|
setTruckStyle(!1, t.vno, t.vclColor ?? 0, t.icons ?? [])
|
|
1819
1822
|
), truckMarkerList.push({
|
|
1820
1823
|
name: t.vno,
|
|
1821
|
-
lonlat:
|
|
1822
|
-
feature:
|
|
1824
|
+
lonlat: n,
|
|
1825
|
+
feature: o
|
|
1823
1826
|
});
|
|
1824
1827
|
}), trucksVectorSource = new VectorSource({
|
|
1825
1828
|
features: truckMarkerList.map((t) => t.feature)
|
|
@@ -1832,17 +1835,17 @@ const renderTrucksMarker = (e) => {
|
|
|
1832
1835
|
}), truckMarkerList = [];
|
|
1833
1836
|
}, mapInstance$1 = ref(), renderTruckSetInstance = (e) => mapInstance$1.value = e, vehicle = ref(null), focusShipData = ref(), currentTruckOverlay = ref(null), findTruck = async (e) => {
|
|
1834
1837
|
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
|
-
|
|
1838
|
+
const t = formatUtils.convertSixHundredThousandToLatLng(e.lon, e.lat), n = mapInstance$1.value.getPixelFromCoordinate(transform(t, projection.data, projection.mercator));
|
|
1839
|
+
currentTruckOverlay.value = e ? drawTruckIcon(e.vno, n, (e == null ? void 0 : e.drc) ?? "") ?? null : null;
|
|
1840
|
+
const o = mapInstance$1.value.getView(), i = new Point(t);
|
|
1841
|
+
o.setCenter(transform(i.getCoordinates(), projection.data, projection.mercator));
|
|
1839
1842
|
}, clearAllTruck = () => {
|
|
1840
1843
|
vehicle.value.clearAllShip();
|
|
1841
|
-
}, drawTruckIcon = (e, t,
|
|
1842
|
-
const
|
|
1844
|
+
}, drawTruckIcon = (e, t, n) => {
|
|
1845
|
+
const o = `<div id="${e}" class="ol-custom-content truck-custom-content" style="width: 80px; height: 80px; transform: rotate(${n}deg);">
|
|
1843
1846
|
<img src="${CDN_URL}map/car-icon.gif" width="100%" height="100%" />
|
|
1844
1847
|
</div>`;
|
|
1845
|
-
return drawCustomContent(e, t,
|
|
1848
|
+
return drawCustomContent(e, t, o, "center-center");
|
|
1846
1849
|
}, removeTruckIcon = () => {
|
|
1847
1850
|
var t;
|
|
1848
1851
|
const e = (t = currentTruckOverlay.value) == null ? void 0 : t.getElement();
|
|
@@ -1850,13 +1853,13 @@ const renderTrucksMarker = (e) => {
|
|
|
1850
1853
|
}, zoomTruckIcon = () => {
|
|
1851
1854
|
var r;
|
|
1852
1855
|
if (!mapInstance$1.value) return;
|
|
1853
|
-
const e = mapInstance$1.value.getView().getZoom(), t = 120,
|
|
1854
|
-
function
|
|
1855
|
-
return
|
|
1856
|
+
const e = mapInstance$1.value.getView().getZoom(), t = 120, n = 60;
|
|
1857
|
+
function o(l) {
|
|
1858
|
+
return l < 14 ? n : l >= 14 && l <= 18 ? Math.round((l - 14) * (t - n) / 4 + n) : t;
|
|
1856
1859
|
}
|
|
1857
|
-
const
|
|
1858
|
-
(r = document.querySelectorAll(".truck-custom-content")) == null || r.forEach((
|
|
1859
|
-
|
|
1860
|
+
const i = o(e);
|
|
1861
|
+
(r = document.querySelectorAll(".truck-custom-content")) == null || r.forEach((l) => {
|
|
1862
|
+
l.style.width = `${i}px`, l.style.height = `${i}px`;
|
|
1860
1863
|
});
|
|
1861
1864
|
}, mapInstance = ref(), drawPolygonSetInstance = (e) => mapInstance.value = e;
|
|
1862
1865
|
let layerState = "drawn", drawnState = "undrawn";
|
|
@@ -1902,96 +1905,96 @@ function createHelpTooltip() {
|
|
|
1902
1905
|
}
|
|
1903
1906
|
let squareLimitError = !1, lineLimitError = !1;
|
|
1904
1907
|
const validateSquareLimit = (e) => {
|
|
1905
|
-
let
|
|
1908
|
+
let n = 1 / 0, o = -1 / 0, i = 1 / 0, r = -1 / 0;
|
|
1906
1909
|
e == null || e.forEach((s) => {
|
|
1907
|
-
const m = transform(s, projection.mercator, projection.data),
|
|
1908
|
-
|
|
1910
|
+
const m = transform(s, projection.mercator, projection.data), d = m[0], u = m[1];
|
|
1911
|
+
n = Math.min(n, u), o = Math.max(o, u), i = Math.min(i, d), r = Math.max(r, d);
|
|
1909
1912
|
});
|
|
1910
|
-
const
|
|
1911
|
-
squareLimitError =
|
|
1913
|
+
const l = (o - n) * 111, c = (r - i) * 111;
|
|
1914
|
+
squareLimitError = l > 150 || c > 150;
|
|
1912
1915
|
};
|
|
1913
1916
|
let storeFeature, callbackFunction = null;
|
|
1914
1917
|
const addInteraction = (e) => {
|
|
1915
|
-
var
|
|
1916
|
-
e && (callbackFunction = e), drawVector || init(), drawnState = "undrawn", layerState = "drawn", (
|
|
1918
|
+
var n, o;
|
|
1919
|
+
e && (callbackFunction = e), drawVector || init(), drawnState = "undrawn", layerState = "drawn", (n = mapInstance.value) == null || n.addLayer(drawVector), draw = new Draw({
|
|
1917
1920
|
type: "Polygon",
|
|
1918
1921
|
source,
|
|
1919
1922
|
trace: !0,
|
|
1920
1923
|
style: [drawPolygonStyle.drawing, circleStyle]
|
|
1921
|
-
}), (
|
|
1924
|
+
}), (o = mapInstance.value) == null || o.addInteraction(draw), createMeasureTooltip(), createHelpTooltip();
|
|
1922
1925
|
let t;
|
|
1923
|
-
draw.on("drawstart", function(
|
|
1926
|
+
draw.on("drawstart", function(i) {
|
|
1924
1927
|
var r;
|
|
1925
|
-
layerState = "drawn", sketch =
|
|
1926
|
-
const c =
|
|
1927
|
-
if (lineLimitError = Number(getLength(
|
|
1928
|
+
layerState = "drawn", sketch = i.feature, t = (r = sketch.getGeometry()) == null ? void 0 : r.on("change", function(l) {
|
|
1929
|
+
const c = l.target, s = formatUtils.formatArea(c, LENGTH_UNIT.NM), d = c.getCoordinates()[0], u = new LineString([d[d.length - 2], d[d.length - 1]]), f = formatUtils.formatLength(u, LENGTH_UNIT.NM);
|
|
1930
|
+
if (lineLimitError = Number(getLength(u) / 1e3) > 150, validateSquareLimit(d), measureTooltipElement && s && (measureTooltipElement.innerHTML = `
|
|
1928
1931
|
<span class="text">面积:${s}${lineLimitError || squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
|
|
1929
1932
|
`), helpTooltipElement && s) {
|
|
1930
1933
|
let p = "";
|
|
1931
1934
|
parseFloat(s) > 0 && (p = `
|
|
1932
1935
|
<div class="text ${squareLimitError ? "error" : ""}">面积:${s}${squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</div>`), helpTooltipElement.innerHTML = `${p}
|
|
1933
|
-
<span class="text ${lineLimitError ? "error" : ""}">线段${
|
|
1936
|
+
<span class="text ${lineLimitError ? "error" : ""}">线段${d.length - 2}:${f}${lineLimitError ? '<span class="error pl-4">超出可以绘画的距离</span>' : ""}</span>
|
|
1934
1937
|
<div><span class="text">单击继续,双击结束</span></div>
|
|
1935
1938
|
`;
|
|
1936
1939
|
}
|
|
1937
1940
|
}), drawnState = "drawing";
|
|
1938
|
-
}), draw.on("drawend", function(
|
|
1939
|
-
if (
|
|
1940
|
-
storeFeature =
|
|
1941
|
-
const r = endFn(
|
|
1941
|
+
}), draw.on("drawend", function(i) {
|
|
1942
|
+
if (i.feature.getGeometry()) {
|
|
1943
|
+
storeFeature = i.feature;
|
|
1944
|
+
const r = endFn(i.feature);
|
|
1942
1945
|
r != null && r.length && callbackFunction && callbackFunction(r);
|
|
1943
1946
|
}
|
|
1944
1947
|
if (sketch = null, measureTooltipElement = null, createMeasureTooltip(), t && unByKey(t), drawnState = "drawend", draw && mapInstance.value) {
|
|
1945
|
-
const r = mapInstance.value.getInteractions().getArray().find((
|
|
1948
|
+
const r = mapInstance.value.getInteractions().getArray().find((l) => getUid(l) === getUid(draw));
|
|
1946
1949
|
r && mapInstance.value.removeInteraction(r), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement);
|
|
1947
1950
|
}
|
|
1948
1951
|
});
|
|
1949
1952
|
}, removeInteraction = () => {
|
|
1950
|
-
var e, t,
|
|
1953
|
+
var e, t, n;
|
|
1951
1954
|
if (mapInstance.value) {
|
|
1952
|
-
if (document.querySelectorAll(".ol-tooltip.ol-tooltip-draw-polygon").forEach((
|
|
1953
|
-
var
|
|
1954
|
-
(
|
|
1955
|
+
if (document.querySelectorAll(".ol-tooltip.ol-tooltip-draw-polygon").forEach((o) => {
|
|
1956
|
+
var i;
|
|
1957
|
+
(i = o == null ? void 0 : o.parentNode) == null || i.removeChild(o);
|
|
1955
1958
|
}), source.clear(), (e = mapInstance.value) == null || e.removeLayer(drawVector), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement), ((t = mapInstance.value) == null ? void 0 : t.getTargetElement()).style.cursor = "", document.querySelector("#map").style.cursor = "", draw) {
|
|
1956
|
-
const
|
|
1957
|
-
|
|
1959
|
+
const o = mapInstance.value.getInteractions().getArray().find((i) => getUid(i) === getUid(draw));
|
|
1960
|
+
o && ((n = mapInstance.value) == null || n.removeInteraction(o));
|
|
1958
1961
|
}
|
|
1959
1962
|
drawnState = "undrawn", layerState = "destroyed";
|
|
1960
1963
|
}
|
|
1961
1964
|
}, endFn = (e) => {
|
|
1962
|
-
var t,
|
|
1965
|
+
var t, n, o;
|
|
1963
1966
|
if (e.getGeometry()) {
|
|
1964
|
-
const
|
|
1965
|
-
(t =
|
|
1966
|
-
|
|
1967
|
+
const i = [], l = e.getGeometry().getCoordinates();
|
|
1968
|
+
(t = l[0]) == null || t.forEach((s) => {
|
|
1969
|
+
i.push(transform(s, projection.mercator, projection.data));
|
|
1967
1970
|
});
|
|
1968
|
-
const c =
|
|
1969
|
-
if (c && measureTooltip.setPosition(c), measureTooltip.setOffset([10, 0]), measureTooltipElement && (measureTooltipElement.innerHTML += '<span class="delete-icon"><i class="map-iconfont icon-delete" /></div>'), (
|
|
1971
|
+
const c = l[0][l[0].length - 2];
|
|
1972
|
+
if (c && measureTooltip.setPosition(c), measureTooltip.setOffset([10, 0]), measureTooltipElement && (measureTooltipElement.innerHTML += '<span class="delete-icon"><i class="map-iconfont icon-delete" /></div>'), (n = document.querySelector(".delete-icon")) == null || n.addEventListener("click", () => {
|
|
1970
1973
|
reset();
|
|
1971
1974
|
}), !lineLimitError && !squareLimitError)
|
|
1972
|
-
return
|
|
1973
|
-
draw && ((
|
|
1975
|
+
return i;
|
|
1976
|
+
draw && ((o = mapInstance.value) == null || o.removeInteraction(draw)), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement);
|
|
1974
1977
|
}
|
|
1975
1978
|
}, initFeature = (e) => {
|
|
1976
|
-
var t,
|
|
1979
|
+
var t, n;
|
|
1977
1980
|
if (e && (callbackFunction = e), layerState = "drawn", storeFeature) {
|
|
1978
|
-
const
|
|
1979
|
-
if (!
|
|
1980
|
-
const
|
|
1981
|
+
const o = storeFeature.getGeometry();
|
|
1982
|
+
if (!o) return;
|
|
1983
|
+
const i = formatUtils.formatArea(o, LENGTH_UNIT.NM);
|
|
1981
1984
|
measureTooltipElement && (measureTooltipElement.innerHTML = `
|
|
1982
|
-
<span class="text">面积:${
|
|
1985
|
+
<span class="text">面积:${i}${lineLimitError || squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
|
|
1983
1986
|
`), (t = drawVector.getSource()) == null || t.addFeature(storeFeature);
|
|
1984
1987
|
const r = endFn(storeFeature);
|
|
1985
1988
|
r != null && r.length && callbackFunction && callbackFunction(r);
|
|
1986
|
-
const
|
|
1987
|
-
(
|
|
1989
|
+
const l = getCenter(storeFeature.getGeometry().getExtent());
|
|
1990
|
+
(n = mapInstance.value) == null || n.getView().setCenter(l);
|
|
1988
1991
|
}
|
|
1989
1992
|
}, pointerMoveHandler = function(e) {
|
|
1990
|
-
var
|
|
1993
|
+
var n;
|
|
1991
1994
|
if (e.dragging)
|
|
1992
1995
|
return;
|
|
1993
1996
|
let t = "点击选择起点";
|
|
1994
|
-
sketch && (t = "单击继续,双击结束"), helpTooltipElement && (helpTooltipElement.innerHTML = t, helpTooltip.setPosition(e.coordinate), helpTooltipElement.classList.remove("hidden")), layerState === "drawn" && (((
|
|
1997
|
+
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
1998
|
}, init = () => {
|
|
1996
1999
|
mapInstance.value && (circleStyle = new Style({
|
|
1997
2000
|
image: new CircleStyle({
|
|
@@ -2024,19 +2027,19 @@ const addInteraction = (e) => {
|
|
|
2024
2027
|
dotImage.crossOrigin = "anonymous";
|
|
2025
2028
|
const dotActiveImage = new Image();
|
|
2026
2029
|
dotActiveImage.crossOrigin = "anonymous";
|
|
2027
|
-
const setPointStyle = (e, t,
|
|
2028
|
-
const { color:
|
|
2029
|
-
return (r ||
|
|
2030
|
+
const setPointStyle = (e, t, n) => {
|
|
2031
|
+
const { color: o, url: i, activeUrl: r, activeColor: l } = n;
|
|
2032
|
+
return (r || i) && (e ? dotActiveImage.src = CDN_URL + (r || i) : dotImage.src = CDN_URL + (i || r)), new Style({
|
|
2030
2033
|
renderer: (c, s) => {
|
|
2031
2034
|
const m = s.context;
|
|
2032
2035
|
m.save();
|
|
2033
|
-
const
|
|
2034
|
-
let [
|
|
2035
|
-
|
|
2036
|
-
const p = m.measureText(t).width, y =
|
|
2037
|
-
if (fillRectRadius(m, y, h +
|
|
2038
|
-
const
|
|
2039
|
-
m.drawImage(
|
|
2036
|
+
const d = window.devicePixelRatio || 1;
|
|
2037
|
+
let [u, f] = c;
|
|
2038
|
+
u = Number(u), f = Number(f), m.font = `${12 * d}px Arial`;
|
|
2039
|
+
const p = m.measureText(t).width, y = u - p / 2 + (d === 1 ? -8 : 4 * d), h = f + 6 * d, g = p + 4, k = 16 * d, T = e && l || o;
|
|
2040
|
+
if (fillRectRadius(m, y, h + 13 * d, g, k, T), m.save(), m.restore(), m.fillStyle = e ? "#FFFFFF" : "#000000", m.textAlign = "center", m.textBaseline = "middle", m.fillText(t, y + (p + 4) / 2, h + 22 * d), m.save(), m.restore(), i || r) {
|
|
2041
|
+
const I = e ? dotActiveImage : dotImage;
|
|
2042
|
+
m.drawImage(I, u - I.width / 2, f - I.height / 2, 30 * d, 30 * d);
|
|
2040
2043
|
}
|
|
2041
2044
|
m.restore();
|
|
2042
2045
|
}
|
|
@@ -2049,18 +2052,18 @@ class PointMarkerClass {
|
|
|
2049
2052
|
* 配置渲染点的样式
|
|
2050
2053
|
* @param options
|
|
2051
2054
|
*/
|
|
2052
|
-
constructor(t,
|
|
2053
|
-
|
|
2055
|
+
constructor(t, n) {
|
|
2056
|
+
b(this, "mapInstance");
|
|
2054
2057
|
// 渲染的数据
|
|
2055
|
-
|
|
2058
|
+
b(this, "pointMarkerList", []);
|
|
2056
2059
|
// 绘制点渲染层数据
|
|
2057
|
-
|
|
2060
|
+
b(this, "pointsVectorSource");
|
|
2058
2061
|
// 当前高亮的数据
|
|
2059
|
-
|
|
2060
|
-
|
|
2062
|
+
b(this, "highlightPoint");
|
|
2063
|
+
b(this, "pointLayer");
|
|
2061
2064
|
// 颜色等其他设置
|
|
2062
|
-
|
|
2063
|
-
this.mapInstance = t, this.options =
|
|
2065
|
+
b(this, "options");
|
|
2066
|
+
this.mapInstance = t, this.options = n;
|
|
2064
2067
|
}
|
|
2065
2068
|
/**
|
|
2066
2069
|
* 渲染
|
|
@@ -2079,48 +2082,48 @@ class PointMarkerClass {
|
|
|
2079
2082
|
*/
|
|
2080
2083
|
renderPointMarker(t) {
|
|
2081
2084
|
if (this.deleteAllPointMarkers(), !this.mapInstance) return;
|
|
2082
|
-
let
|
|
2083
|
-
t.forEach((
|
|
2085
|
+
let n = {};
|
|
2086
|
+
t.forEach((o) => {
|
|
2084
2087
|
var r;
|
|
2085
|
-
const
|
|
2086
|
-
if (((r = this.highlightPoint) == null ? void 0 : r.id) ===
|
|
2087
|
-
|
|
2088
|
-
id:
|
|
2089
|
-
name:
|
|
2090
|
-
lonlat: [Number(
|
|
2091
|
-
pointType:
|
|
2088
|
+
const i = [o.lon, o.lat];
|
|
2089
|
+
if (((r = this.highlightPoint) == null ? void 0 : r.id) === o.id)
|
|
2090
|
+
n = {
|
|
2091
|
+
id: o.id,
|
|
2092
|
+
name: o.name,
|
|
2093
|
+
lonlat: [Number(o.lon), Number(o.lat)],
|
|
2094
|
+
pointType: o.pointType
|
|
2092
2095
|
};
|
|
2093
2096
|
else {
|
|
2094
|
-
const
|
|
2097
|
+
const l = this.getFeature(o, i);
|
|
2095
2098
|
this.pointMarkerList.push({
|
|
2096
|
-
id:
|
|
2097
|
-
name:
|
|
2098
|
-
lonlat: [Number(
|
|
2099
|
-
feature:
|
|
2100
|
-
pointType:
|
|
2099
|
+
id: o.id,
|
|
2100
|
+
name: o.name,
|
|
2101
|
+
lonlat: [Number(o.lon), Number(o.lat)],
|
|
2102
|
+
feature: l,
|
|
2103
|
+
pointType: o.pointType
|
|
2101
2104
|
});
|
|
2102
2105
|
}
|
|
2103
|
-
}),
|
|
2104
|
-
features: [...this.pointMarkerList.map((
|
|
2106
|
+
}), n && n.lonlat && (n.feature = this.getFeature(n, n.lonlat), this.pointMarkerList.push(n)), this.pointsVectorSource = new VectorSource({
|
|
2107
|
+
features: [...this.pointMarkerList.map((o) => o.feature)]
|
|
2105
2108
|
}), this.pointLayer = new VectorLayer({
|
|
2106
2109
|
source: this.pointsVectorSource
|
|
2107
2110
|
}), this.mapInstance.addLayer(this.pointLayer);
|
|
2108
2111
|
}
|
|
2109
2112
|
// 删除 未选中的渲染点
|
|
2110
2113
|
deleteAllPointMarkers(t) {
|
|
2111
|
-
this.pointMarkerList.forEach((
|
|
2112
|
-
var
|
|
2113
|
-
|
|
2114
|
+
this.pointMarkerList.forEach((n) => {
|
|
2115
|
+
var o;
|
|
2116
|
+
n.feature && t !== n.id && ((o = this.pointsVectorSource) == null || o.removeFeature(n.feature));
|
|
2114
2117
|
});
|
|
2115
2118
|
}
|
|
2116
2119
|
// 取消高亮
|
|
2117
2120
|
cancelHighlightTruckMarker() {
|
|
2118
2121
|
if (!this.highlightPoint)
|
|
2119
2122
|
return;
|
|
2120
|
-
const { id: t, name:
|
|
2121
|
-
this.highlightPoint = void 0, this.pointMarkerList.find((
|
|
2122
|
-
|
|
2123
|
-
setPointStyle(!1,
|
|
2123
|
+
const { id: t, name: n } = this.highlightPoint;
|
|
2124
|
+
this.highlightPoint = void 0, this.pointMarkerList.find((o) => {
|
|
2125
|
+
o.id === t && o.feature.setStyle(
|
|
2126
|
+
setPointStyle(!1, n, this.options)
|
|
2124
2127
|
);
|
|
2125
2128
|
});
|
|
2126
2129
|
}
|
|
@@ -2142,24 +2145,24 @@ class PointMarkerClass {
|
|
|
2142
2145
|
*/
|
|
2143
2146
|
highlightPointMarker(t) {
|
|
2144
2147
|
if (!this.mapInstance) return;
|
|
2145
|
-
const { id:
|
|
2148
|
+
const { id: n, name: o, fullName: i, lon: r, lat: l, pointType: c } = t, s = [Number(r), Number(l)];
|
|
2146
2149
|
this.highlightPoint = {
|
|
2147
|
-
id:
|
|
2148
|
-
name:
|
|
2149
|
-
fullName:
|
|
2150
|
+
id: n,
|
|
2151
|
+
name: o,
|
|
2152
|
+
fullName: i,
|
|
2150
2153
|
lonlat: s,
|
|
2151
2154
|
pointType: c
|
|
2152
2155
|
}, this.setPointCenter(s);
|
|
2153
2156
|
}
|
|
2154
2157
|
// 获取feature
|
|
2155
|
-
getFeature(t,
|
|
2156
|
-
var
|
|
2157
|
-
const
|
|
2158
|
-
geometry: new Point(fromLonLat(
|
|
2158
|
+
getFeature(t, n) {
|
|
2159
|
+
var i;
|
|
2160
|
+
const o = new Feature({
|
|
2161
|
+
geometry: new Point(fromLonLat(n))
|
|
2159
2162
|
});
|
|
2160
|
-
return
|
|
2161
|
-
setPointStyle(((
|
|
2162
|
-
),
|
|
2163
|
+
return o.set("data", t), o.setStyle(
|
|
2164
|
+
setPointStyle(((i = this.highlightPoint) == null ? void 0 : i.id) === t.id, t.name, this.options)
|
|
2165
|
+
), o;
|
|
2163
2166
|
}
|
|
2164
2167
|
/**
|
|
2165
2168
|
*
|
|
@@ -2169,10 +2172,10 @@ class PointMarkerClass {
|
|
|
2169
2172
|
* type 0: 不改变地图大小 1: 等于customZoom 2: 地图当前zoom > 传入的customZoom(缩小地图) 3: 地图当前zoom < 传入的customZoom(放大地图)
|
|
2170
2173
|
* }
|
|
2171
2174
|
*/
|
|
2172
|
-
setPointCenter(t,
|
|
2175
|
+
setPointCenter(t, n = { customZoom: mapZoom.findShip, type: 1 }) {
|
|
2173
2176
|
if (!this.mapInstance) return;
|
|
2174
|
-
const { customZoom:
|
|
2175
|
-
(
|
|
2177
|
+
const { customZoom: o = mapZoom.findShip, type: i = 1 } = n, r = this.mapInstance.getView(), l = r.getZoom();
|
|
2178
|
+
(i === 1 || l > o && i === 2 || l < o && i === 3) && r.setZoom(o);
|
|
2176
2179
|
const c = new Point(t);
|
|
2177
2180
|
r.setCenter(transform(c.getCoordinates(), projection.data, projection.mercator));
|
|
2178
2181
|
}
|
|
@@ -2189,10 +2192,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2189
2192
|
logoType: {}
|
|
2190
2193
|
},
|
|
2191
2194
|
emits: ["zoomChanged", "extentChanged"],
|
|
2192
|
-
setup(e, { expose: t, emit:
|
|
2193
|
-
const
|
|
2194
|
-
provide("mapInstance",
|
|
2195
|
-
const
|
|
2195
|
+
setup(e, { expose: t, emit: n }) {
|
|
2196
|
+
const o = ref();
|
|
2197
|
+
provide("mapInstance", o);
|
|
2198
|
+
const i = ref(null), r = ref(null), l = ref(null), c = n, s = e, m = ref(s.zoom || mapZoom.default), d = ref(!1), u = ref(!0), f = ref(!0), p = {
|
|
2196
2199
|
tiandituTile: new TileLayer({ source: new XYZ({ url: baseMap.tiandituTile }) }),
|
|
2197
2200
|
tiandituTileMark: new TileLayer({ source: new XYZ({ url: baseMap.tiandituTileMark }) }),
|
|
2198
2201
|
tiandituImgTile: new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTile }), visible: !1 }),
|
|
@@ -2217,7 +2220,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2217
2220
|
// 禁用旋转
|
|
2218
2221
|
multiWorld: !0
|
|
2219
2222
|
};
|
|
2220
|
-
|
|
2223
|
+
o.value = new Map$1({
|
|
2221
2224
|
target: "map",
|
|
2222
2225
|
// 对应页面里 id 为 map 的元素
|
|
2223
2226
|
layers: [
|
|
@@ -2229,7 +2232,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2229
2232
|
p.greenMark
|
|
2230
2233
|
],
|
|
2231
2234
|
view: new View(v)
|
|
2232
|
-
}), h(), (L = r.value) == null || L.setScaleLine(s.vehicleMode === "ship" ? "nautical" : "metric"), (w =
|
|
2235
|
+
}), 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
2236
|
findShip(String(s.mmsi), s.shipData);
|
|
2234
2237
|
}), onShipsMarkerHover();
|
|
2235
2238
|
};
|
|
@@ -2237,47 +2240,47 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2237
2240
|
y();
|
|
2238
2241
|
});
|
|
2239
2242
|
const h = () => {
|
|
2240
|
-
|
|
2243
|
+
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
2244
|
}, g = (v) => {
|
|
2242
2245
|
var L;
|
|
2243
|
-
s.vehicleMode !== "ship" && (v = !1), (L =
|
|
2244
|
-
getUid(w) === getUid(p.greenMark) && (w.setVisible(v),
|
|
2246
|
+
s.vehicleMode !== "ship" && (v = !1), (L = o.value) == null || L.getLayers().forEach((w) => {
|
|
2247
|
+
getUid(w) === getUid(p.greenMark) && (w.setVisible(v), u.value = v);
|
|
2245
2248
|
});
|
|
2246
|
-
}, k = ref(BaseMapType.satellite),
|
|
2249
|
+
}, k = ref(BaseMapType.satellite), T = (v) => {
|
|
2247
2250
|
var L;
|
|
2248
|
-
k.value = v, (L =
|
|
2251
|
+
k.value = v, (L = o.value) == null || L.getLayers().forEach((w) => {
|
|
2249
2252
|
(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
2253
|
});
|
|
2251
|
-
},
|
|
2252
|
-
const v =
|
|
2254
|
+
}, I = () => {
|
|
2255
|
+
const v = o.value.getView(), L = v.getZoom();
|
|
2253
2256
|
L && x(L);
|
|
2254
|
-
const w = v.calculateExtent(
|
|
2257
|
+
const w = v.calculateExtent(o.value.getSize());
|
|
2255
2258
|
w && L && F(w, L);
|
|
2256
2259
|
}, x = (v) => {
|
|
2257
|
-
var S,
|
|
2260
|
+
var S, M, C, E, V;
|
|
2258
2261
|
m.value = v, g(v < mapZoom.shipGreenDotMax);
|
|
2259
|
-
const L = (S =
|
|
2260
|
-
showTrackLayer.value ? (f.value = !1, w == null || w.setVisible(!1), (
|
|
2262
|
+
const L = (S = o.value) == null ? void 0 : S.getLayers(), w = s.vehicleMode === "ship" ? L == null ? void 0 : L.getArray().find((N) => getUid(N) === getUid(p.greenMark)) : void 0;
|
|
2263
|
+
showTrackLayer.value ? (f.value = !1, w == null || w.setVisible(!1), (M = shipsLayer.value) == null || M.setVisible(!1), (C = largeAmountShipsLayer.value) == null || C.setVisible(!1)) : !d.value && u.value && v <= mapZoom.shipGreenDotMax ? (f.value = !0, w == null || w.setVisible(!0), (E = shipsLayer.value) == null || E.setVisible(!1), (V = largeAmountShipsLayer.value) == null || V.setVisible(!1)) : (f.value = !1, w == null || w.setVisible(!1)), c("zoomChanged", v);
|
|
2261
2264
|
}, F = (v, L) => {
|
|
2262
2265
|
const w = transform([v[0], v[1]], projection.mercator, projection.data), S = transform([v[2], v[3]], projection.mercator, projection.data);
|
|
2263
2266
|
c("extentChanged", { extent: [w, S], zoom: L });
|
|
2264
2267
|
};
|
|
2265
2268
|
return t({
|
|
2266
|
-
mapInstance:
|
|
2269
|
+
mapInstance: o,
|
|
2267
2270
|
initMap: y,
|
|
2268
2271
|
pointRender: (v, L) => new PointMarkerClass(v, L),
|
|
2269
2272
|
renderTrucksMarker,
|
|
2270
2273
|
renderShip: renderShips,
|
|
2271
2274
|
renderTrack: (v, L, w) => {
|
|
2272
|
-
var S,
|
|
2273
|
-
currentTrackId.value = v, showTrackLayer.value = !0,
|
|
2275
|
+
var S, M;
|
|
2276
|
+
currentTrackId.value = v, showTrackLayer.value = !0, d.value = !0, hiddenAllShips(), (M = (S = largeAmountShipsLayer.value) == null ? void 0 : S.getSource()) == null || M.clear(), renderTrack(v, s.vehicleMode === "ship" ? L.reverse() : L, w, LENGTH_UNIT.NM);
|
|
2274
2277
|
},
|
|
2275
2278
|
findTruck,
|
|
2276
2279
|
removeTruckIcon,
|
|
2277
2280
|
clearAllTruck,
|
|
2278
2281
|
closeTrack: () => {
|
|
2279
2282
|
var v, L;
|
|
2280
|
-
showTrackLayer.value = !1, (v = shipTrackVectorLayer.value) == null || v.setVisible(!1), (L = selectShipsLayer.value) == null || L.setVisible(!0),
|
|
2283
|
+
showTrackLayer.value = !1, (v = shipTrackVectorLayer.value) == null || v.setVisible(!1), (L = selectShipsLayer.value) == null || L.setVisible(!0), d.value = !1, g(m.value < mapZoom.shipGreenDotMax), allTracks.value = [], stopAnimation();
|
|
2281
2284
|
},
|
|
2282
2285
|
closeTruckTrack: () => {
|
|
2283
2286
|
var v, L;
|
|
@@ -2288,8 +2291,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2288
2291
|
clearSelectFeature,
|
|
2289
2292
|
findShip,
|
|
2290
2293
|
focusShip: (v, L, w = !0) => {
|
|
2291
|
-
var S,
|
|
2292
|
-
hiddenOrther.value = w, (S = shipsLayer.value) == null || S.setVisible(!w), (
|
|
2294
|
+
var S, M;
|
|
2295
|
+
hiddenOrther.value = w, (S = shipsLayer.value) == null || S.setVisible(!w), (M = largeAmountShipsLayer.value) == null || M.setVisible(!1), findShip(v, L);
|
|
2293
2296
|
},
|
|
2294
2297
|
showTracks,
|
|
2295
2298
|
removeAllTrackLayer,
|
|
@@ -2303,24 +2306,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2303
2306
|
removerLayer: removeShipTrackLineFeatureByIndex,
|
|
2304
2307
|
renderMarker,
|
|
2305
2308
|
setMarkerPosition: (v) => {
|
|
2306
|
-
|
|
2309
|
+
d.value = !0, setMarkerPosition(v);
|
|
2307
2310
|
},
|
|
2308
2311
|
getZoomAndCenter: () => {
|
|
2309
|
-
var
|
|
2310
|
-
const v = (
|
|
2312
|
+
var M;
|
|
2313
|
+
const v = (M = o.value) == null ? void 0 : M.getView();
|
|
2311
2314
|
if (!v) return null;
|
|
2312
2315
|
const L = Math.round(Number(v.getZoom())), { lon: w, lat: S } = transformUtils.mercatorToLonLat(v.getCenter());
|
|
2313
2316
|
return { zoom: L, center: [w, S] };
|
|
2314
2317
|
},
|
|
2315
2318
|
setCenter: (v) => {
|
|
2316
2319
|
var S;
|
|
2317
|
-
const L = (S =
|
|
2320
|
+
const L = (S = o.value) == null ? void 0 : S.getView();
|
|
2318
2321
|
if (!L) return null;
|
|
2319
2322
|
const w = new Point(v);
|
|
2320
2323
|
L.setCenter(transform(w.getCoordinates(), projection.data, projection.mercator));
|
|
2321
2324
|
},
|
|
2322
2325
|
drawPolygonTool,
|
|
2323
2326
|
setMapInstance: h,
|
|
2327
|
+
store: {
|
|
2328
|
+
getShowMeasure: getShowMeasure()
|
|
2329
|
+
},
|
|
2324
2330
|
config: {
|
|
2325
2331
|
mapZoom,
|
|
2326
2332
|
projection
|
|
@@ -2332,7 +2338,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2332
2338
|
}), (v, L) => (openBlock(), createElementBlock("div", {
|
|
2333
2339
|
class: "map-page map-container",
|
|
2334
2340
|
ref_key: "pageRef",
|
|
2335
|
-
ref:
|
|
2341
|
+
ref: i
|
|
2336
2342
|
}, [
|
|
2337
2343
|
L[0] || (L[0] = createElementVNode("div", {
|
|
2338
2344
|
id: "map",
|
|
@@ -2341,11 +2347,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2341
2347
|
createVNode(ToolPanel, {
|
|
2342
2348
|
"vehicle-mode": v.vehicleMode,
|
|
2343
2349
|
"view-mode": v.viewMode,
|
|
2344
|
-
"disable-green-dot":
|
|
2350
|
+
"disable-green-dot": d.value,
|
|
2345
2351
|
"show-track-layer": unref(showTrackLayer),
|
|
2346
2352
|
"map-tile-mode": k.value,
|
|
2347
2353
|
onSwitchGreenDot: g,
|
|
2348
|
-
onSwitchMapTile:
|
|
2354
|
+
onSwitchMapTile: T
|
|
2349
2355
|
}, {
|
|
2350
2356
|
toolPanel: withCtx(() => [
|
|
2351
2357
|
renderSlot(v.$slots, "toolPanel", {}, void 0, !0)
|
|
@@ -2359,7 +2365,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2359
2365
|
}, null, 512),
|
|
2360
2366
|
createVNode(ZoomControl, {
|
|
2361
2367
|
ref_key: "zoomControl",
|
|
2362
|
-
ref:
|
|
2368
|
+
ref: l
|
|
2363
2369
|
}, null, 512)
|
|
2364
2370
|
], 64)) : createCommentVNode("", !0),
|
|
2365
2371
|
createVNode(Copyright, {
|
|
@@ -2368,7 +2374,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2368
2374
|
}, null, 8, ["type", "map-tile"])
|
|
2369
2375
|
], 512));
|
|
2370
2376
|
}
|
|
2371
|
-
}), Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
2377
|
+
}), Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bb886e27"]]), ZhMap = withInstall(Map);
|
|
2372
2378
|
export {
|
|
2373
2379
|
BaseMapType as B,
|
|
2374
2380
|
CDN_URL as C,
|