无人机管理后台前端(已迁走)
shuishen
2025-05-09 174e0fe2f15ef93fc58229d91c5a37ca7da8e1fa
src/components/map-container/mapContainer.vue
@@ -24,10 +24,14 @@
import { nextTick, onMounted, onUnmounted } from 'vue'
import { read } from 'xlsx'
import startPng from '@/assets/map_images/Startingpointicon.png'
import endPng from '@/assets/map_images/EndPointicon.png'
window.$viewer = null
window.$Cesium = null
let pointLayer = null
let polylineLayer = null
let pointHtmlLayer = null
const { VITE_APP_BASE } = import.meta.env
// import * as Cesium from 'cesium'
@@ -82,6 +86,8 @@
    window.$viewer?.addLayer(pointLayer)
    polylineLayer = new DC.VectorLayer('polylineLayer')
    window.$viewer?.addLayer(polylineLayer)
    pointHtmlLayer = new DC.HtmlLayer('pointHtmlLayer')
    window.$viewer?.addLayer(pointHtmlLayer)
    isViewerReady.value = true
}
@@ -113,9 +119,7 @@
    if (!lng || !lat) return
    let [newLng, newLat] = DC.CoordTransform.GCJ02ToWGS84(lng, lat)
    let point = new DC.Point(new DC.Position(newLng, newLat))
    let point = new DC.Point(new DC.Position(lng, lat))
    pointLayer.addOverlay(point)
    window.$viewer?.zoomTo(pointLayer)
@@ -127,15 +131,14 @@
 */
function addPolyline (data) {
    if (polylineLayer) polylineLayer.clear()
    if (pointHtmlLayer) pointHtmlLayer.clear()
    if (data.length === 0) return
    const positionStr = data.map(item => {
        const [lng, lat] = item
        let [newLng, newLat] = DC.CoordTransform.GCJ02ToWGS84(lng, lat)
        return `${newLng}, ${newLat}`
        return `${lng}, ${lat}`
    }).join(';')
    let polyline = new DC.Polyline(positionStr)
@@ -149,6 +152,38 @@
    })
    polylineLayer.addOverlay(polyline)
    data.forEach((item, index) => {
        const [lng, lat] = item
        let position = new DC.Position(lng, lat)
        console.log(lng, lat)
        let billboard = null
        if (index === 0) {
            billboard = new DC.Billboard(position, startPng)
        }
        if (index === data.length - 1) {
            billboard = new DC.Billboard(position, endPng)
        }
        billboard && (billboard.size = [20, 20])
        billboard && (billboard.setStyle({
            "pixelOffset": { "x": 0, "y": -8 }
        }))
        billboard && polylineLayer.addOverlay(billboard)
        if (index !== 0 && index !== data.length - 1) {
            let divIcon = new DC.DivIcon(
                position,
                `<div class="point-icon-box">${index}</div>`
            )
            pointHtmlLayer.addOverlay(divIcon)
        }
    })
    const line = turf.lineString(positionStr.split(';').map(i => i.split(',')))
    const bbox = turf.bbox(line)
    const bboxPolygon = turf.bboxPolygon(bbox)