|
|
@@ -5,6 +5,7 @@
|
|
|
style="width: 100%; height: 448px"
|
|
|
class="tracking-map"
|
|
|
:class="{ 'dark-mode': themeStore.theme === 'dark' }"
|
|
|
+ v-vloading="loading"
|
|
|
></div>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
@@ -12,8 +13,9 @@ import L from 'leaflet'
|
|
|
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 { useThemeStore } from '@/stores/modules/theme'
|
|
|
+import { transportationMode } from '@/components/TransportationMode'
|
|
|
|
|
|
const themeStore = useThemeStore()
|
|
|
|
|
|
@@ -21,6 +23,7 @@ const props = defineProps<{
|
|
|
serial_no?: string
|
|
|
uncode?: string
|
|
|
_schemas?: string
|
|
|
+ mode?: string
|
|
|
}>()
|
|
|
|
|
|
const markerPositions = ref([])
|
|
|
@@ -63,6 +66,179 @@ 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: {
|
|
|
@@ -98,9 +274,80 @@ let initialCenter: L.LatLng | null = null
|
|
|
let initialZoomLevel: number | null = null
|
|
|
let isFirstRender = true // 标记是否为首次渲染
|
|
|
|
|
|
-let allMarkers = []
|
|
|
+let mirrorMarkers = ref({})
|
|
|
+
|
|
|
+// 设置中心点之后的东北角和西南角的经纬度对象
|
|
|
+let latLngBoundsObj = ref({ northEast: { lat: 0, lng: 0 }, southWest: { lat: 0, lng: 0 } })
|
|
|
+// 设置中心和缩放级别
|
|
|
+const setCenterAndZoom = () => {
|
|
|
+ if (viewData.value.length > 0) {
|
|
|
+ // 根据标记的位置设置中心点以及缩放级别
|
|
|
+ const bounds = L.latLngBounds(viewData.value)
|
|
|
+ map!.fitBounds(bounds, { paddingTopLeft: [20, 70], paddingBottomRight: [0, 0] })
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ if (isFirstRender) {
|
|
|
+ initialCenter = map!.getCenter()
|
|
|
+ initialZoomLevel = map!.getZoom()
|
|
|
+ isFirstRender = false
|
|
|
+ // 定义最小缩放等级 缩放等级数值越小，地图显示的区域越大
|
|
|
+ const minZoom = 5 // 示例：最小缩放等级为 5
|
|
|
+
|
|
|
+ // 如果当前缩放等级大于最小缩放等级，则调整缩放等级
|
|
|
+ if (initialZoomLevel > minZoom) {
|
|
|
+ map!.setZoom(minZoom)
|
|
|
+ initialZoomLevel = minZoom
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 获取东北角和西南角的经纬度
|
|
|
+ const curLatLon = map.getBounds()
|
|
|
+ latLngBoundsObj.value = {
|
|
|
+ northEast: { lat: curLatLon.getNorth(), lng: curLatLon.getEast() },
|
|
|
+ southWest: { lat: curLatLon.getSouth(), lng: curLatLon.getWest() }
|
|
|
+ }
|
|
|
+ addResetZoomButton(initialCenter!, initialZoomLevel!)
|
|
|
+ }, 500)
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
-// 添加标记后更新中心和缩放级别
|
|
|
+// 用来记录初始化时默认打开的弹出窗口，以便在地图移动时判断是否需要重新打开弹出窗口
|
|
|
+const popupObj = ref({})
|
|
|
+// 将经纬度格式化为四位小数，防止精度问题
|
|
|
+const formatLocationNum = (num: string | number) => {
|
|
|
+ return Number(num).toFixed(4)
|
|
|
+}
|
|
|
+// 判断是否需要打开弹出窗口
|
|
|
+const shouldDisplayPopup = (isInit?: boolean) => {
|
|
|
+ const allMarkers = {
|
|
|
+ ...initMarksObj.value,
|
|
|
+ ...mirrorMarkers.value
|
|
|
+ }
|
|
|
+ Object.values(allMarkers).forEach((marker: any) => {
|
|
|
+ // 创建 LatLngBounds 对象
|
|
|
+ const bounds = L.latLngBounds(latLngBoundsObj.value.southWest, latLngBoundsObj.value.northEast)
|
|
|
+ const marksLatLng = marker.getLatLng()
|
|
|
+ // 检查标记是否在边界内
|
|
|
+ const isInsideBounds = bounds.contains(marksLatLng)
|
|
|
+ const locationKey = `${formatLocationNum(marksLatLng.lat)},${formatLocationNum(marksLatLng.lng)}`
|
|
|
+ if (!isInsideBounds) return
|
|
|
+ if (isInit) {
|
|
|
+ if (!popupObj.value[locationKey]) {
|
|
|
+ popupObj.value[locationKey] = true
|
|
|
+ marker.openPopup()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ const popupItem = popupObj.value[locationKey]
|
|
|
+ // 如果用户没有关闭弹出窗口，则重新打开弹出窗口
|
|
|
+ if (popupItem) {
|
|
|
+ marker.openPopup()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 初始标记的位置
|
|
|
+const initMarksObj = ref({})
|
|
|
+// 添加标记
|
|
|
const addMarkersToMap = () => {
|
|
|
if (!map) return // 确保地图已经初始化
|
|
|
|
|
|
@@ -116,35 +363,184 @@ const addMarkersToMap = () => {
|
|
|
</p>
|
|
|
</div>
|
|
|
`
|
|
|
- marker
|
|
|
- .bindPopup(customPopupContent, {
|
|
|
- closeButton: false,
|
|
|
- autoClose: false,
|
|
|
- closeOnClick: false
|
|
|
- })
|
|
|
- .openPopup()
|
|
|
- allMarkers[`${position.lat},${position.lng}`] = marker
|
|
|
+ marker.bindPopup(customPopupContent, {
|
|
|
+ closeButton: false,
|
|
|
+ autoClose: false,
|
|
|
+ autoPan: false, // 防止弹出框打开时移动地图
|
|
|
+ closeOnClick: false
|
|
|
+ })
|
|
|
+ marker.on('click', () => {
|
|
|
+ const latLng = marker.getLatLng() // 获取标记的经纬度
|
|
|
+ const key = `${latLng.lat},${latLng.lng}` // 使用经纬度组合成一个唯一键
|
|
|
+ if (key in popupObj.value) {
|
|
|
+ popupObj.value[key] = marker.isPopupOpen() // 直接切换 isPopup 状态
|
|
|
+ }
|
|
|
+ })
|
|
|
+ initMarksObj.value[`${position.lat},${position.lng}`] = marker
|
|
|
})
|
|
|
+ setTimeout(() => {
|
|
|
+ updateVisibleMarkers(true)
|
|
|
+ }, 1000)
|
|
|
+}
|
|
|
|
|
|
- if (viewData.value.length > 0) {
|
|
|
- // 根据标记的位置设置中心点以及缩放级别
|
|
|
- const bounds = L.latLngBounds(viewData.value)
|
|
|
- map!.fitBounds(bounds, { paddingTopLeft: [20, 70], paddingBottomRight: [0, 0] })
|
|
|
- setTimeout(() => {
|
|
|
- if (isFirstRender) {
|
|
|
- initialCenter = map!.getCenter()
|
|
|
- initialZoomLevel = map!.getZoom()
|
|
|
- isFirstRender = false
|
|
|
+// 新增轮船当前位置标记
|
|
|
+const addShipMarker = (x: number) => {
|
|
|
+ const solidLine = allMapData.value.solidLine
|
|
|
+ // 如果轮船还未出发，则显示起点轮船标记
|
|
|
+ if (solidLine.length === 0) {
|
|
|
+ // 创建轮船图标
|
|
|
+ const arrowIcon = L.divIcon({
|
|
|
+ html: `
|
|
|
+ <div class="container">
|
|
|
+ <div class="circle"></div>
|
|
|
+ <span style="padding: 0; color:white; border:1px solid white" class="font_family icon-${transportationMode?.[props?.mode]}" ></span>
|
|
|
+ </div>
|
|
|
+ `,
|
|
|
+ className: 'arrow-icon',
|
|
|
+ iconSize: [50, 50],
|
|
|
+ iconAnchor: [25, 25], // 箭头的中心点
|
|
|
+ popupAnchor: [0, -25] // 弹出框的锚点
|
|
|
+ })
|
|
|
+
|
|
|
+ let curMarkerLocation = markerPositions.value.find((item) => item.label === 'Origin')
|
|
|
+ const arrowMarker = L.marker([curMarkerLocation.lat, curMarkerLocation.lng + x * 360], {
|
|
|
+ icon: arrowIcon
|
|
|
+ }).addTo(map)
|
|
|
+ track_added_marker.push(arrowMarker)
|
|
|
+ } else if (solidLine.length > 0) {
|
|
|
+ // 如果轮船已经出发，则显示轮船当前位置标记
|
|
|
+ // 如果线段至少有两个点，才添加箭头
|
|
|
+ // 获取线段的最后一个点和倒数第二个点
|
|
|
+ const lastPoint = solidLine[solidLine.length - 1]
|
|
|
+ const secondLastPoint = solidLine[solidLine.length - 2]
|
|
|
+ // 计算线段末端的角度（以弧度为单位）
|
|
|
+ const angle =
|
|
|
+ (Math.atan2(
|
|
|
+ Number(lastPoint.lon) - Number(secondLastPoint.lon), // Δlon (x)
|
|
|
+ Number(lastPoint.lat) - Number(secondLastPoint.lat) // Δlat (y)
|
|
|
+ ) *
|
|
|
+ (180 / Math.PI) +
|
|
|
+ 360) %
|
|
|
+ 360
|
|
|
+ // 创建自定义箭头图标
|
|
|
+ const arrowIcon = L.divIcon({
|
|
|
+ html: `
|
|
|
+ <div style="transform: rotate(${angle}deg);" class="container">
|
|
|
+ <div class="circle"></div>
|
|
|
+ <span style="color:white;border:1px solid white" class="font_family icon-icon_arrow_b"></span>
|
|
|
+ </div>
|
|
|
+ `,
|
|
|
+ className: 'arrow-icon',
|
|
|
+ iconSize: [50, 50],
|
|
|
+ iconAnchor: [25, 25], // 箭头的中心点
|
|
|
+ popupAnchor: [0, -25] // 弹出框的锚点
|
|
|
+ })
|
|
|
+ // 创建箭头标记，并根据计算出的角度旋转箭头
|
|
|
+ const arrowMarker = L.marker([Number(lastPoint.lat), Number(lastPoint.lon) + x * 360], {
|
|
|
+ icon: arrowIcon
|
|
|
+ }).addTo(map)
|
|
|
+ // 将箭头标记也存储在 track_added_marker 数组中，以便后续管理
|
|
|
+ track_added_marker.push(arrowMarker)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 更新可见标记
|
|
|
+const updateVisibleMarkers = (isInit?: boolean) => {
|
|
|
+ const newVisibleMarkers = new Set()
|
|
|
+
|
|
|
+ let bnd = map.getBounds()
|
|
|
+ let ww = bnd.getEast() - bnd.getWest()
|
|
|
+
|
|
|
+ let cc = Math.ceil(ww / 360)
|
|
|
+
|
|
|
+ let cc1 = Math.floor(bnd.getWest() / 360)
|
|
|
+ let cc2 = Math.ceil(bnd.getEast() / 360)
|
|
|
+ cc = cc2 - cc1 + 1
|
|
|
+
|
|
|
+ let x = cc1
|
|
|
+
|
|
|
+ // 移除所有标记
|
|
|
+ Object.values(mirrorMarkers.value).forEach((marker: any) => {
|
|
|
+ map.removeLayer(marker)
|
|
|
+ delete mirrorMarkers.value[`${marker.getLatLng().lat},${marker.getLatLng().lng}`]
|
|
|
+ })
|
|
|
+
|
|
|
+ // 计算当前视图中的标记，包括多地球的情况
|
|
|
+ while (x >= cc1 && x <= cc2 && cc > 0) {
|
|
|
+ if (x === 0) {
|
|
|
+ // 初始化时不添加当前轮船位置标记
|
|
|
+ if (!isInit) addShipMarker(x)
|
|
|
+ x++
|
|
|
+ cc--
|
|
|
+ continue
|
|
|
+ }
|
|
|
+
|
|
|
+ Object.values(initMarksObj.value).forEach((marker: any) => {
|
|
|
+ const latLng = marker.getLatLng()
|
|
|
+ const key = `${latLng.lat},${latLng.lng + x * 360}`
|
|
|
+ if (!mirrorMarkers.value[key]) {
|
|
|
+ const newMarker: any = L.marker([latLng.lat, latLng.lng + x * 360], {
|
|
|
+ icon: marker.options.icon
|
|
|
+ }).bindPopup(marker.getPopup().getContent(), marker.getPopup().options)
|
|
|
+
|
|
|
+ newMarker.on('click', () => {
|
|
|
+ const latLng = newMarker.getLatLng() // 获取标记的经纬度
|
|
|
+ const key = `${latLng.lat},${latLng.lng}` // 使用经纬度组合成一个唯一键
|
|
|
+
|
|
|
+ if (key in popupObj.value) {
|
|
|
+ popupObj.value[key] = newMarker.isPopupOpen() // 直接切换 isPopup 状态
|
|
|
+ }
|
|
|
+ })
|
|
|
+ mirrorMarkers.value[key] = newMarker
|
|
|
+ map.addLayer(newMarker)
|
|
|
}
|
|
|
- addResetZoomButton(initialCenter!, initialZoomLevel!)
|
|
|
- }, 500)
|
|
|
+ newVisibleMarkers.add(mirrorMarkers.value[key])
|
|
|
+ })
|
|
|
+
|
|
|
+ addShipMarker(x)
|
|
|
+
|
|
|
+ x++
|
|
|
+ cc--
|
|
|
}
|
|
|
+ shouldDisplayPopup(isInit)
|
|
|
+}
|
|
|
+
|
|
|
+// 处理得到的数据
|
|
|
+const handleData = (data) => {
|
|
|
+ let key = 0
|
|
|
+ let curLine = []
|
|
|
+ let resultLine = []
|
|
|
+ data.forEach((item, index) => {
|
|
|
+ if (item.sn === '1' && key === 0) {
|
|
|
+ key++
|
|
|
+ curLine.push([Number(item.lat), Number(item.lon)])
|
|
|
+ } else if (item.sn === '1' && key !== 0) {
|
|
|
+ resultLine.push({
|
|
|
+ name: key,
|
|
|
+ pts: curLine
|
|
|
+ })
|
|
|
+ curLine = [[Number(item.lat), Number(item.lon)]]
|
|
|
+ key++
|
|
|
+ }
|
|
|
+ if (item.sn !== '1') {
|
|
|
+ curLine.push([Number(item.lat), Number(item.lon)])
|
|
|
+ }
|
|
|
+ if (index === data.length - 1 && item.sn !== '1') {
|
|
|
+ resultLine.push({
|
|
|
+ name: key,
|
|
|
+ pts: curLine
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return resultLine
|
|
|
}
|
|
|
|
|
|
const allMapData = ref()
|
|
|
const viewData = ref([])
|
|
|
+const loading = ref(false)
|
|
|
// 请求接口并处理标记
|
|
|
const getMarker = () => {
|
|
|
+ loading.value = true
|
|
|
$api
|
|
|
.getTrackingDetailMapData({
|
|
|
serial_no: props.serial_no,
|
|
|
@@ -155,8 +551,8 @@ const getMarker = () => {
|
|
|
if (res.code === 200) {
|
|
|
allMapData.value = res.data
|
|
|
const { data } = res
|
|
|
- data &&
|
|
|
- data.forEach((item) => {
|
|
|
+ data?.point &&
|
|
|
+ data?.point.forEach((item) => {
|
|
|
const iconColorList = {
|
|
|
Destination: { color: '#24ca5a', icon: destinationIcon },
|
|
|
Origin: { color: '#ED6D00', icon: originIcon },
|
|
|
@@ -171,12 +567,37 @@ const getMarker = () => {
|
|
|
iconColor: iconColorList[item.label].color
|
|
|
})
|
|
|
})
|
|
|
- viewData.value = data?.map((item) => {
|
|
|
- return [Number(item.lat), Number(item.lng)]
|
|
|
- }) // 请求成功后添加标记，并动态添加重置按钮
|
|
|
+ if (data?.rangePoint.length > 0) {
|
|
|
+ if (Number(data.rangePoint[2].lon) < Number(data.rangePoint[1].lon)) {
|
|
|
+ data.rangePoint[2].lon = Number(data.rangePoint[2].lon) + 360
|
|
|
+ }
|
|
|
+ data.rangePoint.splice(0, 1)
|
|
|
+ }
|
|
|
+ viewData.value = (data?.rangePoint.length > 0 ? data?.rangePoint : data?.point)?.map(
|
|
|
+ (item) => {
|
|
|
+ return { lat: Number(item.lat), lng: Number(item.lon || item.lng) }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ // 请求成功后添加标记
|
|
|
addMarkersToMap()
|
|
|
+ // 设置中心和缩放级别
|
|
|
+ setCenterAndZoom()
|
|
|
+ if (data?.dottedLine) {
|
|
|
+ draw_marker(handleData(data.dottedLine), handleData(data.solidLine))
|
|
|
+ map.on('moveend', function () {
|
|
|
+ draw_marker(handleData(data.dottedLine), handleData(data.solidLine))
|
|
|
+ updateVisibleMarkers()
|
|
|
+ })
|
|
|
+ map.on('zoomend', function () {
|
|
|
+ draw_marker(handleData(data.dottedLine), handleData(data.solidLine))
|
|
|
+ updateVisibleMarkers()
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
})
|
|
|
+ .finally(() => {
|
|
|
+ loading.value = false
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
// 监听 `serial_no` 变化
|
|
|
@@ -405,4 +826,4 @@ onUnmounted(() => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
zhouyuhao