zhihao-ui 1.3.24 → 1.3.25
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-CtnFy-Kw.js → Map-Bh-1qBu4.js} +737 -712
- package/dist/es/index.js +1 -1
- package/dist/umd/index.umd.cjs +16 -16
- package/package.json +1 -1
|
@@ -4,16 +4,16 @@ import { _ as _export_sfc } from "./Button-CGndQwez.js";
|
|
|
4
4
|
import { w as withInstall } from "./utils-D2wHR1YB.js";
|
|
5
5
|
const _hoisted_1$2 = { id: "scale-line-container" }, _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
6
6
|
__name: "scaleLine",
|
|
7
|
-
setup(e, { expose:
|
|
8
|
-
return
|
|
9
|
-
setScaleLine: (
|
|
10
|
-
|
|
7
|
+
setup(e, { expose: i }) {
|
|
8
|
+
return i({
|
|
9
|
+
setScaleLine: (l, a) => {
|
|
10
|
+
a || (a = "metric");
|
|
11
11
|
const o = new ScaleLine$1({
|
|
12
|
-
units:
|
|
13
|
-
}),
|
|
14
|
-
|
|
12
|
+
units: a
|
|
13
|
+
}), f = document.getElementById("scale-line-container");
|
|
14
|
+
f && (o.setTarget(f), l.addControl(o));
|
|
15
15
|
}
|
|
16
|
-
}), (
|
|
16
|
+
}), (l, a) => (openBlock(), createElementBlock("div", _hoisted_1$2));
|
|
17
17
|
}
|
|
18
18
|
}), ScaleLine = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-2bc5dee8"]]), _hoisted_1$1 = { class: "zoom" }, _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
19
19
|
__name: "zoomControl",
|
|
@@ -24,28 +24,28 @@ const _hoisted_1$2 = { id: "scale-line-container" }, _sfc_main$2 = /* @__PURE__
|
|
|
24
24
|
}
|
|
25
25
|
},
|
|
26
26
|
setup(e) {
|
|
27
|
-
const
|
|
28
|
-
console.log("props",
|
|
27
|
+
const i = e;
|
|
28
|
+
console.log("props", i);
|
|
29
29
|
const n = () => {
|
|
30
30
|
console.log("props");
|
|
31
|
-
const { setZoom:
|
|
32
|
-
if (!
|
|
31
|
+
const { setZoom: a, getZoom: o, getInstall: f } = i.mapInstance.methods;
|
|
32
|
+
if (!f()) return;
|
|
33
33
|
const t = o();
|
|
34
|
-
t &&
|
|
35
|
-
},
|
|
36
|
-
const { setZoom:
|
|
37
|
-
if (!
|
|
34
|
+
t && a(t + 1);
|
|
35
|
+
}, l = () => {
|
|
36
|
+
const { setZoom: a, getZoom: o, getInstall: f } = i.mapInstance.methods;
|
|
37
|
+
if (!f()) return;
|
|
38
38
|
const t = o();
|
|
39
|
-
t &&
|
|
39
|
+
t && a(t - 1);
|
|
40
40
|
};
|
|
41
|
-
return (
|
|
41
|
+
return (a, o) => (openBlock(), createElementBlock("div", _hoisted_1$1, [
|
|
42
42
|
createElementVNode("div", {
|
|
43
43
|
class: "button big-button",
|
|
44
44
|
onClick: n
|
|
45
45
|
}, " + "),
|
|
46
46
|
createElementVNode("div", {
|
|
47
47
|
class: "button small-button",
|
|
48
|
-
onClick:
|
|
48
|
+
onClick: l
|
|
49
49
|
}, " - ")
|
|
50
50
|
]));
|
|
51
51
|
}
|
|
@@ -72,25 +72,25 @@ const _hoisted_1$2 = { id: "scale-line-container" }, _sfc_main$2 = /* @__PURE__
|
|
|
72
72
|
}, MAP_DEFAULT_CENTER = [114.84, 30.52], CDN_URL = "https://static.zhihaoscm.cn/", equatorialCircumference = 2003750834e-2;
|
|
73
73
|
var BASE_MAP_LINK = ((e) => (e.vectorTile = `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=${TIAN_DI_TU_KEY}`, e.vectorTileMark = `https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIAN_DI_TU_KEY}`, e.satelliteImgTile = `https://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIAN_DI_TU_KEY}`, e.satelliteImgTileMark = `https://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TIAN_DI_TU_KEY}`, e.greenTile = `${CDN_URL}/map/tile/{z}/{x}/{y}.png`, e))(BASE_MAP_LINK || {}), LENGTH_UNIT = /* @__PURE__ */ ((e) => (e[e.M = 1] = "M", e[e.KM = 2] = "KM", e[e.NM = 3] = "NM", e))(LENGTH_UNIT || {});
|
|
74
74
|
function useMapInitializer() {
|
|
75
|
-
const e = ref(),
|
|
75
|
+
const e = ref(), i = () => e.value, n = () => i().getView(), l = () => {
|
|
76
76
|
var m;
|
|
77
77
|
return (m = n()) == null ? void 0 : m.getZoom();
|
|
78
|
-
},
|
|
78
|
+
}, a = (m) => {
|
|
79
79
|
var F;
|
|
80
80
|
(F = n()) == null || F.setZoom(m);
|
|
81
81
|
}, o = (m, F) => {
|
|
82
|
-
var
|
|
83
|
-
(
|
|
84
|
-
},
|
|
82
|
+
var O;
|
|
83
|
+
(O = n()) == null || O.setCenter(fromLonLat([m, F]));
|
|
84
|
+
}, f = () => {
|
|
85
85
|
var F;
|
|
86
86
|
const m = (F = n()) == null ? void 0 : F.getCenter();
|
|
87
87
|
return toLonLat(m);
|
|
88
|
-
},
|
|
88
|
+
}, p = () => {
|
|
89
89
|
var m;
|
|
90
|
-
return (m =
|
|
90
|
+
return (m = i()) == null ? void 0 : m.getSize();
|
|
91
91
|
}, t = new Map$2(), r = (m, F) => {
|
|
92
|
-
|
|
93
|
-
const
|
|
92
|
+
L(F);
|
|
93
|
+
const O = {
|
|
94
94
|
zoom: F.zoom,
|
|
95
95
|
center: fromLonLat(F.center),
|
|
96
96
|
minZoom: MAP_ZOOM.min,
|
|
@@ -109,10 +109,10 @@ function useMapInitializer() {
|
|
|
109
109
|
t.get("satelliteImgTile"),
|
|
110
110
|
t.get("satelliteImgTileMark")
|
|
111
111
|
],
|
|
112
|
-
view: new View(
|
|
112
|
+
view: new View(O)
|
|
113
113
|
});
|
|
114
114
|
e.value = v;
|
|
115
|
-
},
|
|
115
|
+
}, L = (m) => {
|
|
116
116
|
t.set("vectorTile", new TileLayer({
|
|
117
117
|
source: new XYZ({ url: BASE_MAP_LINK.vectorTile }),
|
|
118
118
|
visible: m.layerType === "vector",
|
|
@@ -145,85 +145,85 @@ function useMapInitializer() {
|
|
|
145
145
|
}));
|
|
146
146
|
};
|
|
147
147
|
return {
|
|
148
|
-
getInstall:
|
|
148
|
+
getInstall: i,
|
|
149
149
|
getView: n,
|
|
150
|
-
getZoom:
|
|
151
|
-
setZoom:
|
|
150
|
+
getZoom: l,
|
|
151
|
+
setZoom: a,
|
|
152
152
|
setCenter: o,
|
|
153
|
-
getCenter:
|
|
154
|
-
getSize:
|
|
153
|
+
getCenter: f,
|
|
154
|
+
getSize: p,
|
|
155
155
|
initMap: r,
|
|
156
|
-
setBaseLayerMap:
|
|
156
|
+
setBaseLayerMap: L
|
|
157
157
|
};
|
|
158
158
|
}
|
|
159
|
-
const convertSixHundredThousandToLatLng = function(e,
|
|
160
|
-
const n = Number(
|
|
159
|
+
const convertSixHundredThousandToLatLng = function(e, i) {
|
|
160
|
+
const n = Number(i) / 6e5;
|
|
161
161
|
return [Number(e) / 6e5, n];
|
|
162
|
-
}, calculateCirclePoints = (e,
|
|
163
|
-
const n = fromLonLat(e),
|
|
164
|
-
n[0] -
|
|
165
|
-
n[1] -
|
|
166
|
-
n[0] +
|
|
167
|
-
n[1] +
|
|
168
|
-
], o = transformExtent(
|
|
162
|
+
}, calculateCirclePoints = (e, i) => {
|
|
163
|
+
const n = fromLonLat(e), l = i * 1e3, a = [
|
|
164
|
+
n[0] - l,
|
|
165
|
+
n[1] - l,
|
|
166
|
+
n[0] + l,
|
|
167
|
+
n[1] + l
|
|
168
|
+
], o = transformExtent(a, projection.mercator, projection.data);
|
|
169
169
|
return {
|
|
170
170
|
leftTopPoint: { lng: o[0], lat: o[3] },
|
|
171
171
|
rightTopPoint: { lng: o[2], lat: o[3] },
|
|
172
172
|
rightBottomPoint: { lng: o[2], lat: o[1] },
|
|
173
173
|
leftBottomPoint: { lng: o[0], lat: o[1] }
|
|
174
174
|
};
|
|
175
|
-
}, formatLength = function(e,
|
|
176
|
-
const
|
|
177
|
-
let
|
|
178
|
-
switch (console.log(
|
|
175
|
+
}, formatLength = function(e, i) {
|
|
176
|
+
const l = getLength(e);
|
|
177
|
+
let a = "";
|
|
178
|
+
switch (console.log(i, LENGTH_UNIT), i) {
|
|
179
179
|
case LENGTH_UNIT.M:
|
|
180
|
-
|
|
180
|
+
a = Math.round(l * 100) / 100 + " m";
|
|
181
181
|
break;
|
|
182
182
|
case LENGTH_UNIT.KM:
|
|
183
|
-
|
|
183
|
+
a = Math.round(l / 1e3 * 100) / 100 + " km";
|
|
184
184
|
break;
|
|
185
185
|
case LENGTH_UNIT.NM:
|
|
186
|
-
|
|
186
|
+
a = (Math.round(l / 1e3 * 100) / 100 / 1.852).toFixed(2) + " nm";
|
|
187
187
|
break;
|
|
188
188
|
}
|
|
189
|
-
return
|
|
189
|
+
return a;
|
|
190
190
|
};
|
|
191
191
|
function lonLatToMercator(e) {
|
|
192
|
-
const
|
|
192
|
+
const i = e[0] * equatorialCircumference / 180;
|
|
193
193
|
let n = Math.log(Math.tan((90 + e[1]) * Math.PI / 360)) / (Math.PI / 180);
|
|
194
|
-
return n = n * equatorialCircumference / 180, [
|
|
194
|
+
return n = n * equatorialCircumference / 180, [i, n];
|
|
195
195
|
}
|
|
196
196
|
function getIconFont(unicode = "") {
|
|
197
197
|
return unicode.indexOf("&") !== -1 && (unicode = unicode.replace("&", "&")), unicode.indexOf("&") !== -1 && (unicode = unicode.replace("&", "&")), eval('("' + unicode.replace("&#x", "\\u").replace(";", "") + '")');
|
|
198
198
|
}
|
|
199
199
|
const getIconStyle = (e) => {
|
|
200
|
-
const
|
|
200
|
+
const i = new Text({
|
|
201
201
|
font: "Normal 14px map-iconfont",
|
|
202
202
|
text: getIconFont(e),
|
|
203
203
|
fill: new Fill({ color: "#fff" }),
|
|
204
204
|
offsetY: -14
|
|
205
205
|
});
|
|
206
206
|
return new Style({
|
|
207
|
-
text:
|
|
207
|
+
text: i,
|
|
208
208
|
zIndex: 100
|
|
209
209
|
});
|
|
210
|
-
}, mercatorToLonLat = (e,
|
|
211
|
-
const n = { lon: 0, lat: 0 },
|
|
212
|
-
let
|
|
213
|
-
return
|
|
210
|
+
}, mercatorToLonLat = (e, i = "lonlat") => {
|
|
211
|
+
const n = { lon: 0, lat: 0 }, l = e[0] / equatorialCircumference * 180;
|
|
212
|
+
let a = e[1] / equatorialCircumference * 180;
|
|
213
|
+
return a = 180 / Math.PI * (2 * Math.atan(Math.exp(a * Math.PI / 180)) - Math.PI / 2), n.lon = l, n.lat = a, i === "lonlat" ? n : [l, a];
|
|
214
214
|
}, formatMinutesToDDHHMM = (e) => {
|
|
215
|
-
const
|
|
216
|
-
let o = `${String(
|
|
217
|
-
return
|
|
218
|
-
}, useCarTrackManager = (e,
|
|
215
|
+
const i = hooks.duration(e, "minutes"), n = Math.floor(i.asDays()), l = i.hours(), a = i.minutes();
|
|
216
|
+
let o = `${String(a).padStart(2, "0")}分`;
|
|
217
|
+
return l !== 0 && (o = `${String(l).padStart(2, "0")}时${o}`), n !== 0 && (o = `${String(n).padStart(2, "0")}天${o}`), o;
|
|
218
|
+
}, useCarTrackManager = (e, i) => {
|
|
219
219
|
let n = null;
|
|
220
|
-
const
|
|
221
|
-
if (!e || (console.log("vehicleInfo",
|
|
222
|
-
const m = Math.abs(Number(
|
|
223
|
-
|
|
224
|
-
const F = e == null ? void 0 : e.getView(),
|
|
225
|
-
F.setCenter(transform(
|
|
226
|
-
},
|
|
220
|
+
const l = async (L) => {
|
|
221
|
+
if (!e || (console.log("vehicleInfo", L), !(L != null && L.lon && (L != null && L.lat)))) return;
|
|
222
|
+
const m = Math.abs(Number(L.lon)) > 180 ? convertSixHundredThousandToLatLng(L.lon, L.lat) : [L.lon, L.lat];
|
|
223
|
+
a(L, fromLonLat(m));
|
|
224
|
+
const F = e == null ? void 0 : e.getView(), O = new Point(m);
|
|
225
|
+
F.setCenter(transform(O.getCoordinates(), projection.data, projection.mercator));
|
|
226
|
+
}, a = (L, m) => {
|
|
227
227
|
const F = `${CDN_URL}map/car-icon.gif`;
|
|
228
228
|
n || (n = new Overlay({
|
|
229
229
|
element: document.createElement("div"),
|
|
@@ -231,75 +231,75 @@ const getIconStyle = (e) => {
|
|
|
231
231
|
stopEvent: !1
|
|
232
232
|
// 允许交互事件穿透
|
|
233
233
|
}), e.addOverlay(n));
|
|
234
|
-
const
|
|
235
|
-
|
|
236
|
-
const v = (
|
|
237
|
-
|
|
234
|
+
const O = n.getElement();
|
|
235
|
+
O.style.backgroundImage = `url(${F})`, O.style.width = "80px", O.style.height = "80px";
|
|
236
|
+
const v = (L == null ? void 0 : L.drc) || "";
|
|
237
|
+
O.style.transform = `rotate(${v}deg)`, O.style.backgroundSize = "cover", n == null || n.setPosition(m);
|
|
238
238
|
};
|
|
239
239
|
return {
|
|
240
|
-
location:
|
|
240
|
+
location: l,
|
|
241
241
|
remove: () => {
|
|
242
|
-
const
|
|
243
|
-
|
|
242
|
+
const L = n == null ? void 0 : n.getElement();
|
|
243
|
+
L && (L.innerHTML = "");
|
|
244
244
|
},
|
|
245
|
-
renderTrack: (
|
|
246
|
-
|
|
245
|
+
renderTrack: (L, m, F) => {
|
|
246
|
+
i.render(L, m, F, "truck", 1e3);
|
|
247
247
|
},
|
|
248
|
-
setCenter: (
|
|
249
|
-
|
|
248
|
+
setCenter: (L) => {
|
|
249
|
+
i.setCenter(L);
|
|
250
250
|
},
|
|
251
251
|
closeTrack: () => {
|
|
252
|
-
|
|
252
|
+
i.close();
|
|
253
253
|
},
|
|
254
|
-
playTrack: (
|
|
255
|
-
|
|
254
|
+
playTrack: (L, m) => {
|
|
255
|
+
i.play(L, m);
|
|
256
256
|
}
|
|
257
257
|
};
|
|
258
258
|
};
|
|
259
259
|
var 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 || {}), SHIP_DIRECT = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.front = "front", e.up = "up", e.down = "down", e.back = "back", e))(SHIP_DIRECT || {});
|
|
260
260
|
const useTrackManager = (e) => {
|
|
261
|
-
const
|
|
262
|
-
let
|
|
263
|
-
const
|
|
261
|
+
const i = /* @__PURE__ */ new Map(), n = {};
|
|
262
|
+
let l = null;
|
|
263
|
+
const a = "--";
|
|
264
264
|
let o = null;
|
|
265
|
-
const
|
|
266
|
-
element:
|
|
265
|
+
const f = document.createElement("div"), p = new Overlay({
|
|
266
|
+
element: f,
|
|
267
267
|
positioning: "top-left",
|
|
268
268
|
stopEvent: !1,
|
|
269
269
|
className: "track-label-popup"
|
|
270
270
|
});
|
|
271
|
-
let t, r,
|
|
271
|
+
let t, r, L, m, F, O = !1, v = Date.now(), w, C = 0, k = null, x = 20, Z = !1;
|
|
272
272
|
const B = 5, Y = [], j = (s) => {
|
|
273
273
|
var d;
|
|
274
274
|
for (Y.unshift(s); Y.length > B; ) {
|
|
275
|
-
const g = Y.pop(),
|
|
276
|
-
|
|
275
|
+
const g = Y.pop(), M = i.get(g);
|
|
276
|
+
M && ((d = M.getSource()) == null || d.clear(), e == null || e.removeLayer(M), i.delete(g), delete n[g]);
|
|
277
277
|
}
|
|
278
278
|
};
|
|
279
|
-
let
|
|
280
|
-
const z = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"],
|
|
281
|
-
if (
|
|
279
|
+
let D = "";
|
|
280
|
+
const z = ["#ff0000", "#00ff00", "#0079ff", "#ffa500", "#800080", "#008080", "#ffc0cb", "#800000", "#000080", "#808000"], c = debounce(() => {
|
|
281
|
+
if (l && n[l] && i.get(l).getVisible() && Z) {
|
|
282
282
|
console.log("reRenderTrackLine------------");
|
|
283
|
-
const s = cloneDeep(u(
|
|
284
|
-
le(
|
|
283
|
+
const s = cloneDeep(u(l, n[l]));
|
|
284
|
+
le(l, s);
|
|
285
285
|
}
|
|
286
286
|
}, 300), u = (s, d) => {
|
|
287
287
|
let g = [];
|
|
288
|
-
const
|
|
289
|
-
return g = d.filter((
|
|
290
|
-
if (Number(
|
|
291
|
-
const [V, G] = convertSixHundredThousandToLatLng(
|
|
292
|
-
|
|
288
|
+
const M = Math.max(1, Math.floor(d.length / x));
|
|
289
|
+
return g = d.filter((S, R) => R % M === 0).map((S, R) => {
|
|
290
|
+
if (Number(S.lon) > 180 || Number(S.lat) > 180) {
|
|
291
|
+
const [V, G] = convertSixHundredThousandToLatLng(S.lon, S.lat);
|
|
292
|
+
S.lon = V, S.lat = G;
|
|
293
293
|
}
|
|
294
|
-
return
|
|
294
|
+
return S.center = [S.lon, S.lat], S.centerPoint = lonLatToMercator(S.center), S.time = hooks(S.createdAt).format("YYYY-MM-DD HH:mm:ss"), S.id = s, S.index = R, S;
|
|
295
295
|
}), g;
|
|
296
|
-
},
|
|
297
|
-
if (console.log("renderTrackLine--------", s, d, g), !e || JSON.stringify(n[s]) === JSON.stringify(d) &&
|
|
296
|
+
}, y = async (s, d, g, M = "ship", E = 200) => {
|
|
297
|
+
if (console.log("renderTrackLine--------", s, d, g), !e || JSON.stringify(n[s]) === JSON.stringify(d) && l === s || (d = d == null ? void 0 : d.reverse(), p && M === "ship" && (e != null && e.getOverlays().getArray().includes(p) || e.addOverlay(p)), (d == null ? void 0 : d.length) < 2))
|
|
298
298
|
return;
|
|
299
|
-
j(s),
|
|
300
|
-
const
|
|
301
|
-
|
|
302
|
-
},
|
|
299
|
+
j(s), l = s, n[s] = d, x = E;
|
|
300
|
+
const S = Object.keys(n).findIndex((R) => R === s) || 0;
|
|
301
|
+
D = g || z[S > 10 ? 10 : S], Z = !0, await N(), await ae(l);
|
|
302
|
+
}, T = (s) => {
|
|
303
303
|
const d = new VectorSource();
|
|
304
304
|
return new VectorLayer({
|
|
305
305
|
source: d,
|
|
@@ -309,47 +309,47 @@ const useTrackManager = (e) => {
|
|
|
309
309
|
renderBuffer: 1024
|
|
310
310
|
// 增大渲染缓冲区
|
|
311
311
|
});
|
|
312
|
-
},
|
|
313
|
-
|
|
312
|
+
}, b = (s) => {
|
|
313
|
+
i.forEach((d, g) => {
|
|
314
314
|
var E;
|
|
315
|
-
const
|
|
316
|
-
d.getVisible() !==
|
|
317
|
-
}),
|
|
318
|
-
},
|
|
319
|
-
const s =
|
|
320
|
-
if (!
|
|
321
|
-
const
|
|
322
|
-
|
|
315
|
+
const M = g === s;
|
|
316
|
+
d.getVisible() !== M && (d.setVisible(M), e.getLayers().getArray().includes(d) || e.addLayer(d), M || (E = d.getSource()) == null || E.clear());
|
|
317
|
+
}), l = s;
|
|
318
|
+
}, N = async () => {
|
|
319
|
+
const s = l;
|
|
320
|
+
if (!i.has(s)) {
|
|
321
|
+
const S = T(s);
|
|
322
|
+
i.set(s, S);
|
|
323
323
|
}
|
|
324
|
-
await
|
|
325
|
-
const d =
|
|
324
|
+
await b(s);
|
|
325
|
+
const d = D || "", g = n[s] || [];
|
|
326
326
|
if (!(g && g.length > 1)) return [];
|
|
327
|
-
let
|
|
328
|
-
|
|
329
|
-
const E =
|
|
330
|
-
|
|
331
|
-
},
|
|
332
|
-
const
|
|
333
|
-
if (
|
|
334
|
-
|
|
327
|
+
let M = [];
|
|
328
|
+
M = u(s, g);
|
|
329
|
+
const E = M.map((S) => S.centerPoint);
|
|
330
|
+
M.length >= 2 && await $(s, E, d);
|
|
331
|
+
}, $ = (s, d, g) => {
|
|
332
|
+
const M = new LineString(d), E = i.get(s).getSource(), S = E.getFeatureById(s);
|
|
333
|
+
if (S)
|
|
334
|
+
S.setGeometry(M), S.setId(s), S.setStyle(A(g)), k = S;
|
|
335
335
|
else {
|
|
336
|
-
const R = new Feature({ geometry:
|
|
337
|
-
R.setId(s), R.set("type", "line"), R.setStyle(A(g)), E.addFeature(R),
|
|
336
|
+
const R = new Feature({ geometry: M });
|
|
337
|
+
R.setId(s), R.set("type", "line"), R.setStyle(A(g)), E.addFeature(R), k = R;
|
|
338
338
|
}
|
|
339
|
-
return
|
|
339
|
+
return k;
|
|
340
340
|
}, A = (s) => new Style({
|
|
341
341
|
stroke: new Stroke({
|
|
342
342
|
color: s,
|
|
343
343
|
width: 2
|
|
344
344
|
})
|
|
345
345
|
}), _ = (s, d, g) => {
|
|
346
|
-
const
|
|
347
|
-
if (s &&
|
|
348
|
-
e.getTargetElement().style.cursor =
|
|
349
|
-
const E = s.get("data"),
|
|
350
|
-
R && (
|
|
346
|
+
const M = s == null ? void 0 : s.get("trackId");
|
|
347
|
+
if (s && M && d === "hover") {
|
|
348
|
+
e.getTargetElement().style.cursor = M ? "pointer" : "";
|
|
349
|
+
const E = s.get("data"), S = J(E), R = g == null ? void 0 : g.coordinate;
|
|
350
|
+
R && (f.querySelector(".popup-content"), f.innerHTML = S, p == null || p.setPosition(R));
|
|
351
351
|
} else
|
|
352
|
-
|
|
352
|
+
p && p.setPosition(void 0);
|
|
353
353
|
}, J = (s) => {
|
|
354
354
|
if (!(s != null && s.time)) return;
|
|
355
355
|
let d = "";
|
|
@@ -362,27 +362,27 @@ const useTrackManager = (e) => {
|
|
|
362
362
|
<div class="track-point-popup">
|
|
363
363
|
<div class="item">
|
|
364
364
|
<div class="item-label">状态</div>
|
|
365
|
-
<div class="item-item">${s != null && s.sailStatus ? SHIP_SAIL_STATUS[s.sailStatus] :
|
|
365
|
+
<div class="item-item">${s != null && s.sailStatus ? SHIP_SAIL_STATUS[s.sailStatus] : a}</div>
|
|
366
366
|
</div>
|
|
367
367
|
<div class="item">
|
|
368
368
|
<div class="item-label">航速</div>
|
|
369
|
-
<div class="item-item">${s.speed ||
|
|
369
|
+
<div class="item-item">${s.speed || a}</div>
|
|
370
370
|
</div>
|
|
371
371
|
<div class="item">
|
|
372
372
|
<div class="item-label">艏向</div>
|
|
373
|
-
<div class="item-item">${s.hdg ||
|
|
373
|
+
<div class="item-item">${s.hdg || a}</div>
|
|
374
374
|
</div>
|
|
375
375
|
<div class="item">
|
|
376
376
|
<div class="item-label">航向</div>
|
|
377
|
-
<div class="item-item">${s.cog ||
|
|
377
|
+
<div class="item-item">${s.cog || a}</div>
|
|
378
378
|
</div>
|
|
379
379
|
<div class="item">
|
|
380
380
|
<div class="item-label">经度</div>
|
|
381
|
-
<div class="item-item">${s.lon ||
|
|
381
|
+
<div class="item-item">${s.lon || a}</div>
|
|
382
382
|
</div>
|
|
383
383
|
<div class="item">
|
|
384
384
|
<div class="item-label">纬度</div>
|
|
385
|
-
<div class="item-item">${s.lat ||
|
|
385
|
+
<div class="item-item">${s.lat || a}</div>
|
|
386
386
|
</div>
|
|
387
387
|
<div class="item w-100">
|
|
388
388
|
<div class="item-label">时间</div>
|
|
@@ -401,32 +401,32 @@ const useTrackManager = (e) => {
|
|
|
401
401
|
// 先初始化,后续计算
|
|
402
402
|
};
|
|
403
403
|
});
|
|
404
|
-
let
|
|
404
|
+
let M = 0;
|
|
405
405
|
g[0].distance = 0;
|
|
406
406
|
for (let V = 1; V < g.length; V++) {
|
|
407
|
-
const G = g[V - 1].pixel, W = g[V].pixel, q = W[0] - G[0],
|
|
408
|
-
|
|
407
|
+
const G = g[V - 1].pixel, W = g[V].pixel, q = W[0] - G[0], P = W[1] - G[1];
|
|
408
|
+
M += Math.sqrt(q * q + P * P), g[V].distance = M;
|
|
409
409
|
}
|
|
410
410
|
const E = g.filter(
|
|
411
411
|
(V, G) => G === 0 || G === g.length - 1
|
|
412
|
-
),
|
|
412
|
+
), S = [];
|
|
413
413
|
for (let V = 0; V < E.length; V++) {
|
|
414
414
|
const G = E[V];
|
|
415
|
-
if (
|
|
416
|
-
const W = E[V + 1], q = W.distance - G.distance,
|
|
417
|
-
for (let H = 1; H <=
|
|
415
|
+
if (S.push(G), V < E.length - 1) {
|
|
416
|
+
const W = E[V + 1], q = W.distance - G.distance, P = Math.floor(q / 100);
|
|
417
|
+
for (let H = 1; H <= P; H++) {
|
|
418
418
|
const X = G.distance + H * 100;
|
|
419
419
|
if (X >= W.distance) break;
|
|
420
420
|
const K = U(
|
|
421
421
|
g,
|
|
422
422
|
X
|
|
423
423
|
);
|
|
424
|
-
K &&
|
|
424
|
+
K && S.push(K);
|
|
425
425
|
}
|
|
426
426
|
}
|
|
427
427
|
}
|
|
428
428
|
return Array.from(
|
|
429
|
-
new Map(
|
|
429
|
+
new Map(S.map((V) => [V.distance.toFixed(2), V])).values()
|
|
430
430
|
).map((V) => ({
|
|
431
431
|
...V.original,
|
|
432
432
|
// 优先保留原始数据
|
|
@@ -440,11 +440,11 @@ const useTrackManager = (e) => {
|
|
|
440
440
|
};
|
|
441
441
|
function U(s, d) {
|
|
442
442
|
for (let g = 1; g < s.length; g++) {
|
|
443
|
-
const
|
|
444
|
-
if (d >=
|
|
445
|
-
const
|
|
443
|
+
const M = s[g - 1], E = s[g];
|
|
444
|
+
if (d >= M.distance && d <= E.distance) {
|
|
445
|
+
const S = (d - M.distance) / (E.distance - M.distance), R = M.pixel[0] + S * (E.pixel[0] - M.pixel[0]), V = M.pixel[1] + S * (E.pixel[1] - M.pixel[1]), G = e == null ? void 0 : e.getCoordinateFromPixel([R, V]);
|
|
446
446
|
return {
|
|
447
|
-
...
|
|
447
|
+
...M,
|
|
448
448
|
// 继承前一个点的属性(可调整)
|
|
449
449
|
coord: G,
|
|
450
450
|
pixel: [R, V],
|
|
@@ -457,10 +457,10 @@ const useTrackManager = (e) => {
|
|
|
457
457
|
return null;
|
|
458
458
|
}
|
|
459
459
|
const le = async (s, d) => {
|
|
460
|
-
await
|
|
461
|
-
const g = Q(d),
|
|
462
|
-
|
|
463
|
-
const R = ee(s,
|
|
460
|
+
await ce(), await ge(s);
|
|
461
|
+
const g = Q(d), M = g.map((S) => I(S));
|
|
462
|
+
i.get(s).getSource().addFeatures(M), he(s, g, d, D), g.forEach((S) => {
|
|
463
|
+
const R = ee(s, D, S);
|
|
464
464
|
e.addOverlay(R);
|
|
465
465
|
});
|
|
466
466
|
}, I = (s) => {
|
|
@@ -470,12 +470,12 @@ const useTrackManager = (e) => {
|
|
|
470
470
|
});
|
|
471
471
|
d.set("type", "track_point"), d.set("trackId", s.id), d.set("data", s);
|
|
472
472
|
let g = [
|
|
473
|
-
...fe(s,
|
|
473
|
+
...fe(s, D)
|
|
474
474
|
];
|
|
475
|
-
return (s.index === 0 || s.index === n[s.id].length - 1) && (g = [...
|
|
475
|
+
return (s.index === 0 || s.index === n[s.id].length - 1) && (g = [...ve(s)], d.set("type", "track_begin")), s.state !== void 0 && s.state !== null && (g = [...ye(s)], d.set("type", "track_icon")), d.setStyle(g), d;
|
|
476
476
|
}, ee = (s, d, g) => {
|
|
477
|
-
const
|
|
478
|
-
|
|
477
|
+
const M = document.createElement("div");
|
|
478
|
+
M.className = "track-overlay-label", M.style.position = "relative", M.style.backgroundColor = "rgba(255,255,255,0.8)", M.style.border = `1px solid ${d}`, M.style.fontSize = "12px", M.innerHTML = `
|
|
479
479
|
<span>${g.time}</span>
|
|
480
480
|
<svg
|
|
481
481
|
style="position: absolute;left: -20px;top: 0;"
|
|
@@ -489,7 +489,7 @@ const useTrackManager = (e) => {
|
|
|
489
489
|
stroke-width="1" />
|
|
490
490
|
`;
|
|
491
491
|
const E = new Overlay({
|
|
492
|
-
element:
|
|
492
|
+
element: M,
|
|
493
493
|
position: fromLonLat(g.center),
|
|
494
494
|
positioning: "top-left",
|
|
495
495
|
offset: [20, -20],
|
|
@@ -497,13 +497,13 @@ const useTrackManager = (e) => {
|
|
|
497
497
|
className: "track-label-time-overlay"
|
|
498
498
|
});
|
|
499
499
|
return E.set("class", "track-label-overlay"), E.set("trackId", s), E;
|
|
500
|
-
},
|
|
500
|
+
}, ce = () => {
|
|
501
501
|
const s = e == null ? void 0 : e.getOverlays().getArray(), d = s == null ? void 0 : s.filter((g) => g.get("class") === "track-label-overlay");
|
|
502
502
|
d && d.length > 0 && d.forEach((g) => {
|
|
503
503
|
g.setPosition(void 0), g.dispose();
|
|
504
504
|
});
|
|
505
505
|
}, ge = (s) => {
|
|
506
|
-
const d =
|
|
506
|
+
const d = i.get(s).getSource();
|
|
507
507
|
d.forEachFeature((g) => {
|
|
508
508
|
g.get("type") !== "line" && d.removeFeature(g);
|
|
509
509
|
});
|
|
@@ -525,10 +525,10 @@ const useTrackManager = (e) => {
|
|
|
525
525
|
})
|
|
526
526
|
// textStyle,
|
|
527
527
|
]), ye = (s) => {
|
|
528
|
-
const d = "#E31818", g = "#1890FF",
|
|
528
|
+
const d = "#E31818", g = "#1890FF", M = "", E = new Style({
|
|
529
529
|
text: new Text({
|
|
530
530
|
font: "Normal 22px map-iconfont",
|
|
531
|
-
text: getIconFont(
|
|
531
|
+
text: getIconFont(M),
|
|
532
532
|
offsetY: -10,
|
|
533
533
|
fill: new Fill({
|
|
534
534
|
color: Number(s.state) === 0 ? d : Number(s.state) === 1 ? g : ""
|
|
@@ -537,17 +537,17 @@ const useTrackManager = (e) => {
|
|
|
537
537
|
zIndex: 99
|
|
538
538
|
}), R = getIconStyle(""), G = getIconStyle(""), W = [];
|
|
539
539
|
return Number(s.state) === 0 ? W.push(R) : Number(s.state) === 1 && W.push(G), W.push(E), W;
|
|
540
|
-
}, he = (s, d, g,
|
|
541
|
-
const E = d || [],
|
|
542
|
-
|
|
540
|
+
}, he = (s, d, g, M) => {
|
|
541
|
+
const E = d || [], S = d.length;
|
|
542
|
+
S || (E.push(g[0]), E.push(g[g.length - 1]));
|
|
543
543
|
const R = [];
|
|
544
|
-
for (let G = 0; G <
|
|
544
|
+
for (let G = 0; G < S - 1; G++) {
|
|
545
545
|
let W;
|
|
546
|
-
const q = d[G],
|
|
547
|
-
if (
|
|
548
|
-
W = g[
|
|
546
|
+
const q = d[G], P = (d[G + 1].index + q.index) / 2;
|
|
547
|
+
if (P % 2 === 0)
|
|
548
|
+
W = g[P].centerPoint;
|
|
549
549
|
else {
|
|
550
|
-
const H = g[Math.floor(
|
|
550
|
+
const H = g[Math.floor(P)], X = g[Math.ceil(P)];
|
|
551
551
|
if (H && X) {
|
|
552
552
|
const [K, oe] = H.centerPoint, [re, ne] = X.centerPoint;
|
|
553
553
|
W = [(K + re) / 2, (oe + ne) / 2];
|
|
@@ -562,7 +562,7 @@ const useTrackManager = (e) => {
|
|
|
562
562
|
text: new Text({
|
|
563
563
|
font: "700 12px map-iconfont",
|
|
564
564
|
text: getIconFont(""),
|
|
565
|
-
fill: new Fill({ color:
|
|
565
|
+
fill: new Fill({ color: M }),
|
|
566
566
|
// 设置箭头旋转 角度转为弧度
|
|
567
567
|
rotation: de(
|
|
568
568
|
d[G].center,
|
|
@@ -573,13 +573,13 @@ const useTrackManager = (e) => {
|
|
|
573
573
|
), R.push(H);
|
|
574
574
|
}
|
|
575
575
|
}
|
|
576
|
-
const V =
|
|
576
|
+
const V = i.get(s).getSource();
|
|
577
577
|
V == null || V.addFeatures(R);
|
|
578
|
-
},
|
|
579
|
-
var
|
|
580
|
-
const d = e.getView(), g = (
|
|
581
|
-
if (!
|
|
582
|
-
const E = (R =
|
|
578
|
+
}, ae = (s) => {
|
|
579
|
+
var S, R;
|
|
580
|
+
const d = e.getView(), g = (S = i == null ? void 0 : i.get(s)) == null ? void 0 : S.getSource(), M = k || (s ? g == null ? void 0 : g.getFeatureById(s) : null);
|
|
581
|
+
if (!M) return;
|
|
582
|
+
const E = (R = M == null ? void 0 : M.getGeometry()) == null ? void 0 : R.getExtent();
|
|
583
583
|
if (E != null && E.length)
|
|
584
584
|
try {
|
|
585
585
|
const V = buffer(E, Math.max(E[2] - E[0], E[3] - E[1]) * 0.02);
|
|
@@ -587,7 +587,7 @@ const useTrackManager = (e) => {
|
|
|
587
587
|
} catch (V) {
|
|
588
588
|
console.log(V);
|
|
589
589
|
}
|
|
590
|
-
},
|
|
590
|
+
}, ve = (s) => {
|
|
591
591
|
const d = "", E = s.index === 0 ? "#fcdc3f" : "#ff0000";
|
|
592
592
|
return [new Style({
|
|
593
593
|
text: new Text({
|
|
@@ -597,35 +597,35 @@ const useTrackManager = (e) => {
|
|
|
597
597
|
}),
|
|
598
598
|
zIndex: 101
|
|
599
599
|
})];
|
|
600
|
-
},
|
|
601
|
-
console.log("清除所有的轨迹-----"), te(),
|
|
600
|
+
}, me = () => {
|
|
601
|
+
console.log("清除所有的轨迹-----"), te(), i.forEach((d) => {
|
|
602
602
|
var g;
|
|
603
603
|
(g = d.getSource()) == null || g.clear(), e == null || e.removeLayer(d);
|
|
604
604
|
}), Object.keys(n).forEach((d) => {
|
|
605
|
-
|
|
606
|
-
}), Z = !1,
|
|
605
|
+
i.delete(d), delete n[d];
|
|
606
|
+
}), Z = !1, ce();
|
|
607
607
|
}, we = (s) => {
|
|
608
|
-
const d =
|
|
608
|
+
const d = i.get(s || l);
|
|
609
609
|
d == null || d.setVisible(!1);
|
|
610
610
|
const g = e.getOverlays().getArray();
|
|
611
|
-
for (let
|
|
612
|
-
const E = g[
|
|
613
|
-
E.get("class") === "track-label-overlay" ? (E.setPosition(void 0), e.removeOverlay(E)) :
|
|
611
|
+
for (let M = 0; M < g.length; ) {
|
|
612
|
+
const E = g[M];
|
|
613
|
+
E.get("class") === "track-label-overlay" ? (E.setPosition(void 0), e.removeOverlay(E)) : M++;
|
|
614
614
|
}
|
|
615
615
|
te();
|
|
616
|
-
},
|
|
616
|
+
}, Le = (s, d = LENGTH_UNIT.NM) => {
|
|
617
617
|
const g = {
|
|
618
618
|
id: s,
|
|
619
619
|
length: "--"
|
|
620
620
|
}, E = (n[s] || []).map(
|
|
621
621
|
(R) => transform([R.lon, R.lat], projection.data, projection.mercator)
|
|
622
|
-
),
|
|
623
|
-
return g.length = formatLength(
|
|
624
|
-
}, Le = (s, d) => {
|
|
625
|
-
xe(String(s), d);
|
|
622
|
+
), S = new LineString(E);
|
|
623
|
+
return g.length = formatLength(S, d) || "--", g;
|
|
626
624
|
}, xe = (s, d) => {
|
|
627
|
-
|
|
628
|
-
|
|
625
|
+
pe(String(s), d);
|
|
626
|
+
}, pe = (s, d) => {
|
|
627
|
+
const g = n[String(s)], M = g == null ? void 0 : g.map((E) => [E.lon, E.lat]);
|
|
628
|
+
M && ke(M, d);
|
|
629
629
|
}, ie = new Style({
|
|
630
630
|
text: new Text({
|
|
631
631
|
font: "700 20px map-iconfont",
|
|
@@ -634,14 +634,14 @@ const useTrackManager = (e) => {
|
|
|
634
634
|
rotation: 0
|
|
635
635
|
// 初始旋转角度
|
|
636
636
|
})
|
|
637
|
-
}),
|
|
638
|
-
var
|
|
639
|
-
const g = Number(50 * d),
|
|
640
|
-
if (C = (C + g * E / 1e6) % 2, v =
|
|
637
|
+
}), be = (s, d) => {
|
|
638
|
+
var P, H;
|
|
639
|
+
const g = Number(50 * d), M = ((P = s.frameState) == null ? void 0 : P.time) ?? Date.now(), E = M - v;
|
|
640
|
+
if (C = (C + g * E / 1e6) % 2, v = M, C >= 1) {
|
|
641
641
|
te();
|
|
642
642
|
return;
|
|
643
643
|
}
|
|
644
|
-
const
|
|
644
|
+
const S = r.getCoordinateAt(
|
|
645
645
|
C > 1 ? 2 - C : C
|
|
646
646
|
), R = r.getCoordinateAt(
|
|
647
647
|
C > 1 ? C - 0.01 : C
|
|
@@ -651,27 +651,27 @@ const useTrackManager = (e) => {
|
|
|
651
651
|
mercatorToLonLat(R, "array"),
|
|
652
652
|
mercatorToLonLat(V, "array")
|
|
653
653
|
) * Math.PI / 180;
|
|
654
|
-
(H = ie.getText()) == null || H.setRotation(W), m.setCoordinates(
|
|
654
|
+
(H = ie.getText()) == null || H.setRotation(W), m.setCoordinates(S);
|
|
655
655
|
const q = getVectorContext(s);
|
|
656
656
|
q.setStyle(ie), q.drawGeometry(m), e == null || e.render();
|
|
657
|
-
},
|
|
657
|
+
}, Me = () => {
|
|
658
658
|
var s;
|
|
659
|
-
|
|
659
|
+
O = !0, v = Date.now(), C = 0, m = ((s = L.getGeometry()) == null ? void 0 : s.clone()) || new Point([0, 0]), o && (w == null || w.on("postrender", o)), F == null || F.setGeometry(void 0);
|
|
660
660
|
}, te = () => {
|
|
661
|
-
|
|
661
|
+
O && (O = !1, F == null || F.setGeometry(void 0), o && w && w.un("postrender", o), w && (e == null || e.removeLayer(w)), w = null, F = null);
|
|
662
662
|
}, ke = (s, d) => {
|
|
663
|
-
|
|
663
|
+
O && te(), t = new Polyline({
|
|
664
664
|
factor: 1e6
|
|
665
665
|
}).writeGeometry(new LineString(s)), r = new Polyline({
|
|
666
666
|
factor: 1e6
|
|
667
667
|
}).readGeometry(t, {
|
|
668
668
|
dataProjection: projection.data,
|
|
669
669
|
featureProjection: projection.mercator
|
|
670
|
-
}),
|
|
670
|
+
}), L = new Feature({
|
|
671
671
|
type: "icon",
|
|
672
672
|
geometry: new Point(r.getFirstCoordinate())
|
|
673
673
|
});
|
|
674
|
-
const g =
|
|
674
|
+
const g = L.getGeometry();
|
|
675
675
|
m = g ? g.clone() : new Point([0, 0]), F = new Feature({
|
|
676
676
|
type: "geoMarker",
|
|
677
677
|
style: ie,
|
|
@@ -680,43 +680,43 @@ const useTrackManager = (e) => {
|
|
|
680
680
|
source: new VectorSource({
|
|
681
681
|
features: [F]
|
|
682
682
|
})
|
|
683
|
-
}), e == null || e.addLayer(w), o = (
|
|
683
|
+
}), e == null || e.addLayer(w), o = (M) => be(M, d), Me();
|
|
684
684
|
}, de = (s, d, g) => {
|
|
685
|
-
function
|
|
686
|
-
return 180 * (
|
|
685
|
+
function M(P) {
|
|
686
|
+
return 180 * (P % (2 * Math.PI)) / Math.PI;
|
|
687
687
|
}
|
|
688
|
-
function E(
|
|
689
|
-
return
|
|
688
|
+
function E(P) {
|
|
689
|
+
return P % 360 * Math.PI / 180;
|
|
690
690
|
}
|
|
691
|
-
function
|
|
691
|
+
function S(P) {
|
|
692
692
|
var H;
|
|
693
|
-
if (!
|
|
694
|
-
if (!Array.isArray(
|
|
695
|
-
if ((
|
|
696
|
-
return
|
|
697
|
-
if (
|
|
693
|
+
if (!P) throw new Error("Coordinate is required");
|
|
694
|
+
if (!Array.isArray(P)) {
|
|
695
|
+
if ((P == null ? void 0 : P.type) === "Feature" && (P == null ? void 0 : P.geometry) !== null && ((H = P == null ? void 0 : P.geometry) == null ? void 0 : H.type) === "Point")
|
|
696
|
+
return P == null ? void 0 : P.geometry.coordinates;
|
|
697
|
+
if (P.type === "Point") return (P == null ? void 0 : P.coordinates) || [];
|
|
698
698
|
}
|
|
699
|
-
if (Array.isArray(
|
|
700
|
-
return
|
|
699
|
+
if (Array.isArray(P) && P.length >= 2 && !Array.isArray(P[0]) && !Array.isArray(P[1]))
|
|
700
|
+
return P;
|
|
701
701
|
throw new Error(
|
|
702
702
|
"Coordinate must be GeoJSON Point or an Array of numbers"
|
|
703
703
|
);
|
|
704
704
|
}
|
|
705
|
-
function R(
|
|
705
|
+
function R(P, H, X = {}) {
|
|
706
706
|
if (X.final)
|
|
707
707
|
return function(Te, Se) {
|
|
708
708
|
return (R(Se, Te) + 180) % 360;
|
|
709
|
-
}(
|
|
710
|
-
const K =
|
|
711
|
-
return
|
|
709
|
+
}(P, H);
|
|
710
|
+
const K = S(P), oe = S(H), re = E(K[0]), ne = E(oe[0]), ue = E(K[1]), se = E(oe[1]), Ce = Math.sin(ne - re) * Math.cos(se), Ee = Math.cos(ue) * Math.sin(se) - Math.sin(ue) * Math.cos(se) * Math.cos(ne - re);
|
|
711
|
+
return M(Math.atan2(Ce, Ee));
|
|
712
712
|
}
|
|
713
|
-
function V(
|
|
714
|
-
return !isNaN(
|
|
713
|
+
function V(P) {
|
|
714
|
+
return !isNaN(P) && P !== null && !Array.isArray(P);
|
|
715
715
|
}
|
|
716
|
-
function G(
|
|
717
|
-
return
|
|
716
|
+
function G(P, H = {}, X = {}) {
|
|
717
|
+
return P || console.log("Coordinates are required"), Array.isArray(P) || console.log("Coordinates must be an Array"), P.length < 2 && console.log("Coordinates must be at least 2 numbers long"), (!V(P[0]) || !V(P[1])) && console.log("Coordinates must contain numbers"), W({ type: "Point", coordinates: P }, H, X);
|
|
718
718
|
}
|
|
719
|
-
function W(
|
|
719
|
+
function W(P, H = {}, X = {}) {
|
|
720
720
|
const K = {
|
|
721
721
|
type: "Feature",
|
|
722
722
|
id: "",
|
|
@@ -724,25 +724,25 @@ const useTrackManager = (e) => {
|
|
|
724
724
|
bbox: {},
|
|
725
725
|
geometry: {}
|
|
726
726
|
};
|
|
727
|
-
return X.id !== void 0 && (K.id = X.id), X.bbox && (K.bbox = X.bbox), K.properties = H, K.geometry =
|
|
727
|
+
return X.id !== void 0 && (K.id = X.id), X.bbox && (K.bbox = X.bbox), K.properties = H, K.geometry = P, K;
|
|
728
728
|
}
|
|
729
729
|
const q = R(G(s), G(d), g);
|
|
730
730
|
return q < 0 ? 360 + q : q;
|
|
731
731
|
};
|
|
732
732
|
return {
|
|
733
|
-
render:
|
|
734
|
-
remove:
|
|
735
|
-
play:
|
|
736
|
-
setCenter:
|
|
733
|
+
render: y,
|
|
734
|
+
remove: me,
|
|
735
|
+
play: xe,
|
|
736
|
+
setCenter: ae,
|
|
737
737
|
close: we,
|
|
738
|
-
getLength:
|
|
738
|
+
getLength: Le,
|
|
739
739
|
handleTrackMapEvent: _,
|
|
740
|
-
reRenderTrackLine:
|
|
740
|
+
reRenderTrackLine: c
|
|
741
741
|
};
|
|
742
742
|
};
|
|
743
743
|
function useShipOverlay(e) {
|
|
744
744
|
console.log("useShipOverlay", e);
|
|
745
|
-
const
|
|
745
|
+
const i = ref(null), n = computed(() => ({
|
|
746
746
|
"--overlay-color": "#FFF",
|
|
747
747
|
"--bg-color1": e.colors && e.colors[0] ? e.colors[0] : "#ffffff",
|
|
748
748
|
// 默认第一个颜色
|
|
@@ -750,8 +750,8 @@ function useShipOverlay(e) {
|
|
|
750
750
|
"--bg-color": "#ffffff",
|
|
751
751
|
position: "relative",
|
|
752
752
|
"pointer-events": "none"
|
|
753
|
-
})),
|
|
754
|
-
var
|
|
753
|
+
})), l = computed(() => {
|
|
754
|
+
var f;
|
|
755
755
|
return {
|
|
756
756
|
position: "relative",
|
|
757
757
|
"border-radius": "1px",
|
|
@@ -768,10 +768,10 @@ function useShipOverlay(e) {
|
|
|
768
768
|
"z-index": "1",
|
|
769
769
|
display: "flex",
|
|
770
770
|
"align-items": "center",
|
|
771
|
-
animation: e.selected ? e.colors && ((
|
|
771
|
+
animation: e.selected ? e.colors && ((f = e.colors) == null ? void 0 : f.length) >= 2 ? "blink-dual 2s ease-in-out infinite" : "blink-single 1.5s ease-in-out infinite" : "none"
|
|
772
772
|
// "animation": props.selected ? 'blink 1.5s ease-in-out infinite' : 'none', // 动画开关
|
|
773
773
|
};
|
|
774
|
-
}),
|
|
774
|
+
}), a = computed(() => ({
|
|
775
775
|
width: "14px",
|
|
776
776
|
height: "14px",
|
|
777
777
|
margin: "1px 5px 1px 1px",
|
|
@@ -789,7 +789,7 @@ function useShipOverlay(e) {
|
|
|
789
789
|
left: "-20px"
|
|
790
790
|
}));
|
|
791
791
|
return () => h("div", {
|
|
792
|
-
ref:
|
|
792
|
+
ref: i,
|
|
793
793
|
class: "ship-overlay-container",
|
|
794
794
|
style: n.value
|
|
795
795
|
}, [
|
|
@@ -797,11 +797,11 @@ function useShipOverlay(e) {
|
|
|
797
797
|
"div",
|
|
798
798
|
{
|
|
799
799
|
class: "ship-overlay-content",
|
|
800
|
-
style:
|
|
800
|
+
style: l.value
|
|
801
801
|
},
|
|
802
802
|
[
|
|
803
803
|
h("div", {
|
|
804
|
-
style: e.selected ?
|
|
804
|
+
style: e.selected ? a.value : {}
|
|
805
805
|
}, ""),
|
|
806
806
|
h("div", {
|
|
807
807
|
class: "text",
|
|
@@ -856,43 +856,43 @@ function useShipOverlay(e) {
|
|
|
856
856
|
]);
|
|
857
857
|
}
|
|
858
858
|
ref([]);
|
|
859
|
-
function addOverlay(e,
|
|
860
|
-
if (
|
|
861
|
-
const
|
|
859
|
+
function addOverlay(e, i, n, l) {
|
|
860
|
+
if (i) {
|
|
861
|
+
const a = new Overlay({
|
|
862
862
|
element: n,
|
|
863
863
|
positioning: "top-left",
|
|
864
|
-
id: "label-" + (
|
|
864
|
+
id: "label-" + (l == null ? void 0 : l.id),
|
|
865
865
|
offset: [20, -20],
|
|
866
866
|
autoPan: !1,
|
|
867
|
-
position:
|
|
868
|
-
className:
|
|
867
|
+
position: i,
|
|
868
|
+
className: l.blinking ? "ship-label-overlay-blinking" : "ship-label-overlay"
|
|
869
869
|
});
|
|
870
|
-
|
|
870
|
+
a.set("class", "zh-map-ship-overlay"), e.addOverlay(a);
|
|
871
871
|
}
|
|
872
872
|
}
|
|
873
873
|
const getShipDirectPath = (e) => {
|
|
874
|
-
const { spd:
|
|
875
|
-
return
|
|
876
|
-
}, createShipStyle = (e,
|
|
877
|
-
const { shipData: n } =
|
|
878
|
-
return initShipStyle(
|
|
874
|
+
const { spd: i, hdg: n, cog: l } = e;
|
|
875
|
+
return i ? n !== null && +n != 511 && l !== null ? l - +n >= 3 ? SHIP_DIRECT.right : l - +n <= -3 ? SHIP_DIRECT.left : SHIP_DIRECT.front : SHIP_DIRECT.front : "";
|
|
876
|
+
}, createShipStyle = (e, i) => {
|
|
877
|
+
const { shipData: n } = i.getProperties(), l = getShipType(e), a = getShipScale(e, n, l);
|
|
878
|
+
return initShipStyle(i, a, l);
|
|
879
879
|
}, getShipType = (e) => {
|
|
880
|
-
const
|
|
881
|
-
return
|
|
882
|
-
}, getShipScale = (e,
|
|
880
|
+
const i = e == null ? void 0 : e.getView().getZoom();
|
|
881
|
+
return i <= MAP_ZOOM.shipModelMax && i >= MAP_ZOOM.shipTriggleMin ? "ship" : "triangle";
|
|
882
|
+
}, getShipScale = (e, i, n) => {
|
|
883
883
|
if (n === "ship") {
|
|
884
|
-
const { len:
|
|
884
|
+
const { len: l, wid: a } = i, o = 97, f = 20, t = 1 / (e == null ? void 0 : e.getView().getResolution()), r = l * t / o, L = a * t / f, m = Math.min(r, L);
|
|
885
885
|
return m < 0.2 ? 0.2 : m > 2 ? 2 : m;
|
|
886
886
|
}
|
|
887
887
|
return MAP_ZOOM.scaleNum;
|
|
888
|
-
}, initShipStyle = (e,
|
|
889
|
-
const { color:
|
|
888
|
+
}, initShipStyle = (e, i, n) => {
|
|
889
|
+
const { color: l, direct: a, isHighlight: o, shipData: f } = e.getProperties(), p = ((f == null ? void 0 : f.cog) - 90 + 360) % 360;
|
|
890
890
|
return new Style({
|
|
891
891
|
image: new Icon({
|
|
892
892
|
src: t(),
|
|
893
|
-
scale:
|
|
893
|
+
scale: i || MAP_ZOOM.scaleNum,
|
|
894
894
|
anchor: [0.5, 0.5],
|
|
895
|
-
rotation:
|
|
895
|
+
rotation: p * Math.PI / 180,
|
|
896
896
|
rotateWithView: !1
|
|
897
897
|
})
|
|
898
898
|
});
|
|
@@ -904,58 +904,58 @@ const getShipDirectPath = (e) => {
|
|
|
904
904
|
case "triangle":
|
|
905
905
|
return `<svg width="41" height="24" viewBox="0 0 41 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
906
906
|
<path d="M30.8843 12.6777L2.21343 21.7067C1.75559 21.8509 1.28947 21.509 1.28947 21.029L1.28947 2.97103C1.28947 2.49102 1.75558 2.14913 2.21342 2.29331L30.8843 11.3223C31.5471 11.531 31.5471 12.469 30.8843 12.6777Z"
|
|
907
|
-
fill="${
|
|
907
|
+
fill="${l}" stroke="${o ? "#FF2424" : "black"}" stroke-width="${o ? "2" : "0.578947"}" />
|
|
908
908
|
<!--path船航向左边或者向前-->
|
|
909
|
-
${
|
|
909
|
+
${a === SHIP_DIRECT.left && `<path d="M30 12L40 12L40 8" stroke="${o ? "#FF2424" : "black"}" stroke-width="2"/>`}
|
|
910
910
|
<!--path船航向右边-->
|
|
911
|
-
${
|
|
911
|
+
${a === SHIP_DIRECT.right && `<path d="M30 12L40 12L40 16" stroke="${o ? "#FF2424" : "black"}" stroke-width="2"/>`}
|
|
912
912
|
<!--path黑线无左右-->
|
|
913
|
-
${
|
|
913
|
+
${a === SHIP_DIRECT.front && `<path d="M30 12L40 12" stroke="${o ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
|
|
914
914
|
</svg>
|
|
915
915
|
`;
|
|
916
916
|
case "ship":
|
|
917
917
|
return `<svg width="97" height="20" viewBox="0 0 97 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
918
918
|
<path d="M0.289474 17.3433L0.289474 2.65655C0.289474 2.28572 0.574654 1.97725 0.944343 1.9482L22.0544 0.289473L67.5204 0.289473C67.6295 0.289473 67.7372 0.314613 67.835 0.362943L86.0565 9.3629C86.5844 9.6236 86.5844 10.3763 86.0565 10.637L67.835 19.6371C67.7372 19.6854 67.6295 19.7105 67.5203 19.7105L22.0544 19.7105L0.944343 18.0517C0.574653 18.0226 0.289474 17.7142 0.289474 17.3433Z"
|
|
919
|
-
fill="${
|
|
920
|
-
${
|
|
921
|
-
${
|
|
922
|
-
${
|
|
919
|
+
fill="${l}" stroke="${o ? "#FF2424" : "black"}" stroke-width="${o ? "4" : "0.578947"}"/>
|
|
920
|
+
${a === SHIP_DIRECT.left && `<path d="M86 10L96 10L96 6" stroke="${o ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
|
|
921
|
+
${a === SHIP_DIRECT.right && `<path d="M86 10L96 10L96 14" stroke="${o ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
|
|
922
|
+
${a === SHIP_DIRECT.front && `<path d="M86 10L96 10" stroke="${o ? "#FF2424" : "black"}" stroke-width="1.5"/>`}
|
|
923
923
|
</svg>
|
|
924
924
|
`;
|
|
925
925
|
default:
|
|
926
926
|
return "";
|
|
927
927
|
}
|
|
928
928
|
}
|
|
929
|
-
}, selectedShipStyle = (e,
|
|
930
|
-
const n = selectedShipElement(e,
|
|
929
|
+
}, selectedShipStyle = (e, i) => {
|
|
930
|
+
const n = selectedShipElement(e, i), l = i.id, { lon: a, lat: o } = i, f = new Overlay({
|
|
931
931
|
element: n,
|
|
932
|
-
position: fromLonLat([
|
|
933
|
-
id: "selected-" +
|
|
932
|
+
position: fromLonLat([a, o]),
|
|
933
|
+
id: "selected-" + l,
|
|
934
934
|
positioning: "center-center",
|
|
935
935
|
offset: [0, 5],
|
|
936
936
|
className: "ship-selected-overlay"
|
|
937
937
|
});
|
|
938
|
-
return
|
|
939
|
-
}, selectedShipElement = (e,
|
|
940
|
-
const n = getShipType(e),
|
|
941
|
-
<svg style="transform:scale(${
|
|
938
|
+
return f.set("class", "ship-overlay-selected"), f;
|
|
939
|
+
}, selectedShipElement = (e, i) => {
|
|
940
|
+
const n = getShipType(e), l = getShipScale(e, i, n), a = n === "ship" ? 109 : 49, o = `
|
|
941
|
+
<svg style="transform:scale(${l});" xmlns="http://www.w3.org/2000/svg" width="${a}" height="${a}" viewBox="0 0 49 49" fill="none">
|
|
942
942
|
<path d="M1.99982 46.9998L1.99982 1.99982L46.9998 1.99982L46.9998 46.9998L1.99982 46.9998Z" fill="#FF2424" fill-opacity="0.2"/>
|
|
943
943
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9998 0.5V3.5L3.49976 3.5V20H0.499756V0.500002L19.9998 0.5ZM45.4998 3.5H28.9998V0.5H48.4998V20H45.4998V3.5ZM48.4998 29L48.4998 48.5H28.9998V45.5H45.4998L45.4998 29H48.4998ZM3.49976 45.5L3.49976 29H0.499756L0.499758 48.5L19.9998 48.5V45.5L3.49976 45.5Z" fill="#FF2424"/>
|
|
944
944
|
</svg>
|
|
945
|
-
`,
|
|
946
|
-
return
|
|
947
|
-
}, createLabelStyle = (e,
|
|
948
|
-
const { lon: n, lat:
|
|
949
|
-
n &&
|
|
945
|
+
`, f = document.createElement("div");
|
|
946
|
+
return f.className = "ship-overlay-selected", f.innerHTML = o, f;
|
|
947
|
+
}, createLabelStyle = (e, i) => {
|
|
948
|
+
const { lon: n, lat: l, blinking: a } = i, o = createLabelElement(i);
|
|
949
|
+
n && l && addOverlay(e, fromLonLat([n, l]), o, { ...i, blinking: a });
|
|
950
950
|
}, createLabelElement = (e) => {
|
|
951
|
-
const
|
|
952
|
-
|
|
953
|
-
const { lon: n, lat:
|
|
951
|
+
const i = document.createElement("div");
|
|
952
|
+
i.className = "ship-overlay-box", i.style.position = "relative";
|
|
953
|
+
const { lon: n, lat: l, blinking: a, blinkingColors: o, name: f } = e, p = createVNode({
|
|
954
954
|
setup() {
|
|
955
955
|
return useShipOverlay({
|
|
956
|
-
position: [n + 2e-3,
|
|
957
|
-
selected:
|
|
958
|
-
name:
|
|
956
|
+
position: [n + 2e-3, l + 2e-3],
|
|
957
|
+
selected: a,
|
|
958
|
+
name: f,
|
|
959
959
|
colors: o || [],
|
|
960
960
|
existDevice: e == null ? void 0 : e.existDevice,
|
|
961
961
|
existMobile: e == null ? void 0 : e.existMobile,
|
|
@@ -963,10 +963,10 @@ const getShipDirectPath = (e) => {
|
|
|
963
963
|
});
|
|
964
964
|
}
|
|
965
965
|
});
|
|
966
|
-
return render(
|
|
966
|
+
return render(p, i), i;
|
|
967
967
|
}, getRightIcons = (e) => {
|
|
968
|
-
const
|
|
969
|
-
return e.existDevice &&
|
|
968
|
+
const i = [];
|
|
969
|
+
return e.existDevice && i.push(""), e.existMobile && i.push(""), e.existWaterGauge && i.push(""), i;
|
|
970
970
|
};
|
|
971
971
|
function getRandomLineDirection() {
|
|
972
972
|
const e = [
|
|
@@ -980,86 +980,86 @@ function getRandomLineDirection() {
|
|
|
980
980
|
return e[Math.floor(Math.random() * e.length)];
|
|
981
981
|
}
|
|
982
982
|
const devicePixelRatio = window.devicePixelRatio || 1;
|
|
983
|
-
function generateBase64Icon(e,
|
|
984
|
-
const
|
|
983
|
+
function generateBase64Icon(e, i, n = "left-bottom", l = 2) {
|
|
984
|
+
const a = document.createElement("canvas"), o = a.getContext("2d");
|
|
985
985
|
if (!o) return "";
|
|
986
|
-
const
|
|
987
|
-
o.font =
|
|
988
|
-
const
|
|
986
|
+
const f = 2, p = 8, t = 16, r = window.devicePixelRatio || 1, L = "500 12px Arial", m = "14px map-iconfont";
|
|
987
|
+
o.font = L;
|
|
988
|
+
const O = o.measureText(e).width;
|
|
989
989
|
o.font = m;
|
|
990
|
-
const v =
|
|
991
|
-
let Z, B, Y = 0, j = 0,
|
|
992
|
-
switch (Z = t +
|
|
990
|
+
const v = i.map((b) => ({ width: o.measureText(getIconFont(b)).width, height: 14 })), w = v.reduce((b, N) => b + N.width, 0), C = (i.length - 1) * l, k = p + O + w + C + p, x = f + 14 + f * 2;
|
|
991
|
+
let Z, B, Y = 0, j = 0, D = 0, z = 0, c = 0, u = 0;
|
|
992
|
+
switch (Z = t + k, n) {
|
|
993
993
|
case "right-top":
|
|
994
|
-
B = t +
|
|
994
|
+
B = t + x, Y = 0, j = t + x, D = t, z = 0, c = t, u = 0;
|
|
995
995
|
break;
|
|
996
996
|
case "right-middle":
|
|
997
|
-
B =
|
|
997
|
+
B = x, Y = 0, j = x / 2, D = t, z = x / 2, c = t, u = 0;
|
|
998
998
|
break;
|
|
999
999
|
case "right-bottom":
|
|
1000
|
-
B = t +
|
|
1000
|
+
B = t + x, Y = 0, j = 0, D = t, z = t, c = t, u = t;
|
|
1001
1001
|
break;
|
|
1002
1002
|
case "left-top":
|
|
1003
|
-
B = t +
|
|
1003
|
+
B = t + x, Y = k, j = t, D = k + t, z = x + t, c = 0, u = 0;
|
|
1004
1004
|
break;
|
|
1005
1005
|
case "left-middle":
|
|
1006
|
-
B =
|
|
1006
|
+
B = x, Y = k, j = x / 2, D = k + t, z = x / 2, c = 0, u = 0;
|
|
1007
1007
|
break;
|
|
1008
1008
|
case "left-bottom":
|
|
1009
|
-
B = t +
|
|
1009
|
+
B = t + x, Y = k, j = x, D = k + t, z = 0, c = 0, u = t;
|
|
1010
1010
|
break;
|
|
1011
1011
|
}
|
|
1012
|
-
|
|
1013
|
-
const
|
|
1014
|
-
o.strokeStyle = "#ffffff", o.lineWidth = 1, o.strokeText(e,
|
|
1015
|
-
let
|
|
1016
|
-
return
|
|
1017
|
-
const
|
|
1018
|
-
o.fillText(getIconFont(
|
|
1019
|
-
}),
|
|
1012
|
+
a.width = Math.round(Z * r), a.height = Math.round(B * r), o.scale(r, r), o.clearRect(0, 0, Z, B), o.beginPath(), o.moveTo(Y, j), o.lineTo(D, z), o.strokeStyle = "#FFF", o.lineWidth = 1, o.stroke(), o.fillStyle = "#FFF", o.fillRect(c, u, k, x), o.font = L, o.textBaseline = "middle";
|
|
1013
|
+
const y = u + f + x / 2;
|
|
1014
|
+
o.strokeStyle = "#ffffff", o.lineWidth = 1, o.strokeText(e, c + p, y), o.fillStyle = "#000000", o.fillText(e, c + p, y), o.font = m, o.fillStyle = "#3370ff";
|
|
1015
|
+
let T = c + p + O + l;
|
|
1016
|
+
return i.length > 0 && i.forEach((b, N) => {
|
|
1017
|
+
const $ = u + f + x / 2;
|
|
1018
|
+
o.fillText(getIconFont(b), T, $), T += v[N].width + l;
|
|
1019
|
+
}), a.toDataURL("image/png");
|
|
1020
1020
|
}
|
|
1021
1021
|
const createLabelFeatureStyle = (e) => {
|
|
1022
|
-
const { name:
|
|
1023
|
-
let
|
|
1024
|
-
switch (
|
|
1022
|
+
const { name: i, rightIcons: n, selected: l } = e.getProperties(), a = getRandomLineDirection(), o = generateBase64Icon(i, n, a);
|
|
1023
|
+
let f = [0, 0];
|
|
1024
|
+
switch (a) {
|
|
1025
1025
|
case "right-top":
|
|
1026
|
-
|
|
1026
|
+
f = [0, 1];
|
|
1027
1027
|
break;
|
|
1028
1028
|
case "right-middle":
|
|
1029
|
-
|
|
1029
|
+
f = [0, 0.5];
|
|
1030
1030
|
break;
|
|
1031
1031
|
case "right-bottom":
|
|
1032
|
-
|
|
1032
|
+
f = [0, 0];
|
|
1033
1033
|
break;
|
|
1034
1034
|
case "left-top":
|
|
1035
|
-
|
|
1035
|
+
f = [1, 1];
|
|
1036
1036
|
break;
|
|
1037
1037
|
case "left-middle":
|
|
1038
|
-
|
|
1038
|
+
f = [1, 0.5];
|
|
1039
1039
|
break;
|
|
1040
1040
|
case "left-bottom":
|
|
1041
|
-
|
|
1041
|
+
f = [1, 0];
|
|
1042
1042
|
break;
|
|
1043
1043
|
}
|
|
1044
1044
|
return new Style({
|
|
1045
1045
|
image: new Icon({
|
|
1046
1046
|
src: o,
|
|
1047
|
-
anchor:
|
|
1047
|
+
anchor: f,
|
|
1048
1048
|
displacement: [0, 0],
|
|
1049
1049
|
scale: 1 / devicePixelRatio,
|
|
1050
1050
|
anchorXUnits: "fraction",
|
|
1051
1051
|
anchorYUnits: "fraction"
|
|
1052
1052
|
}),
|
|
1053
|
-
zIndex:
|
|
1053
|
+
zIndex: l ? 100 : 10
|
|
1054
1054
|
});
|
|
1055
1055
|
}, useShipManager = (e) => {
|
|
1056
|
-
let
|
|
1057
|
-
const
|
|
1058
|
-
source:
|
|
1056
|
+
let i = null, n = null;
|
|
1057
|
+
const l = new VectorSource(), a = new VectorImageLayer({
|
|
1058
|
+
source: l,
|
|
1059
1059
|
className: "zh-map--ship-layer",
|
|
1060
1060
|
renderBuffer: 300,
|
|
1061
1061
|
zIndex: 101
|
|
1062
|
-
}), o = new VectorSource(),
|
|
1062
|
+
}), o = new VectorSource(), f = new VectorLayer({
|
|
1063
1063
|
source: o,
|
|
1064
1064
|
className: "zh-map--ship-label-layer",
|
|
1065
1065
|
zIndex: 102,
|
|
@@ -1067,99 +1067,105 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1067
1067
|
updateWhileAnimating: !1,
|
|
1068
1068
|
declutter: !0
|
|
1069
1069
|
});
|
|
1070
|
-
e == null || e.addLayer(
|
|
1071
|
-
let
|
|
1072
|
-
const m = (
|
|
1073
|
-
if (!
|
|
1074
|
-
const u = (n == null ? void 0 : n.id) || (
|
|
1070
|
+
e == null || e.addLayer(a), e == null || e.addLayer(f);
|
|
1071
|
+
let p = null, t = "", r = {}, L = {};
|
|
1072
|
+
const m = (c) => {
|
|
1073
|
+
if (!c || !e) return;
|
|
1074
|
+
const u = (n == null ? void 0 : n.id) || (i == null ? void 0 : i.get("id"));
|
|
1075
1075
|
if (n) {
|
|
1076
|
-
const
|
|
1077
|
-
|
|
1076
|
+
const y = c.filter((T) => T.id === u);
|
|
1077
|
+
y.length === 0 ? c.push(n) : n = y[0];
|
|
1078
1078
|
}
|
|
1079
|
-
w(), C(!0), z(
|
|
1080
|
-
}, F = (
|
|
1079
|
+
w(), C(!0), z(c), O();
|
|
1080
|
+
}, F = (c) => {
|
|
1081
1081
|
var _;
|
|
1082
|
-
const u = (n == null ? void 0 : n.id) || (
|
|
1083
|
-
geometry: new Point(
|
|
1082
|
+
const u = (n == null ? void 0 : n.id) || (i == null ? void 0 : i.get("id")), y = fromLonLat([c == null ? void 0 : c.lon, c == null ? void 0 : c.lat]), T = ((_ = L[c.id]) == null ? void 0 : _.blinkColors) || [], N = T[T.length - 1] || c.fill || "#04C900", $ = getShipDirectPath(c), A = new Feature({
|
|
1083
|
+
geometry: new Point(y),
|
|
1084
1084
|
// 船舶数据
|
|
1085
|
-
shipData:
|
|
1086
|
-
id:
|
|
1087
|
-
name:
|
|
1088
|
-
selected:
|
|
1085
|
+
shipData: c,
|
|
1086
|
+
id: c.id,
|
|
1087
|
+
name: c.cnname || c.enname || c.id || "未命名船舶",
|
|
1088
|
+
selected: c.id === u,
|
|
1089
1089
|
// 图标
|
|
1090
|
-
rightIcons: getRightIcons(
|
|
1090
|
+
rightIcons: getRightIcons(c),
|
|
1091
1091
|
// 是否闪烁
|
|
1092
1092
|
// blinking: attentionShips[ship.id] || false,
|
|
1093
1093
|
// // 闪烁颜色
|
|
1094
1094
|
// blinkingColor: attentionShipsColor[ship.id].blinkColors || '',
|
|
1095
1095
|
// 船舶颜色
|
|
1096
|
-
color:
|
|
1096
|
+
color: N,
|
|
1097
1097
|
// 船艏向的方向
|
|
1098
|
-
direct:
|
|
1098
|
+
direct: $,
|
|
1099
1099
|
// 高亮
|
|
1100
1100
|
isHighlight: !1
|
|
1101
1101
|
});
|
|
1102
|
-
return A.set("clickGeometry", new Circle(
|
|
1103
|
-
},
|
|
1102
|
+
return A.set("clickGeometry", new Circle(y)), A;
|
|
1103
|
+
}, O = async () => {
|
|
1104
1104
|
if (!n || !e) return;
|
|
1105
|
-
let u = e.getOverlays().getArray().find((
|
|
1106
|
-
if (
|
|
1107
|
-
const
|
|
1108
|
-
await u.setElement(
|
|
1105
|
+
let u = e.getOverlays().getArray().find((y) => y.get("class") == "ship-overlay-selected");
|
|
1106
|
+
if (u) {
|
|
1107
|
+
const y = selectedShipElement(e, n);
|
|
1108
|
+
await u.setElement(y), await u.setPosition(fromLonLat([n.lon, n.lat]));
|
|
1109
1109
|
} else
|
|
1110
1110
|
u = selectedShipStyle(e, n), u && e.addOverlay(u);
|
|
1111
1111
|
setTimeout(() => {
|
|
1112
|
-
var
|
|
1113
|
-
u && ((
|
|
1112
|
+
var y;
|
|
1113
|
+
u && ((y = u.get("element")) != null && y.parentElement) && (u.get("element").parentElement.style.display = "block");
|
|
1114
1114
|
}, 20);
|
|
1115
|
-
}, v = (
|
|
1116
|
-
if (
|
|
1115
|
+
}, v = (c) => {
|
|
1116
|
+
if (c === "start") {
|
|
1117
1117
|
const u = () => {
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
})
|
|
1118
|
+
l.getFeatures().forEach((b) => {
|
|
1119
|
+
b.setStyle(createShipStyle(e, b));
|
|
1120
|
+
});
|
|
1121
|
+
const T = (e == null ? void 0 : e.getOverlays().getArray()).find((b) => b.get("class") == "ship-overlay-selected");
|
|
1122
|
+
if (T) {
|
|
1123
|
+
const b = T.getElement(), N = getShipScale(e, n, "ship");
|
|
1124
|
+
console.log("scaleFactor", N), b.style.transform = `scale(${N})`;
|
|
1125
|
+
}
|
|
1126
|
+
p = requestAnimationFrame(u);
|
|
1121
1127
|
};
|
|
1122
1128
|
u();
|
|
1123
1129
|
} else
|
|
1124
|
-
|
|
1130
|
+
p && (cancelAnimationFrame(p), p = null);
|
|
1125
1131
|
}, w = () => {
|
|
1126
|
-
e &&
|
|
1127
|
-
}, C = (
|
|
1128
|
-
const u = e.getOverlays().getArray().filter((
|
|
1132
|
+
e && l && (l.clear(), o.clear(), C());
|
|
1133
|
+
}, C = (c) => {
|
|
1134
|
+
const u = e.getOverlays().getArray().filter((y) => y.get("class") == "zh-map-ship-overlay");
|
|
1129
1135
|
if (u && u.length > 0) {
|
|
1130
|
-
for (let
|
|
1131
|
-
if (!
|
|
1132
|
-
const
|
|
1133
|
-
|
|
1136
|
+
for (let y = 0; y < u.length; y++)
|
|
1137
|
+
if (!c && u[y].get("class") !== "ship-overlay-selected") {
|
|
1138
|
+
const T = u[y];
|
|
1139
|
+
T.setPosition(void 0), e.removeOverlay(T), T.dispose();
|
|
1134
1140
|
}
|
|
1135
1141
|
}
|
|
1136
|
-
},
|
|
1137
|
-
r =
|
|
1138
|
-
const
|
|
1139
|
-
for (const
|
|
1140
|
-
const
|
|
1141
|
-
if (
|
|
1142
|
-
const _ = u[
|
|
1143
|
-
A.set("blinking",
|
|
1142
|
+
}, k = (c, u) => {
|
|
1143
|
+
r = c, L = u, console.log("attentionShips", r, "attentionShipsColor", u);
|
|
1144
|
+
const y = e.getOverlays().getArray(), T = l.getFeatures();
|
|
1145
|
+
for (const b in r) {
|
|
1146
|
+
const N = r[b], $ = y.find((_) => _.getId() === "label-" + b), A = T.find((_) => b === _.get("id"));
|
|
1147
|
+
if ($ && A) {
|
|
1148
|
+
const _ = u[b].blinkColors || [], { shipData: J, name: Q, color: U } = A == null ? void 0 : A.getProperties();
|
|
1149
|
+
A.set("blinking", N), _[(_ == null ? void 0 : _.length) - 1] && U !== _[(_ == null ? void 0 : _.length) - 1] && (A.set("color", _[(_ == null ? void 0 : _.length) - 1] || ""), A.setStyle(createShipStyle(e, A)));
|
|
1144
1150
|
const le = {
|
|
1145
1151
|
...J,
|
|
1146
|
-
blinking:
|
|
1152
|
+
blinking: N,
|
|
1147
1153
|
blinkingColors: _ || [],
|
|
1148
|
-
name: Q + "(" + u[
|
|
1149
|
-
}, I =
|
|
1150
|
-
I && I !== ee &&
|
|
1154
|
+
name: Q + "(" + u[b].shipState + ")"
|
|
1155
|
+
}, I = $.getElement(), ee = createLabelElement(le);
|
|
1156
|
+
I && I !== ee && $.setElement(ee);
|
|
1151
1157
|
}
|
|
1152
1158
|
}
|
|
1153
|
-
},
|
|
1159
|
+
}, x = (c) => {
|
|
1154
1160
|
if (!e) return;
|
|
1155
|
-
const u =
|
|
1156
|
-
|
|
1157
|
-
|
|
1161
|
+
const u = l.getFeatures(), y = o.getFeatures(), T = i ? i.get("id") : "", b = u.filter((_) => _.get("id") !== T), N = y == null ? void 0 : y.filter((_) => _.get("id") !== T), $ = /* @__PURE__ */ new Map();
|
|
1162
|
+
c.forEach((_) => {
|
|
1163
|
+
$.set(_.id, !0);
|
|
1158
1164
|
});
|
|
1159
1165
|
const A = e.getOverlays().getArray();
|
|
1160
|
-
|
|
1166
|
+
b.forEach((_) => {
|
|
1161
1167
|
const J = _.get("id");
|
|
1162
|
-
if (
|
|
1168
|
+
if (!$.has(J))
|
|
1163
1169
|
_.setStyle([]);
|
|
1164
1170
|
else {
|
|
1165
1171
|
const U = _.getStyle();
|
|
@@ -1167,99 +1173,99 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1167
1173
|
}
|
|
1168
1174
|
const Q = A.find((U) => U.getId() === "label-" + J);
|
|
1169
1175
|
Q && Q.setPosition(void 0);
|
|
1170
|
-
}), console.log(
|
|
1176
|
+
}), console.log(N), N.forEach((_) => {
|
|
1171
1177
|
const J = _.get("id");
|
|
1172
|
-
if (
|
|
1178
|
+
if (!$.has(J))
|
|
1173
1179
|
_.setStyle([]);
|
|
1174
1180
|
else {
|
|
1175
1181
|
const Q = _.getStyle();
|
|
1176
1182
|
(Q == null ? void 0 : Q.length) == 0 && _.setStyle(createLabelFeatureStyle(_));
|
|
1177
1183
|
}
|
|
1178
1184
|
});
|
|
1179
|
-
}, Z = (
|
|
1180
|
-
if (
|
|
1181
|
-
console.log("选中",
|
|
1182
|
-
const u =
|
|
1183
|
-
u && (
|
|
1185
|
+
}, Z = (c) => {
|
|
1186
|
+
if (c) {
|
|
1187
|
+
console.log("选中", c);
|
|
1188
|
+
const u = l.getFeatures().find((T) => T.get("id") === c.id), y = o.getFeatures().find((T) => T.get("id") === c.id);
|
|
1189
|
+
u && (i = u), y && y.set("selected", !0), n = c, O();
|
|
1184
1190
|
} else
|
|
1185
|
-
console.log("取消选中"), n = null,
|
|
1186
|
-
}, B = debounce((
|
|
1187
|
-
if (
|
|
1188
|
-
const
|
|
1189
|
-
if (e.getTargetElement().style.cursor =
|
|
1190
|
-
t && t !==
|
|
1191
|
-
const
|
|
1192
|
-
|
|
1191
|
+
console.log("取消选中"), n = null, i = null, j();
|
|
1192
|
+
}, B = debounce((c, u, y) => {
|
|
1193
|
+
if (c) {
|
|
1194
|
+
const T = c.get("shipData"), b = c.get("id");
|
|
1195
|
+
if (e.getTargetElement().style.cursor = b ? "pointer" : "", u === "click" && (Z(T), y && y(b)), u === "hover") {
|
|
1196
|
+
t && t !== b && Y(), t = b;
|
|
1197
|
+
const N = l.getFeatures().find(($) => $.get("id") === t);
|
|
1198
|
+
N == null || N.set("isHighlight", !0), N == null || N.setStyle(createShipStyle(e, N));
|
|
1193
1199
|
}
|
|
1194
1200
|
} else
|
|
1195
1201
|
e.getTargetElement().style.cursor = "", Y();
|
|
1196
1202
|
}, 10), Y = () => {
|
|
1197
|
-
const
|
|
1198
|
-
t = null,
|
|
1203
|
+
const c = t ? l.getFeatures().find((u) => u.get("id") === t) : null;
|
|
1204
|
+
t = null, c == null || c.set("isHighlight", !1), c == null || c.setStyle(createShipStyle(e, c));
|
|
1199
1205
|
}, j = () => {
|
|
1200
1206
|
try {
|
|
1201
|
-
const u = e.getOverlays().getArray().find((
|
|
1207
|
+
const u = e.getOverlays().getArray().find((y) => y.get("class") == "ship-overlay-selected");
|
|
1202
1208
|
u && u.setPosition(void 0);
|
|
1203
|
-
} catch (
|
|
1204
|
-
console.log(
|
|
1209
|
+
} catch (c) {
|
|
1210
|
+
console.log(c);
|
|
1205
1211
|
}
|
|
1206
|
-
},
|
|
1207
|
-
const u = fromLonLat([
|
|
1212
|
+
}, D = (c) => {
|
|
1213
|
+
const u = fromLonLat([c == null ? void 0 : c.lon, c == null ? void 0 : c.lat]), y = new Feature({
|
|
1208
1214
|
geometry: new Point(u),
|
|
1209
|
-
name:
|
|
1215
|
+
name: c.cnname || c.enname || c.id || "未命名船舶",
|
|
1210
1216
|
// 图标
|
|
1211
|
-
rightIcons: getRightIcons(
|
|
1212
|
-
selected: (
|
|
1213
|
-
shipData:
|
|
1217
|
+
rightIcons: getRightIcons(c),
|
|
1218
|
+
selected: (c == null ? void 0 : c.id) === (n == null ? void 0 : n.id),
|
|
1219
|
+
shipData: c
|
|
1214
1220
|
});
|
|
1215
|
-
|
|
1216
|
-
const
|
|
1217
|
-
return
|
|
1218
|
-
}, z = (
|
|
1221
|
+
y.set("id", c.id);
|
|
1222
|
+
const T = createLabelFeatureStyle(y);
|
|
1223
|
+
return y.setStyle(T), y;
|
|
1224
|
+
}, z = (c) => {
|
|
1219
1225
|
const u = e.getView().getZoom();
|
|
1220
|
-
|
|
1221
|
-
const
|
|
1222
|
-
if (
|
|
1223
|
-
if (r[
|
|
1224
|
-
if (
|
|
1225
|
-
const
|
|
1226
|
-
...
|
|
1226
|
+
c.forEach((y) => {
|
|
1227
|
+
const T = F(y);
|
|
1228
|
+
if (T.setStyle(createShipStyle(e, T)), l.addFeature(T), (n == null ? void 0 : n.id) == y.id || u >= MAP_ZOOM.shipModelMin)
|
|
1229
|
+
if (r[y.id]) {
|
|
1230
|
+
if (y.id && L[y == null ? void 0 : y.id]) {
|
|
1231
|
+
const b = L[y == null ? void 0 : y.id] || {}, N = (b == null ? void 0 : b.blinkColors) || [], $ = (b == null ? void 0 : b.shipState) || "", A = (y.cnname || y.enname || y.id || "未命名船舶") + "(" + $ + ")", _ = {
|
|
1232
|
+
...y,
|
|
1227
1233
|
name: A,
|
|
1228
|
-
blinking: r[
|
|
1229
|
-
blinkingColors:
|
|
1234
|
+
blinking: r[y.id],
|
|
1235
|
+
blinkingColors: N || []
|
|
1230
1236
|
};
|
|
1231
1237
|
createLabelStyle(e, _);
|
|
1232
1238
|
}
|
|
1233
1239
|
} else {
|
|
1234
|
-
const
|
|
1235
|
-
o.addFeature(
|
|
1240
|
+
const b = D(y);
|
|
1241
|
+
o.addFeature(b);
|
|
1236
1242
|
}
|
|
1237
1243
|
});
|
|
1238
1244
|
};
|
|
1239
1245
|
return {
|
|
1240
1246
|
render: m,
|
|
1241
1247
|
selected: Z,
|
|
1242
|
-
filter:
|
|
1243
|
-
blinking:
|
|
1248
|
+
filter: x,
|
|
1249
|
+
blinking: k,
|
|
1244
1250
|
clear: w,
|
|
1245
1251
|
handleShipMapEvent: B,
|
|
1246
1252
|
changeShipScale: v
|
|
1247
1253
|
};
|
|
1248
1254
|
}, useLayerManager = (e) => {
|
|
1249
|
-
const
|
|
1255
|
+
const i = () => e == null ? void 0 : e.getLayers(), n = ref("vector"), l = () => n.value, a = (t) => {
|
|
1250
1256
|
n.value = t;
|
|
1251
|
-
const r =
|
|
1252
|
-
r && (r == null || r.getArray().forEach((
|
|
1253
|
-
(
|
|
1257
|
+
const r = i();
|
|
1258
|
+
r && (r == null || r.getArray().forEach((L) => {
|
|
1259
|
+
(L.className_ === "vector" || L.className_ === "satellite") && L.setVisible(L.className_ === t);
|
|
1254
1260
|
}));
|
|
1255
1261
|
}, o = ref(!1);
|
|
1256
1262
|
return {
|
|
1257
|
-
getLayers:
|
|
1263
|
+
getLayers: i,
|
|
1258
1264
|
getGreenTileVisible: () => o.value,
|
|
1259
1265
|
setGreenTileVisible: (t) => {
|
|
1260
1266
|
if (t !== o.value) {
|
|
1261
1267
|
if (t) {
|
|
1262
|
-
const r =
|
|
1268
|
+
const r = i();
|
|
1263
1269
|
if (!r.getArray().find((m) => m.className_ === "greenTile")) {
|
|
1264
1270
|
const m = new TileLayer({
|
|
1265
1271
|
source: new XYZ({ url: BASE_MAP_LINK.greenTile }),
|
|
@@ -1270,53 +1276,53 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1270
1276
|
r.push(m);
|
|
1271
1277
|
}
|
|
1272
1278
|
} else {
|
|
1273
|
-
const r =
|
|
1274
|
-
|
|
1279
|
+
const r = i(), L = r.getArray().find((m) => m.className_ === "greenTile");
|
|
1280
|
+
L && r.remove(L);
|
|
1275
1281
|
}
|
|
1276
1282
|
o.value = t;
|
|
1277
1283
|
}
|
|
1278
1284
|
},
|
|
1279
|
-
getShowLayerType:
|
|
1280
|
-
setShowLayerType:
|
|
1285
|
+
getShowLayerType: l,
|
|
1286
|
+
setShowLayerType: a
|
|
1281
1287
|
};
|
|
1282
1288
|
}, usePropsManager = () => {
|
|
1283
1289
|
const e = ref();
|
|
1284
1290
|
return {
|
|
1285
|
-
setProps: (
|
|
1286
|
-
e.value =
|
|
1291
|
+
setProps: (l) => {
|
|
1292
|
+
e.value = l;
|
|
1287
1293
|
},
|
|
1288
1294
|
getProps: () => e.value
|
|
1289
1295
|
};
|
|
1290
1296
|
}, usePositionManager = (e) => {
|
|
1291
|
-
const
|
|
1292
|
-
let n,
|
|
1293
|
-
const
|
|
1297
|
+
const i = "zh-map-location-layer";
|
|
1298
|
+
let n, l, a = null, o = null;
|
|
1299
|
+
const f = (v) => {
|
|
1294
1300
|
if (!(!v || v.length === 0)) {
|
|
1295
|
-
if (
|
|
1301
|
+
if (l || (l = new VectorSource()), l.clear(), o) {
|
|
1296
1302
|
const w = v.find((C) => C.id === o.id);
|
|
1297
1303
|
w ? o = w : v.push(o);
|
|
1298
1304
|
}
|
|
1299
1305
|
v.forEach((w) => {
|
|
1300
|
-
|
|
1306
|
+
p(w);
|
|
1301
1307
|
}), n || (n = new VectorLayer({
|
|
1302
|
-
className:
|
|
1303
|
-
source:
|
|
1308
|
+
className: i,
|
|
1309
|
+
source: l,
|
|
1304
1310
|
zIndex: 100
|
|
1305
1311
|
}), e == null || e.addLayer(n));
|
|
1306
1312
|
}
|
|
1307
|
-
},
|
|
1308
|
-
const w = e == null ? void 0 : e.getView().getZoom(), [C,
|
|
1309
|
-
geometry: new Point(fromLonLat([Number(C), Number(
|
|
1313
|
+
}, p = (v) => {
|
|
1314
|
+
const w = e == null ? void 0 : e.getView().getZoom(), [C, k] = v.latLon.split(","), x = new Feature({
|
|
1315
|
+
geometry: new Point(fromLonLat([Number(C), Number(k)]))
|
|
1310
1316
|
});
|
|
1311
|
-
|
|
1317
|
+
x.setStyle(t(v, w, v.id === (o == null ? void 0 : o.id))), x.set("loactionData", v), l.addFeature(x);
|
|
1312
1318
|
}, t = (v, w, C) => {
|
|
1313
|
-
const
|
|
1319
|
+
const k = {
|
|
1314
1320
|
image: new Icon({
|
|
1315
1321
|
src: C && v.selectedPath || v.defaultPath,
|
|
1316
1322
|
scale: 0.5 * w / 10
|
|
1317
1323
|
})
|
|
1318
1324
|
};
|
|
1319
|
-
return v.name && (
|
|
1325
|
+
return v.name && (k.text = new Text({
|
|
1320
1326
|
text: v.name,
|
|
1321
1327
|
font: "12px sans-serif",
|
|
1322
1328
|
fill: new Fill({
|
|
@@ -1326,62 +1332,62 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1326
1332
|
color: "#FFFFFF"
|
|
1327
1333
|
}),
|
|
1328
1334
|
offsetY: 30
|
|
1329
|
-
})), new Style(
|
|
1335
|
+
})), new Style(k);
|
|
1330
1336
|
}, r = () => {
|
|
1331
|
-
if (
|
|
1332
|
-
const v =
|
|
1333
|
-
|
|
1334
|
-
w.get("loactionData").id !== v &&
|
|
1337
|
+
if (a) {
|
|
1338
|
+
const v = a.get("loactionData").id;
|
|
1339
|
+
l.getFeatures().forEach((w) => {
|
|
1340
|
+
w.get("loactionData").id !== v && l.removeFeature(w);
|
|
1335
1341
|
});
|
|
1336
1342
|
} else
|
|
1337
|
-
|
|
1338
|
-
},
|
|
1339
|
-
var
|
|
1340
|
-
const v =
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
}), o = null,
|
|
1343
|
+
l.clear();
|
|
1344
|
+
}, L = () => {
|
|
1345
|
+
var k;
|
|
1346
|
+
const v = a.get("loactionData"), w = (k = e == null ? void 0 : e.getView()) == null ? void 0 : k.getZoom();
|
|
1347
|
+
l.getFeatures().forEach((x) => {
|
|
1348
|
+
x.get("loactionData").id === v.id && (x == null || x.setStyle(t(v, w, !1)));
|
|
1349
|
+
}), o = null, a = null;
|
|
1344
1350
|
}, m = (v) => {
|
|
1345
|
-
v ? (F(),
|
|
1351
|
+
v ? (F(), O(v)) : clearSelectedPort();
|
|
1346
1352
|
}, F = () => {
|
|
1347
1353
|
var v;
|
|
1348
|
-
if (
|
|
1349
|
-
const w =
|
|
1350
|
-
|
|
1354
|
+
if (a) {
|
|
1355
|
+
const w = a.get("loactionData"), C = (v = e == null ? void 0 : e.getView()) == null ? void 0 : v.getZoom();
|
|
1356
|
+
a.setStyle(t(w, C, !1));
|
|
1351
1357
|
}
|
|
1352
|
-
},
|
|
1353
|
-
const w =
|
|
1354
|
-
o = v,
|
|
1358
|
+
}, O = (v) => {
|
|
1359
|
+
const w = l.getFeatures();
|
|
1360
|
+
o = v, a = w.find((C) => C.get("loactionData").id === v.id);
|
|
1355
1361
|
};
|
|
1356
1362
|
return {
|
|
1357
|
-
render:
|
|
1363
|
+
render: f,
|
|
1358
1364
|
selected: m,
|
|
1359
|
-
clearSelected:
|
|
1365
|
+
clearSelected: L,
|
|
1360
1366
|
clear: r
|
|
1361
1367
|
};
|
|
1362
1368
|
}, disableDoubleClickZoom = (e) => {
|
|
1363
|
-
e.getInteractions().forEach((
|
|
1364
|
-
|
|
1369
|
+
e.getInteractions().forEach((i) => {
|
|
1370
|
+
i instanceof DoubleClickZoom && i.setActive(!1);
|
|
1365
1371
|
});
|
|
1366
1372
|
}, enableDoubleClickZoom = (e) => {
|
|
1367
|
-
e.getInteractions().forEach((
|
|
1368
|
-
|
|
1373
|
+
e.getInteractions().forEach((i) => {
|
|
1374
|
+
i instanceof DoubleClickZoom && i.setActive(!0);
|
|
1369
1375
|
});
|
|
1370
|
-
}, changeCursor = (e,
|
|
1376
|
+
}, changeCursor = (e, i) => {
|
|
1371
1377
|
const n = e.getViewport();
|
|
1372
|
-
n && (n.style.cursor =
|
|
1373
|
-
}, useDrawLineManager = (e,
|
|
1374
|
-
const n = ref([]),
|
|
1375
|
-
|
|
1378
|
+
n && (n.style.cursor = i);
|
|
1379
|
+
}, useDrawLineManager = (e, i) => {
|
|
1380
|
+
const n = ref([]), l = ref("km"), a = (c) => {
|
|
1381
|
+
l.value = c;
|
|
1376
1382
|
};
|
|
1377
1383
|
let o;
|
|
1378
|
-
const
|
|
1379
|
-
changeCursor(e, "crosshair"),
|
|
1384
|
+
const f = ref(!1), p = () => {
|
|
1385
|
+
changeCursor(e, "crosshair"), L(), disableDoubleClickZoom(e), e.on("pointermove", O), e.getViewport().addEventListener("mouseout", () => {
|
|
1380
1386
|
o && o.classList.add("hidden");
|
|
1381
|
-
}), w(),
|
|
1387
|
+
}), w(), f.value = !0;
|
|
1382
1388
|
};
|
|
1383
1389
|
let t, r;
|
|
1384
|
-
const
|
|
1390
|
+
const L = () => {
|
|
1385
1391
|
t = new VectorSource(), r = new VectorLayer({
|
|
1386
1392
|
source: t,
|
|
1387
1393
|
zIndex: 1e3,
|
|
@@ -1395,11 +1401,11 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1395
1401
|
}), e == null || e.addLayer(r);
|
|
1396
1402
|
};
|
|
1397
1403
|
let m, F;
|
|
1398
|
-
const
|
|
1399
|
-
if (
|
|
1404
|
+
const O = (c) => {
|
|
1405
|
+
if (c.dragging)
|
|
1400
1406
|
return;
|
|
1401
1407
|
let u = "点击选择起点";
|
|
1402
|
-
m && (u = "单击继续,双击结束"), o && (o.innerHTML = u, F.setPosition(
|
|
1408
|
+
m && (u = "单击继续,双击结束"), o && (o.innerHTML = u, F.setPosition(c.coordinate), o.classList.remove("hidden"));
|
|
1403
1409
|
};
|
|
1404
1410
|
let v;
|
|
1405
1411
|
const w = () => {
|
|
@@ -1428,38 +1434,38 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1428
1434
|
// 添加条件函数,判断是否应该出发点绘制
|
|
1429
1435
|
condition: (u) => u.originalEvent.target.tagName !== "DIV"
|
|
1430
1436
|
}), e == null || e.addInteraction(v), Z(), B();
|
|
1431
|
-
let
|
|
1437
|
+
let c;
|
|
1432
1438
|
v.on("drawstart", function(u) {
|
|
1433
|
-
var
|
|
1439
|
+
var T;
|
|
1434
1440
|
m = u.feature, m.set("randomId", C());
|
|
1435
|
-
let
|
|
1436
|
-
|
|
1437
|
-
const
|
|
1438
|
-
|
|
1441
|
+
let y;
|
|
1442
|
+
c = (T = m.getGeometry()) == null ? void 0 : T.on("change", function(b) {
|
|
1443
|
+
const N = b.target, $ = computedDistance(N, l.value);
|
|
1444
|
+
y = N.getLastCoordinate(), k && $ && (k.innerHTML = $), x.setPosition(y);
|
|
1439
1445
|
});
|
|
1440
1446
|
}), v.on("drawend", function() {
|
|
1441
|
-
var u,
|
|
1442
|
-
if (
|
|
1443
|
-
const
|
|
1444
|
-
n.value.push({ id:
|
|
1447
|
+
var u, y, T;
|
|
1448
|
+
if (k && (k.className = "ol-tooltip ol-tooltip-static ol-tooltip-measure"), k != null && k.innerHTML) {
|
|
1449
|
+
const b = (m == null ? void 0 : m.get("randomId")) || C();
|
|
1450
|
+
n.value.push({ id: b, value: k == null ? void 0 : k.innerHTML }), k.innerHTML = `${k.innerHTML}<div class="ol-tooltip-delete-button" data-id="${b}"><i class="map-iconfont icon-delete"></i></div>`;
|
|
1445
1451
|
}
|
|
1446
|
-
(u = document.querySelector(".ol-selectable:has(.ol-tooltip-delete-button):last-child .ol-tooltip-delete-button")) == null || u.addEventListener("click", (
|
|
1447
|
-
var
|
|
1448
|
-
|
|
1449
|
-
const
|
|
1450
|
-
|
|
1451
|
-
}),
|
|
1452
|
+
(u = document.querySelector(".ol-selectable:has(.ol-tooltip-delete-button):last-child .ol-tooltip-delete-button")) == null || u.addEventListener("click", (b) => {
|
|
1453
|
+
var $;
|
|
1454
|
+
b.preventDefault(), b.stopPropagation();
|
|
1455
|
+
const N = ($ = b.target) == null ? void 0 : $.getAttribute("data-id");
|
|
1456
|
+
N && j(N);
|
|
1457
|
+
}), x.setOffset([0, -7]), m = null, k = null, Z(), c && unByKey(c), (T = (y = i.getProps()) == null ? void 0 : y.lineDrawEnd) == null || T.call(y, n.value);
|
|
1452
1458
|
});
|
|
1453
1459
|
}, C = () => Math.random().toString(36).substring(2, 9);
|
|
1454
|
-
let
|
|
1460
|
+
let k, x;
|
|
1455
1461
|
const Z = () => {
|
|
1456
|
-
|
|
1457
|
-
element:
|
|
1462
|
+
k != null && k.parentNode && k.parentNode.removeChild(k), k = document.createElement("div"), k.className = "ol-tooltip ol-tooltip-measure", x = new Overlay({
|
|
1463
|
+
element: k,
|
|
1458
1464
|
offset: [0, -15],
|
|
1459
1465
|
positioning: "bottom-center",
|
|
1460
1466
|
stopEvent: !1,
|
|
1461
1467
|
insertFirst: !1
|
|
1462
|
-
}), e == null || e.addOverlay(
|
|
1468
|
+
}), e == null || e.addOverlay(x);
|
|
1463
1469
|
}, B = () => {
|
|
1464
1470
|
o != null && o.parentNode && o.parentNode.removeChild(o), o = document.createElement("div"), o.className = "ol-tooltip hidden", F = new Overlay({
|
|
1465
1471
|
element: o,
|
|
@@ -1467,68 +1473,68 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1467
1473
|
positioning: "center-left"
|
|
1468
1474
|
}), e == null || e.addOverlay(F);
|
|
1469
1475
|
}, Y = () => {
|
|
1470
|
-
n.value.forEach((
|
|
1471
|
-
var
|
|
1472
|
-
const
|
|
1473
|
-
|
|
1474
|
-
const
|
|
1475
|
-
|
|
1476
|
-
}),
|
|
1477
|
-
}, j = (
|
|
1478
|
-
var
|
|
1479
|
-
const u = n.value.findIndex((
|
|
1476
|
+
n.value.forEach((c, u) => {
|
|
1477
|
+
var b, N;
|
|
1478
|
+
const y = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
|
|
1479
|
+
y[u] && ((N = (b = y[u]) == null ? void 0 : b.parentNode) == null || N.removeChild(y[u]));
|
|
1480
|
+
const T = t.getFeatures();
|
|
1481
|
+
T[u] && t.removeFeature(T[u]);
|
|
1482
|
+
}), D(), enableDoubleClickZoom(e), f.value = !1, changeCursor(e, "pointer");
|
|
1483
|
+
}, j = (c) => {
|
|
1484
|
+
var y, T, b, N;
|
|
1485
|
+
const u = n.value.findIndex(($) => $.id === c);
|
|
1480
1486
|
if (u !== -1) {
|
|
1481
1487
|
n.value.splice(u, 1);
|
|
1482
|
-
const
|
|
1483
|
-
|
|
1488
|
+
const $ = document.querySelectorAll(".ol-tooltip.ol-tooltip-static.ol-tooltip-measure");
|
|
1489
|
+
$[u] && ((T = (y = $[u]) == null ? void 0 : y.parentNode) == null || T.removeChild($[u]));
|
|
1484
1490
|
const A = t.getFeatures();
|
|
1485
1491
|
A[u] && t.removeFeature(A[u]);
|
|
1486
1492
|
}
|
|
1487
|
-
(
|
|
1488
|
-
},
|
|
1489
|
-
if (n.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((
|
|
1493
|
+
(N = (b = i.getProps()) == null ? void 0 : b.lineDrawEnd) == null || N.call(b, n.value);
|
|
1494
|
+
}, D = () => {
|
|
1495
|
+
if (n.value = [], document.querySelectorAll(".ol-tooltip.ol-tooltip-static").forEach((c) => {
|
|
1490
1496
|
var u;
|
|
1491
|
-
(u =
|
|
1497
|
+
(u = c == null ? void 0 : c.parentNode) == null || u.removeChild(c);
|
|
1492
1498
|
}), t.clear(), v) {
|
|
1493
|
-
const
|
|
1494
|
-
|
|
1499
|
+
const c = e.getInteractions().getArray().find((u) => getUid(u) === getUid(v));
|
|
1500
|
+
c && e.removeInteraction(c);
|
|
1495
1501
|
}
|
|
1496
|
-
e.removeLayer(r), o != null && o.parentNode && o.parentNode.removeChild(o),
|
|
1502
|
+
e.removeLayer(r), o != null && o.parentNode && o.parentNode.removeChild(o), k != null && k.parentNode && k.parentNode.removeChild(k);
|
|
1497
1503
|
};
|
|
1498
1504
|
return {
|
|
1499
|
-
open:
|
|
1505
|
+
open: p,
|
|
1500
1506
|
close: Y,
|
|
1501
1507
|
deleteLine: j,
|
|
1502
|
-
setUnit:
|
|
1503
|
-
getState: () =>
|
|
1508
|
+
setUnit: a,
|
|
1509
|
+
getState: () => f.value
|
|
1504
1510
|
};
|
|
1505
|
-
}, computedDistance = (e,
|
|
1506
|
-
const
|
|
1507
|
-
let
|
|
1508
|
-
switch (
|
|
1511
|
+
}, computedDistance = (e, i) => {
|
|
1512
|
+
const l = getLength(e);
|
|
1513
|
+
let a = "";
|
|
1514
|
+
switch (i) {
|
|
1509
1515
|
case "m":
|
|
1510
|
-
|
|
1516
|
+
a = `${Math.round(l * 100) / 100} m`;
|
|
1511
1517
|
break;
|
|
1512
1518
|
case "km":
|
|
1513
|
-
|
|
1519
|
+
a = `${Math.round(l / 1e3 * 100) / 100} km`;
|
|
1514
1520
|
break;
|
|
1515
1521
|
case "nm":
|
|
1516
|
-
|
|
1522
|
+
a = (Math.round(l / 1e3 * 100) / 100 / 1.852).toFixed(2) + " nm";
|
|
1517
1523
|
break;
|
|
1518
1524
|
}
|
|
1519
|
-
return
|
|
1520
|
-
}, useDrawPolygonManager = (e,
|
|
1521
|
-
let n,
|
|
1522
|
-
const
|
|
1525
|
+
return a;
|
|
1526
|
+
}, useDrawPolygonManager = (e, i) => {
|
|
1527
|
+
let n, l;
|
|
1528
|
+
const a = () => {
|
|
1523
1529
|
o(), changeCursor(e, "crosshair");
|
|
1524
1530
|
}, o = () => {
|
|
1525
|
-
t(),
|
|
1531
|
+
t(), k(), B(), O();
|
|
1526
1532
|
};
|
|
1527
|
-
let
|
|
1533
|
+
let f = null, p = null;
|
|
1528
1534
|
const t = () => {
|
|
1529
|
-
if (
|
|
1530
|
-
const
|
|
1531
|
-
source:
|
|
1535
|
+
if (f && p) return;
|
|
1536
|
+
const D = new VectorSource(), z = new VectorLayer({
|
|
1537
|
+
source: D,
|
|
1532
1538
|
style: new Style({
|
|
1533
1539
|
stroke: new Stroke({
|
|
1534
1540
|
color: "#fbcc33",
|
|
@@ -1536,45 +1542,45 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1536
1542
|
})
|
|
1537
1543
|
})
|
|
1538
1544
|
});
|
|
1539
|
-
|
|
1540
|
-
m && (
|
|
1545
|
+
f = z, p = D, e.on("pointermove", L), e.addLayer(z), e.on(["dblclick"], function(c) {
|
|
1546
|
+
m && (c.stopPropagation(), c.preventDefault());
|
|
1541
1547
|
});
|
|
1542
1548
|
};
|
|
1543
1549
|
let r;
|
|
1544
|
-
const
|
|
1545
|
-
if (
|
|
1550
|
+
const L = (D) => {
|
|
1551
|
+
if (D.dragging) return;
|
|
1546
1552
|
const z = r ? "单击继续,双击结束" : "点击选择起点";
|
|
1547
|
-
|
|
1553
|
+
x && (x.innerHTML = z, Z.setPosition(D.coordinate));
|
|
1548
1554
|
};
|
|
1549
1555
|
let m, F = !1;
|
|
1550
|
-
const
|
|
1556
|
+
const O = () => {
|
|
1551
1557
|
if (n) {
|
|
1552
|
-
|
|
1553
|
-
const
|
|
1554
|
-
if (
|
|
1555
|
-
const z = v(
|
|
1558
|
+
x != null && x.parentNode && x.parentNode.removeChild(x);
|
|
1559
|
+
const D = n.getGeometry();
|
|
1560
|
+
if (!D) return;
|
|
1561
|
+
const z = v(D, "nm");
|
|
1556
1562
|
w && (w.innerHTML = `
|
|
1557
1563
|
<span class="text">面积:${z}${F ? '<span class="error pl-12">超出可以绘画的距离</span>' : ""}</span>
|
|
1558
1564
|
`), w && (w.innerHTML += '<span class="delete-icon" ><i class="map-iconfont icon-delete" /></div>');
|
|
1559
|
-
const
|
|
1560
|
-
if (C.setPosition(u),
|
|
1561
|
-
const
|
|
1562
|
-
|
|
1565
|
+
const c = D.getCoordinates(), u = c[0][c[0].length - 2];
|
|
1566
|
+
if (C.setPosition(u), f) {
|
|
1567
|
+
const T = f.getSource();
|
|
1568
|
+
T && n && (T.clear(), T.addFeature(n));
|
|
1563
1569
|
}
|
|
1564
1570
|
setTimeout(() => {
|
|
1565
|
-
var
|
|
1566
|
-
(
|
|
1567
|
-
var
|
|
1568
|
-
console.log("delete"), Y(), (
|
|
1571
|
+
var T;
|
|
1572
|
+
(T = document.querySelector(".delete-icon")) == null || T.addEventListener("click", () => {
|
|
1573
|
+
var b, N;
|
|
1574
|
+
console.log("delete"), Y(), (N = (b = i.getProps()) == null ? void 0 : b.areaDrawEnd) == null || N.call(b, []);
|
|
1569
1575
|
});
|
|
1570
1576
|
}, 0);
|
|
1571
|
-
const
|
|
1572
|
-
e == null || e.getView().setCenter(
|
|
1577
|
+
const y = getCenter(n.getGeometry().getExtent());
|
|
1578
|
+
e == null || e.getView().setCenter(y);
|
|
1573
1579
|
return;
|
|
1574
1580
|
}
|
|
1575
1581
|
m = new Draw({
|
|
1576
1582
|
type: "Polygon",
|
|
1577
|
-
source:
|
|
1583
|
+
source: p,
|
|
1578
1584
|
trace: !0,
|
|
1579
1585
|
style: [new Style({
|
|
1580
1586
|
stroke: new Stroke({
|
|
@@ -1592,28 +1598,28 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1592
1598
|
color: "rgb(51,112,255, 1)"
|
|
1593
1599
|
})
|
|
1594
1600
|
}),
|
|
1595
|
-
geometry: function(
|
|
1596
|
-
const z =
|
|
1601
|
+
geometry: function(D) {
|
|
1602
|
+
const z = D.getGeometry().getCoordinates();
|
|
1597
1603
|
return new MultiPoint(z);
|
|
1598
1604
|
}
|
|
1599
1605
|
})]
|
|
1600
|
-
}), e == null || e.addInteraction(m), m.on("drawstart", (
|
|
1606
|
+
}), e == null || e.addInteraction(m), m.on("drawstart", (D) => {
|
|
1601
1607
|
var z;
|
|
1602
|
-
r =
|
|
1603
|
-
const u =
|
|
1604
|
-
if (F = Number(getLength(
|
|
1608
|
+
r = D.feature, l = (z = r.getGeometry()) == null ? void 0 : z.on("change", (c) => {
|
|
1609
|
+
const u = c.target, y = v(u, "nm"), b = u.getCoordinates()[0], N = new LineString([b[b.length - 2], b[b.length - 1]]), $ = computedDistance(N, "nm");
|
|
1610
|
+
if (F = Number(getLength(N) / 1e3) > 150, !y) return;
|
|
1605
1611
|
const A = '<span class="error pl-4">超出可以绘画的距离</span>';
|
|
1606
1612
|
w && (w.innerHTML = `
|
|
1607
1613
|
<div class="text">
|
|
1608
|
-
面积:${
|
|
1614
|
+
面积:${y}
|
|
1609
1615
|
${F ? A : ""}
|
|
1610
1616
|
</div>
|
|
1611
|
-
`),
|
|
1617
|
+
`), x && (x.innerHTML = `
|
|
1612
1618
|
<div class="text">
|
|
1613
|
-
面积:${
|
|
1619
|
+
面积:${y}
|
|
1614
1620
|
</div>
|
|
1615
1621
|
<div class="text ${F ? "error" : ""}">
|
|
1616
|
-
线段 ${
|
|
1622
|
+
线段 ${b.length - 2}: ${$}
|
|
1617
1623
|
${F ? A : ""}
|
|
1618
1624
|
|
|
1619
1625
|
</div>
|
|
@@ -1622,33 +1628,33 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1622
1628
|
</div>
|
|
1623
1629
|
`);
|
|
1624
1630
|
});
|
|
1625
|
-
}), m.on("drawend", (
|
|
1626
|
-
var
|
|
1627
|
-
if (
|
|
1628
|
-
n =
|
|
1629
|
-
const
|
|
1630
|
-
if (C.setPosition(u),
|
|
1631
|
-
const
|
|
1632
|
-
(
|
|
1631
|
+
}), m.on("drawend", (D) => {
|
|
1632
|
+
var y, T, b, N;
|
|
1633
|
+
if (!D.feature.getGeometry()) return;
|
|
1634
|
+
n = D.feature, w && (w.innerHTML += '<span class="delete-icon"><i class="map-iconfont icon-delete" /></div>'), C.setOffset([10, 0]);
|
|
1635
|
+
const c = D.feature.getGeometry().getCoordinates(), u = c[0][c[0].length - 2];
|
|
1636
|
+
if (C.setPosition(u), x != null && x.parentNode && x.parentNode.removeChild(x), (y = i.getProps()) != null && y.areaDrawEnd) {
|
|
1637
|
+
const $ = c[0].map((A) => transform(A, projection.mercator, projection.data));
|
|
1638
|
+
(b = (T = i.getProps()) == null ? void 0 : T.areaDrawEnd) == null || b.call(T, $);
|
|
1633
1639
|
}
|
|
1634
1640
|
m && (m.setActive(!1), e == null || e.removeInteraction(m), (e == null ? void 0 : e.getInteractions()).forEach((A) => {
|
|
1635
1641
|
A instanceof Draw && (A.setActive(!1), e == null || e.removeInteraction(A));
|
|
1636
|
-
})),
|
|
1637
|
-
var
|
|
1638
|
-
Y(), (A = (
|
|
1642
|
+
})), l && unByKey(l), (N = document.querySelector(".delete-icon")) == null || N.addEventListener("click", () => {
|
|
1643
|
+
var $, A;
|
|
1644
|
+
Y(), (A = ($ = i.getProps()) == null ? void 0 : $.areaDrawEnd) == null || A.call($, []);
|
|
1639
1645
|
});
|
|
1640
1646
|
});
|
|
1641
|
-
}, v = (
|
|
1642
|
-
const
|
|
1647
|
+
}, v = (D, z) => {
|
|
1648
|
+
const c = getArea(D);
|
|
1643
1649
|
switch (z) {
|
|
1644
1650
|
case "km":
|
|
1645
|
-
return
|
|
1651
|
+
return c > 1e4 ? Math.round(c / 1e6 * 100) / 100 + " km<sup>2</sup>" : Math.round(c * 100) / 100 + " m<sup>2</sup>";
|
|
1646
1652
|
case "nm":
|
|
1647
|
-
return
|
|
1653
|
+
return c > 1e4 ? Math.round(c / 1e6 / Math.pow(1.852, 2) * 100) / 100 + " nm<sup>2</sup>" : Math.round(c * 100) / 100 + " m<sup>2</sup>";
|
|
1648
1654
|
}
|
|
1649
1655
|
};
|
|
1650
1656
|
let w, C;
|
|
1651
|
-
const
|
|
1657
|
+
const k = () => {
|
|
1652
1658
|
w != null && w.parentNode && w.parentNode.removeChild(w), w = document.createElement("div"), w.style.display = "flex", w.className = "ol-tooltip ol-tooltip-draw-polygon", C = new Overlay({
|
|
1653
1659
|
element: w,
|
|
1654
1660
|
offset: [0, -15],
|
|
@@ -1657,49 +1663,49 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1657
1663
|
insertFirst: !1
|
|
1658
1664
|
}), e == null || e.addOverlay(C);
|
|
1659
1665
|
};
|
|
1660
|
-
let
|
|
1666
|
+
let x, Z;
|
|
1661
1667
|
const B = () => {
|
|
1662
|
-
|
|
1663
|
-
element:
|
|
1668
|
+
x != null && x.parentNode && x.parentNode.removeChild(x), x = document.createElement("div"), x.className = "ol-tooltip ol-help-tooltip", Z = new Overlay({
|
|
1669
|
+
element: x,
|
|
1664
1670
|
offset: [15, 0],
|
|
1665
1671
|
positioning: "center-left"
|
|
1666
1672
|
}), e == null || e.addOverlay(Z);
|
|
1667
1673
|
}, Y = () => {
|
|
1668
|
-
|
|
1674
|
+
p == null || p.clear(), n = null, k(), B(), O();
|
|
1669
1675
|
};
|
|
1670
1676
|
return {
|
|
1671
|
-
open:
|
|
1677
|
+
open: a,
|
|
1672
1678
|
close: () => {
|
|
1673
|
-
|
|
1679
|
+
p == null || p.clear(), p = null, f && (e.removeLayer(f), f = null), r = null, m && (m.setActive(!1), (e == null ? void 0 : e.getInteractions()).forEach((z) => {
|
|
1674
1680
|
z instanceof Draw && (z.setActive(!1), e == null || e.removeInteraction(z));
|
|
1675
|
-
}), m = null),
|
|
1681
|
+
}), m = null), l && unByKey(l), x != null && x.parentElement && x.parentElement.removeChild(x), w != null && w.parentElement && w.parentElement.removeChild(w), Z && e.removeOverlay(Z), C && e.removeOverlay(C), changeCursor(e, "pointer");
|
|
1676
1682
|
},
|
|
1677
1683
|
reset: Y
|
|
1678
1684
|
};
|
|
1679
1685
|
}, PORT_LAYER_CLASS_NAME = "zh-map-port-layer", usePortManager = (e) => {
|
|
1680
|
-
const
|
|
1681
|
-
let n,
|
|
1682
|
-
const
|
|
1686
|
+
const i = e.getInstall();
|
|
1687
|
+
let n, l, a = null, o = null;
|
|
1688
|
+
const f = (v, w = !0) => {
|
|
1683
1689
|
if (!(!v || v.length === 0)) {
|
|
1684
|
-
if (
|
|
1685
|
-
const C = v.find((
|
|
1690
|
+
if (l || (l = new VectorSource()), l.clear(), o) {
|
|
1691
|
+
const C = v.find((k) => k.id === o.id);
|
|
1686
1692
|
C ? o = C : v.push(o);
|
|
1687
1693
|
}
|
|
1688
1694
|
v.forEach((C) => {
|
|
1689
|
-
|
|
1695
|
+
p(C, w);
|
|
1690
1696
|
}), n || (n = new VectorLayer({
|
|
1691
1697
|
className: PORT_LAYER_CLASS_NAME,
|
|
1692
|
-
source:
|
|
1698
|
+
source: l,
|
|
1693
1699
|
zIndex: 100
|
|
1694
|
-
}),
|
|
1700
|
+
}), i.addLayer(n));
|
|
1695
1701
|
}
|
|
1696
|
-
},
|
|
1697
|
-
const C = e.getZoom(), [
|
|
1698
|
-
geometry: new Point(fromLonLat([Number(
|
|
1702
|
+
}, p = (v, w = !0) => {
|
|
1703
|
+
const C = e.getZoom(), [k, x] = v.latLon.split(","), Z = new Feature({
|
|
1704
|
+
geometry: new Point(fromLonLat([Number(k), Number(x)]))
|
|
1699
1705
|
});
|
|
1700
|
-
Z.setStyle(t(v, C, v.id === (o == null ? void 0 : o.id), w)), Z.set("portData", v),
|
|
1701
|
-
}, t = (v, w, C,
|
|
1702
|
-
const
|
|
1706
|
+
Z.setStyle(t(v, C, v.id === (o == null ? void 0 : o.id), w)), Z.set("portData", v), l.addFeature(Z);
|
|
1707
|
+
}, t = (v, w, C, k = !0) => {
|
|
1708
|
+
const x = (B) => `<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
1703
1709
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.6563 44.9304C22.5453 44.8844 22.4445 44.817 22.3595 44.7321C22.3595 44.7321 9.36986 31.7424 9.32952 31.6913C7.09059 29.0791 5.64794 25.8802 5.17255 22.4736C4.69716 19.0671 5.20896 15.5957 6.64728 12.471C8.08561 9.34625 10.3902 6.69909 13.2878 4.84325C16.1855 2.98741 19.5548 2.00068 22.9965 2C26.4381 1.99932 29.8078 2.98473 32.7062 4.83943C35.6046 6.69414 37.9102 9.34039 39.3498 12.4646C40.7893 15.5888 41.3025 19.0599 40.8284 22.4666C40.3544 25.8734 38.913 29.0729 36.6751 31.686C36.6401 31.737 23.6531 44.7321 23.6531 44.7321C23.5682 44.817 23.4674 44.8844 23.3564 44.9304C23.2454 44.9763 23.1265 45 23.0063 45C22.8862 45 22.7673 44.9763 22.6563 44.9304Z" fill="${B}"/>
|
|
1704
1710
|
<g clip-path="url(#clip0_10059_122082)">
|
|
1705
1711
|
<path d="M34.8624 22.8687L32.5874 25.6313L33.4812 25.7125C33.4812 25.7125 30.5562 28.0687 27.9562 28.2312C25.3562 28.3937 24.1374 24.9 24.1374 24.9V19.1312H27.6312V17.425H24.2999V15.15C25.7624 14.6625 26.7374 13.2812 26.7374 11.6562C26.7374 9.625 25.1124 8 23.0812 8H22.9999C20.9687 8 19.3437 9.625 19.3437 11.6562C19.3437 13.2812 20.3999 14.6625 21.7812 15.15V17.425H18.4499V19.1312H21.9437V24.9C21.9437 24.9 20.6437 28.3125 18.0437 28.2312C15.4437 28.0687 12.5187 25.7125 12.5187 25.7125L13.4124 25.6313L11.0562 22.8687L10.2437 26.2812L11.2187 26.0375C11.2187 26.0375 13.1687 29.5313 16.1749 30.8313C19.1812 32.2125 22.1874 33.9187 22.8374 34C23.4874 33.9187 26.4937 32.2125 29.4187 30.8313C32.3437 29.45 34.3749 26.0375 34.3749 26.0375L35.3499 26.2812L34.8624 22.8687ZM23.0812 13.6875C21.9437 13.6875 21.0499 12.7937 21.0499 11.6562C21.0499 10.6 21.9437 9.70625 22.9999 9.70625H23.0812C24.1374 9.70625 25.0312 10.6 25.0312 11.6562C25.1124 12.7937 24.1374 13.6875 23.0812 13.6875Z" fill="white"/>
|
|
@@ -1710,14 +1716,14 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1710
1716
|
</clipPath>
|
|
1711
1717
|
</defs>
|
|
1712
1718
|
</svg>
|
|
1713
|
-
`, Z = () => `data:image/svg+xml;utf8,${encodeURIComponent(
|
|
1714
|
-
return !
|
|
1719
|
+
`, Z = () => `data:image/svg+xml;utf8,${encodeURIComponent(x(C ? "#FF5733" : "#3370FF"))}`;
|
|
1720
|
+
return !k && !C ? new Style({
|
|
1715
1721
|
image: new Icon({
|
|
1716
1722
|
src: Z(),
|
|
1717
1723
|
scale: 0.5 * w / 10
|
|
1718
1724
|
}),
|
|
1719
1725
|
zIndex: C ? 110 : 100
|
|
1720
|
-
}) : new Style({
|
|
1726
|
+
}) : (console.log("showTitle", v.shortName, C), new Style({
|
|
1721
1727
|
text: new Text({
|
|
1722
1728
|
text: v.shortName,
|
|
1723
1729
|
font: "12px sans-serif",
|
|
@@ -1734,105 +1740,124 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1734
1740
|
scale: 0.5 * w / 10
|
|
1735
1741
|
}),
|
|
1736
1742
|
zIndex: C ? 110 : 100
|
|
1737
|
-
});
|
|
1743
|
+
}));
|
|
1738
1744
|
}, r = () => {
|
|
1739
|
-
if (
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
|
|
1745
|
-
|
|
1746
|
-
|
|
1747
|
-
|
|
1748
|
-
|
|
1749
|
-
|
|
1750
|
-
|
|
1745
|
+
if (l)
|
|
1746
|
+
if (a) {
|
|
1747
|
+
console.log("清除非选中的港口");
|
|
1748
|
+
const v = a.get("portData").id;
|
|
1749
|
+
l.getFeatures().forEach((w) => {
|
|
1750
|
+
w.get("portData").id !== v && l.removeFeature(w);
|
|
1751
|
+
});
|
|
1752
|
+
} else
|
|
1753
|
+
console.log("清除所有港口", l), l == null || l.clear();
|
|
1754
|
+
}, L = (v) => {
|
|
1755
|
+
if (l) {
|
|
1756
|
+
if (!v)
|
|
1757
|
+
return m();
|
|
1758
|
+
(a == null ? void 0 : a.get("portData").id) !== v.id && (m(), F(v));
|
|
1759
|
+
}
|
|
1751
1760
|
}, m = () => {
|
|
1752
|
-
if (
|
|
1753
|
-
const v =
|
|
1754
|
-
|
|
1755
|
-
|
|
1761
|
+
if (a) {
|
|
1762
|
+
const v = a == null ? void 0 : a.get("portData"), w = e.getZoom();
|
|
1763
|
+
l.getFeatures().forEach((k) => {
|
|
1764
|
+
k.get("portData").id === v.id && (k.setStyle(t(k.get("portData"), w, !1)), a = null);
|
|
1756
1765
|
});
|
|
1757
1766
|
}
|
|
1758
1767
|
}, F = (v) => {
|
|
1759
|
-
|
|
1760
|
-
|
|
1768
|
+
if (!l) return;
|
|
1769
|
+
const w = l.getFeatures();
|
|
1770
|
+
o = v, a = w.find((C) => C.get("portData").id === v.id), a == null || a.setStyle(t(v, e.getZoom(), !0));
|
|
1761
1771
|
};
|
|
1762
1772
|
return {
|
|
1763
|
-
render:
|
|
1773
|
+
render: f,
|
|
1764
1774
|
clear: r,
|
|
1765
|
-
selected:
|
|
1775
|
+
selected: L,
|
|
1766
1776
|
handlePortHover: (v) => {
|
|
1767
|
-
const w =
|
|
1777
|
+
const w = i == null ? void 0 : i.getTargetElement();
|
|
1768
1778
|
v && v.get("portData") && w && (w.style.cursor = "pointer");
|
|
1769
1779
|
}
|
|
1770
1780
|
};
|
|
1771
|
-
}, useEventManager = (e,
|
|
1772
|
-
const
|
|
1773
|
-
|
|
1774
|
-
var
|
|
1775
|
-
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
|
|
1794
|
-
|
|
1795
|
-
|
|
1796
|
-
|
|
1797
|
-
|
|
1798
|
-
|
|
1799
|
-
|
|
1781
|
+
}, useEventManager = (e, i, n, l, a, o) => {
|
|
1782
|
+
const f = e.getInstall();
|
|
1783
|
+
f.on("moveend", () => {
|
|
1784
|
+
var p, t;
|
|
1785
|
+
try {
|
|
1786
|
+
const r = e.getZoom();
|
|
1787
|
+
(t = (p = i.getProps()).mapMoveEnd) == null || t.call(p, r), n.reRenderTrackLine(), r <= MAP_ZOOM.shipModelMax && r >= MAP_ZOOM.shipTriggleMin && l.changeShipScale("end");
|
|
1788
|
+
} catch (r) {
|
|
1789
|
+
console.log("moveend---catch", r);
|
|
1790
|
+
}
|
|
1791
|
+
}), f.on("pointermove", (p) => {
|
|
1792
|
+
try {
|
|
1793
|
+
const t = f.getEventPixel(p.originalEvent), r = f == null ? void 0 : f.forEachFeatureAtPixel(t, (L) => L);
|
|
1794
|
+
l == null || l.handleShipMapEvent(r, "hover"), n == null || n.handleTrackMapEvent(r, "hover", p), r && a.handlePortHover(r);
|
|
1795
|
+
} catch (t) {
|
|
1796
|
+
console.log("pointermove---catch", t);
|
|
1797
|
+
}
|
|
1798
|
+
}), f.on("movestart", () => {
|
|
1799
|
+
try {
|
|
1800
|
+
const p = f == null ? void 0 : f.getView().getZoom();
|
|
1801
|
+
p && p <= MAP_ZOOM.shipModelMax && p >= MAP_ZOOM.shipTriggleMin && l.changeShipScale("start");
|
|
1802
|
+
} catch (p) {
|
|
1803
|
+
console.log("movestart---catch", p);
|
|
1804
|
+
}
|
|
1805
|
+
}), f.on("click", debounce((p) => {
|
|
1806
|
+
var t, r, L;
|
|
1807
|
+
try {
|
|
1808
|
+
if (console.log("1", o.getState()), o.getState()) return;
|
|
1809
|
+
const m = f.getEventPixel(p.originalEvent), F = f.forEachFeatureAtPixel(
|
|
1810
|
+
m,
|
|
1811
|
+
(O) => {
|
|
1812
|
+
if (O != null && O.get("shipData") || O != null && O.get("portData"))
|
|
1813
|
+
return O;
|
|
1814
|
+
}
|
|
1815
|
+
);
|
|
1816
|
+
if (console.log("2", F), !F) return;
|
|
1817
|
+
if (F.get("shipData"))
|
|
1818
|
+
l.handleShipMapEvent(F, "click", (t = i.getProps()) == null ? void 0 : t.selectShip);
|
|
1819
|
+
else if (F.get("portData")) {
|
|
1820
|
+
const O = F.get("portData");
|
|
1821
|
+
a.selected(O), (L = (r = i.getProps()) == null ? void 0 : r.selectPort) == null || L.call(r, O);
|
|
1800
1822
|
}
|
|
1823
|
+
p.preventDefault(), p.stopPropagation();
|
|
1824
|
+
} catch (m) {
|
|
1825
|
+
console.log("click---catch", m);
|
|
1801
1826
|
}
|
|
1802
1827
|
}, 150));
|
|
1803
1828
|
}, useMapController = () => {
|
|
1804
1829
|
const e = reactive([]);
|
|
1805
1830
|
return {
|
|
1806
|
-
createInstance: (
|
|
1831
|
+
createInstance: (l, a) => {
|
|
1807
1832
|
const o = useMapInitializer();
|
|
1808
|
-
o.initMap(
|
|
1809
|
-
const
|
|
1810
|
-
t.setProps(
|
|
1811
|
-
const r = useTrackManager(
|
|
1812
|
-
useEventManager(o, t, r, m, w,
|
|
1833
|
+
o.initMap(l, a);
|
|
1834
|
+
const f = o.getInstall(), p = useLayerManager(f), t = usePropsManager();
|
|
1835
|
+
t.setProps(a), p.setShowLayerType(a.layerType), p.setGreenTileVisible(a.showGreenLayer);
|
|
1836
|
+
const r = useTrackManager(f), L = useCarTrackManager(f, r), m = useShipManager(f), F = usePositionManager(f), O = useDrawLineManager(f, t), v = useDrawPolygonManager(f, t), w = usePortManager(o);
|
|
1837
|
+
useEventManager(o, t, r, m, w, O);
|
|
1813
1838
|
const C = () => {
|
|
1814
|
-
const
|
|
1839
|
+
const x = f.getView().calculateExtent(o.getSize()), Z = transform([x[0], x[1]], projection.mercator, projection.data), B = transform([x[2], x[3]], projection.mercator, projection.data);
|
|
1815
1840
|
return [Z[0], Z[1], B[0], B[1]];
|
|
1816
|
-
},
|
|
1841
|
+
}, k = {
|
|
1817
1842
|
id: Symbol("map-instance"),
|
|
1818
1843
|
innerMap: null,
|
|
1819
1844
|
map: o.getInstall(),
|
|
1820
1845
|
destroy: () => {
|
|
1821
|
-
e.splice(e.indexOf(
|
|
1846
|
+
e.splice(e.indexOf(k), 1);
|
|
1822
1847
|
},
|
|
1823
1848
|
methods: {
|
|
1824
1849
|
...o,
|
|
1825
|
-
layer:
|
|
1850
|
+
layer: p,
|
|
1826
1851
|
ship: m,
|
|
1827
1852
|
track: r,
|
|
1828
|
-
carTrack:
|
|
1853
|
+
carTrack: L,
|
|
1829
1854
|
port: {
|
|
1830
1855
|
render: w.render,
|
|
1831
1856
|
clear: w.clear,
|
|
1832
1857
|
selected: w.selected
|
|
1833
1858
|
},
|
|
1834
1859
|
position: F,
|
|
1835
|
-
drawLine:
|
|
1860
|
+
drawLine: O,
|
|
1836
1861
|
drawPolygon: v,
|
|
1837
1862
|
// 子模块
|
|
1838
1863
|
utils: {
|
|
@@ -1842,14 +1867,14 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1842
1867
|
}
|
|
1843
1868
|
}
|
|
1844
1869
|
};
|
|
1845
|
-
return e.push(
|
|
1870
|
+
return e.push(k), k;
|
|
1846
1871
|
},
|
|
1847
|
-
destroyInstance: (
|
|
1848
|
-
const
|
|
1849
|
-
|
|
1872
|
+
destroyInstance: (l) => {
|
|
1873
|
+
const a = e.findIndex((o) => o.id === l);
|
|
1874
|
+
a > -1 && (e[a].destroy(), e.splice(a, 1));
|
|
1850
1875
|
},
|
|
1851
1876
|
destroyAll: () => {
|
|
1852
|
-
e.forEach((
|
|
1877
|
+
e.forEach((l) => l.destroy()), e.splice(0, e.length);
|
|
1853
1878
|
},
|
|
1854
1879
|
getAllInstances: () => [...e]
|
|
1855
1880
|
};
|
|
@@ -1872,18 +1897,18 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1872
1897
|
selectPort: { type: Function, default: () => {
|
|
1873
1898
|
} }
|
|
1874
1899
|
},
|
|
1875
|
-
setup(e, { expose:
|
|
1876
|
-
const n = ref(),
|
|
1900
|
+
setup(e, { expose: i }) {
|
|
1901
|
+
const n = ref(), l = ref(), a = useMapController(), o = ref(), f = e, p = ref({
|
|
1877
1902
|
getInstall() {
|
|
1878
1903
|
}
|
|
1879
1904
|
});
|
|
1880
1905
|
return onMounted(() => {
|
|
1881
1906
|
var t;
|
|
1882
|
-
o.value =
|
|
1907
|
+
o.value = a.createInstance(n.value, f), p.value = o.value.methods, (t = l.value) == null || t.setScaleLine(o.value.map, f.scaleLineUnit);
|
|
1883
1908
|
}), onUnmounted(() => {
|
|
1884
1909
|
var t, r;
|
|
1885
|
-
|
|
1886
|
-
}),
|
|
1910
|
+
a.destroyInstance((t = o == null ? void 0 : o.value) == null ? void 0 : t.id), (r = o.value) == null || r.destroy();
|
|
1911
|
+
}), i({
|
|
1887
1912
|
getZoom: () => {
|
|
1888
1913
|
var t;
|
|
1889
1914
|
return (t = o.value) == null ? void 0 : t.methods.getZoom();
|
|
@@ -1901,16 +1926,16 @@ const createLabelFeatureStyle = (e) => {
|
|
|
1901
1926
|
return (t = o.value) == null ? void 0 : t.methods.getView();
|
|
1902
1927
|
},
|
|
1903
1928
|
setCenter: (t, r) => {
|
|
1904
|
-
var
|
|
1905
|
-
return (
|
|
1929
|
+
var L;
|
|
1930
|
+
return (L = o.value) == null ? void 0 : L.methods.setCenter(t, r);
|
|
1906
1931
|
},
|
|
1907
1932
|
getSize: () => {
|
|
1908
1933
|
var t;
|
|
1909
1934
|
return (t = o.value) == null ? void 0 : t.methods.getSize();
|
|
1910
1935
|
},
|
|
1911
1936
|
getCenter: (t, r) => {
|
|
1912
|
-
var
|
|
1913
|
-
return (
|
|
1937
|
+
var L;
|
|
1938
|
+
return (L = o.value) == null ? void 0 : L.methods.getCenter();
|
|
1914
1939
|
},
|
|
1915
1940
|
layer: {
|
|
1916
1941
|
setGreenTileVisible: (t) => {
|
|
@@ -2006,8 +2031,8 @@ const createLabelFeatureStyle = (e) => {
|
|
|
2006
2031
|
},
|
|
2007
2032
|
port: {
|
|
2008
2033
|
render: (t, r) => {
|
|
2009
|
-
var
|
|
2010
|
-
return (
|
|
2034
|
+
var L;
|
|
2035
|
+
return (L = o.value) == null ? void 0 : L.methods.port.render(t, r);
|
|
2011
2036
|
},
|
|
2012
2037
|
clear: () => {
|
|
2013
2038
|
var t;
|
|
@@ -2083,8 +2108,8 @@ const createLabelFeatureStyle = (e) => {
|
|
|
2083
2108
|
return (r = o.value) == null ? void 0 : r.methods.utils.convertSixHundredThousandToLatLng(...t);
|
|
2084
2109
|
},
|
|
2085
2110
|
calculateCirclePoints: (t, r) => {
|
|
2086
|
-
var
|
|
2087
|
-
return (
|
|
2111
|
+
var L;
|
|
2112
|
+
return (L = o.value) == null ? void 0 : L.methods.utils.calculateCirclePoints(t, r);
|
|
2088
2113
|
}
|
|
2089
2114
|
}
|
|
2090
2115
|
}), (t, r) => (openBlock(), createElementBlock("div", _hoisted_1, [
|
|
@@ -2096,7 +2121,7 @@ const createLabelFeatureStyle = (e) => {
|
|
|
2096
2121
|
}, null, 512),
|
|
2097
2122
|
createVNode(ScaleLine, {
|
|
2098
2123
|
ref_key: "scaleLineRef",
|
|
2099
|
-
ref:
|
|
2124
|
+
ref: l
|
|
2100
2125
|
}, null, 512),
|
|
2101
2126
|
createVNode(ZoomControl, {
|
|
2102
2127
|
ref: "zoomControlRef",
|