|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div id="tracking-map" style="width: 100%; height: 520px" class="tracking-map"></div>
|
|
|
+ <div id="tracking-map" style="width: 100%; height: 448px" class="tracking-map"></div>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
import L from 'leaflet'
|
|
|
@@ -7,7 +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'
|
|
|
|
|
|
const props = defineProps<{
|
|
|
serial_no?: string
|
|
|
@@ -54,197 +53,6 @@ const initMap = () => {
|
|
|
}).addTo(map)
|
|
|
}
|
|
|
|
|
|
-const track_base_line = ref([])
|
|
|
-const track_first_pt = null
|
|
|
-// 修正经度
|
|
|
-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
|
|
|
-}
|
|
|
-const draw_marker = () => {
|
|
|
- track_base_line.value.forEach((l) => {
|
|
|
- addMapLine(l, true, false, { color: '#ff7500', weight: 2 })
|
|
|
- })
|
|
|
-}
|
|
|
-const addMapLine = (l, IsDash, HasArrow, 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 cent_pt = map.getCenter()
|
|
|
- // let count = Math.ceil(cent_pt.lng / 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 llIndex = 0
|
|
|
- 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),
|
|
|
- HasArrow
|
|
|
- )
|
|
|
- else
|
|
|
- showTrackLine(pts, jj, Object.assign({}, { color: '#ff7500', weight: 1 }, opts), HasArrow)
|
|
|
- // llIndex++
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- kk++
|
|
|
- cc--
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-const showTrackLine = (pts, jj, opts, HasArrow) => {
|
|
|
- let arrow = L.polyline(pts, Object.assign({}, { color: '#ff7500', weight: 2 }, opts)).addTo(map)
|
|
|
-
|
|
|
- // if (HasArrow) {
|
|
|
- // let arrowHead = L.polylineDecorator(arrow, {
|
|
|
- // patterns: [
|
|
|
- // {
|
|
|
- // offset: 0,
|
|
|
- // repeat: 25,
|
|
|
- // symbol: L.Symbol.arrowHead({
|
|
|
- // pixelSize: 10,
|
|
|
- // pathOptions: Object.assign({}, { color: '#ff7500', fillOpacity: 0.5, weight: 0.8 }, opts)
|
|
|
- // })
|
|
|
- // }
|
|
|
- // ]
|
|
|
- // }).addTo(map)
|
|
|
- // }
|
|
|
-}
|
|
|
-
|
|
|
-const test = () => {
|
|
|
- track_base_line.value = mapData
|
|
|
- draw_marker()
|
|
|
- // map.on('moveend', function (e) {
|
|
|
- // draw_marker()
|
|
|
- // })
|
|
|
- // map.on('zoomend', function (e) {
|
|
|
- // draw_marker()
|
|
|
- // })
|
|
|
-}
|
|
|
-
|
|
|
const addResetZoomButton = (center: L.LatLng, zoom: number) => {
|
|
|
const ResetZoomControl = L.Control.extend({
|
|
|
options: {
|
|
|
@@ -372,6 +180,7 @@ onMounted(() => {
|
|
|
<style lang="scss">
|
|
|
@import 'leaflet/dist/leaflet.css';
|
|
|
.tracking-map {
|
|
|
+ border-radius: 12px;
|
|
|
.leaflet-popup-content-wrapper {
|
|
|
border-radius: 6px;
|
|
|
}
|
zhouyuhao