zhihao-ui 1.2.57 → 1.2.58
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es/{Map-93VhzPHJ.js → Map-Bnlvh-YW.js} +486 -486
- package/dist/es/index.js +2 -2
- package/dist/index.css +1 -1
- package/dist/types/components/Map/Map.vue.d.ts +2 -2
- package/dist/types/components/Map/index.d.ts +6 -6
- package/dist/types/components/Map/render/canvasRender/renderTrackStyle.d.ts +1 -1
- package/dist/types/components/Map/render/renderTrack.d.ts +1 -1
- package/dist/umd/index.css +1 -1
- package/dist/umd/index.umd.cjs +31 -31
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
var G = Object.defineProperty;
|
|
2
2
|
var _ = (e, t, o) => t in e ? G(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
|
|
3
|
-
var
|
|
3
|
+
var C = (e, t, o) => _(e, typeof t != "symbol" ? t + "" : t, o);
|
|
4
4
|
import { ref, defineComponent, inject, useModel, watch, openBlock, createElementBlock, createElementVNode, createVNode, unref, withCtx, Fragment, renderList, toDisplayString, createCommentVNode, mergeModels, nextTick, onMounted, normalizeClass, renderSlot, createBlock, useCssVars, computed, provide } from "vue";
|
|
5
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
6
|
import { _ as _export_sfc } from "./Button-BlDlzXOc.js";
|
|
@@ -8,82 +8,82 @@ import { g as getForegroundColor } from "./DatePicker-DLAtwWcc.js";
|
|
|
8
8
|
import { w as withInstall } from "./utils-BSQSj8Ii.js";
|
|
9
9
|
var BaseMapType = /* @__PURE__ */ ((e) => (e[e.vector = 0] = "vector", e[e.satellite = 1] = "satellite", e))(BaseMapType || {}), SEARCH_TYPE = /* @__PURE__ */ ((e) => (e[e.SEARCH_SHIP = 0] = "SEARCH_SHIP", e[e.SEARCH_PORT = 1] = "SEARCH_PORT", e[e.SEARCH_CUSTOM = 2] = "SEARCH_CUSTOM", e))(SEARCH_TYPE || {}), COPY_RIGHT_TYPE = /* @__PURE__ */ ((e) => (e[e.HORIZONTAL = 0] = "HORIZONTAL", e[e.VERTICAL = 1] = "VERTICAL", e))(COPY_RIGHT_TYPE || {}), CAR_COLOR = /* @__PURE__ */ ((e) => (e[e.BLUE = 1] = "BLUE", e[e.YELLOW = 2] = "YELLOW", e[e.Y_GREEN = 3] = "Y_GREEN", e))(CAR_COLOR || {}), DEVICE_TYPE = /* @__PURE__ */ ((e) => (e[e.HOST = 1] = "HOST", e[e.TALK = 2] = "TALK", e[e.STORAGE = 3] = "STORAGE", e[e.INTERNET = 4] = "INTERNET", e[e.CAMERA = 5] = "CAMERA", e[e.LOAD = 6] = "LOAD", e))(DEVICE_TYPE || {}), LENGTH_UNIT = /* @__PURE__ */ ((e) => (e[e.M = 1] = "M", e[e.KM = 2] = "KM", e[e.NM = 3] = "NM", e))(LENGTH_UNIT || {}), SWITCH_BTN = /* @__PURE__ */ ((e) => (e.Camera = "camera", e.Mobile = "mobile", e.WaterGauge = "waterGauge", e))(SWITCH_BTN || {}), SHIP_SAIL_STATUS = /* @__PURE__ */ ((e) => (e[e.发动机使用中 = 0] = "发动机使用中", e[e.锚泊 = 1] = "锚泊", e[e.未操作 = 2] = "未操作", e[e.操纵能力受限 = 3] = "操纵能力受限", e[e.吃水受限 = 4] = "吃水受限", e[e.系泊 = 5] = "系泊", e[e.搁浅 = 6] = "搁浅", e[e.从事捕捞 = 7] = "从事捕捞", e[e.航行中 = 8] = "航行中", e[e.留作将来修正导航状态 = 9] = "留作将来修正导航状态", e[e.高速船留用 = 10] = "高速船留用", e[e.机动船尾推作业 = 11] = "机动船尾推作业", e[e.机动船顶推或侧推作业 = 12] = "机动船顶推或侧推作业", e[e.飞翼船留用 = 13] = "飞翼船留用", e[e.现行的 = 14] = "现行的", e[e.未定义 = 15] = "未定义", e))(SHIP_SAIL_STATUS || {});
|
|
10
10
|
class ShipMapData {
|
|
11
|
-
constructor(t, o, n,
|
|
12
|
-
|
|
11
|
+
constructor(t, o, n, i, r, l, c, s, m, d, u, f, p, h, v, g, k, M, I, E, V, F, $, y) {
|
|
12
|
+
C(this, "id");
|
|
13
13
|
// mmsi
|
|
14
|
-
|
|
14
|
+
C(this, "mmsi");
|
|
15
15
|
// 船舶三角形填充色
|
|
16
|
-
|
|
16
|
+
C(this, "fill");
|
|
17
17
|
// 船类型 "7": "货船",
|
|
18
|
-
|
|
18
|
+
C(this, "shipType");
|
|
19
19
|
// 船名
|
|
20
|
-
|
|
20
|
+
C(this, "name");
|
|
21
21
|
// 长度
|
|
22
|
-
|
|
22
|
+
C(this, "length");
|
|
23
23
|
// 宽度
|
|
24
|
-
|
|
24
|
+
C(this, "breadth");
|
|
25
25
|
// 经度
|
|
26
|
-
|
|
26
|
+
C(this, "lon");
|
|
27
27
|
// 纬度
|
|
28
|
-
|
|
28
|
+
C(this, "lat");
|
|
29
29
|
// 时间
|
|
30
|
-
|
|
30
|
+
C(this, "createdAt");
|
|
31
31
|
// 速度
|
|
32
|
-
|
|
32
|
+
C(this, "speed");
|
|
33
33
|
// 来源
|
|
34
|
-
|
|
34
|
+
C(this, "from");
|
|
35
35
|
// 船状态 "stop":"静止","sail":"航行","work":"作业","danger":"危险","other":"其他"
|
|
36
|
-
|
|
36
|
+
C(this, "sailStatus");
|
|
37
37
|
// 船艏向
|
|
38
|
-
|
|
38
|
+
C(this, "hdg");
|
|
39
39
|
// 航迹向
|
|
40
|
-
|
|
40
|
+
C(this, "cog");
|
|
41
41
|
// 设备定位类型
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
C(this, "posType");
|
|
43
|
+
C(this, "type");
|
|
44
44
|
// 航向角度
|
|
45
|
-
|
|
45
|
+
C(this, "angle");
|
|
46
46
|
// 左侧是否显示色块
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
this.id = t, this.mmsi = o, this.fill = n, this.shipType =
|
|
47
|
+
C(this, "leftIconColor");
|
|
48
|
+
C(this, "existDevice");
|
|
49
|
+
C(this, "existMobile");
|
|
50
|
+
C(this, "existWaterGauge");
|
|
51
|
+
C(this, "selected");
|
|
52
|
+
C(this, "blinkColors");
|
|
53
|
+
this.id = t, this.mmsi = o, this.fill = n, 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 = h, this.cog = v, this.posType = g, this.type = k, this.angle = M, this.leftIconColor = I, this.existDevice = E, this.existMobile = V, this.existWaterGauge = F, this.selected = $, this.blinkColors = y;
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
const formatLength = function(e, t) {
|
|
57
57
|
const n = getLength(e);
|
|
58
|
-
let
|
|
58
|
+
let i = "";
|
|
59
59
|
switch (t) {
|
|
60
60
|
case LENGTH_UNIT.M:
|
|
61
|
-
|
|
61
|
+
i = Math.round(n * 100) / 100 + " m";
|
|
62
62
|
break;
|
|
63
63
|
case LENGTH_UNIT.KM:
|
|
64
|
-
|
|
64
|
+
i = Math.round(n / 1e3 * 100) / 100 + " km";
|
|
65
65
|
break;
|
|
66
66
|
case LENGTH_UNIT.NM:
|
|
67
|
-
|
|
67
|
+
i = (Math.round(n / 1e3 * 100) / 100 / 1.852).toFixed(2) + " nm";
|
|
68
68
|
break;
|
|
69
69
|
}
|
|
70
|
-
return
|
|
70
|
+
return i;
|
|
71
71
|
}, convertSixHundredThousandToLatLng = function(e, t) {
|
|
72
72
|
const o = Number(t) / 6e5;
|
|
73
73
|
return [Number(e) / 6e5, o];
|
|
74
74
|
}, formatArea = (e, t) => {
|
|
75
75
|
const n = getArea(e);
|
|
76
|
-
let
|
|
76
|
+
let i;
|
|
77
77
|
switch (t) {
|
|
78
78
|
case LENGTH_UNIT.KM:
|
|
79
|
-
n > 1e4 ?
|
|
79
|
+
n > 1e4 ? i = Math.round(n / 1e6 * 100) / 100 + " km<sup>2</sup>" : i = Math.round(n * 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
|
-
n > 1e4 ?
|
|
83
|
+
n > 1e4 ? i = Math.round(n / 1e6 / r * 100) / 100 + " nm<sup>2</sup>" : i = Math.round(n * 100) / 100 + " m<sup>2</sup>";
|
|
84
84
|
break;
|
|
85
85
|
}
|
|
86
|
-
return
|
|
86
|
+
return i;
|
|
87
87
|
}, convertShipMapData = (e) => {
|
|
88
88
|
const t = (o) => new ShipMapData(
|
|
89
89
|
o.id,
|
|
@@ -135,8 +135,8 @@ const shipLabels = ref([]), trackLabels = ref([]), showTrackLayer = ref(!1), all
|
|
|
135
135
|
}),
|
|
136
136
|
emits: /* @__PURE__ */ mergeModels(["close"], ["update:visible"]),
|
|
137
137
|
setup(e, { expose: t, emit: o }) {
|
|
138
|
-
const n = inject("mapInstance"),
|
|
139
|
-
let d, u,
|
|
138
|
+
const n = inject("mapInstance"), i = o, r = useModel(e, "visible"), l = ref("3"), c = ref([]), s = ref(!1), m = new VectorSource();
|
|
139
|
+
let d, u, f, p, h;
|
|
140
140
|
const v = new VectorLayer({
|
|
141
141
|
source: m,
|
|
142
142
|
style: {
|
|
@@ -150,16 +150,16 @@ const shipLabels = ref([]), trackLabels = ref([]), showTrackLayer = ref(!1), all
|
|
|
150
150
|
if (S.dragging)
|
|
151
151
|
return;
|
|
152
152
|
let T = "点击选择起点";
|
|
153
|
-
d && (T = "单击继续,双击结束"), u && (u.innerHTML = T,
|
|
153
|
+
d && (T = "单击继续,双击结束"), u && (u.innerHTML = T, f.setPosition(S.coordinate), u.classList.remove("hidden"));
|
|
154
154
|
}, k = () => {
|
|
155
155
|
var S, T;
|
|
156
156
|
n != null && n.value && ((S = n == null ? void 0 : n.value) == null || S.on("pointermove", g), (T = n == null ? void 0 : n.value) == null || T.getViewport().addEventListener("mouseout", function() {
|
|
157
|
-
var
|
|
158
|
-
(
|
|
157
|
+
var b;
|
|
158
|
+
(b = u == null ? void 0 : u.classList) == null || b.add("hidden");
|
|
159
159
|
}), s.value = !0);
|
|
160
160
|
};
|
|
161
161
|
let M;
|
|
162
|
-
const
|
|
162
|
+
const I = new Style({
|
|
163
163
|
fill: new Fill({
|
|
164
164
|
color: "rgba(255, 255, 255, 0.2)"
|
|
165
165
|
}),
|
|
@@ -181,29 +181,29 @@ const shipLabels = ref([]), trackLabels = ref([]), showTrackLayer = ref(!1), all
|
|
|
181
181
|
function E() {
|
|
182
182
|
var S, T;
|
|
183
183
|
if (n != null && n.value) {
|
|
184
|
-
if (showDrawLayer.value = !1, c.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((
|
|
184
|
+
if (showDrawLayer.value = !1, c.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((b) => {
|
|
185
185
|
var P;
|
|
186
|
-
(P =
|
|
186
|
+
(P = b == null ? void 0 : b.parentNode) == null || P.removeChild(b);
|
|
187
187
|
}), m.clear(), M) {
|
|
188
|
-
const
|
|
189
|
-
|
|
188
|
+
const b = n.value.getInteractions().getArray().find((P) => getUid(P) === getUid(M));
|
|
189
|
+
b && ((S = n.value) == null || S.removeInteraction(b));
|
|
190
190
|
}
|
|
191
191
|
(T = n.value) == null || T.removeLayer(v), u != null && u.parentNode && u.parentNode.removeChild(u), p != null && p.parentNode && p.parentNode.removeChild(p);
|
|
192
192
|
}
|
|
193
193
|
}
|
|
194
194
|
function V() {
|
|
195
|
-
var T,
|
|
195
|
+
var T, b;
|
|
196
196
|
E(), (T = n == null ? void 0 : n.value) == null || T.addLayer(v), showDrawLayer.value = !0, M = new Draw({
|
|
197
197
|
source: m,
|
|
198
198
|
type: "LineString",
|
|
199
199
|
style: function() {
|
|
200
|
-
return
|
|
200
|
+
return I;
|
|
201
201
|
},
|
|
202
202
|
// 添加条件函数,判断是否应该触发绘制
|
|
203
203
|
condition: function(P) {
|
|
204
204
|
return P.originalEvent.target.tagName !== "DIV";
|
|
205
205
|
}
|
|
206
|
-
}), (
|
|
206
|
+
}), (b = n == null ? void 0 : n.value) == null || b.addInteraction(M), $(), F();
|
|
207
207
|
let S;
|
|
208
208
|
M.on("drawstart", function(P) {
|
|
209
209
|
var N;
|
|
@@ -211,8 +211,8 @@ const shipLabels = ref([]), trackLabels = ref([]), showTrackLayer = ref(!1), all
|
|
|
211
211
|
let x;
|
|
212
212
|
S = (N = d.getGeometry()) == null ? void 0 : N.on("change", function(R) {
|
|
213
213
|
const B = R.target;
|
|
214
|
-
let D = formatUtils.formatLength(B, Number(
|
|
215
|
-
x = B.getLastCoordinate(), p && D && (p.innerHTML = D),
|
|
214
|
+
let D = formatUtils.formatLength(B, Number(l.value));
|
|
215
|
+
x = B.getLastCoordinate(), p && D && (p.innerHTML = D), h.setPosition(x);
|
|
216
216
|
});
|
|
217
217
|
}), M.on("drawend", function() {
|
|
218
218
|
var P;
|
|
@@ -225,39 +225,39 @@ const shipLabels = ref([]), trackLabels = ref([]), showTrackLayer = ref(!1), all
|
|
|
225
225
|
x.preventDefault(), x.stopPropagation();
|
|
226
226
|
const N = (R = x.target) == null ? void 0 : R.getAttribute("data-id");
|
|
227
227
|
N && y(N);
|
|
228
|
-
}),
|
|
228
|
+
}), h.setOffset([0, -7]), d = null, p = null, $(), S && unByKey(S);
|
|
229
229
|
});
|
|
230
230
|
}
|
|
231
231
|
function F() {
|
|
232
232
|
var S;
|
|
233
|
-
u != null && u.parentNode && u.parentNode.removeChild(u), u = document.createElement("div"), u.className = "ol-tooltip hidden",
|
|
233
|
+
u != null && u.parentNode && u.parentNode.removeChild(u), u = document.createElement("div"), u.className = "ol-tooltip hidden", f = new Overlay({
|
|
234
234
|
element: u,
|
|
235
235
|
offset: [15, 0],
|
|
236
236
|
positioning: "center-left"
|
|
237
|
-
}), (S = n == null ? void 0 : n.value) == null || S.addOverlay(
|
|
237
|
+
}), (S = n == null ? void 0 : n.value) == null || S.addOverlay(f);
|
|
238
238
|
}
|
|
239
239
|
function $() {
|
|
240
240
|
var S;
|
|
241
|
-
p != null && p.parentNode && p.parentNode.removeChild(p), p = document.createElement("div"), p.className = "ol-tooltip ol-tooltip-measure",
|
|
241
|
+
p != null && p.parentNode && p.parentNode.removeChild(p), p = document.createElement("div"), p.className = "ol-tooltip ol-tooltip-measure", h = new Overlay({
|
|
242
242
|
element: p,
|
|
243
243
|
offset: [0, -15],
|
|
244
244
|
positioning: "bottom-center",
|
|
245
245
|
stopEvent: !1,
|
|
246
246
|
insertFirst: !1
|
|
247
|
-
}), (S = n == null ? void 0 : n.value) == null || S.addOverlay(
|
|
247
|
+
}), (S = n == null ? void 0 : n.value) == null || S.addOverlay(h);
|
|
248
248
|
}
|
|
249
249
|
const y = (S) => {
|
|
250
|
-
var
|
|
250
|
+
var b, P;
|
|
251
251
|
const T = c.value.findIndex((x) => x.id === S);
|
|
252
252
|
if (T !== -1) {
|
|
253
253
|
c.value.splice(T, 1);
|
|
254
254
|
const x = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
|
|
255
|
-
x[T] && ((P = (
|
|
255
|
+
x[T] && ((P = (b = x[T]) == null ? void 0 : b.parentNode) == null || P.removeChild(x[T]));
|
|
256
256
|
const N = m.getFeatures();
|
|
257
257
|
N[T] && m.removeFeature(N[T]);
|
|
258
258
|
}
|
|
259
259
|
}, L = () => {
|
|
260
|
-
|
|
260
|
+
i("close");
|
|
261
261
|
}, w = () => Math.random().toString(36).substring(2, 9);
|
|
262
262
|
return watch(() => r, () => {
|
|
263
263
|
r.value && !s.value && (k(), V());
|
|
@@ -276,8 +276,8 @@ const shipLabels = ref([]), trackLabels = ref([]), showTrackLayer = ref(!1), all
|
|
|
276
276
|
T[2] || (T[2] = createElementVNode("div", { class: "tips" }, "在地图上点击多个点测量距离,距离单位", -1)),
|
|
277
277
|
createVNode(unref(ElSelect), {
|
|
278
278
|
class: "select-length-unit",
|
|
279
|
-
modelValue:
|
|
280
|
-
"onUpdate:modelValue": T[0] || (T[0] = (
|
|
279
|
+
modelValue: l.value,
|
|
280
|
+
"onUpdate:modelValue": T[0] || (T[0] = (b) => l.value = b)
|
|
281
281
|
}, {
|
|
282
282
|
default: withCtx(() => [
|
|
283
283
|
createVNode(unref(ElOption), {
|
|
@@ -297,18 +297,18 @@ const shipLabels = ref([]), trackLabels = ref([]), showTrackLayer = ref(!1), all
|
|
|
297
297
|
}, 8, ["modelValue"])
|
|
298
298
|
]),
|
|
299
299
|
createElementVNode("div", _hoisted_3$1, [
|
|
300
|
-
(openBlock(!0), createElementBlock(Fragment, null, renderList(c.value, (
|
|
300
|
+
(openBlock(!0), createElementBlock(Fragment, null, renderList(c.value, (b, P) => (openBlock(), createElementBlock("div", {
|
|
301
301
|
class: "measure-history-item",
|
|
302
|
-
key:
|
|
302
|
+
key: b.id
|
|
303
303
|
}, [
|
|
304
304
|
createElementVNode("div", _hoisted_4, [
|
|
305
305
|
T[3] || (T[3] = createElementVNode("i", { class: "map-iconfont icon-line" }, null, -1)),
|
|
306
306
|
createElementVNode("span", _hoisted_5, "线段" + toDisplayString(P + 1), 1),
|
|
307
|
-
createElementVNode("span", _hoisted_6, toDisplayString(
|
|
307
|
+
createElementVNode("span", _hoisted_6, toDisplayString(b.value), 1)
|
|
308
308
|
]),
|
|
309
309
|
createElementVNode("div", {
|
|
310
310
|
class: "delete-button",
|
|
311
|
-
onClick: (x) => y(
|
|
311
|
+
onClick: (x) => y(b.id)
|
|
312
312
|
}, T[4] || (T[4] = [
|
|
313
313
|
createElementVNode("i", { class: "map-iconfont icon-delete" }, null, -1)
|
|
314
314
|
]), 8, _hoisted_7)
|
|
@@ -348,34 +348,34 @@ const shipLabels = ref([]), trackLabels = ref([]), showTrackLayer = ref(!1), all
|
|
|
348
348
|
}), renderMarker = (e, t = !0, o = !0) => {
|
|
349
349
|
var d;
|
|
350
350
|
if (!mapInstance$8.value || !e || e.split(",").length !== 2) return;
|
|
351
|
-
const [n,
|
|
351
|
+
const [n, i] = e.split(",").map(Number);
|
|
352
352
|
marker.value = new Feature({
|
|
353
|
-
geometry: new Point(fromLonLat([n,
|
|
353
|
+
geometry: new Point(fromLonLat([n, i]))
|
|
354
354
|
});
|
|
355
|
-
const r = o ? `${n}, ${
|
|
355
|
+
const r = o ? `${n}, ${i}` : "";
|
|
356
356
|
(d = marker.value) == null || d.setStyle(createIconStyle(r));
|
|
357
|
-
const
|
|
357
|
+
const l = new VectorSource({
|
|
358
358
|
features: [marker.value]
|
|
359
359
|
}), c = new VectorLayer({
|
|
360
|
-
source:
|
|
360
|
+
source: l
|
|
361
361
|
}), s = mapInstance$8.value.getView();
|
|
362
362
|
if (mapInstance$8.value.addLayer(c), t) {
|
|
363
363
|
const u = new Translate({
|
|
364
364
|
layers: [c]
|
|
365
365
|
});
|
|
366
|
-
u.on("translating", function(
|
|
366
|
+
u.on("translating", function(f) {
|
|
367
367
|
var v;
|
|
368
|
-
const p =
|
|
369
|
-
markerPosition.value = `${
|
|
368
|
+
const p = f.features.item(0).getGeometry().getCoordinates(), h = toLonLat(p);
|
|
369
|
+
markerPosition.value = `${h[0].toFixed(6)}, ${h[1].toFixed(6)}`, (v = marker.value) == null || v.setStyle(createIconStyle(markerPosition.value));
|
|
370
370
|
}), mapInstance$8.value.addInteraction(u);
|
|
371
371
|
}
|
|
372
|
-
const m = new Point([n,
|
|
372
|
+
const m = new Point([n, i]);
|
|
373
373
|
s.setCenter(transform(m.getCoordinates(), projection.data, projection.mercator)), s.setZoom(mapZoom.findShip);
|
|
374
374
|
}, setMarkerPosition = (e) => {
|
|
375
|
-
var
|
|
375
|
+
var i, r;
|
|
376
376
|
if (!mapInstance$8.value) return;
|
|
377
377
|
const t = mapInstance$8.value.getView(), o = e.split(",").map(Number);
|
|
378
|
-
(r = (
|
|
378
|
+
(r = (i = marker.value) == null ? void 0 : i.getGeometry()) == null || r.setCoordinates(fromLonLat([o[0], o[1]]));
|
|
379
379
|
const n = new Point([o[0], o[1]]);
|
|
380
380
|
t.setCenter(transform(n.getCoordinates(), projection.data, projection.mercator)), t.setZoom(mapZoom.markerPosition);
|
|
381
381
|
}, CDN_URL = "https://static.zhihaoscm.cn/", tiandituKey = "a6e8f78974f2581f2ca00485b40c948f", zhongkeKey = "15c81cc0a191a232e0a0ca1a51c3ca81", baseMap = {
|
|
@@ -438,7 +438,7 @@ const multiplyPixelRatio = (e) => {
|
|
|
438
438
|
function n(u) {
|
|
439
439
|
return 180 * (u % (2 * Math.PI)) / Math.PI;
|
|
440
440
|
}
|
|
441
|
-
function
|
|
441
|
+
function i(u) {
|
|
442
442
|
return u % 360 * Math.PI / 180;
|
|
443
443
|
}
|
|
444
444
|
function r(u) {
|
|
@@ -454,25 +454,25 @@ const multiplyPixelRatio = (e) => {
|
|
|
454
454
|
"Coordinate must be GeoJSON Point or an Array of numbers"
|
|
455
455
|
);
|
|
456
456
|
}
|
|
457
|
-
function
|
|
457
|
+
function l(u, f, p = {}) {
|
|
458
458
|
if (p.final)
|
|
459
459
|
return function(F, $) {
|
|
460
|
-
return (
|
|
461
|
-
}(u,
|
|
462
|
-
const
|
|
460
|
+
return (l($, F) + 180) % 360;
|
|
461
|
+
}(u, f);
|
|
462
|
+
const h = r(u), v = r(f), g = i(h[0]), k = i(v[0]), M = i(h[1]), I = i(v[1]), E = Math.sin(k - g) * Math.cos(I), V = Math.cos(M) * Math.sin(I) - Math.sin(M) * Math.cos(I) * Math.cos(k - g);
|
|
463
463
|
return n(Math.atan2(E, V));
|
|
464
464
|
}
|
|
465
465
|
function c(u) {
|
|
466
466
|
return !isNaN(u) && u !== null && !Array.isArray(u);
|
|
467
467
|
}
|
|
468
|
-
function s(u,
|
|
469
|
-
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 },
|
|
468
|
+
function s(u, f = {}, p = {}) {
|
|
469
|
+
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);
|
|
470
470
|
}
|
|
471
|
-
function m(u,
|
|
472
|
-
const
|
|
473
|
-
return p.id !== void 0 && (
|
|
471
|
+
function m(u, f = {}, p = {}) {
|
|
472
|
+
const h = { type: "Feature" };
|
|
473
|
+
return p.id !== void 0 && (h.id = p.id), p.bbox && (h.bbox = p.bbox), h.properties = f || {}, h.geometry = u, h;
|
|
474
474
|
}
|
|
475
|
-
const d =
|
|
475
|
+
const d = l(s(e), s(t), o);
|
|
476
476
|
return d < 0 ? 360 + d : d;
|
|
477
477
|
}, triangleModel = multiplyPixelRatio([
|
|
478
478
|
[0, -8],
|
|
@@ -552,19 +552,19 @@ const multiplyPixelRatio = (e) => {
|
|
|
552
552
|
renderer: (o, n) => {
|
|
553
553
|
var c, s;
|
|
554
554
|
o = o;
|
|
555
|
-
const
|
|
555
|
+
const i = n.context, r = n.feature.get("data");
|
|
556
556
|
if (!r) return;
|
|
557
|
-
const
|
|
558
|
-
(
|
|
557
|
+
const l = n.feature.get("index");
|
|
558
|
+
(l === 0 || l === void 0) && (shipLabels.value = []);
|
|
559
559
|
try {
|
|
560
|
-
const m = drawShipBody(
|
|
561
|
-
m && (drawHeading(
|
|
562
|
-
const
|
|
563
|
-
return (
|
|
560
|
+
const m = drawShipBody(i, r, o, t);
|
|
561
|
+
m && (drawHeading(i, r, m, t), r.selected = e, !isMapMoving.value && e && (drawSelectBounds(i, m), (s = (c = trackLineVectorSource.value) == null ? void 0 : c.getFeatures()) != null && s.some((u) => {
|
|
562
|
+
const f = u.get("data");
|
|
563
|
+
return (f == null ? void 0 : f.id) === r.id;
|
|
564
564
|
}) || setTimeout(() => {
|
|
565
|
-
drawSelectBounds(
|
|
566
|
-
}, 1))), drawShipLabel(
|
|
567
|
-
drawShipLabel(
|
|
565
|
+
drawSelectBounds(i, m);
|
|
566
|
+
}, 1))), drawShipLabel(i, r, o), e && setTimeout(() => {
|
|
567
|
+
drawShipLabel(i, r, o);
|
|
568
568
|
}, 1);
|
|
569
569
|
} catch {
|
|
570
570
|
return !1;
|
|
@@ -572,20 +572,20 @@ const multiplyPixelRatio = (e) => {
|
|
|
572
572
|
}
|
|
573
573
|
}), drawShipBody = (e, t, o, n) => {
|
|
574
574
|
if (!mapInstance$7.value) return;
|
|
575
|
-
const
|
|
576
|
-
if (!
|
|
575
|
+
const i = Math.round(Number(mapInstance$7.value.getView().getZoom()));
|
|
576
|
+
if (!i) return;
|
|
577
577
|
let r = [];
|
|
578
|
-
const [
|
|
579
|
-
if (
|
|
580
|
-
r = rotateShapeModel(drawCurrentShipShapeModel(t,
|
|
581
|
-
const [
|
|
582
|
-
return [s +
|
|
578
|
+
const [l, c] = drawShipModelByZoom[i] || [0, 0], [s, m] = o;
|
|
579
|
+
if (i <= mapZoom.shipModelMax && i > mapZoom.shipModelMin && t.length >= l && t.breadth >= c)
|
|
580
|
+
r = rotateShapeModel(drawCurrentShipShapeModel(t, i), t.angle).map((u) => {
|
|
581
|
+
const [f, p] = u;
|
|
582
|
+
return [s + f, m + p];
|
|
583
583
|
});
|
|
584
584
|
else {
|
|
585
585
|
const d = rotateShapeModel(triangleModel, t.angle);
|
|
586
586
|
o.length === 2 && (r = d.map((u) => {
|
|
587
|
-
const [
|
|
588
|
-
return [s +
|
|
587
|
+
const [f, p] = u;
|
|
588
|
+
return [s + f, m + p];
|
|
589
589
|
}));
|
|
590
590
|
}
|
|
591
591
|
if (!(r.length > 2)) return !1;
|
|
@@ -604,18 +604,18 @@ const multiplyPixelRatio = (e) => {
|
|
|
604
604
|
e.lineTo(r[d][0], r[d][1]);
|
|
605
605
|
return e.closePath(), e.strokeStyle = n ? "#ff0000" : "#000", e.lineWidth = n ? 2 : 1, e.stroke(), e.fillStyle = t.fill, e.fill(), e.restore(), r;
|
|
606
606
|
}, drawHeading = (e, t, o, n) => {
|
|
607
|
-
const [
|
|
608
|
-
if (
|
|
609
|
-
const c =
|
|
607
|
+
const [i, r] = o[0], l = getShipDirectPath(t);
|
|
608
|
+
if (l) {
|
|
609
|
+
const c = l.map(function(s) {
|
|
610
610
|
const [m, d] = s;
|
|
611
|
-
return [m +
|
|
611
|
+
return [m + i, d + r];
|
|
612
612
|
});
|
|
613
613
|
if (e.save(), e.beginPath(), t.angle > 0) {
|
|
614
|
-
e.translate(
|
|
614
|
+
e.translate(i, r);
|
|
615
615
|
const s = t.angle * Math.PI / 180;
|
|
616
|
-
e.rotate(s), e.translate(-
|
|
616
|
+
e.rotate(s), e.translate(-i, -r);
|
|
617
617
|
}
|
|
618
|
-
e.moveTo(
|
|
618
|
+
e.moveTo(i, r);
|
|
619
619
|
for (let s = 1; s < c.length; s++) {
|
|
620
620
|
const [m, d] = c[s];
|
|
621
621
|
e.lineTo(m, d);
|
|
@@ -623,19 +623,19 @@ const multiplyPixelRatio = (e) => {
|
|
|
623
623
|
e.strokeStyle = n ? "#ff0000" : "#000", e.lineWidth = n ? 2 : 1, e.stroke(), e.restore();
|
|
624
624
|
}
|
|
625
625
|
}, drawSelectBounds = (e, t) => {
|
|
626
|
-
let [o, n,
|
|
627
|
-
const
|
|
628
|
-
o -= c, n -= c,
|
|
629
|
-
const s = 8 *
|
|
630
|
-
e.beginPath(), e.moveTo(o + s, r), e.lineTo(o, r), e.lineTo(o, r - s), e.moveTo(o, n + s), e.lineTo(o, n), e.lineTo(o + s, n), e.moveTo(
|
|
626
|
+
let [o, n, i, r] = getPixelFromCoordinate(t);
|
|
627
|
+
const l = window.devicePixelRatio || 1, c = 4;
|
|
628
|
+
o -= c, n -= c, i += c, r += c, e.save(), e.strokeStyle = "#ff0000", e.lineWidth = 4 * l;
|
|
629
|
+
const s = 8 * l;
|
|
630
|
+
e.beginPath(), e.moveTo(o + s, r), e.lineTo(o, r), e.lineTo(o, r - s), e.moveTo(o, n + s), e.lineTo(o, n), e.lineTo(o + s, n), e.moveTo(i - s, n), e.lineTo(i, n), e.lineTo(i, n + s), e.moveTo(i, r - s), e.lineTo(i, r), e.lineTo(i - s, r), e.stroke(), e.restore();
|
|
631
631
|
}, drawShipLabel = (e, t, o) => {
|
|
632
632
|
if (!t.selected && shipLabels.value.find((u) => u.id === t.id)) return;
|
|
633
|
-
const [n,
|
|
633
|
+
const [n, i] = o, r = n, l = i, c = t.name;
|
|
634
634
|
let s;
|
|
635
635
|
t.leftIconColor && (s = { color: t.leftIconColor, icon: "" });
|
|
636
636
|
const m = getShipCustomIcon(t), d = {
|
|
637
637
|
id: t.id,
|
|
638
|
-
center: [r,
|
|
638
|
+
center: [r, l],
|
|
639
639
|
text: c,
|
|
640
640
|
fill: t.fill,
|
|
641
641
|
color: "#fff",
|
|
@@ -651,17 +651,17 @@ const multiplyPixelRatio = (e) => {
|
|
|
651
651
|
}, drawCurrentShipShapeModel = (e, t) => {
|
|
652
652
|
let o = 0;
|
|
653
653
|
t <= 14 ? o = 0.058 : t === 15 ? o = 0.12 : t === 16 ? o = 0.22 : t === 17 ? o = 0.435 : t === 18 && (o = 0.857);
|
|
654
|
-
const n = e.length / 4 * o,
|
|
654
|
+
const n = e.length / 4 * o, i = e.breadth * o;
|
|
655
655
|
let r = cloneDeep(shipShapeModel);
|
|
656
|
-
return r = r.map(([
|
|
656
|
+
return r = r.map(([l, c]) => [l * i, c * n]), r;
|
|
657
657
|
}, getShipDirectPath = (e) => {
|
|
658
658
|
const { speed: t, hdg: o, cog: n } = e;
|
|
659
|
-
let
|
|
660
|
-
if (t && t > 1 && (o !== null && o != 511 && n !== null ? n - o >= 3 ?
|
|
661
|
-
for (let
|
|
662
|
-
const c = speedCondition[
|
|
659
|
+
let i = "", r = null;
|
|
660
|
+
if (t && t > 1 && (o !== null && o != 511 && n !== null ? n - o >= 3 ? i = "left" : n - o <= -3 ? i = "right" : i = "front" : i = "front", i && t))
|
|
661
|
+
for (let l = 0; l < speedCondition.length; l++) {
|
|
662
|
+
const c = speedCondition[l];
|
|
663
663
|
if (t >= c[0] && t < c[1]) {
|
|
664
|
-
r = shipDirectPath[
|
|
664
|
+
r = shipDirectPath[i][l];
|
|
665
665
|
break;
|
|
666
666
|
}
|
|
667
667
|
}
|
|
@@ -674,7 +674,7 @@ let shipsMarkerList = [], shipsVectorSource, largeAmountShipsSource;
|
|
|
674
674
|
const selectedShipData = ref(null), selectedShips = ref([]);
|
|
675
675
|
let selectShipsVectorSource, hoveredFeature = null, hoveredFeatures = [];
|
|
676
676
|
const renderShips = (e) => {
|
|
677
|
-
var
|
|
677
|
+
var i, r, l, c;
|
|
678
678
|
if (!mapInstance$6.value || showTrackLayer.value) return;
|
|
679
679
|
const t = e.reduce((s, m) => (s.some((d) => d.id === m.id) || s.push(m), s), []), o = Math.round(Number(mapInstance$6.value.getView().getZoom()));
|
|
680
680
|
if (selectedShipData.value && nextTick(() => {
|
|
@@ -686,7 +686,7 @@ const renderShips = (e) => {
|
|
|
686
686
|
var m;
|
|
687
687
|
!n.some((d) => d.id === s.id) && ((m = s.blinkColors) != null && m.length) && checkBlinkLabelExist(mapInstance$6.value, shipLabels.value, s.id);
|
|
688
688
|
}), allShips.value = n, !hiddenOrther.value)
|
|
689
|
-
return o >= mapZoom.shipGreenDotMax && o < mapZoom.shipModelMin ? ((
|
|
689
|
+
return o >= mapZoom.shipGreenDotMax && o < mapZoom.shipModelMin ? ((i = shipsLayer.value) == null || i.setVisible(!1), (r = largeAmountShipsLayer.value) == null || r.setVisible(!0), renderLargeAmountShips(allShips.value)) : ((l = largeAmountShipsLayer.value) == null || l.setVisible(!1), (c = shipsLayer.value) == null || c.setVisible(!0), renderShipsMarker(allShips.value));
|
|
690
690
|
}, renderLargeAmountShips = (e) => {
|
|
691
691
|
if (!mapInstance$6.value) return;
|
|
692
692
|
const t = e.map((o) => ({
|
|
@@ -748,16 +748,16 @@ const renderShips = (e) => {
|
|
|
748
748
|
deleteAllShipMarkers();
|
|
749
749
|
let t = convertShipMapData(e);
|
|
750
750
|
if (t = customFilterShips(t), !!(t != null && t.length))
|
|
751
|
-
return t.forEach((n,
|
|
752
|
-
const r = [n.lon, n.lat],
|
|
751
|
+
return t.forEach((n, i) => {
|
|
752
|
+
const r = [n.lon, n.lat], l = new Feature({
|
|
753
753
|
geometry: new Point(fromLonLat(r))
|
|
754
754
|
}), c = 1;
|
|
755
|
-
|
|
755
|
+
l.set("clickGeometry", new Circle(fromLonLat(r), c)), l.set("data", n), l.set("index", i), l.setStyle(
|
|
756
756
|
setShipStyle(!1)
|
|
757
757
|
), shipsMarkerList.push({
|
|
758
758
|
ship: n,
|
|
759
759
|
lonlat: r,
|
|
760
|
-
feature:
|
|
760
|
+
feature: l
|
|
761
761
|
});
|
|
762
762
|
}), shipsVectorSource = new VectorSource({
|
|
763
763
|
features: shipsMarkerList.map((n) => n.feature)
|
|
@@ -772,12 +772,12 @@ const renderShips = (e) => {
|
|
|
772
772
|
(o = mapInstance$6.value) == null || o.on("pointermove", function(n) {
|
|
773
773
|
var c, s, m;
|
|
774
774
|
if (showDrawLayer.value) return;
|
|
775
|
-
const
|
|
776
|
-
if (
|
|
775
|
+
const i = Date.now();
|
|
776
|
+
if (i - e < t)
|
|
777
777
|
return;
|
|
778
|
-
e =
|
|
779
|
-
const r = (c = mapInstance$6.value) == null ? void 0 : c.forEachFeatureAtPixel(n.pixel, (d) => d),
|
|
780
|
-
if (
|
|
778
|
+
e = i;
|
|
779
|
+
const r = (c = mapInstance$6.value) == null ? void 0 : c.forEachFeatureAtPixel(n.pixel, (d) => d), l = (s = mapInstance$6.value) == null ? void 0 : s.getTargetElement();
|
|
780
|
+
if (l && (l.style.cursor = r ? "pointer" : ""), hoveredFeature !== r) {
|
|
781
781
|
if (hoveredFeature) {
|
|
782
782
|
hoveredFeature.set("hover", 0);
|
|
783
783
|
const d = hoveredFeature.get("data");
|
|
@@ -794,11 +794,11 @@ const renderShips = (e) => {
|
|
|
794
794
|
);
|
|
795
795
|
} else
|
|
796
796
|
hoveredFeatures.forEach((d) => {
|
|
797
|
-
var
|
|
797
|
+
var f;
|
|
798
798
|
d.set("hover", 0);
|
|
799
799
|
const u = d.get("data");
|
|
800
800
|
u != null && u.mmsi && d.setStyle(
|
|
801
|
-
setShipStyle(((
|
|
801
|
+
setShipStyle(((f = selectedShipData.value) == null ? void 0 : f.id) === u.id, !1)
|
|
802
802
|
);
|
|
803
803
|
}), hoveredFeatures = [];
|
|
804
804
|
}
|
|
@@ -806,9 +806,9 @@ const renderShips = (e) => {
|
|
|
806
806
|
}, customFilterShips = (e) => {
|
|
807
807
|
let t = cloneDeep(e);
|
|
808
808
|
return t = t.filter((o) => {
|
|
809
|
-
var
|
|
810
|
-
const n = getFilterItem(o).every(({ btnShow: r, value:
|
|
811
|
-
return (switchBtnShow.value.camera || switchBtnShow.value.mobile || switchBtnShow.value.waterGauge) && ((
|
|
809
|
+
var i;
|
|
810
|
+
const n = getFilterItem(o).every(({ btnShow: r, value: l }) => r ? !!l : !0);
|
|
811
|
+
return (switchBtnShow.value.camera || switchBtnShow.value.mobile || switchBtnShow.value.waterGauge) && ((i = selectedShipData.value) == null ? void 0 : i.id) === o.id && clearSelectFeature(), n;
|
|
812
812
|
}), t;
|
|
813
813
|
}, getFilterItem = (e) => [
|
|
814
814
|
{ btnShow: switchBtnShow.value.camera, value: e == null ? void 0 : e.existDevice },
|
|
@@ -827,8 +827,8 @@ const renderShips = (e) => {
|
|
|
827
827
|
geometry: new Point(fromLonLat(o))
|
|
828
828
|
});
|
|
829
829
|
if (n.set("data", selectSingleShipData.value), shipsLayer.value) {
|
|
830
|
-
const
|
|
831
|
-
|
|
830
|
+
const l = shipsLayer.value.getSource();
|
|
831
|
+
l && l.forEachFeature((c) => {
|
|
832
832
|
var s, m;
|
|
833
833
|
((s = c.get("data")) == null ? void 0 : s.id) === ((m = selectSingleShipData.value) == null ? void 0 : m.id) && c.set("data", selectSingleShipData.value);
|
|
834
834
|
});
|
|
@@ -845,8 +845,8 @@ const renderShips = (e) => {
|
|
|
845
845
|
source: selectShipsVectorSource,
|
|
846
846
|
updateWhileInteracting: !0
|
|
847
847
|
}), shipsVectorSource && setVisibleFeatureById(shipsVectorSource, selectSingleShipData.value.id, !0);
|
|
848
|
-
const
|
|
849
|
-
return
|
|
848
|
+
const i = (r = shipsLayer.value) == null ? void 0 : r.getSource();
|
|
849
|
+
return i && (t && setVisibleFeatureById(i, t.id, !0), setVisibleFeatureById(i, selectSingleShipData.value.id, !1)), mapInstance$6.value.addLayer(selectShipsLayer.value), selectShipsLayer.value.setVisible(!0), hideAllHoveredShips(), selectShipsLayer.value;
|
|
850
850
|
}, hideAllHoveredShips = () => {
|
|
851
851
|
hoveredFeatures == null || hoveredFeatures.forEach((e) => {
|
|
852
852
|
var o;
|
|
@@ -857,13 +857,13 @@ const renderShips = (e) => {
|
|
|
857
857
|
});
|
|
858
858
|
}, setVisibleFeatureById = (e, t, o) => {
|
|
859
859
|
e && e.forEachFeature((n) => {
|
|
860
|
-
const
|
|
861
|
-
|
|
860
|
+
const i = n.get("data");
|
|
861
|
+
i && i.id === t && n.setStyle(o ? setShipStyle(!1, !1) : setBlankStyle());
|
|
862
862
|
});
|
|
863
863
|
}, findShip = (e, t, o = !0) => {
|
|
864
|
-
var
|
|
864
|
+
var i, r, l, c, s;
|
|
865
865
|
if (!e || !mapInstance$6.value) return;
|
|
866
|
-
const n = (
|
|
866
|
+
const n = (l = (r = (i = shipsLayer.value) == null ? void 0 : i.getSource()) == null ? void 0 : r.getFeatures()) == null ? void 0 : l.find((m) => {
|
|
867
867
|
var d;
|
|
868
868
|
return ((d = m.get("data")) == null ? void 0 : d.id) === e;
|
|
869
869
|
});
|
|
@@ -881,8 +881,8 @@ const renderShips = (e) => {
|
|
|
881
881
|
}) || selectedShips.value.push(selectedShipData.value), o && ((c = selectedShipData.value) != null && c.lon) && ((s = selectedShipData.value) != null && s.lat)) {
|
|
882
882
|
const m = mapInstance$6.value.getView(), d = new Point([selectedShipData.value.lon, selectedShipData.value.lat]);
|
|
883
883
|
m.setCenter(transform(d.getCoordinates(), projection.data, projection.mercator));
|
|
884
|
-
const u = m.getZoom(),
|
|
885
|
-
m.setZoom(
|
|
884
|
+
const u = m.getZoom(), f = u < mapZoom.findShipMin ? mapZoom.findShip : u;
|
|
885
|
+
m.setZoom(f);
|
|
886
886
|
}
|
|
887
887
|
return setTimeout(() => {
|
|
888
888
|
t && selectSingleShipMarker(t);
|
|
@@ -913,92 +913,92 @@ const renderShips = (e) => {
|
|
|
913
913
|
renderShips(allShips.value);
|
|
914
914
|
}, clearShipData = (e = !0) => {
|
|
915
915
|
shipsVectorSource == null || shipsVectorSource.clear(), shipsMarkerList = [], selectedShips.value = [], shipLabels.value = [], e && (selectShipsVectorSource == null || selectShipsVectorSource.clear());
|
|
916
|
-
}, labelAlpha = 0.8, pixelRatio = window.devicePixelRatio || 1, labelFont = `500 ${12 * pixelRatio}px Arial`, labelOutSize = 2 * pixelRatio, labelHeight = 10 * pixelRatio, fillRectRadius = (e, t, o, n,
|
|
917
|
-
e.beginPath(), e.moveTo(t +
|
|
916
|
+
}, labelAlpha = 0.8, pixelRatio = window.devicePixelRatio || 1, labelFont = `500 ${12 * pixelRatio}px Arial`, labelOutSize = 2 * pixelRatio, labelHeight = 10 * pixelRatio, fillRectRadius = (e, t, o, n, i, r, l = 4) => {
|
|
917
|
+
e.beginPath(), e.moveTo(t + l, o), e.arcTo(t + n, o, t + n, o + l, l), e.arcTo(t + n, o + i, t + n - l, o + i, l), e.arcTo(t, o + i, t, o + i - l, l), e.arcTo(t, o, t + l, o, l), e.closePath(), e.fillStyle = r, e.fill();
|
|
918
918
|
}, getPixelFromCoordinate = (e) => {
|
|
919
919
|
if (!e || e.length === 0)
|
|
920
920
|
throw new Error("Points array is empty or invalid.");
|
|
921
|
-
let t = 1 / 0, o = 1 / 0, n = -1 / 0,
|
|
922
|
-
for (const [r,
|
|
923
|
-
r < t && (t = r),
|
|
924
|
-
return [t, o, n,
|
|
921
|
+
let t = 1 / 0, o = 1 / 0, n = -1 / 0, i = -1 / 0;
|
|
922
|
+
for (const [r, l] of e)
|
|
923
|
+
r < t && (t = r), l < o && (o = l), r > n && (n = r), l > i && (i = l);
|
|
924
|
+
return [t, o, n, i];
|
|
925
925
|
}, calculatePolygonCentroid = (e) => {
|
|
926
926
|
if (!Array.isArray(e) || e.length < 3)
|
|
927
927
|
throw new Error("A polygon must have at least 3 coordinates.");
|
|
928
928
|
let t = 0, o = 0, n = 0;
|
|
929
|
-
const
|
|
930
|
-
for (let c = 0; c <
|
|
931
|
-
const [s, m] = e[c], [d, u] = e[c + 1],
|
|
932
|
-
n +=
|
|
929
|
+
const i = e.length;
|
|
930
|
+
for (let c = 0; c < i - 1; c++) {
|
|
931
|
+
const [s, m] = e[c], [d, u] = e[c + 1], f = s * u - d * m;
|
|
932
|
+
n += f, t += (s + d) * f, o += (m + u) * f;
|
|
933
933
|
}
|
|
934
934
|
if (n *= 0.5, n === 0)
|
|
935
935
|
throw new Error("多边形面积为零");
|
|
936
|
-
const r = t / (6 * n),
|
|
937
|
-
return [r,
|
|
936
|
+
const r = t / (6 * n), l = o / (6 * n);
|
|
937
|
+
return [r, l];
|
|
938
938
|
}, rotateShapeModel = (e, t) => {
|
|
939
|
-
const [o, n] = calculatePolygonCentroid(e),
|
|
939
|
+
const [o, n] = calculatePolygonCentroid(e), i = t * Math.PI / 180, r = Math.cos(i), l = Math.sin(i);
|
|
940
940
|
return e.map(([c, s]) => {
|
|
941
|
-
const m = c - o, d = s - n, u = m * r - d *
|
|
942
|
-
return [u,
|
|
941
|
+
const m = c - o, d = s - n, u = m * r - d * l + o, f = m * l + d * r + n;
|
|
942
|
+
return [u, f];
|
|
943
943
|
});
|
|
944
944
|
}, getTopLeftPoint = (e) => [e[0], e[3]], getBottomLeftPoint = (e) => [e[2], e[3]], getBottomRightPoint = (e) => [e[2], e[1]], getTopRighttPoint = (e) => [e[0], e[1]];
|
|
945
|
-
function calculateBounds(e, t, o, n,
|
|
946
|
-
let r,
|
|
945
|
+
function calculateBounds(e, t, o, n, i) {
|
|
946
|
+
let r, l, c, s;
|
|
947
947
|
const m = e[0], d = e[1];
|
|
948
948
|
switch (t) {
|
|
949
949
|
case 0:
|
|
950
|
-
r = m +
|
|
950
|
+
r = m + i, l = r + o, s = d - i, c = s - n;
|
|
951
951
|
break;
|
|
952
952
|
case 1:
|
|
953
|
-
r = m +
|
|
953
|
+
r = m + i, l = r + o, s = d + n / 2, c = s - n;
|
|
954
954
|
break;
|
|
955
955
|
case 2:
|
|
956
|
-
r = m +
|
|
956
|
+
r = m + i, l = r + o, s = d + i + n, c = s - n;
|
|
957
957
|
break;
|
|
958
958
|
case 3:
|
|
959
|
-
r = m - o / 2,
|
|
959
|
+
r = m - o / 2, l = r + o, s = d + i + n, c = s - n;
|
|
960
960
|
break;
|
|
961
961
|
case 4:
|
|
962
|
-
|
|
962
|
+
l = m, r = l - o, s = d + i + n, c = s - n;
|
|
963
963
|
break;
|
|
964
964
|
case 5:
|
|
965
|
-
|
|
965
|
+
l = m - i, r = l - o, s = d + n / 2, c = s - n;
|
|
966
966
|
break;
|
|
967
967
|
case 6:
|
|
968
|
-
|
|
968
|
+
l = m, r = l - o, s = d - i, c = s - n;
|
|
969
969
|
break;
|
|
970
970
|
case 7:
|
|
971
|
-
r = m - o / 2,
|
|
971
|
+
r = m - o / 2, l = r + o, s = d - i, c = s - n;
|
|
972
972
|
}
|
|
973
|
-
if (!(!r || !c || !
|
|
974
|
-
return [Math.min(r,
|
|
973
|
+
if (!(!r || !c || !l || !s))
|
|
974
|
+
return [Math.min(r, l), Math.min(c, s), Math.max(r, l), Math.max(c, s) + 1];
|
|
975
975
|
}
|
|
976
|
-
function calculateAnchorPoint(e, t, o = 70, n = 20,
|
|
976
|
+
function calculateAnchorPoint(e, t, o = 70, n = 20, i = 20) {
|
|
977
977
|
const r = [0, 0];
|
|
978
978
|
switch (t) {
|
|
979
979
|
case 0:
|
|
980
|
-
r[0] = e[0] +
|
|
980
|
+
r[0] = e[0] + i, r[1] = e[1] - i - n / 2;
|
|
981
981
|
break;
|
|
982
982
|
case 1:
|
|
983
|
-
r[0] = e[0] +
|
|
983
|
+
r[0] = e[0] + i, r[1] = e[1];
|
|
984
984
|
break;
|
|
985
985
|
case 2:
|
|
986
|
-
r[0] = e[0] +
|
|
986
|
+
r[0] = e[0] + i, r[1] = e[1] + i + n / 2;
|
|
987
987
|
break;
|
|
988
988
|
case 3:
|
|
989
|
-
r[0] = e[0], r[1] = e[1] +
|
|
989
|
+
r[0] = e[0], r[1] = e[1] + i + n / 4;
|
|
990
990
|
break;
|
|
991
991
|
case 4:
|
|
992
|
-
r[0] = Math.max(e[0] -
|
|
992
|
+
r[0] = Math.max(e[0] - i, e[0] - o / 2), r[1] = e[1] + i + n / 4;
|
|
993
993
|
break;
|
|
994
994
|
case 5:
|
|
995
|
-
r[0] = e[0] -
|
|
995
|
+
r[0] = e[0] - i, r[1] = e[1];
|
|
996
996
|
break;
|
|
997
997
|
case 6:
|
|
998
|
-
r[0] = Math.max(e[0] -
|
|
998
|
+
r[0] = Math.max(e[0] - i, e[0] - o / 2), r[1] = e[1] - i - n / 4;
|
|
999
999
|
break;
|
|
1000
1000
|
case 7:
|
|
1001
|
-
r[0] = e[0], r[1] = e[1] -
|
|
1001
|
+
r[0] = e[0], r[1] = e[1] - i - n / 4;
|
|
1002
1002
|
}
|
|
1003
1003
|
return r;
|
|
1004
1004
|
}
|
|
@@ -1006,24 +1006,24 @@ function drawLabelBody(e, t, o) {
|
|
|
1006
1006
|
if (!e) return;
|
|
1007
1007
|
const {
|
|
1008
1008
|
font: n,
|
|
1009
|
-
labelOutSize:
|
|
1009
|
+
labelOutSize: i = 2,
|
|
1010
1010
|
labelHeight: r,
|
|
1011
|
-
center:
|
|
1011
|
+
center: l,
|
|
1012
1012
|
text: c,
|
|
1013
1013
|
id: s,
|
|
1014
1014
|
leftIcon: m,
|
|
1015
1015
|
shipColor: d,
|
|
1016
1016
|
lineLength: u = 20,
|
|
1017
|
-
selected:
|
|
1017
|
+
selected: f,
|
|
1018
1018
|
blinkColors: p
|
|
1019
1019
|
} = o;
|
|
1020
1020
|
e.save(), n && (e.font = n);
|
|
1021
|
-
let
|
|
1022
|
-
(m || d) && (
|
|
1023
|
-
let v, g = 20, k = -1, M = r + 3 *
|
|
1021
|
+
let h = e.measureText(c).width + 4 * i;
|
|
1022
|
+
(m || d) && (h += r + 6 * i), e.restore();
|
|
1023
|
+
let v, g = 20, k = -1, M = r + 3 * i;
|
|
1024
1024
|
if (u)
|
|
1025
|
-
for (let
|
|
1026
|
-
v = calculateBounds(
|
|
1025
|
+
for (let I = 0; I < 8; I++) {
|
|
1026
|
+
v = calculateBounds(l, I, h, M, u);
|
|
1027
1027
|
let E = !1;
|
|
1028
1028
|
for (let V = 0; V < t.length; ++V) {
|
|
1029
1029
|
let F = t[V].bounds, $ = [
|
|
@@ -1038,19 +1038,19 @@ function drawLabelBody(e, t, o) {
|
|
|
1038
1038
|
}
|
|
1039
1039
|
}
|
|
1040
1040
|
if (!E) {
|
|
1041
|
-
k =
|
|
1041
|
+
k = I;
|
|
1042
1042
|
break;
|
|
1043
1043
|
}
|
|
1044
1044
|
}
|
|
1045
1045
|
else
|
|
1046
|
-
k = 0, v = calculateBounds(
|
|
1047
|
-
if (((p == null ? void 0 : p.length) > 1 ||
|
|
1048
|
-
let
|
|
1046
|
+
k = 0, v = calculateBounds(l, k, h, M, u);
|
|
1047
|
+
if (((p == null ? void 0 : p.length) > 1 || f) && (k = 0, v = calculateBounds(l, k, h, M, u)), v && k > -1) {
|
|
1048
|
+
let I = getBottomLeftPoint(v), E = getTopRighttPoint(v);
|
|
1049
1049
|
return {
|
|
1050
|
-
center:
|
|
1051
|
-
x: calculateAnchorPoint(
|
|
1050
|
+
center: l,
|
|
1051
|
+
x: calculateAnchorPoint(l, k, h, M, u),
|
|
1052
1052
|
l: E,
|
|
1053
|
-
r:
|
|
1053
|
+
r: I,
|
|
1054
1054
|
bounds: v,
|
|
1055
1055
|
position: k,
|
|
1056
1056
|
name: c,
|
|
@@ -1061,7 +1061,7 @@ function drawLabelBody(e, t, o) {
|
|
|
1061
1061
|
}
|
|
1062
1062
|
const drawText = (e, t) => {
|
|
1063
1063
|
if (!e) return;
|
|
1064
|
-
const { center: o, text: n, textColor:
|
|
1064
|
+
const { center: o, text: n, textColor: i, leftIcon: r, rightIcons: l, font: c } = t;
|
|
1065
1065
|
e.save(), e.setTransform(1, 0, 0, 1, 0, 0);
|
|
1066
1066
|
let [s, m] = o;
|
|
1067
1067
|
if (r) {
|
|
@@ -1069,54 +1069,54 @@ const drawText = (e, t) => {
|
|
|
1069
1069
|
let d = getIconFont(r.icon);
|
|
1070
1070
|
e.fillStyle = r.color, e.fillText(d, s + labelOutSize - 3 * pixelRatio, m + 2.6 * pixelRatio), s += 23 * pixelRatio;
|
|
1071
1071
|
}
|
|
1072
|
-
if (
|
|
1072
|
+
if (l != null && l.length) {
|
|
1073
1073
|
e.font = `${12 * pixelRatio}px map-iconfont`, e.fillStyle = "#3370ff";
|
|
1074
1074
|
const d = e.measureText(n).width + 6 * pixelRatio;
|
|
1075
|
-
|
|
1076
|
-
const p = getIconFont(u),
|
|
1077
|
-
e.fillText(p, s + d +
|
|
1075
|
+
l.forEach((u, f) => {
|
|
1076
|
+
const p = getIconFont(u), h = 20 * pixelRatio * f;
|
|
1077
|
+
e.fillText(p, s + d + h, m);
|
|
1078
1078
|
});
|
|
1079
1079
|
}
|
|
1080
|
-
e.font = c || labelFont, e.fillStyle =
|
|
1080
|
+
e.font = c || labelFont, e.fillStyle = i, e.fillText(n, s + 2, m), e.restore();
|
|
1081
1081
|
}, drawPolygon = (e, t) => {
|
|
1082
1082
|
let {
|
|
1083
1083
|
points: o,
|
|
1084
1084
|
strokeColor: n,
|
|
1085
|
-
fillColor:
|
|
1085
|
+
fillColor: i,
|
|
1086
1086
|
shouldClosePath: r,
|
|
1087
|
-
translation:
|
|
1087
|
+
translation: l,
|
|
1088
1088
|
rotation: c,
|
|
1089
1089
|
rotationCenter: s,
|
|
1090
1090
|
scale: m,
|
|
1091
1091
|
globalAlpha: d
|
|
1092
1092
|
} = t;
|
|
1093
1093
|
if (d || (d = 1), o && e) {
|
|
1094
|
-
e.save(), e.beginPath(), c && c !== 0 && s == null && e.rotate(c),
|
|
1094
|
+
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(o[0][0], o[0][1]);
|
|
1095
1095
|
for (let u = 1; u < o.length; u++)
|
|
1096
1096
|
e.lineTo(o[u][0], o[u][1]);
|
|
1097
|
-
r && e.closePath(), n && (e.strokeStyle = n, e.stroke()),
|
|
1097
|
+
r && e.closePath(), n && (e.strokeStyle = n, e.stroke()), i && r && (d && (e.globalAlpha = d), e.fillStyle = i, e.fill()), e.restore();
|
|
1098
1098
|
}
|
|
1099
1099
|
}, intervalIds = {}, drawLabel = (e, t, o, n) => {
|
|
1100
|
-
var
|
|
1101
|
-
let { center:
|
|
1102
|
-
if (
|
|
1100
|
+
var h, v, g, k, M, I, E, V;
|
|
1101
|
+
let { center: i, id: r, text: l, color: c, textColor: s, bgColor: m, leftIcon: d, rightIcons: u, type: f, blinkColors: p } = t;
|
|
1102
|
+
if (i && l) {
|
|
1103
1103
|
const F = {
|
|
1104
1104
|
font: labelFont,
|
|
1105
1105
|
labelOutSize,
|
|
1106
1106
|
labelHeight,
|
|
1107
|
-
center:
|
|
1108
|
-
text:
|
|
1107
|
+
center: i,
|
|
1108
|
+
text: l,
|
|
1109
1109
|
id: r,
|
|
1110
1110
|
leftIcon: d,
|
|
1111
1111
|
blinkColors: p,
|
|
1112
1112
|
selected: t.selected
|
|
1113
1113
|
};
|
|
1114
|
-
(
|
|
1114
|
+
(h = t.blinkColors) != null && h.length && t.fill && (m = t.fill, s = getForegroundColor(t.fill));
|
|
1115
1115
|
const $ = drawLabelBody(e, o, F);
|
|
1116
1116
|
if ($) {
|
|
1117
1117
|
const { x: y, bounds: L, l: w } = $, S = [getTopLeftPoint(L), getBottomLeftPoint(L), getBottomRightPoint(L), getTopRighttPoint(L)];
|
|
1118
|
-
o.find((R) => R.name ===
|
|
1119
|
-
points: [
|
|
1118
|
+
o.find((R) => R.name === l) || o.push($), drawPolygon(e, {
|
|
1119
|
+
points: [i, w],
|
|
1120
1120
|
strokeColor: c,
|
|
1121
1121
|
fillColor: "#000",
|
|
1122
1122
|
shouldClosePath: !0,
|
|
@@ -1128,80 +1128,80 @@ const drawText = (e, t) => {
|
|
|
1128
1128
|
}), u != null && u.length && u.forEach(() => {
|
|
1129
1129
|
S[1][0] += pixelRatio * 18, S[2][0] += pixelRatio * 18;
|
|
1130
1130
|
});
|
|
1131
|
-
const
|
|
1131
|
+
const b = {
|
|
1132
1132
|
points: S,
|
|
1133
1133
|
strokeColor: c,
|
|
1134
1134
|
fillColor: m,
|
|
1135
1135
|
shouldClosePath: !0
|
|
1136
1136
|
}, [P, x] = w, N = {
|
|
1137
1137
|
center: [P, x + labelOutSize + labelHeight + 1],
|
|
1138
|
-
text:
|
|
1138
|
+
text: l,
|
|
1139
1139
|
textColor: s,
|
|
1140
1140
|
leftIcon: d,
|
|
1141
1141
|
rightIcons: u,
|
|
1142
1142
|
blinkColors: t.blinkColors
|
|
1143
1143
|
};
|
|
1144
|
-
if (drawPolygon(e,
|
|
1144
|
+
if (drawPolygon(e, b), drawText(e, N), t != null && t.blinkColors && t.blinkColors.length > 0) {
|
|
1145
1145
|
let R = Date.now(), B = 0;
|
|
1146
1146
|
const D = t.blinkColors;
|
|
1147
1147
|
!!!((k = (g = (v = selectShipsLayer.value) == null ? void 0 : v.getSource()) == null ? void 0 : g.getFeatures()) != null && k.find((A) => {
|
|
1148
1148
|
var O;
|
|
1149
1149
|
return ((O = A.get("data")) == null ? void 0 : O.id) === t.id;
|
|
1150
|
-
}) || (E = (
|
|
1150
|
+
}) || (E = (I = (M = shipsLayer.value) == null ? void 0 : M.getSource()) == null ? void 0 : I.getFeatures()) != null && E.find((A) => {
|
|
1151
1151
|
var O;
|
|
1152
1152
|
return ((O = A.get("data")) == null ? void 0 : O.id) === t.id;
|
|
1153
1153
|
})) || hiddenOrther.value && ((V = selectSingleShipData.value) == null ? void 0 : V.id) !== t.id ? deleteLabelFromArray(o, t.id) : (intervalIds[t.id] && clearInterval(intervalIds[t.id]), intervalIds[t.id] = window.setInterval(() => {
|
|
1154
1154
|
const A = Date.now();
|
|
1155
|
-
A - R >= 500 && (B = (B + 1) % D.length, R = A,
|
|
1155
|
+
A - R >= 500 && (B = (B + 1) % D.length, R = A, b.fillColor = D[B], drawPolygon(e, b), N.textColor = getForegroundColor(b.fillColor), drawText(e, N)), checkBlinkLabelExist(n, o, t.id);
|
|
1156
1156
|
}, 500));
|
|
1157
1157
|
} else
|
|
1158
|
-
shipLabels.value.find((B) => B.name ===
|
|
1158
|
+
shipLabels.value.find((B) => B.name === l) && (clearInterval(intervalIds[t.id]), drawPolygon(e, b), drawText(e, N));
|
|
1159
1159
|
}
|
|
1160
1160
|
}
|
|
1161
1161
|
return null;
|
|
1162
1162
|
}, checkBlinkLabelExist = (e, t, o) => {
|
|
1163
|
-
var
|
|
1163
|
+
var l, c, s, m, d, u, f;
|
|
1164
1164
|
const n = shipsMarkerList == null ? void 0 : shipsMarkerList.some((p) => {
|
|
1165
|
-
var
|
|
1166
|
-
return ((
|
|
1167
|
-
}),
|
|
1168
|
-
...((c = (
|
|
1165
|
+
var h, v, g;
|
|
1166
|
+
return ((h = p.ship) == null ? void 0 : h.id) === o && ((g = (v = p.ship) == null ? void 0 : v.blinkColors) == null ? void 0 : g.length) > 0;
|
|
1167
|
+
}), i = [
|
|
1168
|
+
...((c = (l = shipsLayer.value) == null ? void 0 : l.getSource()) == null ? void 0 : c.getFeatures()) || [],
|
|
1169
1169
|
...((m = (s = selectShipsLayer.value) == null ? void 0 : s.getSource()) == null ? void 0 : m.getFeatures()) || []
|
|
1170
1170
|
].some((p) => {
|
|
1171
|
-
const
|
|
1172
|
-
if ((
|
|
1171
|
+
const h = p.get("data");
|
|
1172
|
+
if ((h == null ? void 0 : h.id) === o) {
|
|
1173
1173
|
const v = e == null ? void 0 : e.getView().calculateExtent();
|
|
1174
1174
|
if (!v) return !1;
|
|
1175
|
-
const g = fromLonLat([
|
|
1175
|
+
const g = fromLonLat([h.lon, h.lat]);
|
|
1176
1176
|
return g[0] >= v[0] && g[0] <= v[2] && g[1] >= v[1] && g[1] <= v[3];
|
|
1177
1177
|
}
|
|
1178
1178
|
return !1;
|
|
1179
1179
|
}), r = (u = (d = trackLineVectorSource.value) == null ? void 0 : d.getFeatures()) == null ? void 0 : u.some((p) => {
|
|
1180
|
-
const
|
|
1181
|
-
return (
|
|
1180
|
+
const h = p.get("data");
|
|
1181
|
+
return (h == null ? void 0 : h.id) === o;
|
|
1182
1182
|
});
|
|
1183
|
-
(((
|
|
1184
|
-
var
|
|
1185
|
-
return p.id !== ((
|
|
1186
|
-
}) || (!r || !
|
|
1183
|
+
(((f = shipsLayer.value) == null ? void 0 : f.getVisible()) === !1 && t.some((p) => {
|
|
1184
|
+
var h;
|
|
1185
|
+
return p.id !== ((h = selectSingleShipData.value) == null ? void 0 : h.id) && p.id === o;
|
|
1186
|
+
}) || (!r || !i) && (!i || !n)) && deleteLabelFromArray(e, t, o);
|
|
1187
1187
|
}, clearAllInterval = () => {
|
|
1188
1188
|
Object.keys(intervalIds).forEach((e) => {
|
|
1189
1189
|
clearInterval(e);
|
|
1190
1190
|
});
|
|
1191
1191
|
}, deleteLabelFromArray = (e, t, o) => {
|
|
1192
|
-
var
|
|
1192
|
+
var i, r, l, c, s, m, d, u;
|
|
1193
1193
|
clearInterval(intervalIds[o]);
|
|
1194
|
-
const n = t.findIndex((
|
|
1194
|
+
const n = t.findIndex((f) => f.id === o);
|
|
1195
1195
|
if (n !== -1) {
|
|
1196
1196
|
t.splice(n, 1);
|
|
1197
|
-
const
|
|
1197
|
+
const f = (r = (i = shipsLayer.value) == null ? void 0 : i.getSource()) == null ? void 0 : r.getFeatures().find((h) => {
|
|
1198
1198
|
var v;
|
|
1199
|
-
return ((v =
|
|
1199
|
+
return ((v = h.get("data")) == null ? void 0 : v.id) === o;
|
|
1200
1200
|
});
|
|
1201
|
-
|
|
1202
|
-
const p = (m = (s = selectShipsLayer.value) == null ? void 0 : s.getSource()) == null ? void 0 : m.getFeatures().find((
|
|
1201
|
+
f && ((c = (l = shipsLayer.value) == null ? void 0 : l.getSource()) == null || c.removeFeature(f));
|
|
1202
|
+
const p = (m = (s = selectShipsLayer.value) == null ? void 0 : s.getSource()) == null ? void 0 : m.getFeatures().find((h) => {
|
|
1203
1203
|
var v;
|
|
1204
|
-
return ((v =
|
|
1204
|
+
return ((v = h.get("data")) == null ? void 0 : v.id) === o;
|
|
1205
1205
|
});
|
|
1206
1206
|
p && ((u = (d = selectShipsLayer.value) == null ? void 0 : d.getSource()) == null || u.removeFeature(p)), e && e.render();
|
|
1207
1207
|
}
|
|
@@ -1224,23 +1224,23 @@ function gcj02ToWgs84(e) {
|
|
|
1224
1224
|
if (outOfChina(t, o))
|
|
1225
1225
|
return `${t.toFixed(6)}, ${o.toFixed(6)}`;
|
|
1226
1226
|
{
|
|
1227
|
-
let n = transformLat(t - 105, o - 35),
|
|
1227
|
+
let n = transformLat(t - 105, o - 35), i = transformLng(t - 105, o - 35);
|
|
1228
1228
|
const r = o / 180 * PI;
|
|
1229
|
-
let
|
|
1230
|
-
|
|
1231
|
-
const c = Math.sqrt(
|
|
1232
|
-
n = n * 180 / (a * (1 - ee) / (
|
|
1233
|
-
const s = o + n, m = t +
|
|
1229
|
+
let l = Math.sin(r);
|
|
1230
|
+
l = 1 - ee * l * l;
|
|
1231
|
+
const c = Math.sqrt(l);
|
|
1232
|
+
n = n * 180 / (a * (1 - ee) / (l * c) * PI), i = i * 180 / (a / c * Math.cos(r) * PI);
|
|
1233
|
+
const s = o + n, m = t + i;
|
|
1234
1234
|
return `${(t * 2 - m).toFixed(6)}, ${(o * 2 - s).toFixed(6)}`;
|
|
1235
1235
|
}
|
|
1236
1236
|
}
|
|
1237
1237
|
function calculateCirclePoints(e, t) {
|
|
1238
|
-
const o = fromLonLat(e), n = t * 1e3,
|
|
1238
|
+
const o = fromLonLat(e), n = t * 1e3, i = [
|
|
1239
1239
|
o[0] - n,
|
|
1240
1240
|
o[1] - n,
|
|
1241
1241
|
o[0] + n,
|
|
1242
1242
|
o[1] + n
|
|
1243
|
-
], r = transformExtent(
|
|
1243
|
+
], r = transformExtent(i, projection.mercator, projection.data);
|
|
1244
1244
|
return {
|
|
1245
1245
|
leftTopPoint: { lng: r[0], lat: r[3] },
|
|
1246
1246
|
rightTopPoint: { lng: r[2], lat: r[3] },
|
|
@@ -1256,17 +1256,17 @@ function lonLatToMercator(e) {
|
|
|
1256
1256
|
}
|
|
1257
1257
|
function mercatorToLonLat(e, t = "lonlat") {
|
|
1258
1258
|
const o = { lon: 0, lat: 0 }, n = e[0] / equatorialCircumference * 180;
|
|
1259
|
-
let
|
|
1260
|
-
return
|
|
1259
|
+
let i = e[1] / equatorialCircumference * 180;
|
|
1260
|
+
return i = 180 / Math.PI * (2 * Math.atan(Math.exp(i * Math.PI / 180)) - Math.PI / 2), o.lon = n, o.lat = i, t === "lonlat" ? o : [n, i];
|
|
1261
1261
|
}
|
|
1262
1262
|
function calculateBoundingBox(e) {
|
|
1263
|
-
let t = 1 / 0, o = -1 / 0, n = 1 / 0,
|
|
1263
|
+
let t = 1 / 0, o = -1 / 0, n = 1 / 0, i = -1 / 0;
|
|
1264
1264
|
e.forEach((v) => {
|
|
1265
1265
|
const [g, k] = v;
|
|
1266
|
-
t = Math.min(t, k), o = Math.max(o, k), n = Math.min(n, g),
|
|
1266
|
+
t = Math.min(t, k), o = Math.max(o, k), n = Math.min(n, g), i = Math.max(i, g);
|
|
1267
1267
|
});
|
|
1268
|
-
const r =
|
|
1269
|
-
return [
|
|
1268
|
+
const r = i - n, l = o - t, c = Math.max(r, l), s = (n + i) / 2, m = (t + o) / 2, d = c / 2, u = s - d, f = s + d, p = m - d, h = m + d;
|
|
1269
|
+
return [f, p, u, h];
|
|
1270
1270
|
}
|
|
1271
1271
|
const transformUtils = {
|
|
1272
1272
|
gcj02ToWgs84,
|
|
@@ -1275,32 +1275,32 @@ const transformUtils = {
|
|
|
1275
1275
|
mercatorToLonLat,
|
|
1276
1276
|
calculateBoundingBox,
|
|
1277
1277
|
transform
|
|
1278
|
-
}, mapInstance$5 = ref(), renderTrackStyleSetInstance = (e) => mapInstance$5.value = e, stopIcon = "", stopColor = "#E31818", slowIcon = "", slowColor = "#1890FF", dropletsIcon = "", trackList$1 = ref([]), renderTrackLine = (e, t, o) => {
|
|
1278
|
+
}, mapInstance$5 = ref(), renderTrackStyleSetInstance = (e) => mapInstance$5.value = e, stopIcon = "", stopColor = "#E31818", slowIcon = "", slowColor = "#1890FF", dropletsIcon = "", trackList$1 = ref([]), renderTrackLine = (e, t, o, n) => {
|
|
1279
1279
|
var s, m, d;
|
|
1280
|
-
const
|
|
1281
|
-
if (!
|
|
1282
|
-
allTracks.value[t] =
|
|
1283
|
-
const r = Math.max(1, Math.floor(
|
|
1284
|
-
trackList$1.value =
|
|
1280
|
+
const i = e[t];
|
|
1281
|
+
if (!i) return;
|
|
1282
|
+
allTracks.value[t] = i, trackList$1.value = [];
|
|
1283
|
+
const r = Math.max(1, Math.floor(i.length / n)), l = i.filter((u, f) => f % r === 0);
|
|
1284
|
+
trackList$1.value = l.map((u, f) => {
|
|
1285
1285
|
if (Number(u.lon) > 180 || Number(u.lat) > 180) {
|
|
1286
|
-
const [p,
|
|
1287
|
-
u.lon = p, u.lat =
|
|
1286
|
+
const [p, h] = formatUtils.convertSixHundredThousandToLatLng(u.lon, u.lat);
|
|
1287
|
+
u.lon = p, u.lat = h;
|
|
1288
1288
|
}
|
|
1289
|
-
return u.center = [u.lon, u.lat], u.centerPoint = transformUtils.lonLatToMercator(u.center), u.id = t, u.index =
|
|
1289
|
+
return u.center = [u.lon, u.lat], u.centerPoint = transformUtils.lonLatToMercator(u.center), u.id = t, u.index = f, u.time = hooks(u.createdAt).format("YYYY-MM-DD HH:mm:ss"), u;
|
|
1290
1290
|
});
|
|
1291
1291
|
const c = trackList$1.value.map((u) => u.centerPoint);
|
|
1292
1292
|
if (c.length >= 2) {
|
|
1293
|
-
const u = new LineString(c),
|
|
1294
|
-
|
|
1293
|
+
const u = new LineString(c), f = new Feature({ geometry: u });
|
|
1294
|
+
f.setStyle(
|
|
1295
1295
|
new Style({
|
|
1296
1296
|
stroke: new Stroke({
|
|
1297
1297
|
color: o,
|
|
1298
1298
|
width: 2
|
|
1299
1299
|
})
|
|
1300
1300
|
})
|
|
1301
|
-
),
|
|
1302
|
-
const p = shipTrackLineFeatures.value.findIndex((
|
|
1303
|
-
p >= 0 ? shipTrackLineFeatures.value[p] =
|
|
1301
|
+
), f.setId(t), f.set("type", "line"), (m = (s = shipTrackVectorLayer.value) == null ? void 0 : s.getSource()) == null || m.clear(), shipTrackLineFeatures.value = [];
|
|
1302
|
+
const p = shipTrackLineFeatures.value.findIndex((h) => h.getId() === t);
|
|
1303
|
+
p >= 0 ? shipTrackLineFeatures.value[p] = f : shipTrackLineFeatures.value.push(f), createAnimatedIconFeature(o, c), trackLineVectorSource.value = new VectorSource({
|
|
1304
1304
|
features: [...shipTrackLineFeatures.value]
|
|
1305
1305
|
}), shipTrackVectorLayer.value = new VectorLayer({
|
|
1306
1306
|
source: trackLineVectorSource.value,
|
|
@@ -1340,23 +1340,23 @@ let polyline, linePath, startMarker, position, geoMarker, vectorLayer;
|
|
|
1340
1340
|
const trackAnimating = ref(!1);
|
|
1341
1341
|
let distance = 0, lastTime = Date.now(), moveFeatureHandler = null;
|
|
1342
1342
|
const moveFeature = (e, t) => {
|
|
1343
|
-
var u,
|
|
1344
|
-
const o = Number(50 * t), n = ((u = e.frameState) == null ? void 0 : u.time) ?? Date.now(),
|
|
1345
|
-
if (distance = (distance + o *
|
|
1343
|
+
var u, f, p;
|
|
1344
|
+
const o = Number(50 * t), n = ((u = e.frameState) == null ? void 0 : u.time) ?? Date.now(), i = n - lastTime;
|
|
1345
|
+
if (distance = (distance + o * i / 1e6) % 2, lastTime = n, distance >= 1) {
|
|
1346
1346
|
stopAnimation();
|
|
1347
1347
|
return;
|
|
1348
1348
|
}
|
|
1349
1349
|
const r = linePath.getCoordinateAt(
|
|
1350
1350
|
distance > 1 ? 2 - distance : distance
|
|
1351
|
-
),
|
|
1351
|
+
), l = linePath.getCoordinateAt(
|
|
1352
1352
|
distance > 1 ? distance - 0.01 : distance
|
|
1353
1353
|
), c = linePath.getCoordinateAt(
|
|
1354
1354
|
distance > 1 ? 2 - distance : distance + 0.01
|
|
1355
1355
|
), m = getRotation(
|
|
1356
|
-
transformUtils.mercatorToLonLat(
|
|
1356
|
+
transformUtils.mercatorToLonLat(l, "array"),
|
|
1357
1357
|
transformUtils.mercatorToLonLat(c, "array")
|
|
1358
1358
|
) * Math.PI / 180;
|
|
1359
|
-
(
|
|
1359
|
+
(f = geoMarkerStyle.getText()) == null || f.setRotation(m), position.setCoordinates(r);
|
|
1360
1360
|
const d = getVectorContext(e);
|
|
1361
1361
|
d.context_.save(), d.setStyle(geoMarkerStyle), d.drawGeometry(position), d.context_.restore(), (p = mapInstance$5.value) == null || p.render();
|
|
1362
1362
|
}, startAnimation = () => {
|
|
@@ -1387,13 +1387,13 @@ const moveFeature = (e, t) => {
|
|
|
1387
1387
|
source: new VectorSource({
|
|
1388
1388
|
features: [geoMarker]
|
|
1389
1389
|
})
|
|
1390
|
-
}), (n = mapInstance$5.value) == null || n.addLayer(vectorLayer), moveFeatureHandler = (
|
|
1390
|
+
}), (n = mapInstance$5.value) == null || n.addLayer(vectorLayer), moveFeatureHandler = (i) => moveFeature(i, t), startAnimation();
|
|
1391
1391
|
}, renderPoint = (e) => {
|
|
1392
1392
|
if (!mapInstance$5.value) return;
|
|
1393
1393
|
const t = trackList$1.value || [];
|
|
1394
1394
|
if (!(t && t.length > 1)) return [];
|
|
1395
|
-
const o = { 16: 24, 17: 15, default: 4 }, n = [],
|
|
1396
|
-
for (let c = 0; c <
|
|
1395
|
+
const o = { 16: 24, 17: 15, default: 4 }, n = [], i = t.length;
|
|
1396
|
+
for (let c = 0; c < i; c++) {
|
|
1397
1397
|
t[c].index = c;
|
|
1398
1398
|
const s = mapInstance$5.value.getPixelFromCoordinate(t[c].centerPoint);
|
|
1399
1399
|
if (s) {
|
|
@@ -1402,13 +1402,13 @@ const moveFeature = (e, t) => {
|
|
|
1402
1402
|
const d = mapInstance$5.value.getView().getZoom();
|
|
1403
1403
|
if (!d) return;
|
|
1404
1404
|
if (d > 15) {
|
|
1405
|
-
const
|
|
1406
|
-
m = adjustBounds(m, [
|
|
1405
|
+
const f = o[d] || o.default;
|
|
1406
|
+
m = adjustBounds(m, [f, f]);
|
|
1407
1407
|
}
|
|
1408
1408
|
let u = !0;
|
|
1409
1409
|
if (t[c].state !== "0") {
|
|
1410
|
-
for (let
|
|
1411
|
-
if (isOverlapping(m, n[
|
|
1410
|
+
for (let f = 0; f < n.length; f++)
|
|
1411
|
+
if (isOverlapping(m, n[f].bounds)) {
|
|
1412
1412
|
u = !1;
|
|
1413
1413
|
break;
|
|
1414
1414
|
}
|
|
@@ -1416,9 +1416,9 @@ const moveFeature = (e, t) => {
|
|
|
1416
1416
|
u && (t[c].bounds = m, n.push(t[c]));
|
|
1417
1417
|
}
|
|
1418
1418
|
}
|
|
1419
|
-
const r = getIconStyle(stopIcon),
|
|
1419
|
+
const r = getIconStyle(stopIcon), l = getIconStyle(slowIcon);
|
|
1420
1420
|
n.forEach((c, s) => {
|
|
1421
|
-
var u,
|
|
1421
|
+
var u, f;
|
|
1422
1422
|
const m = new Feature({
|
|
1423
1423
|
geometry: new Point(c.centerPoint)
|
|
1424
1424
|
});
|
|
@@ -1449,7 +1449,7 @@ const moveFeature = (e, t) => {
|
|
|
1449
1449
|
geometry: new Point(c.centerPoint)
|
|
1450
1450
|
});
|
|
1451
1451
|
p.set("type", "track_icon");
|
|
1452
|
-
const
|
|
1452
|
+
const h = new Style({
|
|
1453
1453
|
text: new Text({
|
|
1454
1454
|
font: "Normal 22px map-iconfont",
|
|
1455
1455
|
text: getIconFont(dropletsIcon),
|
|
@@ -1457,27 +1457,27 @@ const moveFeature = (e, t) => {
|
|
|
1457
1457
|
}),
|
|
1458
1458
|
zIndex: 99
|
|
1459
1459
|
}), v = [];
|
|
1460
|
-
Number(c.state) === 0 ? ((u =
|
|
1460
|
+
Number(c.state) === 0 ? ((u = h.getText()) == null || u.setFill(new Fill({ color: stopColor })), v.push(r)) : Number(c.state) === 1 && ((f = h.getText()) == null || f.setFill(new Fill({ color: slowColor })), v.push(l)), v.push(h), p.setStyle(v), trackLineVectorSource.value.addFeature(p);
|
|
1461
1461
|
}
|
|
1462
1462
|
}), renderArrow(n, e), renderIconPoint();
|
|
1463
1463
|
}, renderArrow = (e, t) => {
|
|
1464
1464
|
const o = e.length;
|
|
1465
1465
|
o || (e.push(trackList$1.value[0]), e.push(trackList$1.value[trackList$1.value.length - 1]));
|
|
1466
1466
|
for (let n = 0; n < o - 1; n++) {
|
|
1467
|
-
let
|
|
1468
|
-
const r = e[n],
|
|
1469
|
-
if (
|
|
1470
|
-
|
|
1467
|
+
let i;
|
|
1468
|
+
const r = e[n], l = (e[n + 1].index + r.index) / 2;
|
|
1469
|
+
if (l % 2 === 0)
|
|
1470
|
+
i = trackList$1.value[l].centerPoint;
|
|
1471
1471
|
else {
|
|
1472
|
-
const c = trackList$1.value[Math.floor(
|
|
1472
|
+
const c = trackList$1.value[Math.floor(l)], s = trackList$1.value[Math.ceil(l)];
|
|
1473
1473
|
if (c && s) {
|
|
1474
|
-
const [m, d] = c.centerPoint, [u,
|
|
1475
|
-
|
|
1474
|
+
const [m, d] = c.centerPoint, [u, f] = s.centerPoint;
|
|
1475
|
+
i = [(m + u) / 2, (d + f) / 2];
|
|
1476
1476
|
}
|
|
1477
1477
|
}
|
|
1478
|
-
if (
|
|
1478
|
+
if (i) {
|
|
1479
1479
|
const c = new Feature({
|
|
1480
|
-
geometry: new Point(
|
|
1480
|
+
geometry: new Point(i)
|
|
1481
1481
|
});
|
|
1482
1482
|
c.set("type", "track_arrow"), c.setStyle(
|
|
1483
1483
|
new Style({
|
|
@@ -1497,18 +1497,18 @@ const moveFeature = (e, t) => {
|
|
|
1497
1497
|
}
|
|
1498
1498
|
}, renderIconPoint = () => {
|
|
1499
1499
|
const e = "", t = "#fcdc3f", o = "#ff0000";
|
|
1500
|
-
(trackList$1.value.length < 2 ? [trackList$1.value[0]] : [trackList$1.value[0], trackList$1.value[trackList$1.value.length - 1]]).forEach((
|
|
1500
|
+
(trackList$1.value.length < 2 ? [trackList$1.value[0]] : [trackList$1.value[0], trackList$1.value[trackList$1.value.length - 1]]).forEach((i) => {
|
|
1501
1501
|
const r = new Feature({
|
|
1502
|
-
geometry: new Point(
|
|
1502
|
+
geometry: new Point(i.centerPoint)
|
|
1503
1503
|
});
|
|
1504
|
-
r.set("type", "track_begin"), r.set("data",
|
|
1505
|
-
const
|
|
1504
|
+
r.set("type", "track_begin"), r.set("data", i);
|
|
1505
|
+
const l = i.index === 0 && trackList$1.value.length >= 2 ? t : o;
|
|
1506
1506
|
r.setStyle(
|
|
1507
1507
|
new Style({
|
|
1508
1508
|
text: new Text({
|
|
1509
1509
|
font: "Normal 14px map-iconfont",
|
|
1510
1510
|
text: getIconFont(e),
|
|
1511
|
-
fill: new Fill({ color:
|
|
1511
|
+
fill: new Fill({ color: l })
|
|
1512
1512
|
}),
|
|
1513
1513
|
zIndex: 101
|
|
1514
1514
|
})
|
|
@@ -1516,7 +1516,7 @@ const moveFeature = (e, t) => {
|
|
|
1516
1516
|
});
|
|
1517
1517
|
}, setTrackLabelStyle = (e, t) => new Style({
|
|
1518
1518
|
renderer: (o, n) => {
|
|
1519
|
-
const
|
|
1519
|
+
const i = n.context, c = {
|
|
1520
1520
|
id: e.id || "",
|
|
1521
1521
|
center: o,
|
|
1522
1522
|
text: e.time,
|
|
@@ -1526,88 +1526,88 @@ const moveFeature = (e, t) => {
|
|
|
1526
1526
|
selected: !0,
|
|
1527
1527
|
type: "TrackTime"
|
|
1528
1528
|
};
|
|
1529
|
-
drawLabel(
|
|
1529
|
+
drawLabel(i, c, trackLabels.value, mapInstance$5.value);
|
|
1530
1530
|
}
|
|
1531
|
-
}), mapInstance$4 = ref(), renderCustomOverlaySetInstance = (e) => mapInstance$4.value = e, drawCustomContent = (e, t, o, n = "top-left",
|
|
1532
|
-
var u,
|
|
1531
|
+
}), mapInstance$4 = ref(), renderCustomOverlaySetInstance = (e) => mapInstance$4.value = e, drawCustomContent = (e, t, o, n = "top-left", i = !1, r = !0) => {
|
|
1532
|
+
var u, f;
|
|
1533
1533
|
if (!t || !mapInstance$4.value) return;
|
|
1534
1534
|
r && document.querySelectorAll(".truck-custom-content").forEach((p) => {
|
|
1535
|
-
var
|
|
1536
|
-
return (
|
|
1535
|
+
var h;
|
|
1536
|
+
return (h = p.parentNode) == null ? void 0 : h.removeChild(p);
|
|
1537
1537
|
});
|
|
1538
|
-
const
|
|
1539
|
-
|
|
1538
|
+
const l = document.createElement("div");
|
|
1539
|
+
l.innerHTML = o;
|
|
1540
1540
|
const c = new Overlay({
|
|
1541
|
-
element:
|
|
1541
|
+
element: l,
|
|
1542
1542
|
position: t,
|
|
1543
1543
|
// 初始位置
|
|
1544
1544
|
positioning: n,
|
|
1545
|
-
stopEvent:
|
|
1545
|
+
stopEvent: i
|
|
1546
1546
|
// 设置不阻拦事件
|
|
1547
1547
|
});
|
|
1548
|
-
if (
|
|
1549
|
-
let p = !1,
|
|
1550
|
-
|
|
1548
|
+
if (i) {
|
|
1549
|
+
let p = !1, h = [0, 0], v = [0, 0], g = 0, k = 0;
|
|
1550
|
+
l.addEventListener("mousedown", function(M) {
|
|
1551
1551
|
var E;
|
|
1552
1552
|
p = !0, g = M.clientX, k = M.clientY;
|
|
1553
|
-
const
|
|
1554
|
-
|
|
1555
|
-
M.clientX -
|
|
1556
|
-
M.clientY -
|
|
1553
|
+
const I = (E = mapInstance$4.value) == null ? void 0 : E.getCoordinateFromPixel([M.clientX - 200, M.clientY - 200]);
|
|
1554
|
+
I && (h = I), v = [
|
|
1555
|
+
M.clientX - l.getBoundingClientRect().left + 160,
|
|
1556
|
+
M.clientY - l.getBoundingClientRect().top + 84
|
|
1557
1557
|
], M.preventDefault(), console.log(e, g, k);
|
|
1558
1558
|
}), document.addEventListener("mousemove", function(M) {
|
|
1559
|
-
var
|
|
1559
|
+
var I;
|
|
1560
1560
|
if (p) {
|
|
1561
|
-
const E = (
|
|
1562
|
-
c.setPosition([
|
|
1561
|
+
const E = (I = mapInstance$4.value) == null ? void 0 : I.getCoordinateFromPixel([M.clientX - v[0], M.clientY - v[1]]), V = E[0] - h[0], F = E[1] - h[1];
|
|
1562
|
+
c.setPosition([h[0] + V, h[1] + F]);
|
|
1563
1563
|
}
|
|
1564
1564
|
}), document.addEventListener("mouseup", function() {
|
|
1565
1565
|
p = !1;
|
|
1566
1566
|
});
|
|
1567
1567
|
}
|
|
1568
1568
|
(u = mapInstance$4.value) == null || u.addOverlay(c);
|
|
1569
|
-
const s =
|
|
1569
|
+
const s = l.querySelector(".close-button");
|
|
1570
1570
|
s && s.addEventListener("click", () => {
|
|
1571
|
-
var p,
|
|
1572
|
-
(p = mapInstance$4.value) == null || p.removeOverlay(c), (
|
|
1571
|
+
var p, h;
|
|
1572
|
+
(p = mapInstance$4.value) == null || p.removeOverlay(c), (h = l.parentNode) == null || h.removeChild(l);
|
|
1573
1573
|
});
|
|
1574
|
-
const m = JSON.parse(JSON.stringify(t)), d = (
|
|
1574
|
+
const m = JSON.parse(JSON.stringify(t)), d = (f = mapInstance$4.value) == null ? void 0 : f.getCoordinateFromPixel(m);
|
|
1575
1575
|
return c.setPosition(d), c;
|
|
1576
1576
|
}, mapInstance$3 = ref(), renderTrackSetInstance = (e) => mapInstance$3.value = e, showTracks = ref([]), trackList = ref([]);
|
|
1577
1577
|
ref(null);
|
|
1578
|
-
const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n,
|
|
1579
|
-
var
|
|
1580
|
-
if (console.log(
|
|
1578
|
+
const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, i = "ship", r) => {
|
|
1579
|
+
var u;
|
|
1580
|
+
if (console.log(i), nextTick(() => {
|
|
1581
1581
|
hiddenAllShips(), clearShipData(!1);
|
|
1582
|
-
}).then((
|
|
1582
|
+
}).then((f) => {
|
|
1583
1583
|
}), (t == null ? void 0 : t.length) < 2) {
|
|
1584
|
-
((
|
|
1584
|
+
((u = showTracks.value) == null ? void 0 : u.findIndex((f) => f.id === e)) < 0 && showTracks.value.push({ id: e, length: "" });
|
|
1585
1585
|
return;
|
|
1586
1586
|
}
|
|
1587
|
-
const
|
|
1588
|
-
t.forEach((
|
|
1589
|
-
|
|
1590
|
-
}), trackId.value = e,
|
|
1591
|
-
const
|
|
1592
|
-
(
|
|
1593
|
-
),
|
|
1587
|
+
const l = {};
|
|
1588
|
+
t.forEach((f) => {
|
|
1589
|
+
f.state ? f.state = Number(f.state) : delete f.state;
|
|
1590
|
+
}), trackId.value = e, l[e] = t, trackList.value = t;
|
|
1591
|
+
const c = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"], s = l[e].map(
|
|
1592
|
+
(f) => transform([f.lon, f.lat], projection.data, projection.mercator)
|
|
1593
|
+
), m = new LineString(s), d = formatUtils.formatLength(m, n) || "--";
|
|
1594
1594
|
nextTick(() => {
|
|
1595
|
-
var
|
|
1596
|
-
const
|
|
1597
|
-
|
|
1595
|
+
var p, h;
|
|
1596
|
+
const f = (p = showTracks.value) == null ? void 0 : p.findIndex((v) => v.id === e);
|
|
1597
|
+
f < 0 ? showTracks.value.push({ id: e, length: d }) : showTracks.value[f].length = d, ++cursor.value, cursor.value > c.length && (cursor.value = 0), renderTrackLine(l, e, o, r), nextTick(() => {
|
|
1598
1598
|
resetTrackView(e);
|
|
1599
1599
|
}).then(() => {
|
|
1600
|
-
}), (
|
|
1601
|
-
showTrackLayer.value && (trackLabels.value = [], renderTrackLine(
|
|
1602
|
-
}),
|
|
1600
|
+
}), (h = mapInstance$3.value) == null || h.on("moveend", () => {
|
|
1601
|
+
showTrackLayer.value && (trackLabels.value = [], renderTrackLine(l, e, o, r));
|
|
1602
|
+
}), i === "ship" && renderTrackPointPopup();
|
|
1603
1603
|
}).then(() => {
|
|
1604
1604
|
});
|
|
1605
1605
|
}, renderTrackPointPopup = () => {
|
|
1606
1606
|
var t;
|
|
1607
1607
|
const e = ref(null);
|
|
1608
1608
|
(t = mapInstance$3.value) == null || t.on("pointermove", (o) => {
|
|
1609
|
-
var
|
|
1610
|
-
e.value && ((
|
|
1609
|
+
var i, r, l, c;
|
|
1610
|
+
e.value && ((i = mapInstance$3.value) == null || i.removeOverlay(e.value));
|
|
1611
1611
|
const n = (r = mapInstance$3.value) == null ? void 0 : r.forEachFeatureAtPixel(o.pixel, (s) => s);
|
|
1612
1612
|
if (n) {
|
|
1613
1613
|
const s = n.get("data");
|
|
@@ -1650,10 +1650,10 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1650
1650
|
<div class="item-item">${s.time}</div>
|
|
1651
1651
|
</div>
|
|
1652
1652
|
${m ?? m}
|
|
1653
|
-
</div>`, u = (
|
|
1653
|
+
</div>`, u = (l = mapInstance$3.value) == null ? void 0 : l.getPixelFromCoordinate(o.coordinate);
|
|
1654
1654
|
if (u) {
|
|
1655
|
-
const
|
|
1656
|
-
|
|
1655
|
+
const f = drawCustomContent(s.time, u, d, "top-left");
|
|
1656
|
+
f && (e.value = f);
|
|
1657
1657
|
}
|
|
1658
1658
|
} else
|
|
1659
1659
|
e.value && ((c = mapInstance$3.value) == null || c.removeOverlay(e.value));
|
|
@@ -1664,10 +1664,10 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1664
1664
|
}, playTrack = (e, t) => {
|
|
1665
1665
|
handlePlay(String(e), t);
|
|
1666
1666
|
}, resetTrackView = (e) => {
|
|
1667
|
-
var
|
|
1667
|
+
var i;
|
|
1668
1668
|
const t = mapInstance$3.value.getView(), o = e ? shipTrackLineFeatures.value.find((r) => r.getId() === e) : shipTrackLineFeatures.value[0];
|
|
1669
1669
|
if (!o) return;
|
|
1670
|
-
const n = (
|
|
1670
|
+
const n = (i = o == null ? void 0 : o.getGeometry()) == null ? void 0 : i.getExtent();
|
|
1671
1671
|
if (n != null && n.length)
|
|
1672
1672
|
try {
|
|
1673
1673
|
const r = buffer(n, Math.max(n[2] - n[0], n[3] - n[1]) * 0.02);
|
|
@@ -1676,8 +1676,8 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1676
1676
|
console.log(r);
|
|
1677
1677
|
}
|
|
1678
1678
|
}, formatMinutesToDDHHMM = (e) => {
|
|
1679
|
-
const t = hooks.duration(e, "minutes"), o = Math.floor(t.asDays()), n = t.hours(),
|
|
1680
|
-
let r = `${String(
|
|
1679
|
+
const t = hooks.duration(e, "minutes"), o = Math.floor(t.asDays()), n = t.hours(), i = t.minutes();
|
|
1680
|
+
let r = `${String(i).padStart(2, "0")}分`;
|
|
1681
1681
|
return n !== 0 && (r = `${String(n).padStart(2, "0")}时${r}`), o !== 0 && (r = `${String(o).padStart(2, "0")}天${r}`), r;
|
|
1682
1682
|
}, _hoisted_1$3 = {
|
|
1683
1683
|
key: 0,
|
|
@@ -1693,17 +1693,17 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1693
1693
|
},
|
|
1694
1694
|
emits: ["switchGreenDot", "switchMapTile"],
|
|
1695
1695
|
setup(e, { emit: t }) {
|
|
1696
|
-
var p,
|
|
1697
|
-
const o = inject("mapInstance"), n = e,
|
|
1698
|
-
n.disableGreenDot || r.value >= mapZoom.shipGreenDotMax || (s.value = !s.value,
|
|
1696
|
+
var p, h;
|
|
1697
|
+
const o = inject("mapInstance"), n = e, i = t, r = ref(((h = (p = o == null ? void 0 : o.value) == null ? void 0 : p.getView()) == null ? void 0 : h.getZoom()) || mapZoom.default), l = ref(!1), c = ref(null), s = ref(!0), m = () => {
|
|
1698
|
+
n.disableGreenDot || r.value >= mapZoom.shipGreenDotMax || (s.value = !s.value, i("switchGreenDot", s.value));
|
|
1699
1699
|
}, d = () => {
|
|
1700
|
-
|
|
1700
|
+
i("switchMapTile", n.mapTileMode === BaseMapType.vector ? BaseMapType.satellite : BaseMapType.vector);
|
|
1701
1701
|
}, u = () => {
|
|
1702
1702
|
var v, g;
|
|
1703
|
-
|
|
1704
|
-
},
|
|
1703
|
+
l.value ? (v = c.value) == null || v.removeInteraction() : (g = c.value) == null || g.addInteraction(), l.value = !l.value;
|
|
1704
|
+
}, f = () => {
|
|
1705
1705
|
var v;
|
|
1706
|
-
(v = c.value) == null || v.removeInteraction(),
|
|
1706
|
+
(v = c.value) == null || v.removeInteraction(), l.value = !1;
|
|
1707
1707
|
};
|
|
1708
1708
|
return onMounted(() => {
|
|
1709
1709
|
nextTick(() => {
|
|
@@ -1722,7 +1722,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1722
1722
|
createElementVNode("div", _hoisted_2$1, [
|
|
1723
1723
|
v.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
|
|
1724
1724
|
key: 0,
|
|
1725
|
-
class: normalizeClass(["switch-btn", `${
|
|
1725
|
+
class: normalizeClass(["switch-btn", `${l.value && "active"}`]),
|
|
1726
1726
|
onClick: u
|
|
1727
1727
|
}, g[5] || (g[5] = [
|
|
1728
1728
|
createElementVNode("i", { class: "map-iconfont icon-measure" }, null, -1),
|
|
@@ -1773,7 +1773,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1773
1773
|
])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
1774
1774
|
v.vehicleMode === "ship" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
1775
1775
|
createElementVNode("div", {
|
|
1776
|
-
class: normalizeClass(["switch-btn", `${
|
|
1776
|
+
class: normalizeClass(["switch-btn", `${l.value && "active"}`]),
|
|
1777
1777
|
onClick: u
|
|
1778
1778
|
}, g[11] || (g[11] = [
|
|
1779
1779
|
createElementVNode("i", { class: "map-iconfont icon-measure" }, null, -1),
|
|
@@ -1798,13 +1798,13 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1798
1798
|
], 64))
|
|
1799
1799
|
], 2),
|
|
1800
1800
|
createElementVNode("div", _hoisted_3, [
|
|
1801
|
-
|
|
1801
|
+
l.value ? (openBlock(), createBlock(Measure, {
|
|
1802
1802
|
key: 0,
|
|
1803
1803
|
ref_key: "measureRef",
|
|
1804
1804
|
ref: c,
|
|
1805
|
-
visible:
|
|
1806
|
-
"onUpdate:visible": g[4] || (g[4] = (k) =>
|
|
1807
|
-
onClose:
|
|
1805
|
+
visible: l.value,
|
|
1806
|
+
"onUpdate:visible": g[4] || (g[4] = (k) => l.value = k),
|
|
1807
|
+
onClose: f,
|
|
1808
1808
|
"view-mode": v.viewMode
|
|
1809
1809
|
}, null, 8, ["visible", "view-mode"])) : createCommentVNode("", !0)
|
|
1810
1810
|
])
|
|
@@ -1815,15 +1815,15 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1815
1815
|
setup(e, { expose: t }) {
|
|
1816
1816
|
const o = inject("mapInstance");
|
|
1817
1817
|
return t({
|
|
1818
|
-
setScaleLine: (
|
|
1818
|
+
setScaleLine: (i) => {
|
|
1819
1819
|
var c;
|
|
1820
|
-
|
|
1820
|
+
i || (i = "metric");
|
|
1821
1821
|
const r = new ScaleLine$1({
|
|
1822
|
-
units:
|
|
1823
|
-
}),
|
|
1824
|
-
|
|
1822
|
+
units: i
|
|
1823
|
+
}), l = document.getElementById("scale-line-container");
|
|
1824
|
+
l && (r.setTarget(l), (c = o == null ? void 0 : o.value) == null || c.addControl(r));
|
|
1825
1825
|
}
|
|
1826
|
-
}), (
|
|
1826
|
+
}), (i, r) => (openBlock(), createElementBlock("div", _hoisted_1$2));
|
|
1827
1827
|
}
|
|
1828
1828
|
}), ScaleLine = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-d666f80d"]]), _hoisted_1$1 = { class: "zoom" }, _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
1829
1829
|
__name: "zoomControl",
|
|
@@ -1835,14 +1835,14 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1835
1835
|
setup(e) {
|
|
1836
1836
|
const t = inject("mapInstance"), o = () => {
|
|
1837
1837
|
if (!t.value) return;
|
|
1838
|
-
const
|
|
1839
|
-
r &&
|
|
1838
|
+
const i = t.value.getView(), r = i.getZoom();
|
|
1839
|
+
r && i.setZoom(r + 1);
|
|
1840
1840
|
}, n = () => {
|
|
1841
1841
|
if (!t.value) return;
|
|
1842
|
-
const
|
|
1843
|
-
r &&
|
|
1842
|
+
const i = t.value.getView(), r = i.getZoom();
|
|
1843
|
+
r && i.setZoom(r - 1);
|
|
1844
1844
|
};
|
|
1845
|
-
return (
|
|
1845
|
+
return (i, r) => (openBlock(), createElementBlock("div", _hoisted_1$1, [
|
|
1846
1846
|
createElementVNode("div", {
|
|
1847
1847
|
onClick: o,
|
|
1848
1848
|
class: "button big-button"
|
|
@@ -1861,10 +1861,10 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, o, n, l = "ship")
|
|
|
1861
1861
|
},
|
|
1862
1862
|
setup(e) {
|
|
1863
1863
|
useCssVars((r) => ({
|
|
1864
|
-
"0d38823b":
|
|
1864
|
+
"0d38823b": i.value
|
|
1865
1865
|
}));
|
|
1866
|
-
const t = e, o = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? `map/tdt-copyright-h${t.mapTile === BaseMapType.satellite ? "-w" : ""}.svg` : `map/tdt-copyright-v${t.mapTile === BaseMapType.satellite ? "-w" : ""}.svg`), n = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? "400px" : "168px"),
|
|
1867
|
-
return (r,
|
|
1866
|
+
const t = e, o = computed(() => t.type === COPY_RIGHT_TYPE.HORIZONTAL ? `map/tdt-copyright-h${t.mapTile === BaseMapType.satellite ? "-w" : ""}.svg` : `map/tdt-copyright-v${t.mapTile === BaseMapType.satellite ? "-w" : ""}.svg`), n = 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");
|
|
1867
|
+
return (r, l) => (openBlock(), createElementBlock("div", _hoisted_1, [
|
|
1868
1868
|
createElementVNode("img", {
|
|
1869
1869
|
src: unref(CDN_URL) + o.value,
|
|
1870
1870
|
width: n.value,
|
|
@@ -1886,30 +1886,30 @@ const loadImage = new Image();
|
|
|
1886
1886
|
loadImage.src = `${CDN_URL}/map/map-load.svg`;
|
|
1887
1887
|
loadImage.crossOrigin = "anonymous";
|
|
1888
1888
|
const setTruckStyle = (e, t, o, n) => new Style({
|
|
1889
|
-
renderer: (
|
|
1890
|
-
const
|
|
1891
|
-
|
|
1889
|
+
renderer: (i, r) => {
|
|
1890
|
+
const l = r.context;
|
|
1891
|
+
l.save();
|
|
1892
1892
|
let c = 1;
|
|
1893
|
-
|
|
1894
|
-
let [s, m] =
|
|
1893
|
+
l.scale(c, c);
|
|
1894
|
+
let [s, m] = i;
|
|
1895
1895
|
s = Number(s) / c - 20, m = Number(m) / c;
|
|
1896
1896
|
const d = s - 70, u = m - 68;
|
|
1897
|
-
let
|
|
1898
|
-
const p = 56,
|
|
1897
|
+
let f = 180;
|
|
1898
|
+
const p = 56, h = "#FFFFFF";
|
|
1899
1899
|
let v = 176;
|
|
1900
1900
|
const g = 52;
|
|
1901
1901
|
let k = "#164AFF", M = "#FFFFFF";
|
|
1902
|
-
o === CAR_COLOR.YELLOW ? (v = 176, k = "#FFC81E", M = "rgba(0,0,0,0.88)") : o === CAR_COLOR.Y_GREEN && (
|
|
1903
|
-
const
|
|
1904
|
-
if (
|
|
1905
|
-
const V =
|
|
1902
|
+
o === CAR_COLOR.YELLOW ? (v = 176, k = "#FFC81E", M = "rgba(0,0,0,0.88)") : o === CAR_COLOR.Y_GREEN && (f = 200, v = 196, k = "#8FED7C", M = "rgba(0,0,0,0.88)"), n != null && n.length && (f += n.length * 56), fillRectRadius(l, d, u, f, p, h), fillRectRadius(l, d + 2, u + 2, v, g, k), o === CAR_COLOR.Y_GREEN && fillRectRadius(l, d + 2, u + 2, 68, g, "#FFC81E"), l.save(), l.restore(), l.fillStyle = M, l.font = "bold 28px Arial", l.textAlign = "left", l.textBaseline = "middle";
|
|
1903
|
+
const I = `${t.slice(0, 2) + " · " + t.slice(2)}`;
|
|
1904
|
+
if (l.fillText(I, d + 12, u + 32), l.save(), l.restore(), n != null && n.length) {
|
|
1905
|
+
const V = l.measureText(I).width + 12;
|
|
1906
1906
|
let F = 0;
|
|
1907
1907
|
n.forEach(($) => {
|
|
1908
|
-
$ === DEVICE_TYPE.CAMERA && (
|
|
1908
|
+
$ === DEVICE_TYPE.CAMERA && (l.drawImage(cameraImage, s - 54 + V + F * 56, m - 64, 50, 50), ++F), $ === DEVICE_TYPE.LOAD && (l.drawImage(loadImage, s - 54 + V + F * 56, m - 64, 50, 50), ++F);
|
|
1909
1909
|
});
|
|
1910
1910
|
}
|
|
1911
1911
|
const E = dotImage;
|
|
1912
|
-
|
|
1912
|
+
l.drawImage(E, s + f / 2 - 90, m, 50 / c, 50 / c), l.restore();
|
|
1913
1913
|
}
|
|
1914
1914
|
}), mapInstance$2 = ref(), renderDashboardSetInstance = (e) => mapInstance$2.value = e;
|
|
1915
1915
|
ref([]);
|
|
@@ -1940,15 +1940,15 @@ const renderTrucksMarker = (e) => {
|
|
|
1940
1940
|
if (!mapInstance$1.value || (focusShipData.value = e, !(e != null && e.lon && (e != null && e.lat)))) return;
|
|
1941
1941
|
const o = Math.abs(Number(e.lon)) > 180 ? formatUtils.convertSixHundredThousandToLatLng(e.lon, e.lat) : [e.lon, e.lat], n = mapInstance$1.value.getPixelFromCoordinate(transform(o, projection.data, projection.mercator));
|
|
1942
1942
|
currentTruckOverlay.value = e ? drawTruckIcon(e.vno, n, (e == null ? void 0 : e.drc) ?? "", t) ?? null : null;
|
|
1943
|
-
const
|
|
1944
|
-
|
|
1943
|
+
const i = mapInstance$1.value.getView(), r = new Point(o);
|
|
1944
|
+
i.setCenter(transform(r.getCoordinates(), projection.data, projection.mercator));
|
|
1945
1945
|
}, clearAllTruck = () => {
|
|
1946
1946
|
vehicle.value.clearAllShip();
|
|
1947
1947
|
}, drawTruckIcon = (e, t, o, n) => {
|
|
1948
|
-
let
|
|
1948
|
+
let i = `<div id="${e}" class="ol-custom-content truck-custom-content" style="width: 80px; height: 80px; transform: rotate(${o}deg);">
|
|
1949
1949
|
<img src="${CDN_URL}map/car-icon.gif" width="100%" height="100%" />
|
|
1950
1950
|
</div>`;
|
|
1951
|
-
return n && (
|
|
1951
|
+
return n && (i += n), drawCustomContent(e, t, i, "center-center");
|
|
1952
1952
|
}, removeTruckIcon = () => {
|
|
1953
1953
|
var t;
|
|
1954
1954
|
const e = (t = currentTruckOverlay.value) == null ? void 0 : t.getElement();
|
|
@@ -1957,12 +1957,12 @@ const renderTrucksMarker = (e) => {
|
|
|
1957
1957
|
var r;
|
|
1958
1958
|
if (!mapInstance$1.value) return;
|
|
1959
1959
|
const e = mapInstance$1.value.getView().getZoom(), t = 120, o = 60;
|
|
1960
|
-
function n(
|
|
1961
|
-
return
|
|
1960
|
+
function n(l) {
|
|
1961
|
+
return l < 14 ? o : l >= 14 && l <= 18 ? Math.round((l - 14) * (t - o) / 4 + o) : t;
|
|
1962
1962
|
}
|
|
1963
|
-
const
|
|
1964
|
-
(r = document.querySelectorAll(".truck-custom-content")) == null || r.forEach((
|
|
1965
|
-
|
|
1963
|
+
const i = n(e);
|
|
1964
|
+
(r = document.querySelectorAll(".truck-custom-content")) == null || r.forEach((l) => {
|
|
1965
|
+
l.style.width = `${i}px`, l.style.height = `${i}px`;
|
|
1966
1966
|
});
|
|
1967
1967
|
}, mapInstance = ref(), drawPolygonSetInstance = (e) => mapInstance.value = e;
|
|
1968
1968
|
let layerState = "drawn", drawnState = "undrawn";
|
|
@@ -2008,13 +2008,13 @@ function createHelpTooltip() {
|
|
|
2008
2008
|
}
|
|
2009
2009
|
let squareLimitError = !1, lineLimitError = !1;
|
|
2010
2010
|
const validateSquareLimit = (e) => {
|
|
2011
|
-
let o = 1 / 0, n = -1 / 0,
|
|
2011
|
+
let o = 1 / 0, n = -1 / 0, i = 1 / 0, r = -1 / 0;
|
|
2012
2012
|
e == null || e.forEach((s) => {
|
|
2013
2013
|
const m = transform(s, projection.mercator, projection.data), d = m[0], u = m[1];
|
|
2014
|
-
o = Math.min(o, u), n = Math.max(n, u),
|
|
2014
|
+
o = Math.min(o, u), n = Math.max(n, u), i = Math.min(i, d), r = Math.max(r, d);
|
|
2015
2015
|
});
|
|
2016
|
-
const
|
|
2017
|
-
squareLimitError =
|
|
2016
|
+
const l = (n - o) * 111, c = (r - i) * 111;
|
|
2017
|
+
squareLimitError = l > 150 || c > 150;
|
|
2018
2018
|
};
|
|
2019
2019
|
let storeFeature, callbackFunction = null;
|
|
2020
2020
|
const addInteraction = (e) => {
|
|
@@ -2026,29 +2026,29 @@ const addInteraction = (e) => {
|
|
|
2026
2026
|
style: [drawPolygonStyle.drawing, circleStyle]
|
|
2027
2027
|
}), storeFeature || ((n = mapInstance.value) == null || n.addInteraction(draw), createHelpTooltip()), createMeasureTooltip();
|
|
2028
2028
|
let t;
|
|
2029
|
-
draw.on("drawstart", function(
|
|
2029
|
+
draw.on("drawstart", function(i) {
|
|
2030
2030
|
var r;
|
|
2031
|
-
layerState = "drawn", sketch =
|
|
2032
|
-
const c =
|
|
2031
|
+
layerState = "drawn", sketch = i.feature, t = (r = sketch.getGeometry()) == null ? void 0 : r.on("change", function(l) {
|
|
2032
|
+
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);
|
|
2033
2033
|
if (lineLimitError = Number(getLength(u) / 1e3) > 150, validateSquareLimit(d), measureTooltipElement && s && (measureTooltipElement.innerHTML = `
|
|
2034
2034
|
<span class="text">面积:${s}${lineLimitError || squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
|
|
2035
2035
|
`), helpTooltipElement && s) {
|
|
2036
2036
|
let p = "";
|
|
2037
2037
|
parseFloat(s) > 0 && (p = `
|
|
2038
2038
|
<div class="text ${squareLimitError ? "error" : ""}">面积:${s}${squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</div>`), helpTooltipElement.innerHTML = `${p}
|
|
2039
|
-
<span class="text ${lineLimitError ? "error" : ""}">线段${d.length - 2}:${
|
|
2039
|
+
<span class="text ${lineLimitError ? "error" : ""}">线段${d.length - 2}:${f}${lineLimitError ? '<span class="error pl-4">超出可以绘画的距离</span>' : ""}</span>
|
|
2040
2040
|
<div><span class="text">单击继续,双击结束</span></div>
|
|
2041
2041
|
`;
|
|
2042
2042
|
}
|
|
2043
2043
|
}), drawnState = "drawing";
|
|
2044
|
-
}), draw.on("drawend", function(
|
|
2045
|
-
if (
|
|
2046
|
-
storeFeature =
|
|
2047
|
-
const r = endFn(
|
|
2044
|
+
}), draw.on("drawend", function(i) {
|
|
2045
|
+
if (i.feature.getGeometry()) {
|
|
2046
|
+
storeFeature = i.feature;
|
|
2047
|
+
const r = endFn(i.feature);
|
|
2048
2048
|
r != null && r.length && callbackFunction && callbackFunction(r);
|
|
2049
2049
|
}
|
|
2050
2050
|
if (sketch = null, measureTooltipElement = null, createMeasureTooltip(), t && unByKey(t), drawnState = "drawend", draw && mapInstance.value) {
|
|
2051
|
-
const r = mapInstance.value.getInteractions().getArray().find((
|
|
2051
|
+
const r = mapInstance.value.getInteractions().getArray().find((l) => getUid(l) === getUid(draw));
|
|
2052
2052
|
r && mapInstance.value.removeInteraction(r), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement);
|
|
2053
2053
|
}
|
|
2054
2054
|
});
|
|
@@ -2056,10 +2056,10 @@ const addInteraction = (e) => {
|
|
|
2056
2056
|
var e, t, o;
|
|
2057
2057
|
if (mapInstance.value) {
|
|
2058
2058
|
if (showDrawLayer.value = !1, document.querySelectorAll(".ol-tooltip.ol-tooltip-draw-polygon").forEach((n) => {
|
|
2059
|
-
var
|
|
2060
|
-
(
|
|
2059
|
+
var i;
|
|
2060
|
+
(i = n == null ? void 0 : n.parentNode) == null || i.removeChild(n);
|
|
2061
2061
|
}), source.clear(), drawVector && ((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) {
|
|
2062
|
-
const n = mapInstance.value.getInteractions().getArray().find((
|
|
2062
|
+
const n = mapInstance.value.getInteractions().getArray().find((i) => getUid(i) === getUid(draw));
|
|
2063
2063
|
n && ((o = mapInstance.value) == null || o.removeInteraction(n));
|
|
2064
2064
|
}
|
|
2065
2065
|
drawnState = "undrawn", layerState = "destroyed";
|
|
@@ -2067,15 +2067,15 @@ const addInteraction = (e) => {
|
|
|
2067
2067
|
}, endFn = (e) => {
|
|
2068
2068
|
var t, o, n;
|
|
2069
2069
|
if (e.getGeometry()) {
|
|
2070
|
-
const
|
|
2071
|
-
(t =
|
|
2072
|
-
|
|
2070
|
+
const i = [], l = e.getGeometry().getCoordinates();
|
|
2071
|
+
(t = l[0]) == null || t.forEach((s) => {
|
|
2072
|
+
i.push(transform(s, projection.mercator, projection.data));
|
|
2073
2073
|
});
|
|
2074
|
-
const c =
|
|
2074
|
+
const c = l[0][l[0].length - 2];
|
|
2075
2075
|
if (c && measureTooltip.setPosition(c), measureTooltip.setOffset([10, 0]), measureTooltipElement && (measureTooltipElement.innerHTML += '<span class="delete-icon"><i class="map-iconfont icon-delete" /></div>'), (o = document.querySelector(".delete-icon")) == null || o.addEventListener("click", () => {
|
|
2076
2076
|
reset();
|
|
2077
2077
|
}), !lineLimitError && !squareLimitError)
|
|
2078
|
-
return
|
|
2078
|
+
return i;
|
|
2079
2079
|
draw && ((n = mapInstance.value) == null || n.removeInteraction(draw)), helpTooltipElement != null && helpTooltipElement.parentNode && helpTooltipElement.parentNode.removeChild(helpTooltipElement);
|
|
2080
2080
|
}
|
|
2081
2081
|
}, initFeature = (e) => {
|
|
@@ -2083,14 +2083,14 @@ const addInteraction = (e) => {
|
|
|
2083
2083
|
if (e && (callbackFunction = e), layerState = "drawn", storeFeature) {
|
|
2084
2084
|
const n = storeFeature.getGeometry();
|
|
2085
2085
|
if (!n) return;
|
|
2086
|
-
const
|
|
2086
|
+
const i = formatUtils.formatArea(n, LENGTH_UNIT.NM);
|
|
2087
2087
|
measureTooltipElement && (measureTooltipElement.innerHTML = `
|
|
2088
|
-
<span class="text">面积:${
|
|
2088
|
+
<span class="text">面积:${i}${lineLimitError || squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
|
|
2089
2089
|
`), drawVector && ((t = drawVector.getSource()) == null || t.addFeature(storeFeature));
|
|
2090
2090
|
const r = endFn(storeFeature);
|
|
2091
2091
|
r != null && r.length && callbackFunction && callbackFunction(r);
|
|
2092
|
-
const
|
|
2093
|
-
(o = mapInstance.value) == null || o.getView().setCenter(
|
|
2092
|
+
const l = getCenter(storeFeature.getGeometry().getExtent());
|
|
2093
|
+
(o = mapInstance.value) == null || o.getView().setCenter(l);
|
|
2094
2094
|
}
|
|
2095
2095
|
}, pointerMoveHandler = function(e) {
|
|
2096
2096
|
var o;
|
|
@@ -2132,23 +2132,23 @@ const addInteraction = (e) => {
|
|
|
2132
2132
|
}, setPointStyle = (e, t, o) => {
|
|
2133
2133
|
const n = new Image();
|
|
2134
2134
|
n.crossOrigin = "anonymous";
|
|
2135
|
-
const
|
|
2136
|
-
|
|
2137
|
-
const { color: r, url:
|
|
2138
|
-
return (c ||
|
|
2139
|
-
renderer: (u,
|
|
2140
|
-
const p =
|
|
2135
|
+
const i = new Image();
|
|
2136
|
+
i.crossOrigin = "anonymous";
|
|
2137
|
+
const { color: r, url: l, activeUrl: c, activeColor: s, imgWidth: m, imgHeight: d } = o;
|
|
2138
|
+
return (c || l) && (e ? i.src = CDN_URL + (c || l) : n.src = CDN_URL + (l || c)), new Style({
|
|
2139
|
+
renderer: (u, f) => {
|
|
2140
|
+
const p = f.context;
|
|
2141
2141
|
p.save();
|
|
2142
|
-
const
|
|
2142
|
+
const h = window.devicePixelRatio || 1;
|
|
2143
2143
|
let [v, g] = u;
|
|
2144
2144
|
if (v = Number(v), g = Number(g), t) {
|
|
2145
|
-
p.font = `${12 *
|
|
2146
|
-
const k = p.measureText(t).width, M = v - k / 2 - (
|
|
2147
|
-
fillRectRadius(p, M,
|
|
2145
|
+
p.font = `${12 * h}px Arial`;
|
|
2146
|
+
const k = p.measureText(t).width, M = v - k / 2 - (h <= 1 ? 10 : -3), I = g + (h <= 1 ? 0 : 10) + 6 * h, E = k + 4, V = 16 * h, F = e && s || r;
|
|
2147
|
+
fillRectRadius(p, M, I + (h <= 1 ? 6 : 13 * h), E, V, F), p.save(), p.restore(), p.fillStyle = e ? "#FFFFFF" : "#000000", p.textAlign = "center", p.textBaseline = "middle", p.fillText(t, M + (k + 4) / 2, I + (h <= 1 ? 15 : 22 * h)), p.save(), p.restore();
|
|
2148
2148
|
}
|
|
2149
|
-
if (
|
|
2150
|
-
const k = e ?
|
|
2151
|
-
p.drawImage(k, v - (m || k.width) / 2, g - (d || k.height) / 2, 30 *
|
|
2149
|
+
if (l || c) {
|
|
2150
|
+
const k = e ? i : n;
|
|
2151
|
+
p.drawImage(k, v - (m || k.width) / 2, g - (d || k.height) / 2, 30 * h, 30 * h);
|
|
2152
2152
|
}
|
|
2153
2153
|
p.restore();
|
|
2154
2154
|
}
|
|
@@ -2162,21 +2162,21 @@ class PointMarkerClass {
|
|
|
2162
2162
|
* @param options
|
|
2163
2163
|
*/
|
|
2164
2164
|
constructor(t, o) {
|
|
2165
|
-
|
|
2165
|
+
C(this, "mapInstance");
|
|
2166
2166
|
// 渲染的数据
|
|
2167
|
-
|
|
2167
|
+
C(this, "pointMarkerList", []);
|
|
2168
2168
|
// 绘制点渲染层数据
|
|
2169
|
-
|
|
2169
|
+
C(this, "pointsVectorSource");
|
|
2170
2170
|
// 当前高亮的数据
|
|
2171
|
-
|
|
2172
|
-
|
|
2171
|
+
C(this, "highlightPoint");
|
|
2172
|
+
C(this, "pointLayer");
|
|
2173
2173
|
// 颜色等其他设置
|
|
2174
|
-
|
|
2174
|
+
C(this, "options");
|
|
2175
2175
|
// 使用坐标点区域自动缩放地图层级
|
|
2176
|
-
|
|
2177
|
-
var
|
|
2176
|
+
C(this, "resetPointsView", (t, o = 0.02) => {
|
|
2177
|
+
var l;
|
|
2178
2178
|
if (!this.mapInstance || t.length === 0) return;
|
|
2179
|
-
const n = (
|
|
2179
|
+
const n = (l = this.mapInstance) == null ? void 0 : l.getView();
|
|
2180
2180
|
if (!n) return;
|
|
2181
2181
|
const r = t.map(
|
|
2182
2182
|
(c) => transform(c, projection.data, projection.mercator)
|
|
@@ -2215,7 +2215,7 @@ class PointMarkerClass {
|
|
|
2215
2215
|
let o = {};
|
|
2216
2216
|
t.forEach((n) => {
|
|
2217
2217
|
var r;
|
|
2218
|
-
const
|
|
2218
|
+
const i = [n.lon, n.lat];
|
|
2219
2219
|
if (((r = this.highlightPoint) == null ? void 0 : r.id) === n.id)
|
|
2220
2220
|
o = {
|
|
2221
2221
|
id: n.id,
|
|
@@ -2224,12 +2224,12 @@ class PointMarkerClass {
|
|
|
2224
2224
|
pointType: n.pointType
|
|
2225
2225
|
};
|
|
2226
2226
|
else {
|
|
2227
|
-
const
|
|
2227
|
+
const l = this.getFeature(n, i);
|
|
2228
2228
|
this.pointMarkerList.push({
|
|
2229
2229
|
id: n.id,
|
|
2230
2230
|
name: n.name,
|
|
2231
2231
|
lonlat: [Number(n.lon), Number(n.lat)],
|
|
2232
|
-
feature:
|
|
2232
|
+
feature: l,
|
|
2233
2233
|
pointType: n.pointType
|
|
2234
2234
|
});
|
|
2235
2235
|
}
|
|
@@ -2275,23 +2275,23 @@ class PointMarkerClass {
|
|
|
2275
2275
|
*/
|
|
2276
2276
|
highlightPointMarker(t) {
|
|
2277
2277
|
if (!this.mapInstance) return;
|
|
2278
|
-
const { id: o, name: n, fullName:
|
|
2278
|
+
const { id: o, name: n, fullName: i, lon: r, lat: l, pointType: c } = t, s = [Number(r), Number(l)];
|
|
2279
2279
|
this.highlightPoint = {
|
|
2280
2280
|
id: o,
|
|
2281
2281
|
name: n,
|
|
2282
|
-
fullName:
|
|
2282
|
+
fullName: i,
|
|
2283
2283
|
lonlat: s,
|
|
2284
2284
|
pointType: c
|
|
2285
2285
|
}, this.setPointCenter(s);
|
|
2286
2286
|
}
|
|
2287
2287
|
// 获取feature
|
|
2288
2288
|
getFeature(t, o) {
|
|
2289
|
-
var
|
|
2289
|
+
var i;
|
|
2290
2290
|
const n = new Feature({
|
|
2291
2291
|
geometry: new Point(fromLonLat(o))
|
|
2292
2292
|
});
|
|
2293
2293
|
return n.set("data", t), n.setStyle(
|
|
2294
|
-
setPointStyle(((
|
|
2294
|
+
setPointStyle(((i = this.highlightPoint) == null ? void 0 : i.id) === t.id, t.name, this.options)
|
|
2295
2295
|
), n;
|
|
2296
2296
|
}
|
|
2297
2297
|
/**
|
|
@@ -2304,8 +2304,8 @@ class PointMarkerClass {
|
|
|
2304
2304
|
*/
|
|
2305
2305
|
setPointCenter(t, o = { customZoom: mapZoom.findShip, type: 1 }) {
|
|
2306
2306
|
if (!this.mapInstance) return;
|
|
2307
|
-
const { customZoom: n = mapZoom.findShip, type:
|
|
2308
|
-
(
|
|
2307
|
+
const { customZoom: n = mapZoom.findShip, type: i = 1 } = o, r = this.mapInstance.getView(), l = r.getZoom();
|
|
2308
|
+
(i === 1 || l > n && i === 2 || l < n && i === 3) && r.setZoom(n);
|
|
2309
2309
|
const c = new Point(t);
|
|
2310
2310
|
r.setCenter(transform(c.getCoordinates(), projection.data, projection.mercator));
|
|
2311
2311
|
}
|
|
@@ -2326,7 +2326,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2326
2326
|
setup(e, { expose: t, emit: o }) {
|
|
2327
2327
|
const n = ref();
|
|
2328
2328
|
provide("mapInstance", n);
|
|
2329
|
-
const
|
|
2329
|
+
const i = ref(null), r = ref(null), l = ref(null), c = o, s = e, m = ref(s.zoom || mapZoom.default), d = ref(!1), u = ref(!0), f = ref(!0), p = ref(!0), h = {
|
|
2330
2330
|
tiandituTile: new TileLayer({ source: new XYZ({ url: baseMap.tiandituTile }) }),
|
|
2331
2331
|
tiandituTileMark: new TileLayer({ source: new XYZ({ url: baseMap.tiandituTileMark }) }),
|
|
2332
2332
|
tiandituImgTile: new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTile }), visible: !1 }),
|
|
@@ -2356,14 +2356,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2356
2356
|
// 对应页面里 id 为 map 的元素
|
|
2357
2357
|
layers: [
|
|
2358
2358
|
// 图层
|
|
2359
|
-
|
|
2360
|
-
|
|
2361
|
-
|
|
2362
|
-
|
|
2363
|
-
|
|
2359
|
+
h.tiandituTile,
|
|
2360
|
+
h.tiandituTileMark,
|
|
2361
|
+
h.tiandituImgTile,
|
|
2362
|
+
h.tiandituImgTileMark,
|
|
2363
|
+
h.greenMark
|
|
2364
2364
|
],
|
|
2365
2365
|
view: new View(y)
|
|
2366
|
-
}), g(), s.showToolPanel === void 0 ? p.value = !0 : p.value = s.showToolPanel, (L = r.value) == null || L.setScaleLine(s.vehicleMode === "ship" ? "nautical" : "metric"), (w = n.value) == null || w.on("moveend", E), k(y.zoom < mapZoom.shipGreenDotMax),
|
|
2366
|
+
}), g(), s.showToolPanel === void 0 ? p.value = !0 : p.value = s.showToolPanel, (L = r.value) == null || L.setScaleLine(s.vehicleMode === "ship" ? "nautical" : "metric"), (w = n.value) == null || w.on("moveend", E), k(y.zoom < mapZoom.shipGreenDotMax), I(s.vehicleMode === "ship" || s.viewMode === "findShip" ? BaseMapType.satellite : BaseMapType.vector), s.viewMode === "findShip" && s.mmsi && s.shipData && nextTick(() => {
|
|
2367
2367
|
findShip(String(s.mmsi), s.shipData);
|
|
2368
2368
|
}), onShipsMarkerHover();
|
|
2369
2369
|
};
|
|
@@ -2375,12 +2375,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2375
2375
|
}, k = (y) => {
|
|
2376
2376
|
var L;
|
|
2377
2377
|
s.vehicleMode !== "ship" && (y = !1), (L = n.value) == null || L.getLayers().forEach((w) => {
|
|
2378
|
-
getUid(w) === getUid(
|
|
2378
|
+
getUid(w) === getUid(h.greenMark) && (w.setVisible(y), u.value = y);
|
|
2379
2379
|
});
|
|
2380
|
-
}, M = ref(BaseMapType.satellite),
|
|
2380
|
+
}, M = ref(BaseMapType.satellite), I = (y) => {
|
|
2381
2381
|
var L;
|
|
2382
2382
|
M.value = y, (L = n.value) == null || L.getLayers().forEach((w) => {
|
|
2383
|
-
(getUid(w) === getUid(
|
|
2383
|
+
(getUid(w) === getUid(h.tiandituTile) || getUid(w) === getUid(h.tiandituTileMark) || getUid(w) === getUid(h.tiandituImgTile) || getUid(w) === getUid(h.tiandituImgTileMark)) && w.setVisible(!1), (y === BaseMapType.vector && (getUid(w) === getUid(h.tiandituTile) || getUid(w) === getUid(h.tiandituTileMark)) || y === BaseMapType.satellite && (getUid(w) === getUid(h.tiandituImgTile) || getUid(w) === getUid(h.tiandituImgTileMark))) && w.setVisible(!0);
|
|
2384
2384
|
});
|
|
2385
2385
|
}, E = () => {
|
|
2386
2386
|
const y = n.value.getView(), L = y.getZoom();
|
|
@@ -2388,10 +2388,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2388
2388
|
const w = y.calculateExtent(n.value.getSize());
|
|
2389
2389
|
w && L && F(w, L);
|
|
2390
2390
|
}, V = (y) => {
|
|
2391
|
-
var S, T,
|
|
2391
|
+
var S, T, b, P, x;
|
|
2392
2392
|
m.value = y, k(y < mapZoom.shipGreenDotMax);
|
|
2393
|
-
const L = (S = n.value) == null ? void 0 : S.getLayers(), w = s.vehicleMode === "ship" ? L == null ? void 0 : L.getArray().find((N) => getUid(N) === getUid(
|
|
2394
|
-
showTrackLayer.value ? (
|
|
2393
|
+
const L = (S = n.value) == null ? void 0 : S.getLayers(), w = s.vehicleMode === "ship" ? L == null ? void 0 : L.getArray().find((N) => getUid(N) === getUid(h.greenMark)) : void 0;
|
|
2394
|
+
showTrackLayer.value ? (f.value = !1, w == null || w.setVisible(!1), (T = shipsLayer.value) == null || T.setVisible(!1), (b = largeAmountShipsLayer.value) == null || b.setVisible(!1)) : !d.value && u.value && y <= mapZoom.shipGreenDotMax ? (f.value = !0, w == null || w.setVisible(!0), (P = shipsLayer.value) == null || P.setVisible(!1), (x = largeAmountShipsLayer.value) == null || x.setVisible(!1)) : (f.value = !1, w == null || w.setVisible(!1)), c("zoomChanged", y);
|
|
2395
2395
|
}, F = (y, L) => {
|
|
2396
2396
|
const w = transform([y[0], y[1]], projection.mercator, projection.data), S = transform([y[2], y[3]], projection.mercator, projection.data);
|
|
2397
2397
|
c("extentChanged", { extent: [w, S], zoom: L });
|
|
@@ -2402,9 +2402,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2402
2402
|
pointRender: (y, L) => new PointMarkerClass(y, L),
|
|
2403
2403
|
renderTrucksMarker,
|
|
2404
2404
|
renderShip: renderShips,
|
|
2405
|
-
renderTrack: (y, L, w) => {
|
|
2406
|
-
var
|
|
2407
|
-
showDrawLayer.value = !0, currentTrackId.value = y, showTrackLayer.value = !0, d.value = !0, hiddenAllShips(), (
|
|
2405
|
+
renderTrack: (y, L, w, S = 200) => {
|
|
2406
|
+
var T, b;
|
|
2407
|
+
showDrawLayer.value = !0, currentTrackId.value = y, showTrackLayer.value = !0, d.value = !0, hiddenAllShips(), (b = (T = largeAmountShipsLayer.value) == null ? void 0 : T.getSource()) == null || b.clear(), renderTrack(y, s.vehicleMode === "ship" ? L.reverse() : L, w, LENGTH_UNIT.NM, "ship", S);
|
|
2408
2408
|
},
|
|
2409
2409
|
findTruck,
|
|
2410
2410
|
removeTruckIcon,
|
|
@@ -2432,8 +2432,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2432
2432
|
rerenderShip,
|
|
2433
2433
|
switchGreenDot: () => k(!1),
|
|
2434
2434
|
zoomTruckIcon,
|
|
2435
|
-
renderTruckTrack: (y, L, w) => {
|
|
2436
|
-
showTrackLayer.value = !0, renderTrack(y, L, w, LENGTH_UNIT.KM, "truck");
|
|
2435
|
+
renderTruckTrack: (y, L, w, S = 1e3) => {
|
|
2436
|
+
currentTrackId.value = y, showTrackLayer.value = !0, renderTrack(y, L, w, LENGTH_UNIT.KM, "truck", S);
|
|
2437
2437
|
},
|
|
2438
2438
|
drawCustomContent,
|
|
2439
2439
|
removerLayer: removeShipTrackLineFeatureByIndex,
|
|
@@ -2472,7 +2472,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2472
2472
|
}), (y, L) => (openBlock(), createElementBlock("div", {
|
|
2473
2473
|
class: "map-page map-container",
|
|
2474
2474
|
ref_key: "pageRef",
|
|
2475
|
-
ref:
|
|
2475
|
+
ref: i
|
|
2476
2476
|
}, [
|
|
2477
2477
|
L[0] || (L[0] = createElementVNode("div", {
|
|
2478
2478
|
id: "map",
|
|
@@ -2486,7 +2486,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2486
2486
|
"show-track-layer": unref(showTrackLayer),
|
|
2487
2487
|
"map-tile-mode": M.value,
|
|
2488
2488
|
onSwitchGreenDot: k,
|
|
2489
|
-
onSwitchMapTile:
|
|
2489
|
+
onSwitchMapTile: I
|
|
2490
2490
|
}, {
|
|
2491
2491
|
toolPanel: withCtx(() => [
|
|
2492
2492
|
renderSlot(y.$slots, "toolPanel", {}, void 0, !0)
|
|
@@ -2500,7 +2500,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2500
2500
|
}, null, 512),
|
|
2501
2501
|
createVNode(ZoomControl, {
|
|
2502
2502
|
ref_key: "zoomControl",
|
|
2503
|
-
ref:
|
|
2503
|
+
ref: l
|
|
2504
2504
|
}, null, 512)
|
|
2505
2505
|
], 64)) : createCommentVNode("", !0),
|
|
2506
2506
|
createVNode(Copyright, {
|
|
@@ -2509,7 +2509,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
2509
2509
|
}, null, 8, ["type", "map-tile"])
|
|
2510
2510
|
], 512));
|
|
2511
2511
|
}
|
|
2512
|
-
}), Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
2512
|
+
}), Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8b2af3a3"]]), ZhMap = withInstall(Map);
|
|
2513
2513
|
export {
|
|
2514
2514
|
BaseMapType as B,
|
|
2515
2515
|
CDN_URL as C,
|