zhihao-ui 1.2.31 → 1.2.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es/{BaseInfo-CAuR2Id0.js → BaseInfo-C4sgm12k.js} +1 -1
- package/dist/es/{BaseItem-CQzBP1WX.js → BaseItem-Dok2Aus9.js} +5 -5
- package/dist/es/{Button-D-R-2Fix.js → Button-BbUxF68h.js} +2 -2
- package/dist/es/DatePicker-DJuI_Emt.js +73 -0
- package/dist/es/{DetailHeader-CBN9CqAp.js → DetailHeader-DKjKORoT.js} +3 -3
- package/dist/es/{DetailSubTitle-DsnSxPKH.js → DetailSubTitle-zqhDyrw7.js} +2 -2
- package/dist/es/{Dialog-C_hAbDgU.js → Dialog-CiO2p3lS.js} +3 -3
- package/dist/es/{DiyDataTable-CXSUoapn.js → DiyDataTable-0J0XHWOg.js} +4 -4
- package/dist/es/{EditInfoPair-C0Ielr4q.js → EditInfoPair-BCrdjdwr.js} +4 -4
- package/dist/es/{FileWrapper-DFqY2SD_.js → FileWrapper-DwI3Gpd7.js} +6 -6
- package/dist/es/{Grid-CLg9sn2Y.js → Grid-BEBnaQkh.js} +2 -2
- package/dist/es/{InfoPair-6agPuvqq.js → InfoPair-8ibzEbk8.js} +4 -4
- package/dist/es/{Input-CzlIXSCf.js → Input-CWfFyiHL.js} +5 -5
- package/dist/es/Loading-nlPpGN-L.js +22 -0
- package/dist/es/{Map-BJc6GMOA.js → Map-zDBSTbli.js} +512 -499
- package/dist/es/{MessageBox-CBMAgp6C.js → MessageBox-DJR9qhIT.js} +2 -2
- package/dist/es/{MoneyInput-EODuzFjO.js → MoneyInput-BUtchReq.js} +19 -18
- package/dist/es/{PageHeadPanel-DDnMIqmC.js → PageHeadPanel-Bw6wb6jF.js} +6 -6
- package/dist/es/{Table-D7YUOcI0.js → Table-Ce83Xr3L.js} +196 -200
- package/dist/es/ToolTips-D7B0F-bQ.js +37 -0
- package/dist/es/index.js +40 -41
- package/dist/es/utils-hD_p7bGY.js +14 -0
- package/dist/es/{vendor-Cq716b5Q.js → vendor-Bonn9k5m.js} +26 -26
- package/dist/index.css +1 -1
- package/dist/types/components/Map/Map.vue.d.ts +11 -3
- package/dist/types/components/Map/config.d.ts +1 -0
- package/dist/types/components/Map/index.d.ts +51 -31
- package/dist/types/components/Map/interface/entity/render.d.ts +1 -0
- package/dist/types/components/Map/interface/entity/shipInfoVo.d.ts +2 -2
- package/dist/types/components/Map/render/canvasRender/renderTrackStyle.d.ts +4 -2
- package/dist/types/components/Map/utils/store.d.ts +4 -2
- package/dist/types/components/utils.d.ts +1 -0
- package/dist/umd/index.css +1 -1
- package/dist/umd/index.umd.cjs +19 -19
- package/package.json +1 -1
- package/dist/es/DatePicker-BDz_yTX2.js +0 -36
- package/dist/es/Loading-ClE8eADM.js +0 -22
- package/dist/es/ToolTips-BpZo8gsa.js +0 -37
- package/dist/es/utils-BbWQLYZL.js +0 -52
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var I = (e, t, n) =>
|
|
4
|
-
import { o as getArea, p as getLength, V as VectorSource, q as VectorLayer, S as Style, C as CircleStyle, F as Fill, r as Stroke, D as Draw, O as Overlay, u as unByKey, s as ElSelect, t as ElOption, T as Text, v as fromLonLat, w as transformExtent, x as hooks, L as LineString, y as Feature, P as Point, z as Polyline, A as getVectorContext, h as cloneDeep, G as GeoJSON, W as WebGLPointsLayer, B as Circle, H as transform, I as buffer, J as ScaleLine$1, K as Icon, M as Translate, N as toLonLat, Q as MultiPoint, R as getCenter, U as TileLayer, X as XYZ, Y as Map$1, Z as View } from "./vendor-Cq716b5Q.js";
|
|
1
|
+
var A = Object.defineProperty;
|
|
2
|
+
var D = (e, t, n) => t in e ? A(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
|
|
3
|
+
var I = (e, t, n) => D(e, typeof t != "symbol" ? t + "" : t, n);
|
|
5
4
|
import { defineComponent, inject, useModel, ref, watch, openBlock, createElementBlock, createElementVNode, createVNode, unref, withCtx, Fragment, renderList, toDisplayString, createCommentVNode, mergeModels, nextTick, onMounted, normalizeClass, renderSlot, createBlock, provide } from "vue";
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
5
|
+
import { p as getArea, q as getLength, V as VectorSource, r as VectorLayer, S as Style, C as CircleStyle, F as Fill, s as Stroke, D as Draw, O as Overlay, u as unByKey, t as ElSelect, v as ElOption, w as fromLonLat, P as Point, x as transform, y as Feature, T as Text, I as Icon, z as Translate, A as toLonLat, B as transformExtent, h as hooks, L as LineString, G as Polyline, H as getVectorContext, i as cloneDeep, J as GeoJSON, W as WebGLPointsLayer, K as Circle, M as buffer, N as ScaleLine$1, Q as MultiPoint, R as getCenter, U as TileLayer, X as XYZ, Y as Map$1, Z as View } from "./vendor-Bonn9k5m.js";
|
|
6
|
+
import { _ as _export_sfc } from "./Button-BbUxF68h.js";
|
|
7
|
+
import { g as getForegroundColor } from "./DatePicker-DJuI_Emt.js";
|
|
8
|
+
import { w as withInstall } from "./utils-hD_p7bGY.js";
|
|
8
9
|
var BaseMapType = /* @__PURE__ */ ((e) => (e[e.vector = 0] = "vector", e[e.satellite = 1] = "satellite", e))(BaseMapType || {}), 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 || {});
|
|
9
10
|
class ShipMapData {
|
|
10
|
-
constructor(t, n, o, r, l, i, s, c, d, m, u, f, p, y,
|
|
11
|
+
constructor(t, n, o, r, l, i, s, c, d, m, u, f, p, y, v, g, M, S, b, C, F, x, h, w) {
|
|
11
12
|
I(this, "id");
|
|
12
13
|
// mmsi
|
|
13
14
|
I(this, "mmsi");
|
|
@@ -49,7 +50,7 @@ class ShipMapData {
|
|
|
49
50
|
I(this, "existWaterGauge");
|
|
50
51
|
I(this, "selected");
|
|
51
52
|
I(this, "blinkColors");
|
|
52
|
-
this.id = t, this.mmsi = n, this.fill = o, this.shipType = r, this.name = l, this.length = i, this.breadth = s, this.lon = c, this.lat = d, this.createdAt = m, this.speed = u, this.from = f, this.sailStatus = p, this.hdg = y, this.cog =
|
|
53
|
+
this.id = t, this.mmsi = n, this.fill = o, this.shipType = r, this.name = l, this.length = i, this.breadth = s, this.lon = c, this.lat = d, this.createdAt = m, this.speed = u, this.from = f, this.sailStatus = p, this.hdg = y, this.cog = v, this.posType = g, this.type = M, this.angle = S, this.leftIconColor = b, this.existDevice = C, this.existMobile = F, this.existWaterGauge = x, this.selected = h, this.blinkColors = w;
|
|
53
54
|
}
|
|
54
55
|
}
|
|
55
56
|
const formatLength = function(e, t) {
|
|
@@ -131,7 +132,7 @@ const formatLength = function(e, t) {
|
|
|
131
132
|
setup(e, { expose: t, emit: n }) {
|
|
132
133
|
const o = inject("mapInstance"), r = n, l = useModel(e, "visible"), i = ref("3"), s = ref([]), c = ref(!1), d = new VectorSource();
|
|
133
134
|
let m, u, f, p, y;
|
|
134
|
-
const
|
|
135
|
+
const v = new VectorLayer({
|
|
135
136
|
source: d,
|
|
136
137
|
style: {
|
|
137
138
|
"fill-color": "rgba(255, 255, 255, 0.2)",
|
|
@@ -143,15 +144,15 @@ const formatLength = function(e, t) {
|
|
|
143
144
|
}), g = function(L) {
|
|
144
145
|
if (L.dragging)
|
|
145
146
|
return;
|
|
146
|
-
let
|
|
147
|
-
m && (
|
|
148
|
-
},
|
|
147
|
+
let T = "点击选择起点";
|
|
148
|
+
m && (T = "单击继续,双击结束"), u && (u.innerHTML = T, f.setPosition(L.coordinate), u.classList.remove("hidden"));
|
|
149
|
+
}, M = () => {
|
|
149
150
|
o.value && (o.value.on("pointermove", g), o.value.getViewport().addEventListener("mouseout", function() {
|
|
150
151
|
var L;
|
|
151
152
|
(L = u == null ? void 0 : u.classList) == null || L.add("hidden");
|
|
152
153
|
}), c.value = !0);
|
|
153
154
|
};
|
|
154
|
-
let
|
|
155
|
+
let S;
|
|
155
156
|
const b = new Style({
|
|
156
157
|
fill: new Fill({
|
|
157
158
|
color: "rgba(255, 255, 255, 0.2)"
|
|
@@ -171,49 +172,49 @@ const formatLength = function(e, t) {
|
|
|
171
172
|
})
|
|
172
173
|
})
|
|
173
174
|
});
|
|
174
|
-
function
|
|
175
|
-
var L,
|
|
175
|
+
function C() {
|
|
176
|
+
var L, T;
|
|
176
177
|
if (o.value) {
|
|
177
|
-
if (s.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((
|
|
178
|
-
var
|
|
179
|
-
(
|
|
180
|
-
}), d.clear(),
|
|
181
|
-
const
|
|
182
|
-
|
|
178
|
+
if (s.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((E) => {
|
|
179
|
+
var V;
|
|
180
|
+
(V = E == null ? void 0 : E.parentNode) == null || V.removeChild(E);
|
|
181
|
+
}), d.clear(), S) {
|
|
182
|
+
const E = o.value.getInteractions().getArray().find((V) => V.ol_uid === S.ol_uid);
|
|
183
|
+
E && ((L = o.value) == null || L.removeInteraction(E));
|
|
183
184
|
}
|
|
184
|
-
(
|
|
185
|
+
(T = o.value) == null || T.removeLayer(v), u != null && u.parentNode && u.parentNode.removeChild(u), p != null && p.parentNode && p.parentNode.removeChild(p);
|
|
185
186
|
}
|
|
186
187
|
}
|
|
187
|
-
function
|
|
188
|
-
var
|
|
189
|
-
|
|
188
|
+
function F() {
|
|
189
|
+
var T, E;
|
|
190
|
+
C(), (T = o.value) == null || T.addLayer(v), S = new Draw({
|
|
190
191
|
source: d,
|
|
191
192
|
type: "LineString",
|
|
192
193
|
style: function() {
|
|
193
194
|
return b;
|
|
194
195
|
}
|
|
195
|
-
}), (
|
|
196
|
+
}), (E = o.value) == null || E.addInteraction(S), h(), x();
|
|
196
197
|
let L;
|
|
197
|
-
|
|
198
|
+
S.on("drawstart", function(V) {
|
|
198
199
|
var N;
|
|
199
|
-
m =
|
|
200
|
+
m = V.feature;
|
|
200
201
|
let $;
|
|
201
202
|
L = (N = m.getGeometry()) == null ? void 0 : N.on("change", function(B) {
|
|
202
203
|
const P = B.target;
|
|
203
204
|
let R = formatUtils.formatLength(P, Number(i.value));
|
|
204
205
|
$ = P.getLastCoordinate(), p && R && (p.innerHTML = R), y.setPosition($);
|
|
205
206
|
});
|
|
206
|
-
}),
|
|
207
|
-
var
|
|
208
|
-
p && (p.className = "ol-tooltip ol-tooltip-static ol-tooltip-measure"), p != null && p.innerHTML && (s.value.push(p == null ? void 0 : p.innerHTML), p.innerHTML = `${p.innerHTML}<div class="ol-tooltip-delete-button" data-index="${((
|
|
207
|
+
}), S.on("drawend", function() {
|
|
208
|
+
var V, $;
|
|
209
|
+
p && (p.className = "ol-tooltip ol-tooltip-static ol-tooltip-measure"), p != null && p.innerHTML && (s.value.push(p == null ? void 0 : p.innerHTML), p.innerHTML = `${p.innerHTML}<div class="ol-tooltip-delete-button" data-index="${((V = s.value) == null ? void 0 : V.length) - 1}"><i class="map-iconfont icon-delete"></i></div>`), ($ = document.querySelector(".ol-tooltip-delete-button:last-child")) == null || $.addEventListener("click", (N) => {
|
|
209
210
|
var P;
|
|
210
211
|
N.preventDefault(), N.stopPropagation();
|
|
211
212
|
const B = (P = N.target) == null ? void 0 : P.getAttribute("data-index");
|
|
212
213
|
B && w(B);
|
|
213
|
-
}), y.setOffset([0, -7]), m = null, p = null,
|
|
214
|
+
}), y.setOffset([0, -7]), m = null, p = null, h(), L && unByKey(L);
|
|
214
215
|
});
|
|
215
216
|
}
|
|
216
|
-
function
|
|
217
|
+
function x() {
|
|
217
218
|
var L;
|
|
218
219
|
u != null && u.parentNode && u.parentNode.removeChild(u), u = document.createElement("div"), u.className = "ol-tooltip hidden", f = new Overlay({
|
|
219
220
|
element: u,
|
|
@@ -221,7 +222,7 @@ const formatLength = function(e, t) {
|
|
|
221
222
|
positioning: "center-left"
|
|
222
223
|
}), (L = o.value) == null || L.addOverlay(f);
|
|
223
224
|
}
|
|
224
|
-
function
|
|
225
|
+
function h() {
|
|
225
226
|
var L;
|
|
226
227
|
p != null && p.parentNode && p.parentNode.removeChild(p), p = document.createElement("div"), p.className = "ol-tooltip ol-tooltip-measure", y = new Overlay({
|
|
227
228
|
element: p,
|
|
@@ -232,34 +233,34 @@ const formatLength = function(e, t) {
|
|
|
232
233
|
}), (L = o.value) == null || L.addOverlay(y);
|
|
233
234
|
}
|
|
234
235
|
const w = (L) => {
|
|
235
|
-
var
|
|
236
|
+
var V, $;
|
|
236
237
|
s.value[L] && s.value.splice(L, 1);
|
|
237
|
-
const
|
|
238
|
-
|
|
239
|
-
const
|
|
240
|
-
|
|
241
|
-
},
|
|
238
|
+
const T = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
|
|
239
|
+
T[L] && (($ = (V = T[L]) == null ? void 0 : V.parentNode) == null || $.removeChild(T[L]));
|
|
240
|
+
const E = d.getFeatures();
|
|
241
|
+
E[L] && d.removeFeature(E[L]);
|
|
242
|
+
}, k = () => {
|
|
242
243
|
r("close");
|
|
243
244
|
};
|
|
244
245
|
return watch(() => l, () => {
|
|
245
|
-
l && !c.value && (
|
|
246
|
+
l.value && !c.value && (M(), F());
|
|
246
247
|
}, { deep: !0, immediate: !0 }), t({
|
|
247
|
-
addInteraction:
|
|
248
|
-
removeInteraction:
|
|
249
|
-
}), (L,
|
|
248
|
+
addInteraction: F,
|
|
249
|
+
removeInteraction: C
|
|
250
|
+
}), (L, T) => l.value && L.viewMode !== "WxMiniprogram" ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
|
|
250
251
|
createElementVNode("div", { class: "header" }, [
|
|
251
|
-
|
|
252
|
+
T[1] || (T[1] = createElementVNode("div", { class: "title" }, "测量", -1)),
|
|
252
253
|
createElementVNode("i", {
|
|
253
|
-
onClick:
|
|
254
|
+
onClick: k,
|
|
254
255
|
class: "map-iconfont icon-close"
|
|
255
256
|
})
|
|
256
257
|
]),
|
|
257
258
|
createElementVNode("div", _hoisted_2$2, [
|
|
258
|
-
|
|
259
|
+
T[2] || (T[2] = createElementVNode("div", { class: "tips" }, "在地图上点击多个点测量距离,距离单位", -1)),
|
|
259
260
|
createVNode(unref(ElSelect), {
|
|
260
261
|
class: "select-length-unit",
|
|
261
262
|
modelValue: i.value,
|
|
262
|
-
"onUpdate:modelValue":
|
|
263
|
+
"onUpdate:modelValue": T[0] || (T[0] = (E) => i.value = E)
|
|
263
264
|
}, {
|
|
264
265
|
default: withCtx(() => [
|
|
265
266
|
createVNode(unref(ElOption), {
|
|
@@ -279,26 +280,88 @@ const formatLength = function(e, t) {
|
|
|
279
280
|
}, 8, ["modelValue"])
|
|
280
281
|
]),
|
|
281
282
|
createElementVNode("div", _hoisted_3$2, [
|
|
282
|
-
(openBlock(!0), createElementBlock(Fragment, null, renderList(s.value, (
|
|
283
|
+
(openBlock(!0), createElementBlock(Fragment, null, renderList(s.value, (E, V) => (openBlock(), createElementBlock("div", {
|
|
283
284
|
class: "measure-history-item",
|
|
284
|
-
key:
|
|
285
|
+
key: V
|
|
285
286
|
}, [
|
|
286
287
|
createElementVNode("div", _hoisted_4, [
|
|
287
|
-
|
|
288
|
-
createElementVNode("span", _hoisted_5, "线段" + toDisplayString(
|
|
289
|
-
createElementVNode("span", _hoisted_6, toDisplayString(
|
|
288
|
+
T[3] || (T[3] = createElementVNode("i", { class: "map-iconfont icon-line" }, null, -1)),
|
|
289
|
+
createElementVNode("span", _hoisted_5, "线段" + toDisplayString(V + 1), 1),
|
|
290
|
+
createElementVNode("span", _hoisted_6, toDisplayString(E), 1)
|
|
290
291
|
]),
|
|
291
292
|
createElementVNode("div", {
|
|
292
293
|
class: "delete-button",
|
|
293
|
-
onClick: ($) => w(
|
|
294
|
-
},
|
|
294
|
+
onClick: ($) => w(V)
|
|
295
|
+
}, T[4] || (T[4] = [
|
|
295
296
|
createElementVNode("i", { class: "map-iconfont icon-delete" }, null, -1)
|
|
296
297
|
]), 8, _hoisted_7)
|
|
297
298
|
]))), 128))
|
|
298
299
|
])
|
|
299
300
|
])) : createCommentVNode("", !0);
|
|
300
301
|
}
|
|
301
|
-
}), Measure = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-
|
|
302
|
+
}), Measure = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-b36b46d6"]]), mapInstance$8 = ref(), renderMarkerSetInstance = (e) => mapInstance$8.value = e, markerPosition = ref(""), marker = ref(), createIconStyle = (e) => new Style({
|
|
303
|
+
image: new Icon({
|
|
304
|
+
src: CDN_URL + "map/poi-marker-default.png",
|
|
305
|
+
anchor: [0.5, 1]
|
|
306
|
+
}),
|
|
307
|
+
text: new Text({
|
|
308
|
+
text: e,
|
|
309
|
+
offsetY: -90,
|
|
310
|
+
// 调整文本位置,使其位于标记上方
|
|
311
|
+
font: "12px",
|
|
312
|
+
fill: new Fill({
|
|
313
|
+
color: "#000"
|
|
314
|
+
}),
|
|
315
|
+
stroke: new Stroke({
|
|
316
|
+
color: "#fff",
|
|
317
|
+
width: 2
|
|
318
|
+
}),
|
|
319
|
+
backgroundFill: new Fill({
|
|
320
|
+
color: "#fff"
|
|
321
|
+
// 设置文本背景填充颜色
|
|
322
|
+
}),
|
|
323
|
+
backgroundStroke: new Stroke({
|
|
324
|
+
color: "#000",
|
|
325
|
+
// 设置文本背景描边颜色
|
|
326
|
+
width: 1
|
|
327
|
+
}),
|
|
328
|
+
padding: [2, 2, 2, 2]
|
|
329
|
+
// 设置文本背景的内边距
|
|
330
|
+
})
|
|
331
|
+
}), renderMarker = (e, t = !0, n = !0) => {
|
|
332
|
+
var m;
|
|
333
|
+
if (!mapInstance$8.value || !e || e.split(",").length !== 2) return;
|
|
334
|
+
const [o, r] = e.split(",").map(Number);
|
|
335
|
+
marker.value = new Feature({
|
|
336
|
+
geometry: new Point(fromLonLat([o, r]))
|
|
337
|
+
});
|
|
338
|
+
const l = n ? `${o}, ${r}` : "";
|
|
339
|
+
(m = marker.value) == null || m.setStyle(createIconStyle(l));
|
|
340
|
+
const i = new VectorSource({
|
|
341
|
+
features: [marker.value]
|
|
342
|
+
}), s = new VectorLayer({
|
|
343
|
+
source: i
|
|
344
|
+
}), c = mapInstance$8.value.getView();
|
|
345
|
+
if (mapInstance$8.value.addLayer(s), t) {
|
|
346
|
+
const u = new Translate({
|
|
347
|
+
layers: [s]
|
|
348
|
+
});
|
|
349
|
+
u.on("translating", function(f) {
|
|
350
|
+
var v;
|
|
351
|
+
const p = f.features.item(0).getGeometry().getCoordinates(), y = toLonLat(p);
|
|
352
|
+
markerPosition.value = `${y[0].toFixed(6)}, ${y[1].toFixed(6)}`, (v = marker.value) == null || v.setStyle(createIconStyle(markerPosition.value));
|
|
353
|
+
}), mapInstance$8.value.addInteraction(u);
|
|
354
|
+
}
|
|
355
|
+
const d = new Point([o, r]);
|
|
356
|
+
c.setCenter(transform(d.getCoordinates(), projection.data, projection.mercator)), c.setZoom(mapZoom.findShip);
|
|
357
|
+
}, setMarkerPosition = (e) => {
|
|
358
|
+
var r, l;
|
|
359
|
+
if (!mapInstance$8.value) return;
|
|
360
|
+
const t = mapInstance$8.value.getView(), n = e.split(",").map(Number);
|
|
361
|
+
(l = (r = marker.value) == null ? void 0 : r.getGeometry()) == null || l.setCoordinates(fromLonLat([n[0], n[1]]));
|
|
362
|
+
const o = new Point([n[0], n[1]]);
|
|
363
|
+
t.setCenter(transform(o.getCoordinates(), projection.data, projection.mercator)), t.setZoom(mapZoom.markerPosition);
|
|
364
|
+
}, CDN_URL = "https://static.zhihaoscm.cn/", tiandituKey = "a6e8f78974f2581f2ca00485b40c948f", zhongkeKey = "15c81cc0a191a232e0a0ca1a51c3ca81", baseMap = {
|
|
302
365
|
// 矢量底图
|
|
303
366
|
// zhongkeTile: `https://api.open.geovisearth.com/map/v1/vec/{z}/{x}/{y}?token=${zhongkeKey}&format=png&tmsIds=w`,
|
|
304
367
|
tiandituTile: `https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituKey}`,
|
|
@@ -332,7 +395,8 @@ const formatLength = function(e, t) {
|
|
|
332
395
|
// 船形图标最小渲染层级
|
|
333
396
|
shipModelMin: 13,
|
|
334
397
|
// 船形图标最大渲染层级
|
|
335
|
-
shipModelMax: 18
|
|
398
|
+
shipModelMax: 18,
|
|
399
|
+
markerPosition: 14
|
|
336
400
|
}, renderShipsLimit = 200, mapDefaultCenter = [114.84, 30.52], projection = {
|
|
337
401
|
// 经纬度 源数据 地理坐标 WGS84
|
|
338
402
|
data: "EPSG:4326",
|
|
@@ -382,11 +446,11 @@ const multiplyPixelRatio = (e) => {
|
|
|
382
446
|
}
|
|
383
447
|
function i(u, f, p = {}) {
|
|
384
448
|
if (p.final)
|
|
385
|
-
return function(
|
|
386
|
-
return (i(
|
|
449
|
+
return function(x, h) {
|
|
450
|
+
return (i(h, x) + 180) % 360;
|
|
387
451
|
}(u, f);
|
|
388
|
-
const y = l(u),
|
|
389
|
-
return o(Math.atan2(
|
|
452
|
+
const y = l(u), v = l(f), g = r(y[0]), M = r(v[0]), S = r(y[1]), b = r(v[1]), C = Math.sin(M - g) * Math.cos(b), F = Math.cos(S) * Math.sin(b) - Math.sin(S) * Math.cos(b) * Math.cos(M - g);
|
|
453
|
+
return o(Math.atan2(C, F));
|
|
390
454
|
}
|
|
391
455
|
function s(u) {
|
|
392
456
|
return !isNaN(u) && u !== null && !Array.isArray(u);
|
|
@@ -430,7 +494,8 @@ const multiplyPixelRatio = (e) => {
|
|
|
430
494
|
});
|
|
431
495
|
}, getTopLeftPoint = (e) => [e[0], e[3]], getBottomLeftPoint = (e) => [e[2], e[3]], getBottomRightPoint = (e) => [e[2], e[1]], getTopRighttPoint = (e) => [e[0], e[1]];
|
|
432
496
|
function calculateBounds(e, t, n, o, r) {
|
|
433
|
-
let l, i, s, c
|
|
497
|
+
let l, i, s, c;
|
|
498
|
+
const d = e[0], m = e[1];
|
|
434
499
|
switch (t) {
|
|
435
500
|
case 0:
|
|
436
501
|
l = d + r, i = l + n, c = m - r, s = c - o;
|
|
@@ -460,7 +525,7 @@ function calculateBounds(e, t, n, o, r) {
|
|
|
460
525
|
return [Math.min(l, i), Math.min(s, c), Math.max(l, i), Math.max(s, c) + 1];
|
|
461
526
|
}
|
|
462
527
|
function calculateAnchorPoint(e, t, n = 70, o = 20, r = 20) {
|
|
463
|
-
|
|
528
|
+
const l = [0, 0];
|
|
464
529
|
switch (t) {
|
|
465
530
|
case 0:
|
|
466
531
|
l[0] = e[0] + r, l[1] = e[1] - r - o / 2;
|
|
@@ -504,39 +569,42 @@ function drawLabelBody(e, t, n) {
|
|
|
504
569
|
e.save(), o && (e.font = o);
|
|
505
570
|
let f = e.measureText(s).width + 2 * r;
|
|
506
571
|
(c || d) && (f += l + 4 * r), e.restore();
|
|
507
|
-
let p
|
|
572
|
+
let p;
|
|
573
|
+
const y = 20;
|
|
574
|
+
let v = -1;
|
|
575
|
+
const g = l + 3 * r;
|
|
508
576
|
if (m)
|
|
509
|
-
for (let
|
|
510
|
-
p = calculateBounds(i,
|
|
511
|
-
let
|
|
577
|
+
for (let M = 0; M < 8; M++) {
|
|
578
|
+
p = calculateBounds(i, M, f, g, m);
|
|
579
|
+
let S = !1;
|
|
512
580
|
for (let b = 0; b < t.length; ++b) {
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
581
|
+
const C = t[b].bounds, F = [
|
|
582
|
+
C[0] - y,
|
|
583
|
+
C[1] - y,
|
|
584
|
+
C[2] + y,
|
|
585
|
+
C[3] + y
|
|
518
586
|
];
|
|
519
|
-
if (p && isOverlapping(p,
|
|
520
|
-
|
|
587
|
+
if (p && isOverlapping(p, F)) {
|
|
588
|
+
S = !0;
|
|
521
589
|
break;
|
|
522
590
|
}
|
|
523
591
|
}
|
|
524
|
-
if (!
|
|
525
|
-
|
|
592
|
+
if (!S) {
|
|
593
|
+
v = M;
|
|
526
594
|
break;
|
|
527
595
|
}
|
|
528
596
|
}
|
|
529
597
|
else
|
|
530
|
-
|
|
531
|
-
if (u &&
|
|
532
|
-
|
|
598
|
+
v = 0, p = calculateBounds(i, v, f, g, m);
|
|
599
|
+
if (u && v === -1 && (v = 0), p && v > -1) {
|
|
600
|
+
const M = getBottomLeftPoint(p), S = getTopRighttPoint(p);
|
|
533
601
|
return {
|
|
534
602
|
center: i,
|
|
535
|
-
x: calculateAnchorPoint(i,
|
|
536
|
-
l:
|
|
537
|
-
r:
|
|
603
|
+
x: calculateAnchorPoint(i, v, f, g, m),
|
|
604
|
+
l: S,
|
|
605
|
+
r: M,
|
|
538
606
|
bounds: p,
|
|
539
|
-
position:
|
|
607
|
+
position: v,
|
|
540
608
|
name: s
|
|
541
609
|
};
|
|
542
610
|
} else
|
|
@@ -549,14 +617,14 @@ const drawText = (e, t) => {
|
|
|
549
617
|
let [c, d] = n;
|
|
550
618
|
if (l) {
|
|
551
619
|
e.font = "22px map-iconfont";
|
|
552
|
-
|
|
620
|
+
const m = getIconFont(l.icon);
|
|
553
621
|
e.fillStyle = l.color, e.fillText(m, c + labelOutSize - 4, d + 4), c += 22;
|
|
554
622
|
}
|
|
555
623
|
if (i != null && i.length) {
|
|
556
624
|
e.font = "12px map-iconfont", e.fillStyle = "#3370ff";
|
|
557
|
-
|
|
625
|
+
const m = e.measureText(o).width + 6;
|
|
558
626
|
i.forEach((u, f) => {
|
|
559
|
-
|
|
627
|
+
const p = getIconFont(u), y = 20 * f;
|
|
560
628
|
e.fillText(p, c + m + y, d);
|
|
561
629
|
});
|
|
562
630
|
}
|
|
@@ -579,13 +647,11 @@ const drawText = (e, t) => {
|
|
|
579
647
|
e.lineTo(n[u][0], n[u][1]);
|
|
580
648
|
l && e.closePath(), o && (e.strokeStyle = o, e.stroke()), r && l && (m && (e.globalAlpha = m), e.fillStyle = r, e.fill()), e.restore();
|
|
581
649
|
}
|
|
582
|
-
}
|
|
583
|
-
let intervalId = [];
|
|
584
|
-
const drawLabel = (e, t, n) => {
|
|
650
|
+
}, intervalId = [], drawLabel = (e, t, n) => {
|
|
585
651
|
var u, f;
|
|
586
652
|
let { center: o, text: r, color: l, textColor: i, bgColor: s, leftIcon: c, rightIcons: d, type: m } = t;
|
|
587
653
|
if (o && r) {
|
|
588
|
-
|
|
654
|
+
const p = {
|
|
589
655
|
font: labelFont,
|
|
590
656
|
labelOutSize,
|
|
591
657
|
labelHeight,
|
|
@@ -595,12 +661,11 @@ const drawLabel = (e, t, n) => {
|
|
|
595
661
|
selected: t.selected
|
|
596
662
|
};
|
|
597
663
|
(u = t.blinkColors) != null && u.length && (s = t.fill, i = getForegroundColor(t.fill));
|
|
598
|
-
|
|
664
|
+
const y = drawLabelBody(e, n, p);
|
|
599
665
|
if (y) {
|
|
600
|
-
const { x:
|
|
601
|
-
let M = [getTopLeftPoint(g), getBottomLeftPoint(g), getBottomRightPoint(g), getTopRighttPoint(g)];
|
|
666
|
+
const { x: v, bounds: g, l: M } = y, S = [getTopLeftPoint(g), getBottomLeftPoint(g), getBottomRightPoint(g), getTopRighttPoint(g)];
|
|
602
667
|
n.find((w) => w.name === r) || n.push(y), drawPolygon(e, {
|
|
603
|
-
points: [o,
|
|
668
|
+
points: [o, v],
|
|
604
669
|
strokeColor: l,
|
|
605
670
|
fillColor: "#000",
|
|
606
671
|
shouldClosePath: !0,
|
|
@@ -610,31 +675,32 @@ const drawLabel = (e, t, n) => {
|
|
|
610
675
|
scale: void 0,
|
|
611
676
|
globalAlpha: labelAlpha
|
|
612
677
|
}), d != null && d.length && d.forEach(() => {
|
|
613
|
-
|
|
678
|
+
S[1][0] += 20, S[2][0] += 20;
|
|
614
679
|
});
|
|
615
|
-
const
|
|
616
|
-
points:
|
|
680
|
+
const C = {
|
|
681
|
+
points: S,
|
|
617
682
|
strokeColor: l,
|
|
618
683
|
fillColor: s,
|
|
619
684
|
shouldClosePath: !0
|
|
620
|
-
}, [
|
|
621
|
-
center: [
|
|
685
|
+
}, [F, x] = M, h = {
|
|
686
|
+
center: [F, x + labelOutSize + labelHeight + 1],
|
|
622
687
|
text: r,
|
|
623
688
|
textColor: i,
|
|
624
689
|
leftIcon: c,
|
|
625
690
|
rightIcons: d,
|
|
626
691
|
blinkColors: t.blinkColors
|
|
627
692
|
};
|
|
628
|
-
if (drawPolygon(e,
|
|
629
|
-
let w = Date.now(),
|
|
693
|
+
if (drawPolygon(e, C), drawText(e, h), ((f = t == null ? void 0 : t.blinkColors) == null ? void 0 : f.length) > 0) {
|
|
694
|
+
let w = Date.now(), k = 0;
|
|
630
695
|
const L = [];
|
|
631
|
-
t.blinkColors.forEach((
|
|
632
|
-
L.push(
|
|
633
|
-
}), intervalId[t.
|
|
634
|
-
const
|
|
635
|
-
|
|
696
|
+
t.blinkColors.forEach((T) => {
|
|
697
|
+
L.push(T), L.push("white");
|
|
698
|
+
}), intervalId[t.id] && clearInterval(intervalId[t.id]), intervalId[t.id] = setInterval(() => {
|
|
699
|
+
const T = Date.now();
|
|
700
|
+
T - w >= 500 && (k = (k + 1) % L.length, w = T, C.fillColor = L[k], drawPolygon(e, C), h.textColor = getForegroundColor(C.fillColor), drawText(e, h));
|
|
636
701
|
}, 10);
|
|
637
|
-
}
|
|
702
|
+
} else
|
|
703
|
+
shipLabels.value.find((k) => k.name === r) && (clearInterval(intervalId[t.id]), drawPolygon(e, C), drawText(e, h));
|
|
638
704
|
}
|
|
639
705
|
}
|
|
640
706
|
return null;
|
|
@@ -655,11 +721,13 @@ function gcj02ToWgs84(e) {
|
|
|
655
721
|
if (outOfChina(t, n))
|
|
656
722
|
return `${t.toFixed(6)}, ${n.toFixed(6)}`;
|
|
657
723
|
{
|
|
658
|
-
let o = transformLat(t - 105, n - 35), r = transformLng(t - 105, n - 35)
|
|
724
|
+
let o = transformLat(t - 105, n - 35), r = transformLng(t - 105, n - 35);
|
|
725
|
+
const l = n / 180 * PI;
|
|
726
|
+
let i = Math.sin(l);
|
|
659
727
|
i = 1 - ee * i * i;
|
|
660
|
-
|
|
728
|
+
const s = Math.sqrt(i);
|
|
661
729
|
o = o * 180 / (a * (1 - ee) / (i * s) * PI), r = r * 180 / (a / s * Math.cos(l) * PI);
|
|
662
|
-
|
|
730
|
+
const c = n + o, d = t + r;
|
|
663
731
|
return `${(t * 2 - d).toFixed(6)}, ${(n * 2 - c).toFixed(6)}`;
|
|
664
732
|
}
|
|
665
733
|
}
|
|
@@ -684,14 +752,15 @@ function lonLatToMercator(e) {
|
|
|
684
752
|
return n = n * equatorialCircumference / 180, [t, n];
|
|
685
753
|
}
|
|
686
754
|
function mercatorToLonLat(e, t = "lonlat") {
|
|
687
|
-
|
|
755
|
+
const n = { lon: 0, lat: 0 }, o = e[0] / equatorialCircumference * 180;
|
|
756
|
+
let r = e[1] / equatorialCircumference * 180;
|
|
688
757
|
return r = 180 / Math.PI * (2 * Math.atan(Math.exp(r * Math.PI / 180)) - Math.PI / 2), n.lon = o, n.lat = r, t === "lonlat" ? n : [o, r];
|
|
689
758
|
}
|
|
690
759
|
function calculateBoundingBox(e) {
|
|
691
760
|
let t = 1 / 0, n = -1 / 0, o = 1 / 0, r = -1 / 0;
|
|
692
|
-
e.forEach((
|
|
693
|
-
const [g,
|
|
694
|
-
t = Math.min(t,
|
|
761
|
+
e.forEach((v) => {
|
|
762
|
+
const [g, M] = v;
|
|
763
|
+
t = Math.min(t, M), n = Math.max(n, M), o = Math.min(o, g), r = Math.max(r, g);
|
|
695
764
|
});
|
|
696
765
|
const l = r - o, i = n - t, s = Math.max(l, i), c = (o + r) / 2, d = (t + n) / 2, m = s / 2, u = c - m, f = c + m, p = d - m, y = d + m;
|
|
697
766
|
return [f, p, u, y];
|
|
@@ -702,15 +771,14 @@ const transformUtils = {
|
|
|
702
771
|
lonLatToMercator,
|
|
703
772
|
mercatorToLonLat,
|
|
704
773
|
calculateBoundingBox
|
|
705
|
-
}, mapInstance$
|
|
774
|
+
}, mapInstance$7 = ref(), renderTrackStyleSetInstance = (e) => mapInstance$7.value = e, stopIcon = "", stopColor = "#E31818", slowIcon = "", slowColor = "#1890FF", dropletsIcon = "", trackList$1 = ref([]), renderTrackLine = (e, t, n) => {
|
|
706
775
|
var l, i, s;
|
|
707
776
|
const o = e[t];
|
|
708
777
|
if (!o) return;
|
|
709
778
|
allTracks.value[t] = o, trackList$1.value = [], trackList$1.value = o.map((c, d) => (c.center = [c.lon, c.lat], c.centerPoint = transformUtils.lonLatToMercator(c.center), c.id = t, c.index = d, c.time = hooks(c.createdAt).format("YYYY-MM-DD HH:mm:ss"), c));
|
|
710
|
-
|
|
779
|
+
const r = trackList$1.value.map((c) => c.centerPoint);
|
|
711
780
|
if (r.length >= 2) {
|
|
712
|
-
|
|
713
|
-
const d = new Feature({ geometry: c });
|
|
781
|
+
const c = new LineString(r), d = new Feature({ geometry: c });
|
|
714
782
|
d.setStyle(
|
|
715
783
|
new Style({
|
|
716
784
|
stroke: new Stroke({
|
|
@@ -724,13 +792,13 @@ const transformUtils = {
|
|
|
724
792
|
features: [...shipTrackLineFeatures.value]
|
|
725
793
|
}), shipTrackVectorLayer.value = new VectorLayer({
|
|
726
794
|
source: trackLineVectorSource.value
|
|
727
|
-
}), renderPoint(n), (s = mapInstance$
|
|
795
|
+
}), renderPoint(n), (s = mapInstance$7.value) == null || s.addLayer(shipTrackVectorLayer.value);
|
|
728
796
|
}
|
|
729
797
|
}, handlePlay = (e, t) => {
|
|
730
|
-
const n = allTracks.value[e];
|
|
798
|
+
const n = allTracks.value[String(e)];
|
|
731
799
|
playAnimation(n.map((o) => [o.lon, o.lat]), t);
|
|
732
|
-
}, removeShipTrackLineFeatureByIndex = (e) => {
|
|
733
|
-
e >= 0 && e < shipTrackLineFeatures.value.length && (shipTrackLineFeatures.value.splice(e, 1), allTracks.value
|
|
800
|
+
}, removeShipTrackLineFeatureByIndex = (e, t) => {
|
|
801
|
+
e >= 0 && e < shipTrackLineFeatures.value.length && (shipTrackLineFeatures.value.splice(e, 1), delete allTracks.value[t]), trackLineVectorSource.value = new VectorSource({
|
|
734
802
|
features: [...shipTrackLineFeatures.value]
|
|
735
803
|
}), shipTrackVectorLayer.value && shipTrackVectorLayer.value.setSource(trackLineVectorSource.value);
|
|
736
804
|
}, createAnimatedIconFeature = (e, t) => {
|
|
@@ -773,12 +841,12 @@ const moveFeature = (e, t) => {
|
|
|
773
841
|
), d = getRotation(transformUtils.mercatorToLonLat(i, "array"), transformUtils.mercatorToLonLat(s, "array")) * Math.PI / 180;
|
|
774
842
|
geoMarkerStyle.getText().setRotation(d), position.setCoordinates(l);
|
|
775
843
|
const m = getVectorContext(e);
|
|
776
|
-
m.context_.save(), m.setStyle(geoMarkerStyle), m.drawGeometry(position), m.context_.restore(), (u = mapInstance$
|
|
844
|
+
m.context_.save(), m.setStyle(geoMarkerStyle), m.drawGeometry(position), m.context_.restore(), (u = mapInstance$7.value) == null || u.render();
|
|
777
845
|
}, startAnimation = () => {
|
|
778
846
|
trackAnimating.value = !0, showTrackAnimatMarker.value = !0, lastTime = Date.now(), distance = 0, position = startMarker.getGeometry().clone(), vectorLayer.on("postrender", moveFeatureHandler), geoMarker.setGeometry(null);
|
|
779
847
|
}, stopAnimation = () => {
|
|
780
848
|
var e;
|
|
781
|
-
trackAnimating.value && (trackAnimating.value = !1, geoMarker.setGeometry(null), vectorLayer.un("postrender", moveFeatureHandler), (e = mapInstance$
|
|
849
|
+
trackAnimating.value && (trackAnimating.value = !1, geoMarker.setGeometry(null), vectorLayer.un("postrender", moveFeatureHandler), (e = mapInstance$7.value) == null || e.removeLayer(vectorLayer), vectorLayer = null, geoMarker = null);
|
|
782
850
|
}, playAnimation = (e, t) => {
|
|
783
851
|
var n;
|
|
784
852
|
trackAnimating.value && stopAnimation(), polyline = new Polyline({
|
|
@@ -799,22 +867,22 @@ const moveFeature = (e, t) => {
|
|
|
799
867
|
source: new VectorSource({
|
|
800
868
|
features: [geoMarker]
|
|
801
869
|
})
|
|
802
|
-
}), (n = mapInstance$
|
|
870
|
+
}), (n = mapInstance$7.value) == null || n.addLayer(vectorLayer), moveFeatureHandler = (o) => moveFeature(o, t), startAnimation();
|
|
803
871
|
}, renderPoint = (e) => {
|
|
804
|
-
if (!mapInstance$
|
|
805
|
-
|
|
872
|
+
if (!mapInstance$7.value) return;
|
|
873
|
+
const t = trackList$1.value || [];
|
|
806
874
|
if (!(t && t.length > 1)) return [];
|
|
807
|
-
|
|
875
|
+
const n = { 16: 24, 17: 15, default: 4 }, o = [], r = t.length;
|
|
808
876
|
for (let s = 0; s < r; s++) {
|
|
809
877
|
t[s].index = s;
|
|
810
|
-
|
|
878
|
+
const c = mapInstance$7.value.getPixelFromCoordinate(t[s].centerPoint);
|
|
811
879
|
if (c) {
|
|
812
880
|
let d = c.concat(c);
|
|
813
881
|
d = adjustBounds(d, [20, 20]);
|
|
814
|
-
|
|
882
|
+
const m = mapInstance$7.value.getView().getZoom();
|
|
815
883
|
if (!m) return;
|
|
816
884
|
if (m > 15) {
|
|
817
|
-
|
|
885
|
+
const f = n[m] || n.default;
|
|
818
886
|
d = adjustBounds(d, [f, f]);
|
|
819
887
|
}
|
|
820
888
|
let u = !0;
|
|
@@ -831,56 +899,64 @@ const moveFeature = (e, t) => {
|
|
|
831
899
|
const l = getIconStyle(stopIcon), i = getIconStyle(slowIcon);
|
|
832
900
|
o.forEach((s, c) => {
|
|
833
901
|
var u, f;
|
|
834
|
-
|
|
902
|
+
const d = new Feature({
|
|
835
903
|
geometry: new Point(s.centerPoint)
|
|
836
904
|
});
|
|
837
|
-
d.set("type", "track_point"), d.set("data", s), d.setStyle(
|
|
905
|
+
d.set("type", "track_point"), d.set("data", s), d.setStyle([
|
|
838
906
|
new Style({
|
|
907
|
+
// 扩大交互热区
|
|
908
|
+
image: new CircleStyle({
|
|
909
|
+
stroke: new Stroke({ color: "rgba(0, 0, 0, 0.01)", width: 20 }),
|
|
910
|
+
radius: 3
|
|
911
|
+
})
|
|
912
|
+
}),
|
|
913
|
+
new Style({
|
|
914
|
+
// 轨迹点样式
|
|
839
915
|
image: new CircleStyle({
|
|
840
916
|
fill: new Fill({ color: e }),
|
|
841
917
|
stroke: new Stroke({ color: "#fff", width: 2 }),
|
|
842
|
-
radius: 3
|
|
843
|
-
hitDetectionRadius: 10
|
|
918
|
+
radius: 3
|
|
844
919
|
})
|
|
845
920
|
})
|
|
846
|
-
), trackLineVectorSource.value.addFeature(d);
|
|
921
|
+
]), trackLineVectorSource.value.addFeature(d);
|
|
847
922
|
const m = new Feature({
|
|
848
923
|
geometry: new Point(fromLonLat(s.center))
|
|
849
924
|
});
|
|
850
925
|
if (m.set("type", "track_label"), m.set("track_label_index", c), m.setStyle(
|
|
851
926
|
setTrackLabelStyle(s, e)
|
|
852
927
|
), trackLineVectorSource.value.addFeature(m), typeof s == "object" && s.hasOwnProperty("state")) {
|
|
853
|
-
|
|
928
|
+
const p = new Feature({
|
|
854
929
|
geometry: new Point(s.centerPoint)
|
|
855
930
|
});
|
|
856
931
|
p.set("type", "track_icon");
|
|
857
|
-
|
|
932
|
+
const y = new Style({
|
|
858
933
|
text: new Text({
|
|
859
934
|
font: "Normal 22px map-iconfont",
|
|
860
935
|
text: getIconFont(dropletsIcon),
|
|
861
936
|
offsetY: -10
|
|
862
937
|
}),
|
|
863
938
|
zIndex: 99
|
|
864
|
-
}),
|
|
865
|
-
Number(s.state) === 0 ? ((u = y.getText()) == null || u.setFill(new Fill({ color: stopColor })),
|
|
939
|
+
}), v = [];
|
|
940
|
+
Number(s.state) === 0 ? ((u = y.getText()) == null || u.setFill(new Fill({ color: stopColor })), v.push(l)) : Number(s.state) === 1 && ((f = y.getText()) == null || f.setFill(new Fill({ color: slowColor })), v.push(i)), v.push(y), p.setStyle(v), trackLineVectorSource.value.addFeature(p);
|
|
866
941
|
}
|
|
867
942
|
}), renderArrow(o, e), renderIconPoint();
|
|
868
943
|
}, renderArrow = (e, t) => {
|
|
869
944
|
const n = e.length;
|
|
870
945
|
n || (e.push(trackList$1.value[0]), e.push(trackList$1.value[trackList$1.value.length - 1]));
|
|
871
946
|
for (let o = 0; o < n - 1; o++) {
|
|
872
|
-
let r
|
|
947
|
+
let r;
|
|
948
|
+
const l = e[o], i = (e[o + 1].index + l.index) / 2;
|
|
873
949
|
if (i % 2 === 0)
|
|
874
950
|
r = trackList$1.value[i].centerPoint;
|
|
875
951
|
else {
|
|
876
|
-
|
|
952
|
+
const s = trackList$1.value[Math.floor(i)], c = trackList$1.value[Math.ceil(i)];
|
|
877
953
|
if (s && c) {
|
|
878
|
-
|
|
954
|
+
const [d, m] = s.centerPoint, [u, f] = c.centerPoint;
|
|
879
955
|
r = [(d + u) / 2, (m + f) / 2];
|
|
880
956
|
}
|
|
881
957
|
}
|
|
882
958
|
if (r) {
|
|
883
|
-
|
|
959
|
+
const s = new Feature({
|
|
884
960
|
geometry: new Point(r)
|
|
885
961
|
});
|
|
886
962
|
s.set("type", "track_arrow"), s.setStyle(
|
|
@@ -902,7 +978,7 @@ const moveFeature = (e, t) => {
|
|
|
902
978
|
}, renderIconPoint = () => {
|
|
903
979
|
const e = "", t = "#fcdc3f", n = "#ff0000";
|
|
904
980
|
(trackList$1.value.length < 2 ? [trackList$1.value[0]] : [trackList$1.value[0], trackList$1.value[trackList$1.value.length - 1]]).forEach((r) => {
|
|
905
|
-
|
|
981
|
+
const l = new Feature({
|
|
906
982
|
geometry: new Point(r.centerPoint)
|
|
907
983
|
});
|
|
908
984
|
l.set("type", "track_begin"), l.set("data", r);
|
|
@@ -999,7 +1075,7 @@ const moveFeature = (e, t) => {
|
|
|
999
1075
|
image: new CircleStyle({
|
|
1000
1076
|
radius: 0
|
|
1001
1077
|
})
|
|
1002
|
-
}), mapInstance$
|
|
1078
|
+
}), mapInstance$6 = ref(), renderShipStyleSetInstance = (e) => mapInstance$6.value = e, speedCondition = [[1, 10], [10, 20], [20, 1 / 0]], drawShipModelByZoom = { 14: [200, 30], 15: [115, 15], 16: [55, 8], 17: [25, 5], 18: [1, 1] }, setShipStyle = (e) => new Style({
|
|
1003
1079
|
renderer: (t, n) => {
|
|
1004
1080
|
const o = n.context, r = n.feature.get("data"), l = r.length / 2;
|
|
1005
1081
|
o.beginPath(), o.arc(
|
|
@@ -1017,8 +1093,8 @@ const moveFeature = (e, t) => {
|
|
|
1017
1093
|
}
|
|
1018
1094
|
}
|
|
1019
1095
|
}), drawShipBody = (e, t, n) => {
|
|
1020
|
-
if (!mapInstance$
|
|
1021
|
-
const o = Math.round(Number(mapInstance$
|
|
1096
|
+
if (!mapInstance$6.value) return;
|
|
1097
|
+
const o = Math.round(Number(mapInstance$6.value.getView().getZoom()));
|
|
1022
1098
|
if (!o) return;
|
|
1023
1099
|
let r = [];
|
|
1024
1100
|
const [l, i] = drawShipModelByZoom[o] || [0, 0], [s, c] = n;
|
|
@@ -1042,8 +1118,8 @@ const moveFeature = (e, t) => {
|
|
|
1042
1118
|
}, drawHeading = (e, t, n) => {
|
|
1043
1119
|
const [o, r] = n[0], l = getShipDirectPath(t);
|
|
1044
1120
|
if (l) {
|
|
1045
|
-
|
|
1046
|
-
|
|
1121
|
+
const i = l.map(function(s) {
|
|
1122
|
+
const [c, d] = s;
|
|
1047
1123
|
return [c + o, d + r];
|
|
1048
1124
|
});
|
|
1049
1125
|
if (e.save(), e.beginPath(), t.angle > 0) {
|
|
@@ -1053,7 +1129,7 @@ const moveFeature = (e, t) => {
|
|
|
1053
1129
|
}
|
|
1054
1130
|
e.moveTo(o, r);
|
|
1055
1131
|
for (let s = 1; s < i.length; s++) {
|
|
1056
|
-
|
|
1132
|
+
const [c, d] = i[s];
|
|
1057
1133
|
e.lineTo(c, d);
|
|
1058
1134
|
}
|
|
1059
1135
|
e.strokeStyle = "#000", e.lineWidth = 1, e.stroke(), e.restore();
|
|
@@ -1069,8 +1145,8 @@ const moveFeature = (e, t) => {
|
|
|
1069
1145
|
const [o, r] = n, l = o - 0, i = r - 0, s = t.name;
|
|
1070
1146
|
let c;
|
|
1071
1147
|
t.leftIconColor && (c = { color: t.leftIconColor, icon: "" });
|
|
1072
|
-
|
|
1073
|
-
|
|
1148
|
+
const d = getShipCustomIcon(t), m = {
|
|
1149
|
+
id: t.id,
|
|
1074
1150
|
center: [l, i],
|
|
1075
1151
|
text: s,
|
|
1076
1152
|
fill: t.fill,
|
|
@@ -1091,10 +1167,11 @@ const moveFeature = (e, t) => {
|
|
|
1091
1167
|
let l = cloneDeep(shipShapeModel);
|
|
1092
1168
|
return l = l.map(([i, s]) => [i * r, s * o]), l;
|
|
1093
1169
|
}, getShipDirectPath = (e) => {
|
|
1094
|
-
|
|
1170
|
+
const { speed: t, hdg: n, cog: o } = e;
|
|
1171
|
+
let r = "", l = null;
|
|
1095
1172
|
if (t && t > 1 && (n !== null && n != 511 && o !== null ? o - n >= 3 ? r = "left" : o - n <= -3 ? r = "right" : r = "front" : r = "front", r && t))
|
|
1096
|
-
for (
|
|
1097
|
-
|
|
1173
|
+
for (const i in speedCondition) {
|
|
1174
|
+
const s = speedCondition[i];
|
|
1098
1175
|
if (t >= s[0] && t < s[1]) {
|
|
1099
1176
|
l = shipDirectPath[r][i];
|
|
1100
1177
|
break;
|
|
@@ -1102,23 +1179,23 @@ const moveFeature = (e, t) => {
|
|
|
1102
1179
|
}
|
|
1103
1180
|
return l;
|
|
1104
1181
|
}, getShipCustomIcon = (e) => {
|
|
1105
|
-
|
|
1182
|
+
const t = [];
|
|
1106
1183
|
return e.existDevice && t.push(""), e.existMobile && t.push(""), e.existWaterGauge && t.push(""), t || [];
|
|
1107
|
-
}, mapInstance$
|
|
1184
|
+
}, mapInstance$5 = ref(), renderShipSetInstance = (e) => mapInstance$5.value = e;
|
|
1108
1185
|
let shipsMarkerList = [], shipsVectorSource, largeAmountShipsSource;
|
|
1109
1186
|
const selectedShipData = ref(null);
|
|
1110
1187
|
let selectShipsVectorSource;
|
|
1111
1188
|
const renderShips = (e) => {
|
|
1112
1189
|
var n, o, r, l;
|
|
1113
|
-
if (!mapInstance$
|
|
1114
|
-
const t = Math.round(Number(mapInstance$
|
|
1190
|
+
if (!mapInstance$5.value || showTrackLayer.value) return;
|
|
1191
|
+
const t = Math.round(Number(mapInstance$5.value.getView().getZoom()));
|
|
1115
1192
|
if (selectedShipData.value && nextTick(() => {
|
|
1116
1193
|
selectSingleShipMarker(selectedShipData.value);
|
|
1117
1194
|
}).then((i) => {
|
|
1118
1195
|
}), !(!t || t < mapZoom.shipGreenDotMax) && (allShips.value = e, !hiddenOrther.value))
|
|
1119
1196
|
return t >= mapZoom.shipGreenDotMax && t < mapZoom.shipModelMin ? ((n = shipsLayer.value) == null || n.setVisible(!1), (o = largeAmountShipsLayer.value) == null || o.setVisible(!0), renderLargeAmountShips(e)) : ((r = largeAmountShipsLayer.value) == null || r.setVisible(!1), (l = shipsLayer.value) == null || l.setVisible(!0), renderShipsMarker(e));
|
|
1120
1197
|
}, renderLargeAmountShips = (e) => {
|
|
1121
|
-
if (!mapInstance$
|
|
1198
|
+
if (!mapInstance$5.value) return;
|
|
1122
1199
|
const t = e.map((n) => ({
|
|
1123
1200
|
type: "Feature",
|
|
1124
1201
|
geometry: {
|
|
@@ -1164,10 +1241,10 @@ const renderShips = (e) => {
|
|
|
1164
1241
|
"shape-stroke-width": 0.5
|
|
1165
1242
|
// 边框宽度为0.5px
|
|
1166
1243
|
}
|
|
1167
|
-
}), mapInstance$
|
|
1244
|
+
}), mapInstance$5.value.addLayer(largeAmountShipsLayer.value), largeAmountShipsLayer.value;
|
|
1168
1245
|
}, renderShipsMarker = (e) => {
|
|
1169
1246
|
var n;
|
|
1170
|
-
if (!mapInstance$
|
|
1247
|
+
if (!mapInstance$5.value) return;
|
|
1171
1248
|
deleteAllShipMarkers();
|
|
1172
1249
|
let t = convertShipMapData(e);
|
|
1173
1250
|
if (t = customFilterShips(t), !!(t != null && t.length))
|
|
@@ -1186,12 +1263,12 @@ const renderShips = (e) => {
|
|
|
1186
1263
|
features: shipsMarkerList.map((o) => o.feature)
|
|
1187
1264
|
}), shipsLayer.value = new VectorLayer({
|
|
1188
1265
|
source: shipsVectorSource
|
|
1189
|
-
}), (n = mapInstance$
|
|
1266
|
+
}), (n = mapInstance$5.value) == null || n.addLayer(shipsLayer.value), shipsLayer.value;
|
|
1190
1267
|
}, customFilterShips = (e) => {
|
|
1191
1268
|
let t = cloneDeep(e);
|
|
1192
1269
|
return t = t.filter((n) => {
|
|
1193
1270
|
var r;
|
|
1194
|
-
|
|
1271
|
+
const o = getFilterItem(n).every(({ btnShow: l, value: i }) => l ? !!i : !0);
|
|
1195
1272
|
return (switchBtnShow.value.camera || switchBtnShow.value.mobile || switchBtnShow.value.waterGauge) && ((r = selectedShipData.value) == null ? void 0 : r.id) === n.id && clearSelectFeature(), o;
|
|
1196
1273
|
}), t;
|
|
1197
1274
|
}, getFilterItem = (e) => [
|
|
@@ -1204,7 +1281,7 @@ const renderShips = (e) => {
|
|
|
1204
1281
|
}), shipsMarkerList = [];
|
|
1205
1282
|
}, selectSingleShipMarker = (e) => {
|
|
1206
1283
|
var l;
|
|
1207
|
-
if (!mapInstance$
|
|
1284
|
+
if (!mapInstance$5.value) return;
|
|
1208
1285
|
const t = cloneDeep(selectSingleShipData.value);
|
|
1209
1286
|
selectSingleShipData.value = convertShipMapData(e);
|
|
1210
1287
|
const n = [selectSingleShipData.value.lon, selectSingleShipData.value.lat], o = new Feature({
|
|
@@ -1222,7 +1299,7 @@ const renderShips = (e) => {
|
|
|
1222
1299
|
source: selectShipsVectorSource
|
|
1223
1300
|
}), setVisibleFeatureById(shipsVectorSource, selectSingleShipData.value.id, !0);
|
|
1224
1301
|
const r = (l = shipsLayer.value) == null ? void 0 : l.getSource();
|
|
1225
|
-
return r && (t && setVisibleFeatureById(r, t.id, !0), setVisibleFeatureById(r, selectSingleShipData.value.id, !1)), mapInstance$
|
|
1302
|
+
return r && (t && setVisibleFeatureById(r, t.id, !0), setVisibleFeatureById(r, selectSingleShipData.value.id, !1)), mapInstance$5.value.addLayer(selectShipsLayer.value), selectShipsLayer.value.setVisible(!0), selectShipsLayer.value;
|
|
1226
1303
|
}, setVisibleFeatureById = (e, t, n) => {
|
|
1227
1304
|
e && e.forEachFeature((o) => {
|
|
1228
1305
|
const r = o.get("data");
|
|
@@ -1230,7 +1307,7 @@ const renderShips = (e) => {
|
|
|
1230
1307
|
});
|
|
1231
1308
|
}, findShip = (e, t, n = !0) => {
|
|
1232
1309
|
var r, l, i, s, c;
|
|
1233
|
-
if (
|
|
1310
|
+
if (!e || !mapInstance$5.value) return;
|
|
1234
1311
|
const o = (i = (l = (r = shipsLayer.value) == null ? void 0 : r.getSource()) == null ? void 0 : l.getFeatures()) == null ? void 0 : i.find((d) => {
|
|
1235
1312
|
var m;
|
|
1236
1313
|
return ((m = d.get("data")) == null ? void 0 : m.id) === e;
|
|
@@ -1240,7 +1317,7 @@ const renderShips = (e) => {
|
|
|
1240
1317
|
return;
|
|
1241
1318
|
}
|
|
1242
1319
|
if (n && ((s = selectedShipData.value) != null && s.lon) && ((c = selectedShipData.value) != null && c.lat)) {
|
|
1243
|
-
const d = mapInstance$
|
|
1320
|
+
const d = mapInstance$5.value.getView(), m = new Point([selectedShipData.value.lon, selectedShipData.value.lat]);
|
|
1244
1321
|
d.setCenter(transform(m.getCoordinates(), projection.data, projection.mercator));
|
|
1245
1322
|
const u = d.getZoom(), f = u < mapZoom.findShipMin ? mapZoom.findShip : u;
|
|
1246
1323
|
d.setZoom(f);
|
|
@@ -1253,9 +1330,9 @@ const renderShips = (e) => {
|
|
|
1253
1330
|
const t = (e = shipsLayer.value) == null ? void 0 : e.getSource();
|
|
1254
1331
|
t && setVisibleFeatureById(t, selectSingleShipData.value.id, !0);
|
|
1255
1332
|
}
|
|
1256
|
-
selectedShipData.value = null, mapInstance$
|
|
1333
|
+
selectedShipData.value = null, mapInstance$5.value && (selectShipsVectorSource == null || selectShipsVectorSource.clear(), selectShipsLayer.value = new VectorLayer({
|
|
1257
1334
|
source: selectShipsVectorSource
|
|
1258
|
-
}), mapInstance$
|
|
1335
|
+
}), mapInstance$5.value.addLayer(selectShipsLayer.value), selectShipsLayer.value.setVisible(!1));
|
|
1259
1336
|
}, hiddenAllShips = () => {
|
|
1260
1337
|
var e, t;
|
|
1261
1338
|
(e = shipsLayer.value) == null || e.setVisible(!1), (t = largeAmountShipsLayer.value) == null || t.setVisible(!1);
|
|
@@ -1270,9 +1347,9 @@ const renderShips = (e) => {
|
|
|
1270
1347
|
switchBtnShow.value[e] = t, renderShips(allShips.value);
|
|
1271
1348
|
}, rerenderShip = () => {
|
|
1272
1349
|
renderShips(allShips.value);
|
|
1273
|
-
}, mapInstance$
|
|
1350
|
+
}, mapInstance$4 = ref(), renderCustomOverlaySetInstance = (e) => mapInstance$4.value = e, drawCustomContent = (e, t, n, o = "top-left", r = !1) => {
|
|
1274
1351
|
var m, u;
|
|
1275
|
-
if (!t || !mapInstance$
|
|
1352
|
+
if (!t || !mapInstance$4.value) return;
|
|
1276
1353
|
document.querySelectorAll(".truck-custom-content").forEach((f) => f.parentNode.removeChild(f));
|
|
1277
1354
|
const l = document.createElement("div");
|
|
1278
1355
|
l.innerHTML = n;
|
|
@@ -1286,32 +1363,31 @@ const renderShips = (e) => {
|
|
|
1286
1363
|
});
|
|
1287
1364
|
if (r) {
|
|
1288
1365
|
let f = !1, p = [0, 0], y = [0, 0];
|
|
1289
|
-
l.addEventListener("mousedown", function(
|
|
1366
|
+
l.addEventListener("mousedown", function(v) {
|
|
1290
1367
|
var g;
|
|
1291
|
-
f = !0,
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
],
|
|
1295
|
-
}), document.addEventListener("mousemove", function(
|
|
1368
|
+
f = !0, v.clientX, v.clientY, p = (g = mapInstance$4.value) == null ? void 0 : g.getCoordinateFromPixel([v.clientX - 200, v.clientY - 200]), y = [
|
|
1369
|
+
v.clientX - l.getBoundingClientRect().left + 160,
|
|
1370
|
+
v.clientY - l.getBoundingClientRect().top + 84
|
|
1371
|
+
], v.preventDefault();
|
|
1372
|
+
}), document.addEventListener("mousemove", function(v) {
|
|
1296
1373
|
var g;
|
|
1297
1374
|
if (f) {
|
|
1298
|
-
|
|
1299
|
-
i.setPosition([p[0] +
|
|
1375
|
+
const M = (g = mapInstance$4.value) == null ? void 0 : g.getCoordinateFromPixel([v.clientX - y[0], v.clientY - y[1]]), S = M[0] - p[0], b = M[1] - p[1];
|
|
1376
|
+
i.setPosition([p[0] + S, p[1] + b]);
|
|
1300
1377
|
}
|
|
1301
1378
|
}), document.addEventListener("mouseup", function() {
|
|
1302
1379
|
f = !1;
|
|
1303
1380
|
});
|
|
1304
1381
|
}
|
|
1305
|
-
(m = mapInstance$
|
|
1382
|
+
(m = mapInstance$4.value) == null || m.addOverlay(i);
|
|
1306
1383
|
const s = l.querySelector(".close-button");
|
|
1307
1384
|
s && s.addEventListener("click", () => {
|
|
1308
1385
|
var f, p;
|
|
1309
|
-
(f = mapInstance$
|
|
1386
|
+
(f = mapInstance$4.value) == null || f.removeOverlay(i), (p = l.parentNode) == null || p.removeChild(l);
|
|
1310
1387
|
});
|
|
1311
|
-
|
|
1312
|
-
const d = (u = mapInstance$5.value) == null ? void 0 : u.getCoordinateFromPixel(c);
|
|
1388
|
+
const c = JSON.parse(JSON.stringify(t)), d = (u = mapInstance$4.value) == null ? void 0 : u.getCoordinateFromPixel(c);
|
|
1313
1389
|
return i.setPosition(d), i;
|
|
1314
|
-
}, mapInstance$
|
|
1390
|
+
}, mapInstance$3 = ref(), renderTrackSetInstance = (e) => mapInstance$3.value = e, showTracks = ref([]), trackList = ref([]);
|
|
1315
1391
|
ref(null);
|
|
1316
1392
|
const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, r = "ship") => {
|
|
1317
1393
|
var m;
|
|
@@ -1322,7 +1398,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, r = "ship")
|
|
|
1322
1398
|
((m = showTracks.value) == null ? void 0 : m.findIndex((u) => u.id === e)) < 0 && showTracks.value.push({ id: e, length: "" });
|
|
1323
1399
|
return;
|
|
1324
1400
|
}
|
|
1325
|
-
|
|
1401
|
+
const l = {};
|
|
1326
1402
|
t.forEach((u) => {
|
|
1327
1403
|
u.state ? u.state = Number(u.state) : delete u.state;
|
|
1328
1404
|
}), trackId.value = e, l[e] = t, trackList.value = t;
|
|
@@ -1335,7 +1411,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, r = "ship")
|
|
|
1335
1411
|
u < 0 ? showTracks.value.push({ id: e, length: d }) : showTracks.value[u].length = d, ++cursor.value, cursor.value > i.length && (cursor.value = 0), renderTrackLine(l, e, n), nextTick(() => {
|
|
1336
1412
|
resetTrackView(e);
|
|
1337
1413
|
}).then(() => {
|
|
1338
|
-
}), (p = mapInstance$
|
|
1414
|
+
}), (p = mapInstance$3.value) == null || p.on("moveend", () => {
|
|
1339
1415
|
showTrackLayer.value && (trackLabels.value = [], renderTrackLine(l, e, n));
|
|
1340
1416
|
}), renderTrackPointPopup();
|
|
1341
1417
|
}).then(() => {
|
|
@@ -1343,10 +1419,10 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, r = "ship")
|
|
|
1343
1419
|
}, renderTrackPointPopup = () => {
|
|
1344
1420
|
var t;
|
|
1345
1421
|
const e = ref(null);
|
|
1346
|
-
(t = mapInstance$
|
|
1422
|
+
(t = mapInstance$3.value) == null || t.on("pointermove", (n) => {
|
|
1347
1423
|
var r, l, i, s;
|
|
1348
|
-
e.value && ((r = mapInstance$
|
|
1349
|
-
const o = (l = mapInstance$
|
|
1424
|
+
e.value && ((r = mapInstance$3.value) == null || r.removeOverlay(e.value));
|
|
1425
|
+
const o = (l = mapInstance$3.value) == null ? void 0 : l.forEachFeatureAtPixel(n.pixel, (c) => c);
|
|
1350
1426
|
if (o) {
|
|
1351
1427
|
const c = o.get("data");
|
|
1352
1428
|
if (!(c != null && c.time)) return;
|
|
@@ -1388,10 +1464,10 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, r = "ship")
|
|
|
1388
1464
|
<div class="item-item">${c.time}</div>
|
|
1389
1465
|
</div>
|
|
1390
1466
|
${d ?? d}
|
|
1391
|
-
</div>`, u = (i = mapInstance$
|
|
1467
|
+
</div>`, u = (i = mapInstance$3.value) == null ? void 0 : i.getPixelFromCoordinate(n.coordinate);
|
|
1392
1468
|
e.value = drawCustomContent(c.time, u, m, "center-center");
|
|
1393
1469
|
} else
|
|
1394
|
-
(s = mapInstance$
|
|
1470
|
+
(s = mapInstance$3.value) == null || s.removeOverlay(e.value);
|
|
1395
1471
|
});
|
|
1396
1472
|
}, removeAllTrackLayer = () => {
|
|
1397
1473
|
var e;
|
|
@@ -1400,7 +1476,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, r = "ship")
|
|
|
1400
1476
|
handlePlay(String(e), t);
|
|
1401
1477
|
}, resetTrackView = (e) => {
|
|
1402
1478
|
var r;
|
|
1403
|
-
const t = mapInstance$
|
|
1479
|
+
const t = mapInstance$3.value.getView(), n = e ? shipTrackLineFeatures.value.find((l) => l.getId() === e) : shipTrackLineFeatures.value[0];
|
|
1404
1480
|
if (!n) return;
|
|
1405
1481
|
const o = (r = n == null ? void 0 : n.getGeometry()) == null ? void 0 : r.getExtent();
|
|
1406
1482
|
if (o != null && o.length)
|
|
@@ -1430,28 +1506,28 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, r = "ship")
|
|
|
1430
1506
|
}, m = () => {
|
|
1431
1507
|
r("switchMapTile", o.mapTileMode === BaseMapType.vector ? BaseMapType.satellite : BaseMapType.vector);
|
|
1432
1508
|
}, u = () => {
|
|
1433
|
-
var
|
|
1434
|
-
i.value ? (
|
|
1509
|
+
var v, g;
|
|
1510
|
+
i.value ? (v = s.value) == null || v.removeInteraction() : (g = s.value) == null || g.addInteraction(), i.value = !i.value;
|
|
1435
1511
|
}, f = () => {
|
|
1436
|
-
var
|
|
1437
|
-
(
|
|
1512
|
+
var v;
|
|
1513
|
+
(v = s.value) == null || v.removeInteraction(), i.value = !1;
|
|
1438
1514
|
};
|
|
1439
1515
|
return onMounted(() => {
|
|
1440
1516
|
nextTick(() => {
|
|
1441
|
-
var
|
|
1442
|
-
(
|
|
1443
|
-
var
|
|
1444
|
-
const g = (
|
|
1517
|
+
var v;
|
|
1518
|
+
(v = n.value) == null || v.on("moveend", () => {
|
|
1519
|
+
var M, S;
|
|
1520
|
+
const g = (S = (M = n.value) == null ? void 0 : M.getView()) == null ? void 0 : S.getZoom();
|
|
1445
1521
|
g && (l.value = g);
|
|
1446
1522
|
});
|
|
1447
1523
|
});
|
|
1448
|
-
}), (
|
|
1524
|
+
}), (v, g) => (openBlock(), createElementBlock(Fragment, null, [
|
|
1449
1525
|
createElementVNode("div", {
|
|
1450
|
-
class: normalizeClass(`tool-panel ${
|
|
1526
|
+
class: normalizeClass(`tool-panel ${v.viewMode}`)
|
|
1451
1527
|
}, [
|
|
1452
|
-
|
|
1528
|
+
v.viewMode === "WxMiniprogram" ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
|
|
1453
1529
|
createElementVNode("div", _hoisted_2$1, [
|
|
1454
|
-
|
|
1530
|
+
v.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
|
|
1455
1531
|
key: 0,
|
|
1456
1532
|
class: normalizeClass(["switch-btn", `${i.value && "active"}`]),
|
|
1457
1533
|
onClick: u
|
|
@@ -1459,50 +1535,50 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, r = "ship")
|
|
|
1459
1535
|
createElementVNode("i", { class: "map-iconfont icon-measure" }, null, -1),
|
|
1460
1536
|
createElementVNode("div", { class: "button-text" }, "测距", -1)
|
|
1461
1537
|
]), 2)) : createCommentVNode("", !0),
|
|
1462
|
-
|
|
1538
|
+
v.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
|
|
1463
1539
|
key: 1,
|
|
1464
|
-
class: normalizeClass(`switch-btn ${c.value && "active"} ${(
|
|
1540
|
+
class: normalizeClass(`switch-btn ${c.value && "active"} ${(v.disableGreenDot || l.value >= unref(mapZoom).shipGreenDotMax) && "disabled"}`),
|
|
1465
1541
|
onClick: d
|
|
1466
1542
|
}, g[6] || (g[6] = [
|
|
1467
1543
|
createElementVNode("i", { class: "map-iconfont icon-ship" }, null, -1),
|
|
1468
1544
|
createElementVNode("div", { class: "button-text" }, "绿点", -1)
|
|
1469
1545
|
]), 2)) : createCommentVNode("", !0),
|
|
1470
|
-
|
|
1546
|
+
v.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
|
|
1471
1547
|
key: 2,
|
|
1472
|
-
class: normalizeClass(`switch-btn ${
|
|
1473
|
-
onClick: g[0] || (g[0] = (
|
|
1548
|
+
class: normalizeClass(`switch-btn ${v.mapTileMode === unref(BaseMapType).satellite && "active"}`),
|
|
1549
|
+
onClick: g[0] || (g[0] = (M) => m())
|
|
1474
1550
|
}, g[7] || (g[7] = [
|
|
1475
1551
|
createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
|
|
1476
1552
|
createElementVNode("div", { class: "button-text" }, "图层", -1)
|
|
1477
1553
|
]), 2)) : createCommentVNode("", !0),
|
|
1478
|
-
|
|
1554
|
+
v.vehicleMode === "truck" ? (openBlock(), createElementBlock("div", {
|
|
1479
1555
|
key: 3,
|
|
1480
|
-
class: normalizeClass(`switch-btn ${
|
|
1481
|
-
onClick: g[1] || (g[1] = (
|
|
1556
|
+
class: normalizeClass(`switch-btn ${v.mapTileMode === unref(BaseMapType).satellite && "active"}`),
|
|
1557
|
+
onClick: g[1] || (g[1] = (M) => m())
|
|
1482
1558
|
}, g[8] || (g[8] = [
|
|
1483
1559
|
createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
|
|
1484
1560
|
createElementVNode("div", { class: "button-text" }, "卫星", -1)
|
|
1485
1561
|
]), 2)) : createCommentVNode("", !0),
|
|
1486
|
-
|
|
1562
|
+
v.showTrackLayer ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [
|
|
1487
1563
|
createElementVNode("div", {
|
|
1488
1564
|
class: "switch-btn multiple",
|
|
1489
|
-
onClick: g[2] || (g[2] = (
|
|
1565
|
+
onClick: g[2] || (g[2] = (M) => unref(playTrack)(unref(currentTrackId), 1))
|
|
1490
1566
|
}, g[9] || (g[9] = [
|
|
1491
1567
|
createElementVNode("i", { class: "map-iconfont icon-play" }, null, -1),
|
|
1492
1568
|
createElementVNode("div", { class: "button-text" }, "播放轨迹", -1)
|
|
1493
1569
|
])),
|
|
1494
1570
|
createElementVNode("div", {
|
|
1495
1571
|
class: "switch-btn multiple",
|
|
1496
|
-
onClick: g[3] || (g[3] = (
|
|
1572
|
+
onClick: g[3] || (g[3] = (M) => unref(resetTrackView)())
|
|
1497
1573
|
}, g[10] || (g[10] = [
|
|
1498
1574
|
createElementVNode("i", { class: "map-iconfont icon-center" }, null, -1),
|
|
1499
1575
|
createElementVNode("div", { class: "button-text" }, "轨迹居中", -1)
|
|
1500
1576
|
]))
|
|
1501
1577
|
], 64)) : createCommentVNode("", !0),
|
|
1502
|
-
renderSlot(
|
|
1578
|
+
renderSlot(v.$slots, "toolPanel", {}, void 0, !0)
|
|
1503
1579
|
])
|
|
1504
1580
|
])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
1505
|
-
|
|
1581
|
+
v.vehicleMode === "ship" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
1506
1582
|
createElementVNode("div", {
|
|
1507
1583
|
class: normalizeClass(["switch-btn", `${i.value && "active"}`]),
|
|
1508
1584
|
onClick: u
|
|
@@ -1510,9 +1586,9 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, r = "ship")
|
|
|
1510
1586
|
createElementVNode("i", { class: "map-iconfont icon-measure" }, null, -1),
|
|
1511
1587
|
createElementVNode("div", { class: "button-text" }, "测距", -1)
|
|
1512
1588
|
]), 2),
|
|
1513
|
-
|
|
1589
|
+
v.vehicleMode === "ship" ? (openBlock(), createElementBlock("div", {
|
|
1514
1590
|
key: 0,
|
|
1515
|
-
class: normalizeClass(`switch-btn ${c.value && "active"} ${(
|
|
1591
|
+
class: normalizeClass(`switch-btn ${c.value && "active"} ${(v.disableGreenDot || l.value >= unref(mapZoom).shipGreenDotMax) && "disabled"}`),
|
|
1516
1592
|
onClick: d
|
|
1517
1593
|
}, g[12] || (g[12] = [
|
|
1518
1594
|
createElementVNode("i", { class: "map-iconfont icon-ship" }, null, -1),
|
|
@@ -1520,7 +1596,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, r = "ship")
|
|
|
1520
1596
|
]), 2)) : createCommentVNode("", !0)
|
|
1521
1597
|
], 64)) : createCommentVNode("", !0),
|
|
1522
1598
|
createElementVNode("div", {
|
|
1523
|
-
class: normalizeClass(["switch-btn", { active:
|
|
1599
|
+
class: normalizeClass(["switch-btn", { active: v.mapTileMode === unref(BaseMapType).satellite }]),
|
|
1524
1600
|
onClick: m
|
|
1525
1601
|
}, g[13] || (g[13] = [
|
|
1526
1602
|
createElementVNode("i", { class: "map-iconfont icon-space" }, null, -1),
|
|
@@ -1534,9 +1610,9 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, r = "ship")
|
|
|
1534
1610
|
ref_key: "measureRef",
|
|
1535
1611
|
ref: s,
|
|
1536
1612
|
visible: i.value,
|
|
1537
|
-
"onUpdate:visible": g[4] || (g[4] = (
|
|
1613
|
+
"onUpdate:visible": g[4] || (g[4] = (M) => i.value = M),
|
|
1538
1614
|
onClose: f,
|
|
1539
|
-
"view-mode":
|
|
1615
|
+
"view-mode": v.viewMode
|
|
1540
1616
|
}, null, 8, ["visible", "view-mode"])) : createCommentVNode("", !0)
|
|
1541
1617
|
])
|
|
1542
1618
|
], 64));
|
|
@@ -1555,7 +1631,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, r = "ship")
|
|
|
1555
1631
|
}
|
|
1556
1632
|
}), (r, l) => (openBlock(), createElementBlock("div", _hoisted_1$2));
|
|
1557
1633
|
}
|
|
1558
|
-
}), ScaleLine = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-
|
|
1634
|
+
}), ScaleLine = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-8c27b246"]]), _hoisted_1$1 = { class: "zoom" }, _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
1559
1635
|
__name: "zoomControl",
|
|
1560
1636
|
props: {
|
|
1561
1637
|
map: {
|
|
@@ -1583,7 +1659,7 @@ const trackId = ref(""), cursor = ref(0), renderTrack = (e, t, n, o, r = "ship")
|
|
|
1583
1659
|
}, "-")
|
|
1584
1660
|
]));
|
|
1585
1661
|
}
|
|
1586
|
-
}), ZoomControl = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-
|
|
1662
|
+
}), ZoomControl = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-f6b3b87d"]]), _hoisted_1 = { class: "copyright" }, _hoisted_2 = { class: "tdt-control-copyright tdt-control" }, _hoisted_3 = ["src"], _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
1587
1663
|
__name: "copyright",
|
|
1588
1664
|
setup(e) {
|
|
1589
1665
|
return (t, n) => (openBlock(), createElementBlock("div", _hoisted_1, [
|
|
@@ -1626,26 +1702,26 @@ const setTruckStyle = (e, t, n, o) => new Style({
|
|
|
1626
1702
|
const m = c - 70, u = d - 68;
|
|
1627
1703
|
let f = 180;
|
|
1628
1704
|
const p = 56, y = "#FFFFFF";
|
|
1629
|
-
let
|
|
1705
|
+
let v = 176;
|
|
1630
1706
|
const g = 52;
|
|
1631
|
-
let
|
|
1632
|
-
n === CAR_COLOR.YELLOW ? (
|
|
1707
|
+
let M = "#164AFF", S = "#FFFFFF";
|
|
1708
|
+
n === CAR_COLOR.YELLOW ? (v = 176, M = "#FFC81E", S = "rgba(0,0,0,0.88)") : n === CAR_COLOR.Y_GREEN && (f = 200, v = 196, M = "#8FED7C", S = "rgba(0,0,0,0.88)"), o != null && o.length && (f += o.length * 56), fillRectRadius(i, m, u, f, p, y), fillRectRadius(i, m + 2, u + 2, v, g, M), n === CAR_COLOR.Y_GREEN && fillRectRadius(i, m + 2, u + 2, 68, g, "#FFC81E"), i.save(), i.restore(), i.fillStyle = S, i.font = "bold 28px Arial", i.textAlign = "left", i.textBaseline = "middle";
|
|
1633
1709
|
const b = `${t.slice(0, 2) + " · " + t.slice(2)}`;
|
|
1634
1710
|
if (i.fillText(b, m + 12, u + 32), i.save(), i.restore(), o != null && o.length) {
|
|
1635
|
-
const
|
|
1636
|
-
let
|
|
1637
|
-
o.forEach((
|
|
1638
|
-
|
|
1711
|
+
const F = i.measureText(b).width + 12;
|
|
1712
|
+
let x = 0;
|
|
1713
|
+
o.forEach((h) => {
|
|
1714
|
+
h === DEVICE_TYPE.CAMERA && (i.drawImage(cameraImage, c - 54 + F + x * 56, d - 64, 50, 50), ++x), h === DEVICE_TYPE.LOAD && (i.drawImage(loadImage, c - 54 + F + x * 56, d - 64, 50, 50), ++x);
|
|
1639
1715
|
});
|
|
1640
1716
|
}
|
|
1641
|
-
const
|
|
1642
|
-
i.drawImage(
|
|
1717
|
+
const C = dotImage$1;
|
|
1718
|
+
i.drawImage(C, c + f / 2 - 90, d, 50 / s, 50 / s), i.restore();
|
|
1643
1719
|
}
|
|
1644
|
-
}), mapInstance$
|
|
1720
|
+
}), mapInstance$2 = ref(), renderDashboardSetInstance = (e) => mapInstance$2.value = e;
|
|
1645
1721
|
ref([]);
|
|
1646
1722
|
let truckMarkerList = [], trucksVectorSource;
|
|
1647
1723
|
const renderTrucksMarker = (e) => {
|
|
1648
|
-
if (deleteAllTruckMarkers(), !!mapInstance$
|
|
1724
|
+
if (deleteAllTruckMarkers(), !!mapInstance$2.value)
|
|
1649
1725
|
return e.forEach((t) => {
|
|
1650
1726
|
const n = formatUtils.convertSixHundredThousandToLatLng(t.lon, t.lat), o = new Feature({
|
|
1651
1727
|
geometry: new Point(fromLonLat(n))
|
|
@@ -1661,17 +1737,17 @@ const renderTrucksMarker = (e) => {
|
|
|
1661
1737
|
features: truckMarkerList.map((t) => t.feature)
|
|
1662
1738
|
}), trucksLayer.value = new VectorLayer({
|
|
1663
1739
|
source: trucksVectorSource
|
|
1664
|
-
}), mapInstance$
|
|
1740
|
+
}), mapInstance$2.value.addLayer(trucksLayer.value), trucksLayer.value;
|
|
1665
1741
|
}, deleteAllTruckMarkers = () => {
|
|
1666
1742
|
truckMarkerList.forEach((e) => {
|
|
1667
1743
|
e.feature && (trucksVectorSource == null || trucksVectorSource.removeFeature(e.feature));
|
|
1668
1744
|
}), truckMarkerList = [];
|
|
1669
|
-
}, mapInstance$
|
|
1670
|
-
if (!mapInstance$
|
|
1745
|
+
}, mapInstance$1 = ref(), renderTruckSetInstance = (e) => mapInstance$1.value = e, vehicle = ref(null), focusShipData = ref(), currentTruckOverlay = ref(null), findTruck = async (e) => {
|
|
1746
|
+
if (!mapInstance$1.value) return;
|
|
1671
1747
|
focusShipData.value = e;
|
|
1672
|
-
const t = formatUtils.convertSixHundredThousandToLatLng(e.lon, e.lat), n = mapInstance$
|
|
1748
|
+
const t = formatUtils.convertSixHundredThousandToLatLng(e.lon, e.lat), n = mapInstance$1.value.getPixelFromCoordinate(transform(t, projection.data, projection.mercator));
|
|
1673
1749
|
currentTruckOverlay.value = drawTruckIcon(e.vno, n, e == null ? void 0 : e.drc);
|
|
1674
|
-
const o = mapInstance$
|
|
1750
|
+
const o = mapInstance$1.value.getView(), r = new Point(t);
|
|
1675
1751
|
o.setCenter(transform(r.getCoordinates(), projection.data, projection.mercator));
|
|
1676
1752
|
}, clearAllTruck = () => {
|
|
1677
1753
|
vehicle.value.clearAllShip();
|
|
@@ -1686,8 +1762,8 @@ const renderTrucksMarker = (e) => {
|
|
|
1686
1762
|
e && (e.innerHTML = "");
|
|
1687
1763
|
}, zoomTruckIcon = () => {
|
|
1688
1764
|
var l;
|
|
1689
|
-
if (!mapInstance$
|
|
1690
|
-
const e = mapInstance$
|
|
1765
|
+
if (!mapInstance$1.value) return;
|
|
1766
|
+
const e = mapInstance$1.value.getView().getZoom(), t = 120, n = 60;
|
|
1691
1767
|
function o(i) {
|
|
1692
1768
|
return i < 14 ? n : i >= 14 && i <= 18 ? Math.round((i - 14) * (t - n) / 4 + n) : t;
|
|
1693
1769
|
}
|
|
@@ -1695,68 +1771,6 @@ const renderTrucksMarker = (e) => {
|
|
|
1695
1771
|
(l = document.querySelectorAll(".truck-custom-content")) == null || l.forEach((i) => {
|
|
1696
1772
|
i.style.width = `${r}px`, i.style.height = `${r}px`;
|
|
1697
1773
|
});
|
|
1698
|
-
}, mapInstance$1 = ref(), renderMarkerSetInstance = (e) => mapInstance$1.value = e, markerPosition = ref(""), marker = ref(), createIconStyle = (e) => new Style({
|
|
1699
|
-
image: new Icon({
|
|
1700
|
-
src: CDN_URL + "map/poi-marker-default.png",
|
|
1701
|
-
anchor: [0.5, 1]
|
|
1702
|
-
}),
|
|
1703
|
-
text: new Text({
|
|
1704
|
-
text: e,
|
|
1705
|
-
offsetY: -90,
|
|
1706
|
-
// 调整文本位置,使其位于标记上方
|
|
1707
|
-
font: "12px",
|
|
1708
|
-
fill: new Fill({
|
|
1709
|
-
color: "#000"
|
|
1710
|
-
}),
|
|
1711
|
-
stroke: new Stroke({
|
|
1712
|
-
color: "#fff",
|
|
1713
|
-
width: 2
|
|
1714
|
-
}),
|
|
1715
|
-
backgroundFill: new Fill({
|
|
1716
|
-
color: "#fff"
|
|
1717
|
-
// 设置文本背景填充颜色
|
|
1718
|
-
}),
|
|
1719
|
-
backgroundStroke: new Stroke({
|
|
1720
|
-
color: "#000",
|
|
1721
|
-
// 设置文本背景描边颜色
|
|
1722
|
-
width: 1
|
|
1723
|
-
}),
|
|
1724
|
-
padding: [2, 2, 2, 2]
|
|
1725
|
-
// 设置文本背景的内边距
|
|
1726
|
-
})
|
|
1727
|
-
}), renderMarker = (e, t = !0, n = !0) => {
|
|
1728
|
-
var m;
|
|
1729
|
-
if (!mapInstance$1.value || !e || e.split(",").length !== 2) return;
|
|
1730
|
-
const [o, r] = e.split(",").map(Number);
|
|
1731
|
-
marker.value = new Feature({
|
|
1732
|
-
geometry: new Point(fromLonLat([o, r]))
|
|
1733
|
-
});
|
|
1734
|
-
const l = n ? `${o}, ${r}` : "";
|
|
1735
|
-
(m = marker.value) == null || m.setStyle(createIconStyle(l));
|
|
1736
|
-
const i = new VectorSource({
|
|
1737
|
-
features: [marker.value]
|
|
1738
|
-
}), s = new VectorLayer({
|
|
1739
|
-
source: i
|
|
1740
|
-
}), c = mapInstance$1.value.getView();
|
|
1741
|
-
if (mapInstance$1.value.addLayer(s), t) {
|
|
1742
|
-
const u = new Translate({
|
|
1743
|
-
layers: [s]
|
|
1744
|
-
});
|
|
1745
|
-
u.on("translating", function(f) {
|
|
1746
|
-
var h;
|
|
1747
|
-
const p = f.features.item(0).getGeometry().getCoordinates(), y = toLonLat(p);
|
|
1748
|
-
markerPosition.value = `${y[0].toFixed(6)}, ${y[1].toFixed(6)}`, (h = marker.value) == null || h.setStyle(createIconStyle(markerPosition.value));
|
|
1749
|
-
}), mapInstance$1.value.addInteraction(u);
|
|
1750
|
-
}
|
|
1751
|
-
const d = new Point([o, r]);
|
|
1752
|
-
c.setCenter(transform(d.getCoordinates(), projection.data, projection.mercator)), c.setZoom(mapZoom.findShip);
|
|
1753
|
-
}, setMarkerPosition = (e) => {
|
|
1754
|
-
var r, l;
|
|
1755
|
-
if (!mapInstance$1.value) return;
|
|
1756
|
-
const t = mapInstance$1.value.getView(), n = e.split(",").map(Number);
|
|
1757
|
-
(l = (r = marker.value) == null ? void 0 : r.getGeometry()) == null || l.setCoordinates(fromLonLat([n[0], n[1]]));
|
|
1758
|
-
const o = new Point([n[0], n[1]]);
|
|
1759
|
-
t.setCenter(transform(o.getCoordinates(), projection.data, projection.mercator));
|
|
1760
1774
|
}, mapInstance = ref(), drawPolygonSetInstance = (e) => mapInstance.value = e;
|
|
1761
1775
|
let layerState = "drawn", drawnState = "undrawn";
|
|
1762
1776
|
const source = new VectorSource();
|
|
@@ -1813,10 +1827,7 @@ const addInteraction = (e) => {
|
|
|
1813
1827
|
draw.on("drawstart", function(l) {
|
|
1814
1828
|
var i;
|
|
1815
1829
|
layerState = "drawn", sketch = l.feature, n = (i = sketch.getGeometry()) == null ? void 0 : i.on("change", function(s) {
|
|
1816
|
-
const c = s.target;
|
|
1817
|
-
let d = formatUtils.formatArea(c, LENGTH_UNIT.NM);
|
|
1818
|
-
const u = c.getCoordinates()[0], f = new LineString([u[u.length - 2], u[u.length - 1]]);
|
|
1819
|
-
let p = formatUtils.formatLength(f, LENGTH_UNIT.NM);
|
|
1830
|
+
const c = s.target, d = formatUtils.formatArea(c, LENGTH_UNIT.NM), u = c.getCoordinates()[0], f = new LineString([u[u.length - 2], u[u.length - 1]]), p = formatUtils.formatLength(f, LENGTH_UNIT.NM);
|
|
1820
1831
|
if (lineLimitError = Number(getLength(f) / 1e3) > 150, validateSquareLimit(u), measureTooltipElement && d && (measureTooltipElement.innerHTML = `
|
|
1821
1832
|
<span class="text">面积:${d}${lineLimitError || squareLimitError ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
|
|
1822
1833
|
`), helpTooltipElement && d) {
|
|
@@ -1922,190 +1933,7 @@ const addInteraction = (e) => {
|
|
|
1922
1933
|
removeInteraction,
|
|
1923
1934
|
initFeature,
|
|
1924
1935
|
reset
|
|
1925
|
-
},
|
|
1926
|
-
__name: "Map",
|
|
1927
|
-
props: {
|
|
1928
|
-
zoom: {},
|
|
1929
|
-
center: {},
|
|
1930
|
-
vehicleMode: {},
|
|
1931
|
-
viewMode: {},
|
|
1932
|
-
mmsi: {},
|
|
1933
|
-
shipData: {}
|
|
1934
|
-
},
|
|
1935
|
-
emits: ["zoomChanged", "extentChanged"],
|
|
1936
|
-
setup(e, { expose: t, emit: n }) {
|
|
1937
|
-
const o = ref();
|
|
1938
|
-
provide("mapInstance", o);
|
|
1939
|
-
const r = ref(null), l = ref(null), i = ref(null), s = n, c = e, d = ref(c.zoom || mapZoom.default), m = ref(!1), u = ref(!0), f = ref(!0);
|
|
1940
|
-
let p;
|
|
1941
|
-
((v) => {
|
|
1942
|
-
v[v.tiandituTile = new TileLayer({ source: new XYZ({ url: baseMap.tiandituTile }) })] = "tiandituTile", v[v.tiandituTileMark = new TileLayer({ source: new XYZ({ url: baseMap.tiandituTileMark }) })] = "tiandituTileMark", v[v.tiandituImgTile = new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTile }), visible: !1 })] = "tiandituImgTile", v[v.tiandituImgTileMark = new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTileMark }), visible: !1 })] = "tiandituImgTileMark", v[v.greenMark = new TileLayer({ source: new XYZ({ url: baseMap.greenTile }) })] = "greenMark";
|
|
1943
|
-
})(p || (p = {}));
|
|
1944
|
-
const y = () => {
|
|
1945
|
-
var k, w;
|
|
1946
|
-
const v = {
|
|
1947
|
-
projection: projection.mercator,
|
|
1948
|
-
// 地图投影坐标系
|
|
1949
|
-
zoom: c.zoom || (c.vehicleMode === "ship" ? mapZoom.default : mapZoom.truckDefault),
|
|
1950
|
-
// 地图缩放级别(打开页面时默认级别)
|
|
1951
|
-
minZoom: mapZoom.min,
|
|
1952
|
-
// 地图缩放最小级别
|
|
1953
|
-
maxZoom: mapZoom.max,
|
|
1954
|
-
// 地图缩放最大级别
|
|
1955
|
-
center: transformUtils.lonLatToMercator(c.center || mapDefaultCenter),
|
|
1956
|
-
// 地图中心坐标
|
|
1957
|
-
constrainResolution: !0,
|
|
1958
|
-
// 需设为true禁用平滑缩放,zoom值为整数
|
|
1959
|
-
enableRotation: !1,
|
|
1960
|
-
// 禁用旋转
|
|
1961
|
-
multiWorld: !0
|
|
1962
|
-
};
|
|
1963
|
-
o.value = new Map$1({
|
|
1964
|
-
target: "map",
|
|
1965
|
-
// 对应页面里 id 为 map 的元素
|
|
1966
|
-
layers: [
|
|
1967
|
-
// 图层
|
|
1968
|
-
p.tiandituTile,
|
|
1969
|
-
p.tiandituTileMark,
|
|
1970
|
-
p.tiandituImgTile,
|
|
1971
|
-
p.tiandituImgTileMark,
|
|
1972
|
-
p.greenMark
|
|
1973
|
-
],
|
|
1974
|
-
view: new View(v)
|
|
1975
|
-
}), h(), (k = l.value) == null || k.setScaleLine(c.vehicleMode === "ship" && "nautical"), (w = o.value) == null || w.on("moveend", b), g(v.zoom < mapZoom.shipGreenDotMax), M(c.vehicleMode === "ship" || c.viewMode === "findShip" ? BaseMapType.satellite : BaseMapType.vector), c.viewMode === "findShip" && c.mmsi && c.shipData && nextTick(() => {
|
|
1976
|
-
findShip(String(c.mmsi), c.shipData);
|
|
1977
|
-
});
|
|
1978
|
-
};
|
|
1979
|
-
onMounted(() => {
|
|
1980
|
-
y();
|
|
1981
|
-
});
|
|
1982
|
-
const h = () => {
|
|
1983
|
-
o.value && (renderCustomOverlaySetInstance(o.value), renderTruckSetInstance(o.value), drawPolygonSetInstance(o.value), renderShipStyleSetInstance(o.value), renderTrackStyleSetInstance(o.value), renderDashboardSetInstance(o.value), renderMarkerSetInstance(o.value), renderShipSetInstance(o.value), renderTrackSetInstance(o.value));
|
|
1984
|
-
}, g = (v) => {
|
|
1985
|
-
var k;
|
|
1986
|
-
c.vehicleMode !== "ship" && (v = !1), (k = o.value) == null || k.getLayers().forEach((w) => {
|
|
1987
|
-
w.ol_uid === p.greenMark.ol_uid && (w.setVisible(v), u.value = v);
|
|
1988
|
-
});
|
|
1989
|
-
}, T = ref(BaseMapType.satellite), M = (v) => {
|
|
1990
|
-
var k;
|
|
1991
|
-
T.value = v, (k = o.value) == null || k.getLayers().forEach((w) => {
|
|
1992
|
-
(w.ol_uid === p.tiandituTile.ol_uid || w.ol_uid === p.tiandituTileMark.ol_uid || w.ol_uid === p.tiandituImgTile.ol_uid || w.ol_uid === p.tiandituImgTileMark.ol_uid) && w.setVisible(!1), (v === BaseMapType.vector && (w.ol_uid === p.tiandituTile.ol_uid || w.ol_uid === p.tiandituTileMark.ol_uid) || v === BaseMapType.satellite && (w.ol_uid === p.tiandituImgTile.ol_uid || w.ol_uid === p.tiandituImgTileMark.ol_uid)) && w.setVisible(!0);
|
|
1993
|
-
});
|
|
1994
|
-
}, b = () => {
|
|
1995
|
-
const v = o.value.getView(), k = v.getZoom();
|
|
1996
|
-
k && E(k);
|
|
1997
|
-
const w = v.calculateExtent(o.value.getSize());
|
|
1998
|
-
w && k && x(w, k);
|
|
1999
|
-
}, E = (v) => {
|
|
2000
|
-
var C, L, S, V, F;
|
|
2001
|
-
d.value = v, g(v < mapZoom.shipGreenDotMax);
|
|
2002
|
-
const k = (C = o.value) == null ? void 0 : C.getLayers(), w = c.vehicleMode === "ship" ? k == null ? void 0 : k.getArray().find(($) => $.ol_uid === p.greenMark.ol_uid) : void 0;
|
|
2003
|
-
showTrackLayer.value ? (f.value = !1, w == null || w.setVisible(!1), (L = shipsLayer.value) == null || L.setVisible(!1), (S = largeAmountShipsLayer.value) == null || S.setVisible(!1)) : !m.value && u.value && v <= mapZoom.shipGreenDotMax ? (f.value = !0, w == null || w.setVisible(!0), (V = shipsLayer.value) == null || V.setVisible(!1), (F = largeAmountShipsLayer.value) == null || F.setVisible(!1)) : (f.value = !1, w == null || w.setVisible(!1)), s("zoomChanged", v);
|
|
2004
|
-
}, x = (v, k) => {
|
|
2005
|
-
const w = transform([v[0], v[1]], projection.mercator, projection.data), C = transform([v[2], v[3]], projection.mercator, projection.data);
|
|
2006
|
-
s("extentChanged", { extent: [w, C], zoom: k });
|
|
2007
|
-
};
|
|
2008
|
-
return t({
|
|
2009
|
-
mapInstance: o,
|
|
2010
|
-
initMap: y,
|
|
2011
|
-
renderTrucksMarker,
|
|
2012
|
-
renderShip: renderShips,
|
|
2013
|
-
renderTrack: (v, k, w) => {
|
|
2014
|
-
var C, L;
|
|
2015
|
-
currentTrackId.value = v, showTrackLayer.value = !0, m.value = !0, hiddenAllShips(), (L = (C = largeAmountShipsLayer.value) == null ? void 0 : C.getSource()) == null || L.clear(), renderTrack(v, k, w, LENGTH_UNIT.NM);
|
|
2016
|
-
},
|
|
2017
|
-
findTruck,
|
|
2018
|
-
removeTruckIcon,
|
|
2019
|
-
clearAllTruck,
|
|
2020
|
-
closeTrack: () => {
|
|
2021
|
-
var v, k;
|
|
2022
|
-
showTrackLayer.value = !1, (v = shipTrackVectorLayer.value) == null || v.setVisible(!1), (k = selectShipsLayer.value) == null || k.setVisible(!0), m.value = !1, g(d.value < mapZoom.shipGreenDotMax), allTracks.value = [], stopAnimation();
|
|
2023
|
-
},
|
|
2024
|
-
closeTruckTrack: () => {
|
|
2025
|
-
var v, k;
|
|
2026
|
-
showTrackLayer.value = !1, (v = shipTrackVectorLayer.value) == null || v.setVisible(!1), (k = selectShipsLayer.value) == null || k.setVisible(!0), stopAnimation();
|
|
2027
|
-
},
|
|
2028
|
-
resetTrackView,
|
|
2029
|
-
playTrack,
|
|
2030
|
-
clearSelectFeature,
|
|
2031
|
-
findShip,
|
|
2032
|
-
focusShip: (v, k, w = !0) => {
|
|
2033
|
-
var C, L;
|
|
2034
|
-
hiddenOrther.value = w, (C = shipsLayer.value) == null || C.setVisible(!w), (L = largeAmountShipsLayer.value) == null || L.setVisible(!1), findShip(v, k);
|
|
2035
|
-
},
|
|
2036
|
-
showTracks,
|
|
2037
|
-
removeAllTrackLayer,
|
|
2038
|
-
switchFilterItem,
|
|
2039
|
-
rerenderShip,
|
|
2040
|
-
switchGreenDot: () => g(!1),
|
|
2041
|
-
zoomTruckIcon,
|
|
2042
|
-
renderTruckTrack: (v, k, w) => {
|
|
2043
|
-
showTrackLayer.value = !0, renderTrack(v, k, w, LENGTH_UNIT.KM, "truck");
|
|
2044
|
-
},
|
|
2045
|
-
removerLayer: removeShipTrackLineFeatureByIndex,
|
|
2046
|
-
renderMarker,
|
|
2047
|
-
setMarkerPosition,
|
|
2048
|
-
getZoomAndCenter: () => {
|
|
2049
|
-
var L;
|
|
2050
|
-
const v = (L = o.value) == null ? void 0 : L.getView();
|
|
2051
|
-
if (!v) return null;
|
|
2052
|
-
const k = Math.round(Number(v.getZoom())), { lon: w, lat: C } = transformUtils.mercatorToLonLat(v.getCenter());
|
|
2053
|
-
return { zoom: k, center: [w, C] };
|
|
2054
|
-
},
|
|
2055
|
-
setCenter: (v) => {
|
|
2056
|
-
var C;
|
|
2057
|
-
const k = (C = o.value) == null ? void 0 : C.getView();
|
|
2058
|
-
if (!k) return null;
|
|
2059
|
-
const w = new Point(v);
|
|
2060
|
-
k.setCenter(transform(w.getCoordinates(), projection.data, projection.mercator));
|
|
2061
|
-
},
|
|
2062
|
-
drawPolygonTool,
|
|
2063
|
-
setMapInstance: h,
|
|
2064
|
-
config: {
|
|
2065
|
-
mapZoom,
|
|
2066
|
-
projection
|
|
2067
|
-
},
|
|
2068
|
-
utils: {
|
|
2069
|
-
transform: transformUtils,
|
|
2070
|
-
format: formatUtils
|
|
2071
|
-
}
|
|
2072
|
-
}), (v, k) => (openBlock(), createElementBlock("div", {
|
|
2073
|
-
class: "map-page map-container",
|
|
2074
|
-
ref_key: "pageRef",
|
|
2075
|
-
ref: r
|
|
2076
|
-
}, [
|
|
2077
|
-
k[0] || (k[0] = createElementVNode("div", {
|
|
2078
|
-
id: "map",
|
|
2079
|
-
class: "map"
|
|
2080
|
-
}, null, -1)),
|
|
2081
|
-
createVNode(ToolPanel, {
|
|
2082
|
-
"vehicle-mode": v.vehicleMode,
|
|
2083
|
-
"view-mode": v.viewMode,
|
|
2084
|
-
"disable-green-dot": m.value,
|
|
2085
|
-
"show-track-layer": unref(showTrackLayer),
|
|
2086
|
-
"map-tile-mode": T.value,
|
|
2087
|
-
onSwitchGreenDot: g,
|
|
2088
|
-
onSwitchMapTile: M
|
|
2089
|
-
}, {
|
|
2090
|
-
toolPanel: withCtx(() => [
|
|
2091
|
-
renderSlot(v.$slots, "toolPanel", {}, void 0, !0)
|
|
2092
|
-
]),
|
|
2093
|
-
_: 3
|
|
2094
|
-
}, 8, ["vehicle-mode", "view-mode", "disable-green-dot", "show-track-layer", "map-tile-mode"]),
|
|
2095
|
-
v.viewMode !== "WxMiniprogram" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
2096
|
-
createVNode(ScaleLine, {
|
|
2097
|
-
ref_key: "scaleLineControl",
|
|
2098
|
-
ref: l
|
|
2099
|
-
}, null, 512),
|
|
2100
|
-
createVNode(ZoomControl, {
|
|
2101
|
-
ref_key: "zoomControl",
|
|
2102
|
-
ref: i
|
|
2103
|
-
}, null, 512)
|
|
2104
|
-
], 64)) : createCommentVNode("", !0),
|
|
2105
|
-
createVNode(Copyright)
|
|
2106
|
-
], 512));
|
|
2107
|
-
}
|
|
2108
|
-
}), Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d4bd9364"]]), dotImage = new Image();
|
|
1936
|
+
}, dotImage = new Image();
|
|
2109
1937
|
dotImage.crossOrigin = "anonymous";
|
|
2110
1938
|
const dotActiveImage = new Image();
|
|
2111
1939
|
dotActiveImage.crossOrigin = "anonymous";
|
|
@@ -2115,12 +1943,12 @@ const setPointStyle = (e, t, n) => {
|
|
|
2115
1943
|
renderer: (s, c) => {
|
|
2116
1944
|
const d = c.context;
|
|
2117
1945
|
d.save();
|
|
2118
|
-
|
|
1946
|
+
const m = 1;
|
|
2119
1947
|
d.scale(m, m);
|
|
2120
1948
|
let [u, f] = s;
|
|
2121
1949
|
u = u / m, f = f / m, d.font = "12px Arial";
|
|
2122
|
-
const p = d.measureText(t).width, y = u - p / 2,
|
|
2123
|
-
if (fillRectRadius(d, y,
|
|
1950
|
+
const p = d.measureText(t).width, y = u - p / 2, v = f - 10, g = p + 4, M = 20, S = e && i || o;
|
|
1951
|
+
if (fillRectRadius(d, y, v + 30, g, M, S), d.save(), d.restore(), d.fillStyle = e ? "#FFFFFF" : "#000000", d.textAlign = "center", d.textBaseline = "middle", d.fillText(t, y + (p + 4) / 2, v + 41), d.save(), d.restore(), r || l) {
|
|
2124
1952
|
const b = e ? dotActiveImage : dotImage;
|
|
2125
1953
|
d.drawImage(b, u - b.width / 2, f - b.height / 2, 40 / m, 40 / m);
|
|
2126
1954
|
}
|
|
@@ -2263,12 +2091,197 @@ class PointMarkerClass {
|
|
|
2263
2091
|
l.setCenter(transform(s.getCoordinates(), projection.data, projection.mercator));
|
|
2264
2092
|
}
|
|
2265
2093
|
}
|
|
2266
|
-
const
|
|
2094
|
+
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
2095
|
+
__name: "Map",
|
|
2096
|
+
props: {
|
|
2097
|
+
zoom: {},
|
|
2098
|
+
center: {},
|
|
2099
|
+
vehicleMode: {},
|
|
2100
|
+
viewMode: {},
|
|
2101
|
+
mmsi: {},
|
|
2102
|
+
shipData: {}
|
|
2103
|
+
},
|
|
2104
|
+
emits: ["zoomChanged", "extentChanged"],
|
|
2105
|
+
setup(e, { expose: t, emit: n }) {
|
|
2106
|
+
const o = ref();
|
|
2107
|
+
provide("mapInstance", o);
|
|
2108
|
+
const r = ref(null), l = ref(null), i = ref(null), s = n, c = e, d = ref(c.zoom || mapZoom.default), m = ref(!1), u = ref(!0), f = ref(!0);
|
|
2109
|
+
let p;
|
|
2110
|
+
((h) => {
|
|
2111
|
+
h[h.tiandituTile = new TileLayer({ source: new XYZ({ url: baseMap.tiandituTile }) })] = "tiandituTile", h[h.tiandituTileMark = new TileLayer({ source: new XYZ({ url: baseMap.tiandituTileMark }) })] = "tiandituTileMark", h[h.tiandituImgTile = new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTile }), visible: !1 })] = "tiandituImgTile", h[h.tiandituImgTileMark = new TileLayer({ source: new XYZ({ url: baseMap.tiandituImgTileMark }), visible: !1 })] = "tiandituImgTileMark", h[h.greenMark = new TileLayer({ source: new XYZ({ url: baseMap.greenTile }) })] = "greenMark";
|
|
2112
|
+
})(p || (p = {}));
|
|
2113
|
+
const y = () => {
|
|
2114
|
+
var w, k;
|
|
2115
|
+
const h = {
|
|
2116
|
+
projection: projection.mercator,
|
|
2117
|
+
// 地图投影坐标系
|
|
2118
|
+
zoom: c.zoom || (c.vehicleMode === "ship" ? mapZoom.default : mapZoom.truckDefault),
|
|
2119
|
+
// 地图缩放级别(打开页面时默认级别)
|
|
2120
|
+
minZoom: mapZoom.min,
|
|
2121
|
+
// 地图缩放最小级别
|
|
2122
|
+
maxZoom: mapZoom.max,
|
|
2123
|
+
// 地图缩放最大级别
|
|
2124
|
+
center: transformUtils.lonLatToMercator(c.center || mapDefaultCenter),
|
|
2125
|
+
// 地图中心坐标
|
|
2126
|
+
constrainResolution: !0,
|
|
2127
|
+
// 需设为true禁用平滑缩放,zoom值为整数
|
|
2128
|
+
enableRotation: !1,
|
|
2129
|
+
// 禁用旋转
|
|
2130
|
+
multiWorld: !0
|
|
2131
|
+
};
|
|
2132
|
+
o.value = new Map$1({
|
|
2133
|
+
target: "map",
|
|
2134
|
+
// 对应页面里 id 为 map 的元素
|
|
2135
|
+
layers: [
|
|
2136
|
+
// 图层
|
|
2137
|
+
p.tiandituTile,
|
|
2138
|
+
p.tiandituTileMark,
|
|
2139
|
+
p.tiandituImgTile,
|
|
2140
|
+
p.tiandituImgTileMark,
|
|
2141
|
+
p.greenMark
|
|
2142
|
+
],
|
|
2143
|
+
view: new View(h)
|
|
2144
|
+
}), v(), (w = l.value) == null || w.setScaleLine(c.vehicleMode === "ship" && "nautical"), (k = o.value) == null || k.on("moveend", b), g(h.zoom < mapZoom.shipGreenDotMax), S(c.vehicleMode === "ship" || c.viewMode === "findShip" ? BaseMapType.satellite : BaseMapType.vector), c.viewMode === "findShip" && c.mmsi && c.shipData && nextTick(() => {
|
|
2145
|
+
findShip(String(c.mmsi), c.shipData);
|
|
2146
|
+
});
|
|
2147
|
+
};
|
|
2148
|
+
onMounted(() => {
|
|
2149
|
+
y();
|
|
2150
|
+
});
|
|
2151
|
+
const v = () => {
|
|
2152
|
+
o.value && (renderCustomOverlaySetInstance(o.value), renderTruckSetInstance(o.value), drawPolygonSetInstance(o.value), renderShipStyleSetInstance(o.value), renderTrackStyleSetInstance(o.value), renderDashboardSetInstance(o.value), renderMarkerSetInstance(o.value), renderShipSetInstance(o.value), renderTrackSetInstance(o.value));
|
|
2153
|
+
}, g = (h) => {
|
|
2154
|
+
var w;
|
|
2155
|
+
c.vehicleMode !== "ship" && (h = !1), (w = o.value) == null || w.getLayers().forEach((k) => {
|
|
2156
|
+
k.ol_uid === p.greenMark.ol_uid && (k.setVisible(h), u.value = h);
|
|
2157
|
+
});
|
|
2158
|
+
}, M = ref(BaseMapType.satellite), S = (h) => {
|
|
2159
|
+
var w;
|
|
2160
|
+
M.value = h, (w = o.value) == null || w.getLayers().forEach((k) => {
|
|
2161
|
+
(k.ol_uid === p.tiandituTile.ol_uid || k.ol_uid === p.tiandituTileMark.ol_uid || k.ol_uid === p.tiandituImgTile.ol_uid || k.ol_uid === p.tiandituImgTileMark.ol_uid) && k.setVisible(!1), (h === BaseMapType.vector && (k.ol_uid === p.tiandituTile.ol_uid || k.ol_uid === p.tiandituTileMark.ol_uid) || h === BaseMapType.satellite && (k.ol_uid === p.tiandituImgTile.ol_uid || k.ol_uid === p.tiandituImgTileMark.ol_uid)) && k.setVisible(!0);
|
|
2162
|
+
});
|
|
2163
|
+
}, b = () => {
|
|
2164
|
+
const h = o.value.getView(), w = h.getZoom();
|
|
2165
|
+
w && C(w);
|
|
2166
|
+
const k = h.calculateExtent(o.value.getSize());
|
|
2167
|
+
k && w && F(k, w);
|
|
2168
|
+
}, C = (h) => {
|
|
2169
|
+
var L, T, E, V, $;
|
|
2170
|
+
d.value = h, g(h < mapZoom.shipGreenDotMax);
|
|
2171
|
+
const w = (L = o.value) == null ? void 0 : L.getLayers(), k = c.vehicleMode === "ship" ? w == null ? void 0 : w.getArray().find((N) => N.ol_uid === p.greenMark.ol_uid) : void 0;
|
|
2172
|
+
showTrackLayer.value ? (f.value = !1, k == null || k.setVisible(!1), (T = shipsLayer.value) == null || T.setVisible(!1), (E = largeAmountShipsLayer.value) == null || E.setVisible(!1)) : !m.value && u.value && h <= mapZoom.shipGreenDotMax ? (f.value = !0, k == null || k.setVisible(!0), (V = shipsLayer.value) == null || V.setVisible(!1), ($ = largeAmountShipsLayer.value) == null || $.setVisible(!1)) : (f.value = !1, k == null || k.setVisible(!1)), s("zoomChanged", h);
|
|
2173
|
+
}, F = (h, w) => {
|
|
2174
|
+
const k = transform([h[0], h[1]], projection.mercator, projection.data), L = transform([h[2], h[3]], projection.mercator, projection.data);
|
|
2175
|
+
s("extentChanged", { extent: [k, L], zoom: w });
|
|
2176
|
+
};
|
|
2177
|
+
return t({
|
|
2178
|
+
mapInstance: o,
|
|
2179
|
+
initMap: y,
|
|
2180
|
+
pointRender: (h, w) => new PointMarkerClass(h, w),
|
|
2181
|
+
renderTrucksMarker,
|
|
2182
|
+
renderShip: renderShips,
|
|
2183
|
+
renderTrack: (h, w, k) => {
|
|
2184
|
+
var L, T;
|
|
2185
|
+
currentTrackId.value = h, showTrackLayer.value = !0, m.value = !0, hiddenAllShips(), (T = (L = largeAmountShipsLayer.value) == null ? void 0 : L.getSource()) == null || T.clear(), renderTrack(h, w, k, LENGTH_UNIT.NM);
|
|
2186
|
+
},
|
|
2187
|
+
findTruck,
|
|
2188
|
+
removeTruckIcon,
|
|
2189
|
+
clearAllTruck,
|
|
2190
|
+
closeTrack: () => {
|
|
2191
|
+
var h, w;
|
|
2192
|
+
showTrackLayer.value = !1, (h = shipTrackVectorLayer.value) == null || h.setVisible(!1), (w = selectShipsLayer.value) == null || w.setVisible(!0), m.value = !1, g(d.value < mapZoom.shipGreenDotMax), allTracks.value = [], stopAnimation();
|
|
2193
|
+
},
|
|
2194
|
+
closeTruckTrack: () => {
|
|
2195
|
+
var h, w;
|
|
2196
|
+
showTrackLayer.value = !1, (h = shipTrackVectorLayer.value) == null || h.setVisible(!1), (w = selectShipsLayer.value) == null || w.setVisible(!0), stopAnimation();
|
|
2197
|
+
},
|
|
2198
|
+
resetTrackView,
|
|
2199
|
+
playTrack,
|
|
2200
|
+
clearSelectFeature,
|
|
2201
|
+
findShip,
|
|
2202
|
+
focusShip: (h, w, k = !0) => {
|
|
2203
|
+
var L, T;
|
|
2204
|
+
hiddenOrther.value = k, (L = shipsLayer.value) == null || L.setVisible(!k), (T = largeAmountShipsLayer.value) == null || T.setVisible(!1), findShip(h, w);
|
|
2205
|
+
},
|
|
2206
|
+
showTracks,
|
|
2207
|
+
removeAllTrackLayer,
|
|
2208
|
+
switchFilterItem,
|
|
2209
|
+
rerenderShip,
|
|
2210
|
+
switchGreenDot: () => g(!1),
|
|
2211
|
+
zoomTruckIcon,
|
|
2212
|
+
renderTruckTrack: (h, w, k) => {
|
|
2213
|
+
showTrackLayer.value = !0, renderTrack(h, w, k, LENGTH_UNIT.KM, "truck");
|
|
2214
|
+
},
|
|
2215
|
+
removerLayer: removeShipTrackLineFeatureByIndex,
|
|
2216
|
+
renderMarker,
|
|
2217
|
+
setMarkerPosition: (h) => {
|
|
2218
|
+
m.value = !0, setMarkerPosition(h);
|
|
2219
|
+
},
|
|
2220
|
+
getZoomAndCenter: () => {
|
|
2221
|
+
var T;
|
|
2222
|
+
const h = (T = o.value) == null ? void 0 : T.getView();
|
|
2223
|
+
if (!h) return null;
|
|
2224
|
+
const w = Math.round(Number(h.getZoom())), { lon: k, lat: L } = transformUtils.mercatorToLonLat(h.getCenter());
|
|
2225
|
+
return { zoom: w, center: [k, L] };
|
|
2226
|
+
},
|
|
2227
|
+
setCenter: (h) => {
|
|
2228
|
+
var L;
|
|
2229
|
+
const w = (L = o.value) == null ? void 0 : L.getView();
|
|
2230
|
+
if (!w) return null;
|
|
2231
|
+
const k = new Point(h);
|
|
2232
|
+
w.setCenter(transform(k.getCoordinates(), projection.data, projection.mercator));
|
|
2233
|
+
},
|
|
2234
|
+
drawPolygonTool,
|
|
2235
|
+
setMapInstance: v,
|
|
2236
|
+
config: {
|
|
2237
|
+
mapZoom,
|
|
2238
|
+
projection
|
|
2239
|
+
},
|
|
2240
|
+
utils: {
|
|
2241
|
+
transform: transformUtils,
|
|
2242
|
+
format: formatUtils
|
|
2243
|
+
}
|
|
2244
|
+
}), (h, w) => (openBlock(), createElementBlock("div", {
|
|
2245
|
+
class: "map-page map-container",
|
|
2246
|
+
ref_key: "pageRef",
|
|
2247
|
+
ref: r
|
|
2248
|
+
}, [
|
|
2249
|
+
w[0] || (w[0] = createElementVNode("div", {
|
|
2250
|
+
id: "map",
|
|
2251
|
+
class: "map"
|
|
2252
|
+
}, null, -1)),
|
|
2253
|
+
createVNode(ToolPanel, {
|
|
2254
|
+
"vehicle-mode": h.vehicleMode,
|
|
2255
|
+
"view-mode": h.viewMode,
|
|
2256
|
+
"disable-green-dot": m.value,
|
|
2257
|
+
"show-track-layer": unref(showTrackLayer),
|
|
2258
|
+
"map-tile-mode": M.value,
|
|
2259
|
+
onSwitchGreenDot: g,
|
|
2260
|
+
onSwitchMapTile: S
|
|
2261
|
+
}, {
|
|
2262
|
+
toolPanel: withCtx(() => [
|
|
2263
|
+
renderSlot(h.$slots, "toolPanel", {}, void 0, !0)
|
|
2264
|
+
]),
|
|
2265
|
+
_: 3
|
|
2266
|
+
}, 8, ["vehicle-mode", "view-mode", "disable-green-dot", "show-track-layer", "map-tile-mode"]),
|
|
2267
|
+
h.viewMode !== "WxMiniprogram" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
2268
|
+
createVNode(ScaleLine, {
|
|
2269
|
+
ref_key: "scaleLineControl",
|
|
2270
|
+
ref: l
|
|
2271
|
+
}, null, 512),
|
|
2272
|
+
createVNode(ZoomControl, {
|
|
2273
|
+
ref_key: "zoomControl",
|
|
2274
|
+
ref: i
|
|
2275
|
+
}, null, 512)
|
|
2276
|
+
], 64)) : createCommentVNode("", !0),
|
|
2277
|
+
createVNode(Copyright)
|
|
2278
|
+
], 512));
|
|
2279
|
+
}
|
|
2280
|
+
}), Map = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-26faf1d8"]]), ZhMap = withInstall(Map);
|
|
2267
2281
|
export {
|
|
2268
2282
|
CDN_URL as C,
|
|
2269
2283
|
DEFAULT_VALUE as D,
|
|
2270
2284
|
LOG_DATE_FORMAT as L,
|
|
2271
|
-
PointMarkerClass as P,
|
|
2272
2285
|
ZhMap as Z,
|
|
2273
2286
|
mapDefaultCenter as a,
|
|
2274
2287
|
baseMap as b,
|