|
|
@@ -1,11 +1,5 @@
|
|
|
<template>
|
|
|
- <div
|
|
|
- id="tracking-map"
|
|
|
- ref="mapContainer"
|
|
|
- style="width: 100%; height: 520px"
|
|
|
- class="tracking-map"
|
|
|
- :class="{ 'dark-mode': themeStore.theme === 'dark' }"
|
|
|
- ></div>
|
|
|
+ <div id="tracking-map" style="width: 100%; height: 448px" class="tracking-map"></div>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
import L from 'leaflet'
|
|
|
@@ -13,11 +7,6 @@ import DestinationIcon from '../images/destinationIcon.png'
|
|
|
import OriginIcon from '../images/originIcon.png'
|
|
|
import TransferIcon from '../images/transferIcon.png'
|
|
|
import { onMounted, ref, watch } from 'vue'
|
|
|
-import * as turf from '@turf/turf'
|
|
|
-import { mapData } from './mapData'
|
|
|
-import { useThemeStore } from '@/stores/modules/theme'
|
|
|
-
|
|
|
-const themeStore = useThemeStore()
|
|
|
|
|
|
const props = defineProps<{
|
|
|
serial_no?: string
|
|
|
@@ -64,179 +53,6 @@ const initMap = () => {
|
|
|
}).addTo(map)
|
|
|
}
|
|
|
|
|
|
-// 修正经度
|
|
|
-const fixLng = (lng: number) => {
|
|
|
- while (lng > 180) lng = lng - 360
|
|
|
- while (lng <= -180) lng = lng + 360
|
|
|
- return lng
|
|
|
-}
|
|
|
-const getBBox = () => {
|
|
|
- let bnd = map.getBounds()
|
|
|
- let ww = bnd.getEast() - bnd.getWest()
|
|
|
- let cent_pt = map.getCenter()
|
|
|
- let bbox = [
|
|
|
- fixLng(cent_pt.lng - ww / 2),
|
|
|
- bnd.getSouth(),
|
|
|
- fixLng(cent_pt.lng + ww / 2),
|
|
|
- bnd.getNorth()
|
|
|
- ]
|
|
|
-
|
|
|
- let bbox2 = []
|
|
|
- let bbox3 = []
|
|
|
- if (ww > 360) {
|
|
|
- bbox[0] = -180
|
|
|
- bbox[2] = 0
|
|
|
-
|
|
|
- bbox2[0] = 0
|
|
|
- bbox2[1] = bbox[1]
|
|
|
- bbox2[2] = 180
|
|
|
- bbox2[3] = bbox[3]
|
|
|
- }
|
|
|
- if (bbox[2] * bbox[0] < 0 || bbox[2] < bbox[0]) {
|
|
|
- if (bbox[0] >= 0) {
|
|
|
- bbox2[0] = -180
|
|
|
- bbox2[2] = bbox[2]
|
|
|
- bbox2[1] = bbox[1]
|
|
|
- bbox2[3] = bbox[3]
|
|
|
- bbox[2] = 180
|
|
|
- } else {
|
|
|
- bbox2[0] = 0
|
|
|
- bbox2[2] = bbox[2]
|
|
|
- bbox2[1] = bbox[1]
|
|
|
- bbox2[3] = bbox[3]
|
|
|
- bbox[2] = 0
|
|
|
- }
|
|
|
- }
|
|
|
- if (bbox2[2] * bbox2[0] < 0 || bbox2[2] < bbox2[0]) {
|
|
|
- if (bbox2[0] >= 0) {
|
|
|
- bbox3[0] = -180
|
|
|
- bbox3[2] = bbox2[2]
|
|
|
- bbox3[1] = bbox2[1]
|
|
|
- bbox3[3] = bbox2[3]
|
|
|
- bbox2[2] = 180
|
|
|
- } else {
|
|
|
- bbox3[0] = 0
|
|
|
- bbox3[2] = bbox2[2]
|
|
|
- bbox3[1] = bbox2[1]
|
|
|
- bbox3[3] = bbox2[3]
|
|
|
- bbox2[2] = 0
|
|
|
- }
|
|
|
- }
|
|
|
- let ll = []
|
|
|
- ll.push(bbox)
|
|
|
-
|
|
|
- if (bbox2.length > 0) ll.push(bbox2)
|
|
|
- if (bbox3.length > 0) ll.push(bbox3)
|
|
|
- return ll
|
|
|
-}
|
|
|
-let track_added_marker = []
|
|
|
-
|
|
|
-const clear_marker = () => {
|
|
|
- track_added_marker.forEach((v) => {
|
|
|
- map!.removeLayer(v)
|
|
|
- })
|
|
|
-
|
|
|
- track_added_marker = []
|
|
|
-}
|
|
|
-const draw_marker = (dottedLine = [], solidLine = []) => {
|
|
|
- clear_marker()
|
|
|
- dottedLine.forEach((l) => {
|
|
|
- addMapLine(l, true, { color: '#ff7500', weight: 2 })
|
|
|
- })
|
|
|
- solidLine.forEach((l) => {
|
|
|
- addMapLine(l, false, { color: '#ff7500', weight: 2 })
|
|
|
- })
|
|
|
-}
|
|
|
-const addMapLine = (l, IsDash, opts) => {
|
|
|
- let mpts = l.pts
|
|
|
- if (mpts == null || mpts.length == 0) return
|
|
|
-
|
|
|
- let bnd = map.getBounds()
|
|
|
- let ww = bnd.getEast() - bnd.getWest()
|
|
|
- let cc = Math.ceil(ww / 360)
|
|
|
-
|
|
|
- let boxlist = getBBox()
|
|
|
-
|
|
|
- let ll = []
|
|
|
-
|
|
|
- for (let ii = 0; ii < mpts.length; ii++) {
|
|
|
- ll[ii] = [mpts[ii][1], mpts[ii][0]]
|
|
|
- }
|
|
|
- let pline = turf.lineString(ll, { name: '' })
|
|
|
- let level = map.getZoom()
|
|
|
- let options = {
|
|
|
- tolerance:
|
|
|
- Math.round(
|
|
|
- ((level < 8 ? 0.0005 : level < 12 ? 0.00005 : 0) / (level == 0 ? 1 : level)) * 1000000
|
|
|
- ) / 1000000,
|
|
|
- highQuality: false
|
|
|
- }
|
|
|
- let simplified = turf.simplify(pline, options)
|
|
|
-
|
|
|
- let lines_list = []
|
|
|
- let clipped: any = simplified
|
|
|
- boxlist.forEach((bbox) => {
|
|
|
- let bb = bbox
|
|
|
- clipped = turf.bboxClip(simplified, bb)
|
|
|
- if (clipped != null) {
|
|
|
- if (clipped.geometry.type === 'LineString') {
|
|
|
- let line_pts = clipped.geometry.coordinates
|
|
|
- let pta = []
|
|
|
- let jj = 0
|
|
|
- for (let ii = 0; ii < line_pts.length; ii++) {
|
|
|
- pta[jj++] = [line_pts[ii][1], line_pts[ii][0]]
|
|
|
- }
|
|
|
- lines_list.push(pta)
|
|
|
- } else if (clipped.geometry.type === 'MultiLineString') {
|
|
|
- clipped.geometry.coordinates.forEach((_pts) => {
|
|
|
- let line_pts = _pts
|
|
|
- let pta = []
|
|
|
- let jj = 0
|
|
|
- for (let ii = 0; ii < line_pts.length; ii++) {
|
|
|
- pta[jj++] = [line_pts[ii][1], line_pts[ii][0]]
|
|
|
- }
|
|
|
- lines_list.push(pta)
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- let cc1 = Math.floor(bnd.getWest() / 360)
|
|
|
- let cc2 = Math.ceil(bnd.getEast() / 360)
|
|
|
- cc = cc2 - cc1 + 1
|
|
|
-
|
|
|
- let kk = cc1
|
|
|
- // let lines_list = [mpts]
|
|
|
- while (kk >= cc1 && kk <= cc2 && cc > 0) {
|
|
|
- lines_list.forEach((a) => {
|
|
|
- let ii = 0
|
|
|
- let jj = 0
|
|
|
- let pts = []
|
|
|
- for (ii = 0; ii < a.length; ii++) pts[jj++] = [a[ii][0], a[ii][1] + kk * 360]
|
|
|
-
|
|
|
- if (jj > 0) {
|
|
|
- if (IsDash) {
|
|
|
- showTrackLine(
|
|
|
- pts,
|
|
|
- jj,
|
|
|
- Object.assign({}, { color: '#ff7500', dashArray: '10', weight: 2 }, opts)
|
|
|
- )
|
|
|
- } else {
|
|
|
- showTrackLine(pts, jj, Object.assign({}, { color: '#ff7500', weight: 1 }, opts))
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- kk++
|
|
|
- cc--
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-const showTrackLine = (pts, jj, opts) => {
|
|
|
- let arrow = L.polyline(pts, Object.assign({}, { color: '#ff7500', weight: 2 }, opts)).addTo(map)
|
|
|
- track_added_marker.push(arrow)
|
|
|
-}
|
|
|
-
|
|
|
const addResetZoomButton = (center: L.LatLng, zoom: number) => {
|
|
|
const ResetZoomControl = L.Control.extend({
|
|
|
options: {
|
|
|
@@ -539,6 +355,7 @@ onUnmounted(() => {
|
|
|
<style lang="scss">
|
|
|
@import 'leaflet/dist/leaflet.css';
|
|
|
.tracking-map {
|
|
|
+ border-radius: 12px;
|
|
|
.leaflet-popup-content-wrapper {
|
|
|
border-radius: 6px;
|
|
|
}
|
AmandaG