fix

.history/src/views/map/MapLeaflet_20230817151517.vue

+<template>
+    <div class="map-contain">
+        <canvas id="map" ref="root"></canvas>
+        <img src="/image/compass.png" class="compass" ref="compass"
+            :style="`transform: rotateZ(${compassRotationAngle}rad)`" alt="" @click="changeCompass">
+        <div class="navigate-preview">
+            <img src="/image/navigate.png" class="navigate" @click="changeNavigate" alt="" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { markRaw, onMounted, watch, ref, computed, onBeforeUnmount, nextTick } from 'vue'
+import { useMapStore } from '@/store/MapStore.js'
+import { useVehicleStore } from '@/store/VehicleStore'
+import { storeToRefs } from 'pinia'
+import { vehicleScale } from '../js/tools'
+import DeckNew from '@/tools/Deck';
+import * as turf from '@turf/turf'
+
+const safe_color = '#FFA500'
+const BASE_RAD = 1.5707963267948966
+const MAP_ZOOM = 17
+const LAYER_PROPOITY = {
+    runablearea: 1,
+    staticobjs: 2,
+    diggingarea: 3,
+    diggingworkarea: 3,
+    dumparea: 4,
+    barricade: 5,
+    electronicFence: 6,
+    wetArea: 7,
+    lane: 8,
+    obstacles: 9,
+    stationarea: 10,
+    parkspot: 11,
+    lanenode: 12,
+    currPathinfo: 13,
+    nextPathinfo: 14,
+    avoidancePath: 15,
+    traj: 16,
+    obstacle: 17
+}
+
+const vehicles = {}
+let ismousedown = false
+let ismousemove = false
+let resetTime = null
+let obstaclePolygons = []
+let dynamicPaths = []
+
+const reNavigateTime = 10 * 1000
+
+const props = defineProps({
+    isShowBasic: Boolean,
+    clearSinglePointEnable: Boolean,
+    reloadData: Boolean
+})
+
+let map = markRaw({})
+let currentPosition = markRaw([])
+const root = ref(null)
+const mapLayers = markRaw({})
+const safeObjects = markRaw({})
+const safeTrajs = markRaw({})
+const singlePaths = markRaw([])
+const navigate = ref(true)
+const currentRotation = ref(0)
+const markerLayerGroupLists = markRaw({})
+const isSinglePreview = ref(false)
+const compassRotationAngle = ref(0)
+const compass = ref(null)
+const mapStore = useMapStore()
+const mapStoreToRefs = storeToRefs(mapStore)
+const {
+    lanenode,
+    lane,
+    runablearea,
+    centerline,
+    obstacles,
+    diggingworkarea,
+    dumparea,
+    barricade,
+    stationarea,
+    parkspot,
+    staticobjs,
+    electronicFence,
+    morepoint, // 单机循迹单路径
+    morepath, // 单机循迹多路径
+    nextPathinfo,
+    currPathinfo,
+    nextPathAvailable,
+    avoidancePath, // 绕障路径
+    obstacleData,
+    dynamicPathinfo, // 车辆动态路权信息
+} = mapStoreToRefs
+const vehicleStore = useVehicleStore()
+const vehicleStoreToRefs = storeToRefs(vehicleStore)
+const { vehiclesPositioninfo, safeObj, trajObj, paraminfo, deleteVehicles } = vehicleStoreToRefs
+
+const deviceId = computed(() => {
+    return paraminfo.value.deviceId
+})
+
+const emits = defineEmits(['handleSend'])
+
+onMounted(() => {
+    //阻止鼠标右键
+    document.oncontextmenu = f => {
+        event.returnValue = false
+    }
+    let currentCoordinate = []
+    let bool = false
+    map = new DeckNew({
+        initialViewState: {
+            latitude: document.location.mapCenter[0],
+            longitude: document.location.mapCenter[1],
+            zoom: MAP_ZOOM,
+            // pickingRadius:5,
+            controller: true,
+        },
+        controller: true,
+        // parent: document.getElementById('mapMain'),
+        canvas: 'map',
+        //如果deck滚动条滚动或者拖动地图时，不进行地图角度和等级矫正
+        onInteractionStateChange: f => {
+            clearTimeout(resetTime)
+            resetTime=null;
+            if (!currentPosition) return
+            if (f.isZooming || f.isDragging) {
+                navigate.value = false
+                resetTime = window.setTimeout(() => {
+                    if (!navigate.value) {
+                        navigate.value = true
+                        dealVehicleRotate()
+                        currentRotation.value = BASE_RAD
+                        clearTimeout(resetTime)
+                        resetTime=null;
+                    }
+                }, reNavigateTime)
+            }
+        }
+    })
+    map.setPitch(40)
+
+    emits('handleSend', {
+        type: 'syncMapVersion',
+        msg: {}
+    })
+})
+
+function changeNavigate() {
+    navigate.value = true
+    dealMapRotate(currentRotation.value, currentPosition, map.getZoom())
+}
+
+// 指南针
+function changeCompass() {
+    dealVehicleRotate(0)
+    currentRotation.value = BASE_RAD
+    if (navigate.value) {
+        setTimeout(() => {
+            dealVehicleRotate()
+        }, 3 * 1000)
+    }
+}
+
+
+
+function dealVehicleRotate(rotate) {
+    let keys = Object.keys(vehicles)
+    let target = keys.find(item => item === deviceId.value)
+    let currentTarget = vehicles[target]
+    let vehicleHeading = BASE_RAD
+    let currentOldHeading = currentTarget && currentTarget.options.vehicleHeading
+    if (typeof rotate === 'number') {
+        dealMapRotate(0, currentPosition, map.getZoom())
+    } else {
+        vehicleHeading = currentOldHeading
+        currentRotation.value = vehicleHeading
+        dealMapRotate(vehicleHeading, currentPosition, map.getZoom())
+    }
+}
+
+function dealMapLayer(value, color, layerName) {
+    if (!value || !map) return
+
+    let result = JSON.parse(value)
+    if (!result) return
+    let attr = {};
+    if (layerName === 'barricade') {
+        attr = {
+            getLineColor: map.convertColor('#0066ff', 1),
+            // width: 5
+        }
+    } else {
+        attr = {
+            getLineColor: feature => {
+                return layerName === 'lane' ? map.convertColor('#eee', 0.5) : map.convertColor(feature.properties.color, 1)
+            },
+            getFillColor: feature => {
+                let opacity = 0.7;
+                if (layerName === 'runablearea') {
+                    opacity = 0.5
+                }
+                return layerName === 'electronicFence' ? map.convertColor(feature.properties.color, opacity) : color ? map.convertColor(color, opacity) : map.convertColor(feature.properties.color, opacity)
+            }
+        }
+    }
+    map.createGeoJsonLayer(result, attr, layerName)
+    mapStore.setData(layerName, null)
+}
+
+function dealMapPath(value, layerName, color) {
+    if (value && value.length) {
+        let data = JSON.parse(JSON.stringify(value))
+        let path = map.createPathLayer([
+            {
+                path: [...map.coorReverse(data)],
+                name: layerName,
+            }
+        ], {
+            getColor: f => map.convertColor('#ffff00'),
+        }, layerName)
+        mapLayers[layerName] = layerName
+        const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(data)))])
+        let bufferLine = turf.buffer(lineGeo, 6.5, { units: "meters" })
+        const obj = {
+            type: "FeatureCollection",
+            features: [bufferLine]
+        }
+        const attr = {
+            getFillColor: f => map.convertColor(color, 0.6),
+            getLineColor: f => map.convertColor(color, 1)
+        }
+        // map.setLayerSortName('bufferLayer', layerName + 'Buffer')
+        map.createGeoJsonLayer(obj, attr, layerName + 'Buffer')
+        mapLayers[`${layerName}Buffer`] = `${layerName}Buffer`
+    }
+}
+
+
+function dealDivIcon(value, layerName) {
+    if (!value || !map) return
+    let result = JSON.parse(value)
+    if (!result) return
+
+    const { features } = result
+
+    for (let i = 0; i < features.length; i++) {
+        let feature = features[i]
+        let { name, id } = feature.properties
+        let { coordinates } = feature.geometry
+        let markerCoor = null
+        if (layerName === 'lanenode') {
+            markerCoor = [coordinates[1], coordinates[0]]
+        } else {
+            let center = turf.center(feature)
+            markerCoor = [center.geometry.coordinates[1], center.geometry.coordinates[0]]
+        }
+        let texData = {
+            name: name,
+            id: id,
+            coordinates: [markerCoor[1], markerCoor[0], 1],
+        }
+        if (markerLayerGroupLists[`${layerName}${id}`]) {
+            markerLayerGroupLists[`${layerName}${id}`] = texData
+        } else {
+            markerLayerGroupLists[`${layerName}${id}`] = texData
+        }
+    }
+    map.createTextLayer([...Object.values(markerLayerGroupLists)], {
+        getSize: 15
+    }, 'text')
+    // map.setLayerSortName('marker', 'marker')
+    map.setLayerSortName('markerLayer', 'marker')
+    map.creatCircle(Object.values(markerLayerGroupLists), {
+        getFillColor: f => map.convertColor('#2aa1fa', 1),
+        getLineColor: f => map.convertColor('#2aa1fa', 0.5),
+        getLineWidth: 0.5,
+        radius: 1.5
+    }, 'marker')
+
+    mapStore.setData(layerName, null)
+}
+
+function removeLayer(obj, vehicleID) {
+    if (obj[vehicleID]) {
+        for (let item in obj[vehicleID]) {
+            map.removeLayer('map', obj[vehicleID][item])
+        }
+    }
+}
+
+
+function dealSafe(vehicleID, safe) {
+    if (!map) return
+
+    const { enable, data, dealedData, vehicleType, vehicleLatitude, vehicleLongtitude } = safe
+    removeLayer(safeObjects, vehicleID)
+    safeObjects[vehicleID] = {}
+    if (!enable) return
+
+    let safeType = [1, 20, 21].includes(vehicleType) ? 'circle' : 'rectangle'
+    let zIndex = 16
+    for (let i = 0; i < dealedData.length; i++) {
+        let item = JSON.parse(JSON.stringify(dealedData[i]))
+        let layer = safeType === 'rectangle' ? map.creatPolygon({
+            coordinates: item,
+        }, {
+            getFillColor: d => map.convertColor(safe_color),
+            getLineColor: d => map.convertColor(safe_color),
+            getLineWidth: 1
+        }, 'rectangle') : map.creatCircle([vehicleLongtitude, vehicleLatitude], {
+            getFillColor: f => map.convertColor(safe_color),
+            getLineColor: f => map.convertColor(safe_color),
+            getLineWidth: 1,
+            radius: data[i]
+        }, vehicleID)
+        safeObjects[vehicleID][i] = vehicleID
+    }
+}
+
+function dealTraj(vehicleID, traj) {
+    if (!traj || !map) return
+    const { trajPathWid, radius, dealedData, vehicleType, vehicleLatitude, vehicleLongtitude } = traj
+    removeLayer(safeTrajs, vehicleID)
+    safeTrajs[vehicleID] = {}
+    // if (!dealedData) return
+    // if ((dealedData && !dealedData.length) || !radius)) return
+    if ([1, 20, 21].includes(vehicleType && !radius)) return;
+
+    const zIndex = LAYER_PROPOITY['traj']
+    if ([1, 20, 21].includes(vehicleType) && radius) {
+        map.creatCircle([vehicleLongtitude, vehicleLatitude], {
+            getFillColor: f => map.convertColor('#FFA500'),
+            getLineColor: f => map.convertColor('#FFA500'),
+            getLineWidth: 1,
+            radius: radius
+        }, vehicleID)
+        safeTrajs[vehicleID]['circle'] = vehicleID
+    } else {
+        if (dealedData && !dealedData.length) return;
+        const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(dealedData)))])
+        // safeTrajs[vehicleID]['path'] = path
+        let bufferLine = turf.buffer(lineGeo, trajPathWid / 2, { units: "meters" })
+        const data = {
+            type: "FeatureCollection",
+            features: [bufferLine]
+        }
+        const attr = {
+            getFillColor: f => map.convertColor(safe_color, 0.4),
+            getLineColor: f => map.convertColor(safe_color, 1)
+        }
+        safeTrajs[vehicleID]['pathBuffer'] = vehicleID + 'Buffer'
+        map.setLayerSortName('bufferLayer', vehicleID + 'Buffer', 1)
+        map.createGeoJsonLayer(data, attr, vehicleID + 'Buffer')
+    }
+}
+
+
+function dealMapRotate(rotationAngle, center, zoom) {
+    let rotate = 0
+    if (rotationAngle) {
+        rotate = turf.radiansToDegrees(rotationAngle - BASE_RAD)
+    }
+    if (compass.value) {
+        compassRotationAngle.value = rotationAngle
+        map.setRotation(rotate)
+    }
+    center && center.length && map.flyTo(center, zoom, { animate: false })
+}
+
+function dealVehiclePosition(value) {
+    if (!map || !value.length) return
+
+    let zoom = map.getZoom()
+    for (let i = 0; i < value.length; i++) {
+        const item = value[i]
+        const { vehicleLatitude, vehicleLongtitude, vehicleHeading, vehicleID, image } = item
+        let vehiclePosition = [vehicleLatitude, vehicleLongtitude]
+        let baseObj = {
+            name: vehicleID,
+            rotate: vehicleHeading,
+            coordinates: [vehicleLongtitude, vehicleLatitude],
+            image: image,
+            options: {
+                vehicleHeading: vehicleHeading
+            }
+        }
+
+        if (vehicles[vehicleID]) {
+            vehicles[vehicleID] = baseObj
+        } else {
+            vehicles[vehicleID] = baseObj        
+        }
+     
+        if (vehicleID === deviceId.value) {
+            currentPosition = vehiclePosition
+
+            if (navigate.value) {
+                currentRotation.value = vehicleHeading
+                dealMapRotate(vehicleHeading, vehiclePosition, zoom <= MAP_ZOOM ? MAP_ZOOM : zoom)
+              
+            } 
+        } 
+    }
+    initCar()
+}
+
+function initCar(){
+    map.clearLayer('car')
+    const nameText = JSON.parse(JSON.stringify(Object.values(vehicles))).map(item => {
+        item.coordinates = [item.coordinates[0], item.coordinates[1], 10]
+        return item
+    })
+    map.createTextLayer(nameText, {
+        getSize: 15,
+        getColor: f => [255, 255, 255, 255],
+        fontWeight: 400,
+        fontSettings: {
+            buffer: 2,
+            sdf: true,
+            smoothing: 0.5
+        },
+    }, 'carName')
+    let car = {};
+    Object.values(vehicles).forEach(item => {
+        if (car.hasOwnProperty(item.image)) {
+            car[item.image].push(item)
+        } else {
+            car[item.image] = [item]
+        }
+
+    })
+    for (let key in car) {
+        // map.setLayerSortName('carLayer', key)
+        let imageURL = `image/${key}.glb`
+        map.createCarModel(car[key], { scenegraph: imageURL }, key)
+    }
+}
+
+function dealSingleDatas(datas) {
+    const { color, coor } = datas
+    let data = JSON.parse(JSON.stringify(value))
+    const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(data)))])
+    // safeTrajs[vehicleID]['path'] = path
+    let bufferLine = turf.buffer(lineGeo, 2, { units: "meters" })
+    const obj = {
+        type: "FeatureCollection",
+        features: [bufferLine]
+    }
+    const attr = {
+        getFillColor: f => map.convertColor(color, 0.4),
+        getLineColor: f => map.convertColor(color, 1)
+    }
+    map.createGeoJsonLayer(obj, attr, layerName)
+    singlePaths.push(layerName)
+}
+
+function dealObtacleData(value) {
+    if (value && value.length) {
+        for (let i = 0; i < value.length; i++) {
+            let obstacle = value[i]
+            let { typeColor, coordinate, centerLon, centerLat, centerRadius, centerColor } = obstacle
+            map.creatPolygon({
+                coordinates: JSON.parse(JSON.stringify(coordinate)),
+            }, {
+                getFillColor: d => map.convertColor(typeColor),
+                getLineColor: d => map.convertColor(typeColor),
+                getLineWidth: 3
+            }, 'obstacle')
+
+            map.setLayerSortName('buffer', 'obstacleBuffer')
+            map.creatCircle([centerLon, centerLat], {
+                getFillColor: f => map.convertColor(centerColor, 0.5),
+                getLineColor: f => map.convertColor(centerColor, 0.5),
+                getLineWidth: 0,
+                radius: centerRadius
+            }, 'obstacleBuffer')
+        }
+    }
+}
+
+function dealDynamicDatas(datas) {
+    let name = 'dynamicLine';
+    const { color, path } = datas
+    const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(path)))])
+    // safeTrajs[vehicleID]['path'] = path
+    let bufferLine = turf.buffer(lineGeo, 2, { units: "meters" })
+    const obj = {
+        type: "FeatureCollection",
+        features: [bufferLine]
+    }
+    const attr = {
+        // getFillColor: f => map.convertColor(color, 0.3),
+        getLineColor: f => map.convertColor(color, 0.3),
+        getLineWidth: 30
+    }
+    map.createGeoJsonLayer(obj, attr, name)
+}
+
+// 直接监听props.isShowBasic 不会触发
+watch(() => props.isShowBasic, () => {
+    nextTick(() => {
+        // map.invalidateSize(true)
+    })
+})
+
+watch(lanenode, (value) => {
+    dealDivIcon(value, 'lanenode', '#ff0000')
+}, { immediate: true, deep: true })
+
+watch(lane, (value) => {
+    dealMapLayer(value, '#fff', 'lane')
+}, { immediate: true, deep: true })
+
+watch(runablearea, (value) => {
+    dealMapLayer(value, '#98a0a0', 'runablearea')
+}, { immediate: true, deep: true })
+
+watch(centerline, (value) => {
+    dealMapLayer(value, '#eee', 'centerline')
+}, { immediate: true, deep: true })
+
+watch(obstacles, (value) => {
+    dealDivIcon(value, 'obstacles')
+    dealMapLayer(value, '#6f9bdd', 'obstacles')
+}, { immediate: true, deep: true })
+
+watch(diggingworkarea, (value) => {
+    dealDivIcon(value, 'diggingworkarea')
+    dealMapLayer(value, '#886e26', 'diggingworkarea')
+}, { immediate: true, deep: true })
+
+watch(dumparea, (value) => {
+    dealDivIcon(value, 'dumparea')
+    dealMapLayer(value, '#886e26', 'dumparea')
+}, { immediate: true, deep: true })
+
+watch(barricade, (value) => {
+    dealMapLayer(value, '#0000ff', 'barricade')
+}, { immediate: true, deep: true })
+
+watch(stationarea, (value) => {
+    dealDivIcon(value, 'stationarea')
+    dealMapLayer(value, '#90ee90', 'stationarea')
+}, { immediate: true, deep: true })
+
+watch(parkspot, (value) => {
+    dealDivIcon(value, 'parkspot')
+    dealMapLayer(value, '#7e8185', 'parkspot')
+}, { immediate: true, deep: true })
+
+watch(staticobjs, (value) => {
+    dealMapLayer(value, '#98a0a0', 'staticobjs')
+}, { immediate: true, deep: true })
+
+watch(electronicFence, (value) => {
+    dealDivIcon(value, 'electronicFence')
+    dealMapLayer(value, '#d51d20', 'electronicFence')
+}, { immediate: true, deep: true })
+
+watch(nextPathinfo, (value) => {
+    dealMapPath(value, 'nextPath', nextPathAvailable.value === 1 ? '#19ae19' : '#8B4513')
+}, { immediate: true, deep: true })
+
+watch(currPathinfo, (value) => {
+    dealMapPath(value, 'currentPath', '#19ae19')
+}, { immediate: true, deep: true })
+
+watch(avoidancePath, (value) => {
+    dealMapPath(value, 'avoidancePath', 'blue')
+}, { immediate: true, deep: true })
+
+watch(vehiclesPositioninfo, (value) => {
+    dealVehiclePosition(value)
+}, {
+    immediate: true,
+    deep: true
+})
+
+watch(safeObj, (value) => {
+    Object.keys(value).forEach(item => {
+        dealSafe(item, value[item])
+    })
+}, {
+    immediate: true,
+    deep: true
+})
+
+watch(trajObj, (value) => {
+    Object.keys(value).forEach(item => {
+        dealTraj(item, value[item])
+    })
+}, {
+    immediate: true,
+    deep: true
+})
+
+watch(obstacleData, (value) => {
+    dealObtacleData(value)
+}, { immediate: true, deep: true })
+
+watch(deleteVehicles, (data) => {
+    if (!map) return
+    if (data && data.length) {
+        data.forEach(item => {
+            // map.removeLayer(vehicles[item])
+            removeLayer(safeTrajs, item)
+            removeLayer(safeObjects, item)
+            delete vehicles[item]
+            initCar()
+        })
+    }
+}, {
+    immediate: true
+})
+
+watch(() => props.clearSinglePointEnable, (enable) => {
+    if (!enable) return
+    isSinglePreview.value = true
+    singlePaths.forEach(item => map.removeLayer('map',item))
+}, { deep: true })
+
+watch([morepoint, morepath], (pointData, pathData) => {
+    if (isSinglePreview.value && (pointData || pathData)) {
+        let datas = pointData.concat(pathData)
+        for (let i = 0; i < datas.length; i++) {
+            dealSingleDatas(datas[i])
+        }
+    }
+}, { deep: true })
+
+watch(dynamicPathinfo, (pathData) => {
+    if (pathData.length > 0) {
+        for (let i = 0; i < pathData.length; i++) {
+            dealDynamicDatas(pathData[i])
+        }
+    }
+}, { deep: true })
+
+watch(deviceId, (value) => {
+    if (value && map) {
+        dealMapRotate(currentRotation.value, currentPosition, map.getZoom())
+    }
+}, { deep: true })
+
+function doUnmount() {
+    Object.keys(mapLayers).map(layer => map.removeLayer(mapLayers[layer]))
+    let mapDom = root.value
+    mapDom.removeEventListener('mousedown', changeMouseDown)
+    mapDom.removeEventListener('mousemove', changeMouseMove)
+    mapDom.removeEventListener('mouseup', changeMouseUp)
+
+    map.remove()
+    map = null
+}
+
+watch(() => props.reloadData, (value) => {
+    if (value) {
+        doUnmount()
+    }
+})
+
+onBeforeUnmount(() => {
+    doUnmount()
+})
+</script>
+
+<style lang="less" scope>
+.map-contain {
+    height: 100%;
+    overflow: hidden;
+}
+
+#map {
+    width: 200% !important;
+    height: 200% !important;
+    top: -50%;
+    left: -50%;
+    background: #171A23;
+    position: relative !important;
+}
+
+.navigate-preview {
+    background: #4A75A9;
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+    border-radius: 10px;
+    opacity: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.compass,
+.navigate-preview {
+    position: absolute;
+    width: 4vw;
+    height: 4vw;
+    z-index: 999;
+}
+
+.compass {
+    bottom: 88px;
+    max-width: 60px;
+    max-height: 60px;
+}
+
+.navigate-preview {
+    bottom: 24px;
+    max-width: 60px;
+    max-height: 60px;
+}
+</style>
+<style lang="less">
+.icon-node {
+    width: 120px !important;
+    white-space: nowrap;
+    color: #676565;
+    // padding-left: -2em !important;
+    z-index: 1;
+    font-size: 12px !important;
+    font-family: "Open Sans Regular", "Arial Unicode MS Regular", sans-serif;
+    text-transform: uppercase;
+    text-align: center;
+    -webkit-text-stroke-display: block;
+    -webkit-text-stroke-width: 1px;
+    -webkit-text-stroke-color: rgba(33, 33, 33, 0.8);
+}
+
+@media screen and (min-width: 1700px) {
+    .icon-node {
+        font-size: 18px !important;
+    }
+}
+
+.icon-node-name {
+    display: inline-block;
+    transform: scale(.6);
+    padding-left: -20px !important;
+}
+
+.hide {
+    display: none !important;
+}
+
+.middle-line {
+    // 为svg设置虚线,数字越大,虚线段越长,
+    // 设置2个参数,参数1: 虚线的长度  参数2: 虚线和虚线之间的间隔, 如果只设置一个参数,说明两个值一样大小
+    stroke-dasharray: 15 20;
+    z-index: 999;
+}
+
+.leaflet-tooltip {
+    color: #fff !important;
+    background-color: rgba(255, 255, 255, 0) !important;
+    border: 0 !important;
+    box-shadow: rgba(0, 0, 0, 0);
+    font-size: 12px !important;
+}
+
+.leaflet-control-attribution {
+    display: none !important;
+}
+</style>
\ No newline at end of file

.history/src/views/map/MapLeaflet_20230817151600.vue

+<template>
+    <div class="map-contain">
+        <canvas id="map" ref="root"></canvas>
+        <img src="/image/compass.png" class="compass" ref="compass"
+            :style="`transform: rotateZ(${compassRotationAngle}rad)`" alt="" @click="changeCompass">
+        <div class="navigate-preview">
+            <img src="/image/navigate.png" class="navigate" @click="changeNavigate" alt="" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { markRaw, onMounted, watch, ref, computed, onBeforeUnmount, nextTick } from 'vue'
+import { useMapStore } from '@/store/MapStore.js'
+import { useVehicleStore } from '@/store/VehicleStore'
+import { storeToRefs } from 'pinia'
+import { vehicleScale } from '../js/tools'
+import DeckNew from '@/tools/Deck';
+import * as turf from '@turf/turf'
+
+const safe_color = '#FFA500'
+const BASE_RAD = 1.5707963267948966
+const MAP_ZOOM = 17
+const LAYER_PROPOITY = {
+    runablearea: 1,
+    staticobjs: 2,
+    diggingarea: 3,
+    diggingworkarea: 3,
+    dumparea: 4,
+    barricade: 5,
+    electronicFence: 6,
+    wetArea: 7,
+    lane: 8,
+    obstacles: 9,
+    stationarea: 10,
+    parkspot: 11,
+    lanenode: 12,
+    currPathinfo: 13,
+    nextPathinfo: 14,
+    avoidancePath: 15,
+    traj: 16,
+    obstacle: 17
+}
+
+const vehicles = {}
+let ismousedown = false
+let ismousemove = false
+let resetTime = null
+let obstaclePolygons = []
+let dynamicPaths = []
+
+const reNavigateTime = 10 * 1000
+
+const props = defineProps({
+    isShowBasic: Boolean,
+    clearSinglePointEnable: Boolean,
+    reloadData: Boolean
+})
+
+let map = markRaw({})
+let currentPosition = markRaw([])
+const root = ref(null)
+const mapLayers = markRaw({})
+const safeObjects = markRaw({})
+const safeTrajs = markRaw({})
+const singlePaths = markRaw([])
+const navigate = ref(true)
+const currentRotation = ref(0)
+const markerLayerGroupLists = markRaw({})
+const isSinglePreview = ref(false)
+const compassRotationAngle = ref(0)
+const compass = ref(null)
+const mapStore = useMapStore()
+const mapStoreToRefs = storeToRefs(mapStore)
+const {
+    lanenode,
+    lane,
+    runablearea,
+    centerline,
+    obstacles,
+    diggingworkarea,
+    dumparea,
+    barricade,
+    stationarea,
+    parkspot,
+    staticobjs,
+    electronicFence,
+    morepoint, // 单机循迹单路径
+    morepath, // 单机循迹多路径
+    nextPathinfo,
+    currPathinfo,
+    nextPathAvailable,
+    avoidancePath, // 绕障路径
+    obstacleData,
+    dynamicPathinfo, // 车辆动态路权信息
+} = mapStoreToRefs
+const vehicleStore = useVehicleStore()
+const vehicleStoreToRefs = storeToRefs(vehicleStore)
+const { vehiclesPositioninfo, safeObj, trajObj, paraminfo, deleteVehicles } = vehicleStoreToRefs
+
+const deviceId = computed(() => {
+    return paraminfo.value.deviceId
+})
+
+const emits = defineEmits(['handleSend'])
+
+onMounted(() => {
+    //阻止鼠标右键
+    document.oncontextmenu = f => {
+        event.returnValue = false
+    }
+    let currentCoordinate = []
+    let bool = false
+    map = new DeckNew({
+        initialViewState: {
+            latitude: document.location.mapCenter[0],
+            longitude: document.location.mapCenter[1],
+            zoom: MAP_ZOOM,
+            // pickingRadius:5,
+            controller: true,
+        },
+        controller: true,
+        // parent: document.getElementById('mapMain'),
+        canvas: 'map',
+        //如果deck滚动条滚动或者拖动地图时，不进行地图角度和等级矫正
+        onInteractionStateChange: f => {
+           
+            if (!currentPosition) return
+            if (f.isZooming || f.isDragging) {
+                navigate.value = false
+                resetTime = window.setTimeout(() => {
+                    if (!navigate.value) {
+                        navigate.value = true
+                        dealVehicleRotate()
+                        currentRotation.value = BASE_RAD
+                        clearTimeout(resetTime)
+                        resetTime=null;
+                    }
+                }, reNavigateTime)
+            }
+        }
+    })
+    map.setPitch(40)
+
+    emits('handleSend', {
+        type: 'syncMapVersion',
+        msg: {}
+    })
+})
+
+function changeNavigate() {
+    navigate.value = true
+    dealMapRotate(currentRotation.value, currentPosition, map.getZoom())
+}
+
+// 指南针
+function changeCompass() {
+    dealVehicleRotate(0)
+    currentRotation.value = BASE_RAD
+    if (navigate.value) {
+        setTimeout(() => {
+            dealVehicleRotate()
+        }, 3 * 1000)
+    }
+}
+
+
+
+function dealVehicleRotate(rotate) {
+    let keys = Object.keys(vehicles)
+    let target = keys.find(item => item === deviceId.value)
+    let currentTarget = vehicles[target]
+    let vehicleHeading = BASE_RAD
+    let currentOldHeading = currentTarget && currentTarget.options.vehicleHeading
+    if (typeof rotate === 'number') {
+        dealMapRotate(0, currentPosition, map.getZoom())
+    } else {
+        vehicleHeading = currentOldHeading
+        currentRotation.value = vehicleHeading
+        dealMapRotate(vehicleHeading, currentPosition, map.getZoom())
+    }
+}
+
+function dealMapLayer(value, color, layerName) {
+    if (!value || !map) return
+
+    let result = JSON.parse(value)
+    if (!result) return
+    let attr = {};
+    if (layerName === 'barricade') {
+        attr = {
+            getLineColor: map.convertColor('#0066ff', 1),
+            // width: 5
+        }
+    } else {
+        attr = {
+            getLineColor: feature => {
+                return layerName === 'lane' ? map.convertColor('#eee', 0.5) : map.convertColor(feature.properties.color, 1)
+            },
+            getFillColor: feature => {
+                let opacity = 0.7;
+                if (layerName === 'runablearea') {
+                    opacity = 0.5
+                }
+                return layerName === 'electronicFence' ? map.convertColor(feature.properties.color, opacity) : color ? map.convertColor(color, opacity) : map.convertColor(feature.properties.color, opacity)
+            }
+        }
+    }
+    map.createGeoJsonLayer(result, attr, layerName)
+    mapStore.setData(layerName, null)
+}
+
+function dealMapPath(value, layerName, color) {
+    if (value && value.length) {
+        let data = JSON.parse(JSON.stringify(value))
+        let path = map.createPathLayer([
+            {
+                path: [...map.coorReverse(data)],
+                name: layerName,
+            }
+        ], {
+            getColor: f => map.convertColor('#ffff00'),
+        }, layerName)
+        mapLayers[layerName] = layerName
+        const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(data)))])
+        let bufferLine = turf.buffer(lineGeo, 6.5, { units: "meters" })
+        const obj = {
+            type: "FeatureCollection",
+            features: [bufferLine]
+        }
+        const attr = {
+            getFillColor: f => map.convertColor(color, 0.6),
+            getLineColor: f => map.convertColor(color, 1)
+        }
+        // map.setLayerSortName('bufferLayer', layerName + 'Buffer')
+        map.createGeoJsonLayer(obj, attr, layerName + 'Buffer')
+        mapLayers[`${layerName}Buffer`] = `${layerName}Buffer`
+    }
+}
+
+
+function dealDivIcon(value, layerName) {
+    if (!value || !map) return
+    let result = JSON.parse(value)
+    if (!result) return
+
+    const { features } = result
+
+    for (let i = 0; i < features.length; i++) {
+        let feature = features[i]
+        let { name, id } = feature.properties
+        let { coordinates } = feature.geometry
+        let markerCoor = null
+        if (layerName === 'lanenode') {
+            markerCoor = [coordinates[1], coordinates[0]]
+        } else {
+            let center = turf.center(feature)
+            markerCoor = [center.geometry.coordinates[1], center.geometry.coordinates[0]]
+        }
+        let texData = {
+            name: name,
+            id: id,
+            coordinates: [markerCoor[1], markerCoor[0], 1],
+        }
+        if (markerLayerGroupLists[`${layerName}${id}`]) {
+            markerLayerGroupLists[`${layerName}${id}`] = texData
+        } else {
+            markerLayerGroupLists[`${layerName}${id}`] = texData
+        }
+    }
+    map.createTextLayer([...Object.values(markerLayerGroupLists)], {
+        getSize: 15
+    }, 'text')
+    // map.setLayerSortName('marker', 'marker')
+    map.setLayerSortName('markerLayer', 'marker')
+    map.creatCircle(Object.values(markerLayerGroupLists), {
+        getFillColor: f => map.convertColor('#2aa1fa', 1),
+        getLineColor: f => map.convertColor('#2aa1fa', 0.5),
+        getLineWidth: 0.5,
+        radius: 1.5
+    }, 'marker')
+
+    mapStore.setData(layerName, null)
+}
+
+function removeLayer(obj, vehicleID) {
+    if (obj[vehicleID]) {
+        for (let item in obj[vehicleID]) {
+            map.removeLayer('map', obj[vehicleID][item])
+        }
+    }
+}
+
+
+function dealSafe(vehicleID, safe) {
+    if (!map) return
+
+    const { enable, data, dealedData, vehicleType, vehicleLatitude, vehicleLongtitude } = safe
+    removeLayer(safeObjects, vehicleID)
+    safeObjects[vehicleID] = {}
+    if (!enable) return
+
+    let safeType = [1, 20, 21].includes(vehicleType) ? 'circle' : 'rectangle'
+    let zIndex = 16
+    for (let i = 0; i < dealedData.length; i++) {
+        let item = JSON.parse(JSON.stringify(dealedData[i]))
+        let layer = safeType === 'rectangle' ? map.creatPolygon({
+            coordinates: item,
+        }, {
+            getFillColor: d => map.convertColor(safe_color),
+            getLineColor: d => map.convertColor(safe_color),
+            getLineWidth: 1
+        }, 'rectangle') : map.creatCircle([vehicleLongtitude, vehicleLatitude], {
+            getFillColor: f => map.convertColor(safe_color),
+            getLineColor: f => map.convertColor(safe_color),
+            getLineWidth: 1,
+            radius: data[i]
+        }, vehicleID)
+        safeObjects[vehicleID][i] = vehicleID
+    }
+}
+
+function dealTraj(vehicleID, traj) {
+    if (!traj || !map) return
+    const { trajPathWid, radius, dealedData, vehicleType, vehicleLatitude, vehicleLongtitude } = traj
+    removeLayer(safeTrajs, vehicleID)
+    safeTrajs[vehicleID] = {}
+    // if (!dealedData) return
+    // if ((dealedData && !dealedData.length) || !radius)) return
+    if ([1, 20, 21].includes(vehicleType && !radius)) return;
+
+    const zIndex = LAYER_PROPOITY['traj']
+    if ([1, 20, 21].includes(vehicleType) && radius) {
+        map.creatCircle([vehicleLongtitude, vehicleLatitude], {
+            getFillColor: f => map.convertColor('#FFA500'),
+            getLineColor: f => map.convertColor('#FFA500'),
+            getLineWidth: 1,
+            radius: radius
+        }, vehicleID)
+        safeTrajs[vehicleID]['circle'] = vehicleID
+    } else {
+        if (dealedData && !dealedData.length) return;
+        const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(dealedData)))])
+        // safeTrajs[vehicleID]['path'] = path
+        let bufferLine = turf.buffer(lineGeo, trajPathWid / 2, { units: "meters" })
+        const data = {
+            type: "FeatureCollection",
+            features: [bufferLine]
+        }
+        const attr = {
+            getFillColor: f => map.convertColor(safe_color, 0.4),
+            getLineColor: f => map.convertColor(safe_color, 1)
+        }
+        safeTrajs[vehicleID]['pathBuffer'] = vehicleID + 'Buffer'
+        map.setLayerSortName('bufferLayer', vehicleID + 'Buffer', 1)
+        map.createGeoJsonLayer(data, attr, vehicleID + 'Buffer')
+    }
+}
+
+
+function dealMapRotate(rotationAngle, center, zoom) {
+    let rotate = 0
+    if (rotationAngle) {
+        rotate = turf.radiansToDegrees(rotationAngle - BASE_RAD)
+    }
+    if (compass.value) {
+        compassRotationAngle.value = rotationAngle
+        map.setRotation(rotate)
+    }
+    center && center.length && map.flyTo(center, zoom, { animate: false })
+}
+
+function dealVehiclePosition(value) {
+    if (!map || !value.length) return
+
+    let zoom = map.getZoom()
+    for (let i = 0; i < value.length; i++) {
+        const item = value[i]
+        const { vehicleLatitude, vehicleLongtitude, vehicleHeading, vehicleID, image } = item
+        let vehiclePosition = [vehicleLatitude, vehicleLongtitude]
+        let baseObj = {
+            name: vehicleID,
+            rotate: vehicleHeading,
+            coordinates: [vehicleLongtitude, vehicleLatitude],
+            image: image,
+            options: {
+                vehicleHeading: vehicleHeading
+            }
+        }
+
+        if (vehicles[vehicleID]) {
+            vehicles[vehicleID] = baseObj
+        } else {
+            vehicles[vehicleID] = baseObj        
+        }
+     
+        if (vehicleID === deviceId.value) {
+            currentPosition = vehiclePosition
+
+            if (navigate.value) {
+                currentRotation.value = vehicleHeading
+                dealMapRotate(vehicleHeading, vehiclePosition, zoom <= MAP_ZOOM ? MAP_ZOOM : zoom)
+              
+            } 
+        } 
+    }
+    initCar()
+}
+
+function initCar(){
+    map.clearLayer('car')
+    const nameText = JSON.parse(JSON.stringify(Object.values(vehicles))).map(item => {
+        item.coordinates = [item.coordinates[0], item.coordinates[1], 10]
+        return item
+    })
+    map.createTextLayer(nameText, {
+        getSize: 15,
+        getColor: f => [255, 255, 255, 255],
+        fontWeight: 400,
+        fontSettings: {
+            buffer: 2,
+            sdf: true,
+            smoothing: 0.5
+        },
+    }, 'carName')
+    let car = {};
+    Object.values(vehicles).forEach(item => {
+        if (car.hasOwnProperty(item.image)) {
+            car[item.image].push(item)
+        } else {
+            car[item.image] = [item]
+        }
+
+    })
+    for (let key in car) {
+        // map.setLayerSortName('carLayer', key)
+        let imageURL = `image/${key}.glb`
+        map.createCarModel(car[key], { scenegraph: imageURL }, key)
+    }
+}
+
+function dealSingleDatas(datas) {
+    const { color, coor } = datas
+    let data = JSON.parse(JSON.stringify(value))
+    const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(data)))])
+    // safeTrajs[vehicleID]['path'] = path
+    let bufferLine = turf.buffer(lineGeo, 2, { units: "meters" })
+    const obj = {
+        type: "FeatureCollection",
+        features: [bufferLine]
+    }
+    const attr = {
+        getFillColor: f => map.convertColor(color, 0.4),
+        getLineColor: f => map.convertColor(color, 1)
+    }
+    map.createGeoJsonLayer(obj, attr, layerName)
+    singlePaths.push(layerName)
+}
+
+function dealObtacleData(value) {
+    if (value && value.length) {
+        for (let i = 0; i < value.length; i++) {
+            let obstacle = value[i]
+            let { typeColor, coordinate, centerLon, centerLat, centerRadius, centerColor } = obstacle
+            map.creatPolygon({
+                coordinates: JSON.parse(JSON.stringify(coordinate)),
+            }, {
+                getFillColor: d => map.convertColor(typeColor),
+                getLineColor: d => map.convertColor(typeColor),
+                getLineWidth: 3
+            }, 'obstacle')
+
+            map.setLayerSortName('buffer', 'obstacleBuffer')
+            map.creatCircle([centerLon, centerLat], {
+                getFillColor: f => map.convertColor(centerColor, 0.5),
+                getLineColor: f => map.convertColor(centerColor, 0.5),
+                getLineWidth: 0,
+                radius: centerRadius
+            }, 'obstacleBuffer')
+        }
+    }
+}
+
+function dealDynamicDatas(datas) {
+    let name = 'dynamicLine';
+    const { color, path } = datas
+    const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(path)))])
+    // safeTrajs[vehicleID]['path'] = path
+    let bufferLine = turf.buffer(lineGeo, 2, { units: "meters" })
+    const obj = {
+        type: "FeatureCollection",
+        features: [bufferLine]
+    }
+    const attr = {
+        // getFillColor: f => map.convertColor(color, 0.3),
+        getLineColor: f => map.convertColor(color, 0.3),
+        getLineWidth: 30
+    }
+    map.createGeoJsonLayer(obj, attr, name)
+}
+
+// 直接监听props.isShowBasic 不会触发
+watch(() => props.isShowBasic, () => {
+    nextTick(() => {
+        // map.invalidateSize(true)
+    })
+})
+
+watch(lanenode, (value) => {
+    dealDivIcon(value, 'lanenode', '#ff0000')
+}, { immediate: true, deep: true })
+
+watch(lane, (value) => {
+    dealMapLayer(value, '#fff', 'lane')
+}, { immediate: true, deep: true })
+
+watch(runablearea, (value) => {
+    dealMapLayer(value, '#98a0a0', 'runablearea')
+}, { immediate: true, deep: true })
+
+watch(centerline, (value) => {
+    dealMapLayer(value, '#eee', 'centerline')
+}, { immediate: true, deep: true })
+
+watch(obstacles, (value) => {
+    dealDivIcon(value, 'obstacles')
+    dealMapLayer(value, '#6f9bdd', 'obstacles')
+}, { immediate: true, deep: true })
+
+watch(diggingworkarea, (value) => {
+    dealDivIcon(value, 'diggingworkarea')
+    dealMapLayer(value, '#886e26', 'diggingworkarea')
+}, { immediate: true, deep: true })
+
+watch(dumparea, (value) => {
+    dealDivIcon(value, 'dumparea')
+    dealMapLayer(value, '#886e26', 'dumparea')
+}, { immediate: true, deep: true })
+
+watch(barricade, (value) => {
+    dealMapLayer(value, '#0000ff', 'barricade')
+}, { immediate: true, deep: true })
+
+watch(stationarea, (value) => {
+    dealDivIcon(value, 'stationarea')
+    dealMapLayer(value, '#90ee90', 'stationarea')
+}, { immediate: true, deep: true })
+
+watch(parkspot, (value) => {
+    dealDivIcon(value, 'parkspot')
+    dealMapLayer(value, '#7e8185', 'parkspot')
+}, { immediate: true, deep: true })
+
+watch(staticobjs, (value) => {
+    dealMapLayer(value, '#98a0a0', 'staticobjs')
+}, { immediate: true, deep: true })
+
+watch(electronicFence, (value) => {
+    dealDivIcon(value, 'electronicFence')
+    dealMapLayer(value, '#d51d20', 'electronicFence')
+}, { immediate: true, deep: true })
+
+watch(nextPathinfo, (value) => {
+    dealMapPath(value, 'nextPath', nextPathAvailable.value === 1 ? '#19ae19' : '#8B4513')
+}, { immediate: true, deep: true })
+
+watch(currPathinfo, (value) => {
+    dealMapPath(value, 'currentPath', '#19ae19')
+}, { immediate: true, deep: true })
+
+watch(avoidancePath, (value) => {
+    dealMapPath(value, 'avoidancePath', 'blue')
+}, { immediate: true, deep: true })
+
+watch(vehiclesPositioninfo, (value) => {
+    dealVehiclePosition(value)
+}, {
+    immediate: true,
+    deep: true
+})
+
+watch(safeObj, (value) => {
+    Object.keys(value).forEach(item => {
+        dealSafe(item, value[item])
+    })
+}, {
+    immediate: true,
+    deep: true
+})
+
+watch(trajObj, (value) => {
+    Object.keys(value).forEach(item => {
+        dealTraj(item, value[item])
+    })
+}, {
+    immediate: true,
+    deep: true
+})
+
+watch(obstacleData, (value) => {
+    dealObtacleData(value)
+}, { immediate: true, deep: true })
+
+watch(deleteVehicles, (data) => {
+    if (!map) return
+    if (data && data.length) {
+        data.forEach(item => {
+            // map.removeLayer(vehicles[item])
+            removeLayer(safeTrajs, item)
+            removeLayer(safeObjects, item)
+            delete vehicles[item]
+            initCar()
+        })
+    }
+}, {
+    immediate: true
+})
+
+watch(() => props.clearSinglePointEnable, (enable) => {
+    if (!enable) return
+    isSinglePreview.value = true
+    singlePaths.forEach(item => map.removeLayer('map',item))
+}, { deep: true })
+
+watch([morepoint, morepath], (pointData, pathData) => {
+    if (isSinglePreview.value && (pointData || pathData)) {
+        let datas = pointData.concat(pathData)
+        for (let i = 0; i < datas.length; i++) {
+            dealSingleDatas(datas[i])
+        }
+    }
+}, { deep: true })
+
+watch(dynamicPathinfo, (pathData) => {
+    if (pathData.length > 0) {
+        for (let i = 0; i < pathData.length; i++) {
+            dealDynamicDatas(pathData[i])
+        }
+    }
+}, { deep: true })
+
+watch(deviceId, (value) => {
+    if (value && map) {
+        dealMapRotate(currentRotation.value, currentPosition, map.getZoom())
+    }
+}, { deep: true })
+
+function doUnmount() {
+    Object.keys(mapLayers).map(layer => map.removeLayer(mapLayers[layer]))
+    let mapDom = root.value
+    mapDom.removeEventListener('mousedown', changeMouseDown)
+    mapDom.removeEventListener('mousemove', changeMouseMove)
+    mapDom.removeEventListener('mouseup', changeMouseUp)
+
+    map.remove()
+    map = null
+}
+
+watch(() => props.reloadData, (value) => {
+    if (value) {
+        doUnmount()
+    }
+})
+
+onBeforeUnmount(() => {
+    doUnmount()
+})
+</script>
+
+<style lang="less" scope>
+.map-contain {
+    height: 100%;
+    overflow: hidden;
+}
+
+#map {
+    width: 200% !important;
+    height: 200% !important;
+    top: -50%;
+    left: -50%;
+    background: #171A23;
+    position: relative !important;
+}
+
+.navigate-preview {
+    background: #4A75A9;
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+    border-radius: 10px;
+    opacity: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.compass,
+.navigate-preview {
+    position: absolute;
+    width: 4vw;
+    height: 4vw;
+    z-index: 999;
+}
+
+.compass {
+    bottom: 88px;
+    max-width: 60px;
+    max-height: 60px;
+}
+
+.navigate-preview {
+    bottom: 24px;
+    max-width: 60px;
+    max-height: 60px;
+}
+</style>
+<style lang="less">
+.icon-node {
+    width: 120px !important;
+    white-space: nowrap;
+    color: #676565;
+    // padding-left: -2em !important;
+    z-index: 1;
+    font-size: 12px !important;
+    font-family: "Open Sans Regular", "Arial Unicode MS Regular", sans-serif;
+    text-transform: uppercase;
+    text-align: center;
+    -webkit-text-stroke-display: block;
+    -webkit-text-stroke-width: 1px;
+    -webkit-text-stroke-color: rgba(33, 33, 33, 0.8);
+}
+
+@media screen and (min-width: 1700px) {
+    .icon-node {
+        font-size: 18px !important;
+    }
+}
+
+.icon-node-name {
+    display: inline-block;
+    transform: scale(.6);
+    padding-left: -20px !important;
+}
+
+.hide {
+    display: none !important;
+}
+
+.middle-line {
+    // 为svg设置虚线,数字越大,虚线段越长,
+    // 设置2个参数,参数1: 虚线的长度  参数2: 虚线和虚线之间的间隔, 如果只设置一个参数,说明两个值一样大小
+    stroke-dasharray: 15 20;
+    z-index: 999;
+}
+
+.leaflet-tooltip {
+    color: #fff !important;
+    background-color: rgba(255, 255, 255, 0) !important;
+    border: 0 !important;
+    box-shadow: rgba(0, 0, 0, 0);
+    font-size: 12px !important;
+}
+
+.leaflet-control-attribution {
+    display: none !important;
+}
+</style>
\ No newline at end of file

.history/src/views/map/MapLeaflet_20230817152125.vue

+<template>
+    <div class="map-contain">
+        <canvas id="map" ref="root"></canvas>
+        <img src="/image/compass.png" class="compass" ref="compass"
+            :style="`transform: rotateZ(${compassRotationAngle}rad)`" alt="" @click="changeCompass">
+        <div class="navigate-preview">
+            <img src="/image/navigate.png" class="navigate" @click="changeNavigate" alt="" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { markRaw, onMounted, watch, ref, computed, onBeforeUnmount, nextTick } from 'vue'
+import { useMapStore } from '@/store/MapStore.js'
+import { useVehicleStore } from '@/store/VehicleStore'
+import { storeToRefs } from 'pinia'
+import { vehicleScale } from '../js/tools'
+import DeckNew from '@/tools/Deck';
+import * as turf from '@turf/turf'
+
+const safe_color = '#FFA500'
+const BASE_RAD = 1.5707963267948966
+const MAP_ZOOM = 17
+const LAYER_PROPOITY = {
+    runablearea: 1,
+    staticobjs: 2,
+    diggingarea: 3,
+    diggingworkarea: 3,
+    dumparea: 4,
+    barricade: 5,
+    electronicFence: 6,
+    wetArea: 7,
+    lane: 8,
+    obstacles: 9,
+    stationarea: 10,
+    parkspot: 11,
+    lanenode: 12,
+    currPathinfo: 13,
+    nextPathinfo: 14,
+    avoidancePath: 15,
+    traj: 16,
+    obstacle: 17
+}
+
+const vehicles = {}
+let ismousedown = false
+let ismousemove = false
+let resetTime = null
+let obstaclePolygons = []
+let dynamicPaths = []
+
+const reNavigateTime = 10 * 1000
+
+const props = defineProps({
+    isShowBasic: Boolean,
+    clearSinglePointEnable: Boolean,
+    reloadData: Boolean
+})
+
+let map = markRaw({})
+let currentPosition = markRaw([])
+const root = ref(null)
+const mapLayers = markRaw({})
+const safeObjects = markRaw({})
+const safeTrajs = markRaw({})
+const singlePaths = markRaw([])
+const navigate = ref(true)
+const currentRotation = ref(0)
+const markerLayerGroupLists = markRaw({})
+const isSinglePreview = ref(false)
+const compassRotationAngle = ref(0)
+const compass = ref(null)
+const mapStore = useMapStore()
+const mapStoreToRefs = storeToRefs(mapStore)
+const {
+    lanenode,
+    lane,
+    runablearea,
+    centerline,
+    obstacles,
+    diggingworkarea,
+    dumparea,
+    barricade,
+    stationarea,
+    parkspot,
+    staticobjs,
+    electronicFence,
+    morepoint, // 单机循迹单路径
+    morepath, // 单机循迹多路径
+    nextPathinfo,
+    currPathinfo,
+    nextPathAvailable,
+    avoidancePath, // 绕障路径
+    obstacleData,
+    dynamicPathinfo, // 车辆动态路权信息
+} = mapStoreToRefs
+const vehicleStore = useVehicleStore()
+const vehicleStoreToRefs = storeToRefs(vehicleStore)
+const { vehiclesPositioninfo, safeObj, trajObj, paraminfo, deleteVehicles } = vehicleStoreToRefs
+
+const deviceId = computed(() => {
+    return paraminfo.value.deviceId
+})
+
+const emits = defineEmits(['handleSend'])
+
+onMounted(() => {
+    //阻止鼠标右键
+    document.oncontextmenu = f => {
+        event.returnValue = false
+    }
+    let currentCoordinate = []
+    let bool = false
+    map = new DeckNew({
+        initialViewState: {
+            latitude: document.location.mapCenter[0],
+            longitude: document.location.mapCenter[1],
+            zoom: MAP_ZOOM,
+            // pickingRadius:5,
+            controller: true,
+        },
+        controller: true,
+        // parent: document.getElementById('mapMain'),
+        canvas: 'map',
+        //如果deck滚动条滚动或者拖动地图时，不进行地图角度和等级矫正
+        onInteractionStateChange: f => {
+           
+            if (!currentPosition) return
+            if (f.isZooming || f.isDragging) {
+                navigate.value = false
+                clearTimeout(resetTime)
+                resetTime=null;
+                resetTime = window.setTimeout(() => {
+                    if (!navigate.value) {
+                        navigate.value = true
+                        dealVehicleRotate()
+                        currentRotation.value = BASE_RAD
+                        clearTimeout(resetTime)
+                        resetTime=null;
+                    }
+                }, reNavigateTime)
+            }
+        }
+    })
+    map.setPitch(40)
+
+    emits('handleSend', {
+        type: 'syncMapVersion',
+        msg: {}
+    })
+})
+
+function changeNavigate() {
+    navigate.value = true
+    dealMapRotate(currentRotation.value, currentPosition, map.getZoom())
+}
+
+// 指南针
+function changeCompass() {
+    dealVehicleRotate(0)
+    currentRotation.value = BASE_RAD
+    if (navigate.value) {
+        setTimeout(() => {
+            dealVehicleRotate()
+        }, 3 * 1000)
+    }
+}
+
+
+
+function dealVehicleRotate(rotate) {
+    let keys = Object.keys(vehicles)
+    let target = keys.find(item => item === deviceId.value)
+    let currentTarget = vehicles[target]
+    let vehicleHeading = BASE_RAD
+    let currentOldHeading = currentTarget && currentTarget.options.vehicleHeading
+    if (typeof rotate === 'number') {
+        dealMapRotate(0, currentPosition, map.getZoom())
+    } else {
+        vehicleHeading = currentOldHeading
+        currentRotation.value = vehicleHeading
+        dealMapRotate(vehicleHeading, currentPosition, map.getZoom())
+    }
+}
+
+function dealMapLayer(value, color, layerName) {
+    if (!value || !map) return
+
+    let result = JSON.parse(value)
+    if (!result) return
+    let attr = {};
+    if (layerName === 'barricade') {
+        attr = {
+            getLineColor: map.convertColor('#0066ff', 1),
+            // width: 5
+        }
+    } else {
+        attr = {
+            getLineColor: feature => {
+                return layerName === 'lane' ? map.convertColor('#eee', 0.5) : map.convertColor(feature.properties.color, 1)
+            },
+            getFillColor: feature => {
+                let opacity = 0.7;
+                if (layerName === 'runablearea') {
+                    opacity = 0.5
+                }
+                return layerName === 'electronicFence' ? map.convertColor(feature.properties.color, opacity) : color ? map.convertColor(color, opacity) : map.convertColor(feature.properties.color, opacity)
+            }
+        }
+    }
+    map.createGeoJsonLayer(result, attr, layerName)
+    mapStore.setData(layerName, null)
+}
+
+function dealMapPath(value, layerName, color) {
+    if (value && value.length) {
+        let data = JSON.parse(JSON.stringify(value))
+        let path = map.createPathLayer([
+            {
+                path: [...map.coorReverse(data)],
+                name: layerName,
+            }
+        ], {
+            getColor: f => map.convertColor('#ffff00'),
+        }, layerName)
+        mapLayers[layerName] = layerName
+        const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(data)))])
+        let bufferLine = turf.buffer(lineGeo, 6.5, { units: "meters" })
+        const obj = {
+            type: "FeatureCollection",
+            features: [bufferLine]
+        }
+        const attr = {
+            getFillColor: f => map.convertColor(color, 0.6),
+            getLineColor: f => map.convertColor(color, 1)
+        }
+        // map.setLayerSortName('bufferLayer', layerName + 'Buffer')
+        map.createGeoJsonLayer(obj, attr, layerName + 'Buffer')
+        mapLayers[`${layerName}Buffer`] = `${layerName}Buffer`
+    }
+}
+
+
+function dealDivIcon(value, layerName) {
+    if (!value || !map) return
+    let result = JSON.parse(value)
+    if (!result) return
+
+    const { features } = result
+
+    for (let i = 0; i < features.length; i++) {
+        let feature = features[i]
+        let { name, id } = feature.properties
+        let { coordinates } = feature.geometry
+        let markerCoor = null
+        if (layerName === 'lanenode') {
+            markerCoor = [coordinates[1], coordinates[0]]
+        } else {
+            let center = turf.center(feature)
+            markerCoor = [center.geometry.coordinates[1], center.geometry.coordinates[0]]
+        }
+        let texData = {
+            name: name,
+            id: id,
+            coordinates: [markerCoor[1], markerCoor[0], 1],
+        }
+        if (markerLayerGroupLists[`${layerName}${id}`]) {
+            markerLayerGroupLists[`${layerName}${id}`] = texData
+        } else {
+            markerLayerGroupLists[`${layerName}${id}`] = texData
+        }
+    }
+    map.createTextLayer([...Object.values(markerLayerGroupLists)], {
+        getSize: 15
+    }, 'text')
+    // map.setLayerSortName('marker', 'marker')
+    map.setLayerSortName('markerLayer', 'marker')
+    map.creatCircle(Object.values(markerLayerGroupLists), {
+        getFillColor: f => map.convertColor('#2aa1fa', 1),
+        getLineColor: f => map.convertColor('#2aa1fa', 0.5),
+        getLineWidth: 0.5,
+        radius: 1.5
+    }, 'marker')
+
+    mapStore.setData(layerName, null)
+}
+
+function removeLayer(obj, vehicleID) {
+    if (obj[vehicleID]) {
+        for (let item in obj[vehicleID]) {
+            map.removeLayer('map', obj[vehicleID][item])
+        }
+    }
+}
+
+
+function dealSafe(vehicleID, safe) {
+    if (!map) return
+
+    const { enable, data, dealedData, vehicleType, vehicleLatitude, vehicleLongtitude } = safe
+    removeLayer(safeObjects, vehicleID)
+    safeObjects[vehicleID] = {}
+    if (!enable) return
+
+    let safeType = [1, 20, 21].includes(vehicleType) ? 'circle' : 'rectangle'
+    let zIndex = 16
+    for (let i = 0; i < dealedData.length; i++) {
+        let item = JSON.parse(JSON.stringify(dealedData[i]))
+        let layer = safeType === 'rectangle' ? map.creatPolygon({
+            coordinates: item,
+        }, {
+            getFillColor: d => map.convertColor(safe_color),
+            getLineColor: d => map.convertColor(safe_color),
+            getLineWidth: 1
+        }, 'rectangle') : map.creatCircle([vehicleLongtitude, vehicleLatitude], {
+            getFillColor: f => map.convertColor(safe_color),
+            getLineColor: f => map.convertColor(safe_color),
+            getLineWidth: 1,
+            radius: data[i]
+        }, vehicleID)
+        safeObjects[vehicleID][i] = vehicleID
+    }
+}
+
+function dealTraj(vehicleID, traj) {
+    if (!traj || !map) return
+    const { trajPathWid, radius, dealedData, vehicleType, vehicleLatitude, vehicleLongtitude } = traj
+    removeLayer(safeTrajs, vehicleID)
+    safeTrajs[vehicleID] = {}
+    // if (!dealedData) return
+    // if ((dealedData && !dealedData.length) || !radius)) return
+    if ([1, 20, 21].includes(vehicleType && !radius)) return;
+
+    const zIndex = LAYER_PROPOITY['traj']
+    if ([1, 20, 21].includes(vehicleType) && radius) {
+        map.creatCircle([vehicleLongtitude, vehicleLatitude], {
+            getFillColor: f => map.convertColor('#FFA500'),
+            getLineColor: f => map.convertColor('#FFA500'),
+            getLineWidth: 1,
+            radius: radius
+        }, vehicleID)
+        safeTrajs[vehicleID]['circle'] = vehicleID
+    } else {
+        if (dealedData && !dealedData.length) return;
+        const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(dealedData)))])
+        // safeTrajs[vehicleID]['path'] = path
+        let bufferLine = turf.buffer(lineGeo, trajPathWid / 2, { units: "meters" })
+        const data = {
+            type: "FeatureCollection",
+            features: [bufferLine]
+        }
+        const attr = {
+            getFillColor: f => map.convertColor(safe_color, 0.4),
+            getLineColor: f => map.convertColor(safe_color, 1)
+        }
+        safeTrajs[vehicleID]['pathBuffer'] = vehicleID + 'Buffer'
+        map.setLayerSortName('bufferLayer', vehicleID + 'Buffer', 1)
+        map.createGeoJsonLayer(data, attr, vehicleID + 'Buffer')
+    }
+}
+
+
+function dealMapRotate(rotationAngle, center, zoom) {
+    let rotate = 0
+    if (rotationAngle) {
+        rotate = turf.radiansToDegrees(rotationAngle - BASE_RAD)
+    }
+    if (compass.value) {
+        compassRotationAngle.value = rotationAngle
+        map.setRotation(rotate)
+    }
+    center && center.length && map.flyTo(center, zoom, { animate: false })
+}
+
+function dealVehiclePosition(value) {
+    if (!map || !value.length) return
+
+    let zoom = map.getZoom()
+    for (let i = 0; i < value.length; i++) {
+        const item = value[i]
+        const { vehicleLatitude, vehicleLongtitude, vehicleHeading, vehicleID, image } = item
+        let vehiclePosition = [vehicleLatitude, vehicleLongtitude]
+        let baseObj = {
+            name: vehicleID,
+            rotate: vehicleHeading,
+            coordinates: [vehicleLongtitude, vehicleLatitude],
+            image: image,
+            options: {
+                vehicleHeading: vehicleHeading
+            }
+        }
+
+        if (vehicles[vehicleID]) {
+            vehicles[vehicleID] = baseObj
+        } else {
+            vehicles[vehicleID] = baseObj        
+        }
+     
+        if (vehicleID === deviceId.value) {
+            currentPosition = vehiclePosition
+
+            if (navigate.value) {
+                currentRotation.value = vehicleHeading
+                dealMapRotate(vehicleHeading, vehiclePosition, zoom <= MAP_ZOOM ? MAP_ZOOM : zoom)
+              
+            } 
+        } 
+    }
+    initCar()
+}
+
+function initCar(){
+    map.clearLayer('car')
+    const nameText = JSON.parse(JSON.stringify(Object.values(vehicles))).map(item => {
+        item.coordinates = [item.coordinates[0], item.coordinates[1], 10]
+        return item
+    })
+    map.createTextLayer(nameText, {
+        getSize: 15,
+        getColor: f => [255, 255, 255, 255],
+        fontWeight: 400,
+        fontSettings: {
+            buffer: 2,
+            sdf: true,
+            smoothing: 0.5
+        },
+    }, 'carName')
+    let car = {};
+    Object.values(vehicles).forEach(item => {
+        if (car.hasOwnProperty(item.image)) {
+            car[item.image].push(item)
+        } else {
+            car[item.image] = [item]
+        }
+
+    })
+    for (let key in car) {
+        // map.setLayerSortName('carLayer', key)
+        let imageURL = `image/${key}.glb`
+        map.createCarModel(car[key], { scenegraph: imageURL }, key)
+    }
+}
+
+function dealSingleDatas(datas) {
+    const { color, coor } = datas
+    let data = JSON.parse(JSON.stringify(value))
+    const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(data)))])
+    // safeTrajs[vehicleID]['path'] = path
+    let bufferLine = turf.buffer(lineGeo, 2, { units: "meters" })
+    const obj = {
+        type: "FeatureCollection",
+        features: [bufferLine]
+    }
+    const attr = {
+        getFillColor: f => map.convertColor(color, 0.4),
+        getLineColor: f => map.convertColor(color, 1)
+    }
+    map.createGeoJsonLayer(obj, attr, layerName)
+    singlePaths.push(layerName)
+}
+
+function dealObtacleData(value) {
+    if (value && value.length) {
+        for (let i = 0; i < value.length; i++) {
+            let obstacle = value[i]
+            let { typeColor, coordinate, centerLon, centerLat, centerRadius, centerColor } = obstacle
+            map.creatPolygon({
+                coordinates: JSON.parse(JSON.stringify(coordinate)),
+            }, {
+                getFillColor: d => map.convertColor(typeColor),
+                getLineColor: d => map.convertColor(typeColor),
+                getLineWidth: 3
+            }, 'obstacle')
+
+            map.setLayerSortName('buffer', 'obstacleBuffer')
+            map.creatCircle([centerLon, centerLat], {
+                getFillColor: f => map.convertColor(centerColor, 0.5),
+                getLineColor: f => map.convertColor(centerColor, 0.5),
+                getLineWidth: 0,
+                radius: centerRadius
+            }, 'obstacleBuffer')
+        }
+    }
+}
+
+function dealDynamicDatas(datas) {
+    let name = 'dynamicLine';
+    const { color, path } = datas
+    const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(path)))])
+    // safeTrajs[vehicleID]['path'] = path
+    let bufferLine = turf.buffer(lineGeo, 2, { units: "meters" })
+    const obj = {
+        type: "FeatureCollection",
+        features: [bufferLine]
+    }
+    const attr = {
+        // getFillColor: f => map.convertColor(color, 0.3),
+        getLineColor: f => map.convertColor(color, 0.3),
+        getLineWidth: 30
+    }
+    map.createGeoJsonLayer(obj, attr, name)
+}
+
+// 直接监听props.isShowBasic 不会触发
+watch(() => props.isShowBasic, () => {
+    nextTick(() => {
+        // map.invalidateSize(true)
+    })
+})
+
+watch(lanenode, (value) => {
+    dealDivIcon(value, 'lanenode', '#ff0000')
+}, { immediate: true, deep: true })
+
+watch(lane, (value) => {
+    dealMapLayer(value, '#fff', 'lane')
+}, { immediate: true, deep: true })
+
+watch(runablearea, (value) => {
+    dealMapLayer(value, '#98a0a0', 'runablearea')
+}, { immediate: true, deep: true })
+
+watch(centerline, (value) => {
+    dealMapLayer(value, '#eee', 'centerline')
+}, { immediate: true, deep: true })
+
+watch(obstacles, (value) => {
+    dealDivIcon(value, 'obstacles')
+    dealMapLayer(value, '#6f9bdd', 'obstacles')
+}, { immediate: true, deep: true })
+
+watch(diggingworkarea, (value) => {
+    dealDivIcon(value, 'diggingworkarea')
+    dealMapLayer(value, '#886e26', 'diggingworkarea')
+}, { immediate: true, deep: true })
+
+watch(dumparea, (value) => {
+    dealDivIcon(value, 'dumparea')
+    dealMapLayer(value, '#886e26', 'dumparea')
+}, { immediate: true, deep: true })
+
+watch(barricade, (value) => {
+    dealMapLayer(value, '#0000ff', 'barricade')
+}, { immediate: true, deep: true })
+
+watch(stationarea, (value) => {
+    dealDivIcon(value, 'stationarea')
+    dealMapLayer(value, '#90ee90', 'stationarea')
+}, { immediate: true, deep: true })
+
+watch(parkspot, (value) => {
+    dealDivIcon(value, 'parkspot')
+    dealMapLayer(value, '#7e8185', 'parkspot')
+}, { immediate: true, deep: true })
+
+watch(staticobjs, (value) => {
+    dealMapLayer(value, '#98a0a0', 'staticobjs')
+}, { immediate: true, deep: true })
+
+watch(electronicFence, (value) => {
+    dealDivIcon(value, 'electronicFence')
+    dealMapLayer(value, '#d51d20', 'electronicFence')
+}, { immediate: true, deep: true })
+
+watch(nextPathinfo, (value) => {
+    dealMapPath(value, 'nextPath', nextPathAvailable.value === 1 ? '#19ae19' : '#8B4513')
+}, { immediate: true, deep: true })
+
+watch(currPathinfo, (value) => {
+    dealMapPath(value, 'currentPath', '#19ae19')
+}, { immediate: true, deep: true })
+
+watch(avoidancePath, (value) => {
+    dealMapPath(value, 'avoidancePath', 'blue')
+}, { immediate: true, deep: true })
+
+watch(vehiclesPositioninfo, (value) => {
+    dealVehiclePosition(value)
+}, {
+    immediate: true,
+    deep: true
+})
+
+watch(safeObj, (value) => {
+    Object.keys(value).forEach(item => {
+        dealSafe(item, value[item])
+    })
+}, {
+    immediate: true,
+    deep: true
+})
+
+watch(trajObj, (value) => {
+    Object.keys(value).forEach(item => {
+        dealTraj(item, value[item])
+    })
+}, {
+    immediate: true,
+    deep: true
+})
+
+watch(obstacleData, (value) => {
+    dealObtacleData(value)
+}, { immediate: true, deep: true })
+
+watch(deleteVehicles, (data) => {
+    if (!map) return
+    if (data && data.length) {
+        data.forEach(item => {
+            // map.removeLayer(vehicles[item])
+            removeLayer(safeTrajs, item)
+            removeLayer(safeObjects, item)
+            delete vehicles[item]
+            initCar()
+        })
+    }
+}, {
+    immediate: true
+})
+
+watch(() => props.clearSinglePointEnable, (enable) => {
+    if (!enable) return
+    isSinglePreview.value = true
+    singlePaths.forEach(item => map.removeLayer('map',item))
+}, { deep: true })
+
+watch([morepoint, morepath], (pointData, pathData) => {
+    if (isSinglePreview.value && (pointData || pathData)) {
+        let datas = pointData.concat(pathData)
+        for (let i = 0; i < datas.length; i++) {
+            dealSingleDatas(datas[i])
+        }
+    }
+}, { deep: true })
+
+watch(dynamicPathinfo, (pathData) => {
+    if (pathData.length > 0) {
+        for (let i = 0; i < pathData.length; i++) {
+            dealDynamicDatas(pathData[i])
+        }
+    }
+}, { deep: true })
+
+watch(deviceId, (value) => {
+    if (value && map) {
+        dealMapRotate(currentRotation.value, currentPosition, map.getZoom())
+    }
+}, { deep: true })
+
+function doUnmount() {
+    Object.keys(mapLayers).map(layer => map.removeLayer(mapLayers[layer]))
+    let mapDom = root.value
+    mapDom.removeEventListener('mousedown', changeMouseDown)
+    mapDom.removeEventListener('mousemove', changeMouseMove)
+    mapDom.removeEventListener('mouseup', changeMouseUp)
+
+    map.remove()
+    map = null
+}
+
+watch(() => props.reloadData, (value) => {
+    if (value) {
+        doUnmount()
+    }
+})
+
+onBeforeUnmount(() => {
+    doUnmount()
+})
+</script>
+
+<style lang="less" scope>
+.map-contain {
+    height: 100%;
+    overflow: hidden;
+}
+
+#map {
+    width: 200% !important;
+    height: 200% !important;
+    top: -50%;
+    left: -50%;
+    background: #171A23;
+    position: relative !important;
+}
+
+.navigate-preview {
+    background: #4A75A9;
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+    border-radius: 10px;
+    opacity: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.compass,
+.navigate-preview {
+    position: absolute;
+    width: 4vw;
+    height: 4vw;
+    z-index: 999;
+}
+
+.compass {
+    bottom: 88px;
+    max-width: 60px;
+    max-height: 60px;
+}
+
+.navigate-preview {
+    bottom: 24px;
+    max-width: 60px;
+    max-height: 60px;
+}
+</style>
+<style lang="less">
+.icon-node {
+    width: 120px !important;
+    white-space: nowrap;
+    color: #676565;
+    // padding-left: -2em !important;
+    z-index: 1;
+    font-size: 12px !important;
+    font-family: "Open Sans Regular", "Arial Unicode MS Regular", sans-serif;
+    text-transform: uppercase;
+    text-align: center;
+    -webkit-text-stroke-display: block;
+    -webkit-text-stroke-width: 1px;
+    -webkit-text-stroke-color: rgba(33, 33, 33, 0.8);
+}
+
+@media screen and (min-width: 1700px) {
+    .icon-node {
+        font-size: 18px !important;
+    }
+}
+
+.icon-node-name {
+    display: inline-block;
+    transform: scale(.6);
+    padding-left: -20px !important;
+}
+
+.hide {
+    display: none !important;
+}
+
+.middle-line {
+    // 为svg设置虚线,数字越大,虚线段越长,
+    // 设置2个参数,参数1: 虚线的长度  参数2: 虚线和虚线之间的间隔, 如果只设置一个参数,说明两个值一样大小
+    stroke-dasharray: 15 20;
+    z-index: 999;
+}
+
+.leaflet-tooltip {
+    color: #fff !important;
+    background-color: rgba(255, 255, 255, 0) !important;
+    border: 0 !important;
+    box-shadow: rgba(0, 0, 0, 0);
+    font-size: 12px !important;
+}
+
+.leaflet-control-attribution {
+    display: none !important;
+}
+</style>
\ No newline at end of file

.history/src/views/map/MapLeaflet_20230817152204.vue

+<template>
+    <div class="map-contain">
+        <canvas id="map" ref="root"></canvas>
+        <img src="/image/compass.png" class="compass" ref="compass"
+            :style="`transform: rotateZ(${compassRotationAngle}rad)`" alt="" @click="changeCompass">
+        <div class="navigate-preview">
+            <img src="/image/navigate.png" class="navigate" @click="changeNavigate" alt="" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { markRaw, onMounted, watch, ref, computed, onBeforeUnmount, nextTick } from 'vue'
+import { useMapStore } from '@/store/MapStore.js'
+import { useVehicleStore } from '@/store/VehicleStore'
+import { storeToRefs } from 'pinia'
+import { vehicleScale } from '../js/tools'
+import DeckNew from '@/tools/Deck';
+import * as turf from '@turf/turf'
+
+const safe_color = '#FFA500'
+const BASE_RAD = 1.5707963267948966
+const MAP_ZOOM = 17
+const LAYER_PROPOITY = {
+    runablearea: 1,
+    staticobjs: 2,
+    diggingarea: 3,
+    diggingworkarea: 3,
+    dumparea: 4,
+    barricade: 5,
+    electronicFence: 6,
+    wetArea: 7,
+    lane: 8,
+    obstacles: 9,
+    stationarea: 10,
+    parkspot: 11,
+    lanenode: 12,
+    currPathinfo: 13,
+    nextPathinfo: 14,
+    avoidancePath: 15,
+    traj: 16,
+    obstacle: 17
+}
+
+const vehicles = {}
+let ismousedown = false
+let ismousemove = false
+let resetTime = null
+let obstaclePolygons = []
+let dynamicPaths = []
+
+const reNavigateTime = 5 * 1000
+
+const props = defineProps({
+    isShowBasic: Boolean,
+    clearSinglePointEnable: Boolean,
+    reloadData: Boolean
+})
+
+let map = markRaw({})
+let currentPosition = markRaw([])
+const root = ref(null)
+const mapLayers = markRaw({})
+const safeObjects = markRaw({})
+const safeTrajs = markRaw({})
+const singlePaths = markRaw([])
+const navigate = ref(true)
+const currentRotation = ref(0)
+const markerLayerGroupLists = markRaw({})
+const isSinglePreview = ref(false)
+const compassRotationAngle = ref(0)
+const compass = ref(null)
+const mapStore = useMapStore()
+const mapStoreToRefs = storeToRefs(mapStore)
+const {
+    lanenode,
+    lane,
+    runablearea,
+    centerline,
+    obstacles,
+    diggingworkarea,
+    dumparea,
+    barricade,
+    stationarea,
+    parkspot,
+    staticobjs,
+    electronicFence,
+    morepoint, // 单机循迹单路径
+    morepath, // 单机循迹多路径
+    nextPathinfo,
+    currPathinfo,
+    nextPathAvailable,
+    avoidancePath, // 绕障路径
+    obstacleData,
+    dynamicPathinfo, // 车辆动态路权信息
+} = mapStoreToRefs
+const vehicleStore = useVehicleStore()
+const vehicleStoreToRefs = storeToRefs(vehicleStore)
+const { vehiclesPositioninfo, safeObj, trajObj, paraminfo, deleteVehicles } = vehicleStoreToRefs
+
+const deviceId = computed(() => {
+    return paraminfo.value.deviceId
+})
+
+const emits = defineEmits(['handleSend'])
+
+onMounted(() => {
+    //阻止鼠标右键
+    document.oncontextmenu = f => {
+        event.returnValue = false
+    }
+    let currentCoordinate = []
+    let bool = false
+    map = new DeckNew({
+        initialViewState: {
+            latitude: document.location.mapCenter[0],
+            longitude: document.location.mapCenter[1],
+            zoom: MAP_ZOOM,
+            // pickingRadius:5,
+            controller: true,
+        },
+        controller: true,
+        // parent: document.getElementById('mapMain'),
+        canvas: 'map',
+        //如果deck滚动条滚动或者拖动地图时，不进行地图角度和等级矫正
+        onInteractionStateChange: f => {
+           
+            if (!currentPosition) return
+            if (f.isZooming || f.isDragging) {
+                navigate.value = false
+                clearTimeout(resetTime)
+                resetTime = window.setTimeout(() => {
+                    if (!navigate.value) {
+                        navigate.value = true
+                        dealVehicleRotate()
+                        currentRotation.value = BASE_RAD
+                        clearTimeout(resetTime)
+                        resetTime=null;
+                    }
+                }, reNavigateTime)
+            }
+        }
+    })
+    map.setPitch(40)
+
+    emits('handleSend', {
+        type: 'syncMapVersion',
+        msg: {}
+    })
+})
+
+function changeNavigate() {
+    navigate.value = true
+    dealMapRotate(currentRotation.value, currentPosition, map.getZoom())
+}
+
+// 指南针
+function changeCompass() {
+    dealVehicleRotate(0)
+    currentRotation.value = BASE_RAD
+    if (navigate.value) {
+        setTimeout(() => {
+            dealVehicleRotate()
+        }, 3 * 1000)
+    }
+}
+
+
+
+function dealVehicleRotate(rotate) {
+    let keys = Object.keys(vehicles)
+    let target = keys.find(item => item === deviceId.value)
+    let currentTarget = vehicles[target]
+    let vehicleHeading = BASE_RAD
+    let currentOldHeading = currentTarget && currentTarget.options.vehicleHeading
+    if (typeof rotate === 'number') {
+        dealMapRotate(0, currentPosition, map.getZoom())
+    } else {
+        vehicleHeading = currentOldHeading
+        currentRotation.value = vehicleHeading
+        dealMapRotate(vehicleHeading, currentPosition, map.getZoom())
+    }
+}
+
+function dealMapLayer(value, color, layerName) {
+    if (!value || !map) return
+
+    let result = JSON.parse(value)
+    if (!result) return
+    let attr = {};
+    if (layerName === 'barricade') {
+        attr = {
+            getLineColor: map.convertColor('#0066ff', 1),
+            // width: 5
+        }
+    } else {
+        attr = {
+            getLineColor: feature => {
+                return layerName === 'lane' ? map.convertColor('#eee', 0.5) : map.convertColor(feature.properties.color, 1)
+            },
+            getFillColor: feature => {
+                let opacity = 0.7;
+                if (layerName === 'runablearea') {
+                    opacity = 0.5
+                }
+                return layerName === 'electronicFence' ? map.convertColor(feature.properties.color, opacity) : color ? map.convertColor(color, opacity) : map.convertColor(feature.properties.color, opacity)
+            }
+        }
+    }
+    map.createGeoJsonLayer(result, attr, layerName)
+    mapStore.setData(layerName, null)
+}
+
+function dealMapPath(value, layerName, color) {
+    if (value && value.length) {
+        let data = JSON.parse(JSON.stringify(value))
+        let path = map.createPathLayer([
+            {
+                path: [...map.coorReverse(data)],
+                name: layerName,
+            }
+        ], {
+            getColor: f => map.convertColor('#ffff00'),
+        }, layerName)
+        mapLayers[layerName] = layerName
+        const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(data)))])
+        let bufferLine = turf.buffer(lineGeo, 6.5, { units: "meters" })
+        const obj = {
+            type: "FeatureCollection",
+            features: [bufferLine]
+        }
+        const attr = {
+            getFillColor: f => map.convertColor(color, 0.6),
+            getLineColor: f => map.convertColor(color, 1)
+        }
+        // map.setLayerSortName('bufferLayer', layerName + 'Buffer')
+        map.createGeoJsonLayer(obj, attr, layerName + 'Buffer')
+        mapLayers[`${layerName}Buffer`] = `${layerName}Buffer`
+    }
+}
+
+
+function dealDivIcon(value, layerName) {
+    if (!value || !map) return
+    let result = JSON.parse(value)
+    if (!result) return
+
+    const { features } = result
+
+    for (let i = 0; i < features.length; i++) {
+        let feature = features[i]
+        let { name, id } = feature.properties
+        let { coordinates } = feature.geometry
+        let markerCoor = null
+        if (layerName === 'lanenode') {
+            markerCoor = [coordinates[1], coordinates[0]]
+        } else {
+            let center = turf.center(feature)
+            markerCoor = [center.geometry.coordinates[1], center.geometry.coordinates[0]]
+        }
+        let texData = {
+            name: name,
+            id: id,
+            coordinates: [markerCoor[1], markerCoor[0], 1],
+        }
+        if (markerLayerGroupLists[`${layerName}${id}`]) {
+            markerLayerGroupLists[`${layerName}${id}`] = texData
+        } else {
+            markerLayerGroupLists[`${layerName}${id}`] = texData
+        }
+    }
+    map.createTextLayer([...Object.values(markerLayerGroupLists)], {
+        getSize: 15
+    }, 'text')
+    // map.setLayerSortName('marker', 'marker')
+    map.setLayerSortName('markerLayer', 'marker')
+    map.creatCircle(Object.values(markerLayerGroupLists), {
+        getFillColor: f => map.convertColor('#2aa1fa', 1),
+        getLineColor: f => map.convertColor('#2aa1fa', 0.5),
+        getLineWidth: 0.5,
+        radius: 1.5
+    }, 'marker')
+
+    mapStore.setData(layerName, null)
+}
+
+function removeLayer(obj, vehicleID) {
+    if (obj[vehicleID]) {
+        for (let item in obj[vehicleID]) {
+            map.removeLayer('map', obj[vehicleID][item])
+        }
+    }
+}
+
+
+function dealSafe(vehicleID, safe) {
+    if (!map) return
+
+    const { enable, data, dealedData, vehicleType, vehicleLatitude, vehicleLongtitude } = safe
+    removeLayer(safeObjects, vehicleID)
+    safeObjects[vehicleID] = {}
+    if (!enable) return
+
+    let safeType = [1, 20, 21].includes(vehicleType) ? 'circle' : 'rectangle'
+    let zIndex = 16
+    for (let i = 0; i < dealedData.length; i++) {
+        let item = JSON.parse(JSON.stringify(dealedData[i]))
+        let layer = safeType === 'rectangle' ? map.creatPolygon({
+            coordinates: item,
+        }, {
+            getFillColor: d => map.convertColor(safe_color),
+            getLineColor: d => map.convertColor(safe_color),
+            getLineWidth: 1
+        }, 'rectangle') : map.creatCircle([vehicleLongtitude, vehicleLatitude], {
+            getFillColor: f => map.convertColor(safe_color),
+            getLineColor: f => map.convertColor(safe_color),
+            getLineWidth: 1,
+            radius: data[i]
+        }, vehicleID)
+        safeObjects[vehicleID][i] = vehicleID
+    }
+}
+
+function dealTraj(vehicleID, traj) {
+    if (!traj || !map) return
+    const { trajPathWid, radius, dealedData, vehicleType, vehicleLatitude, vehicleLongtitude } = traj
+    removeLayer(safeTrajs, vehicleID)
+    safeTrajs[vehicleID] = {}
+    // if (!dealedData) return
+    // if ((dealedData && !dealedData.length) || !radius)) return
+    if ([1, 20, 21].includes(vehicleType && !radius)) return;
+
+    const zIndex = LAYER_PROPOITY['traj']
+    if ([1, 20, 21].includes(vehicleType) && radius) {
+        map.creatCircle([vehicleLongtitude, vehicleLatitude], {
+            getFillColor: f => map.convertColor('#FFA500'),
+            getLineColor: f => map.convertColor('#FFA500'),
+            getLineWidth: 1,
+            radius: radius
+        }, vehicleID)
+        safeTrajs[vehicleID]['circle'] = vehicleID
+    } else {
+        if (dealedData && !dealedData.length) return;
+        const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(dealedData)))])
+        // safeTrajs[vehicleID]['path'] = path
+        let bufferLine = turf.buffer(lineGeo, trajPathWid / 2, { units: "meters" })
+        const data = {
+            type: "FeatureCollection",
+            features: [bufferLine]
+        }
+        const attr = {
+            getFillColor: f => map.convertColor(safe_color, 0.4),
+            getLineColor: f => map.convertColor(safe_color, 1)
+        }
+        safeTrajs[vehicleID]['pathBuffer'] = vehicleID + 'Buffer'
+        map.setLayerSortName('bufferLayer', vehicleID + 'Buffer', 1)
+        map.createGeoJsonLayer(data, attr, vehicleID + 'Buffer')
+    }
+}
+
+
+function dealMapRotate(rotationAngle, center, zoom) {
+    let rotate = 0
+    if (rotationAngle) {
+        rotate = turf.radiansToDegrees(rotationAngle - BASE_RAD)
+    }
+    if (compass.value) {
+        compassRotationAngle.value = rotationAngle
+        map.setRotation(rotate)
+    }
+    center && center.length && map.flyTo(center, zoom, { animate: false })
+}
+
+function dealVehiclePosition(value) {
+    if (!map || !value.length) return
+
+    let zoom = map.getZoom()
+    for (let i = 0; i < value.length; i++) {
+        const item = value[i]
+        const { vehicleLatitude, vehicleLongtitude, vehicleHeading, vehicleID, image } = item
+        let vehiclePosition = [vehicleLatitude, vehicleLongtitude]
+        let baseObj = {
+            name: vehicleID,
+            rotate: vehicleHeading,
+            coordinates: [vehicleLongtitude, vehicleLatitude],
+            image: image,
+            options: {
+                vehicleHeading: vehicleHeading
+            }
+        }
+
+        if (vehicles[vehicleID]) {
+            vehicles[vehicleID] = baseObj
+        } else {
+            vehicles[vehicleID] = baseObj        
+        }
+     
+        if (vehicleID === deviceId.value) {
+            currentPosition = vehiclePosition
+
+            if (navigate.value) {
+                currentRotation.value = vehicleHeading
+                dealMapRotate(vehicleHeading, vehiclePosition, zoom <= MAP_ZOOM ? MAP_ZOOM : zoom)
+              
+            } 
+        } 
+    }
+    initCar()
+}
+
+function initCar(){
+    map.clearLayer('car')
+    const nameText = JSON.parse(JSON.stringify(Object.values(vehicles))).map(item => {
+        item.coordinates = [item.coordinates[0], item.coordinates[1], 10]
+        return item
+    })
+    map.createTextLayer(nameText, {
+        getSize: 15,
+        getColor: f => [255, 255, 255, 255],
+        fontWeight: 400,
+        fontSettings: {
+            buffer: 2,
+            sdf: true,
+            smoothing: 0.5
+        },
+    }, 'carName')
+    let car = {};
+    Object.values(vehicles).forEach(item => {
+        if (car.hasOwnProperty(item.image)) {
+            car[item.image].push(item)
+        } else {
+            car[item.image] = [item]
+        }
+
+    })
+    for (let key in car) {
+        // map.setLayerSortName('carLayer', key)
+        let imageURL = `image/${key}.glb`
+        map.createCarModel(car[key], { scenegraph: imageURL }, key)
+    }
+}
+
+function dealSingleDatas(datas) {
+    const { color, coor } = datas
+    let data = JSON.parse(JSON.stringify(value))
+    const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(data)))])
+    // safeTrajs[vehicleID]['path'] = path
+    let bufferLine = turf.buffer(lineGeo, 2, { units: "meters" })
+    const obj = {
+        type: "FeatureCollection",
+        features: [bufferLine]
+    }
+    const attr = {
+        getFillColor: f => map.convertColor(color, 0.4),
+        getLineColor: f => map.convertColor(color, 1)
+    }
+    map.createGeoJsonLayer(obj, attr, layerName)
+    singlePaths.push(layerName)
+}
+
+function dealObtacleData(value) {
+    if (value && value.length) {
+        for (let i = 0; i < value.length; i++) {
+            let obstacle = value[i]
+            let { typeColor, coordinate, centerLon, centerLat, centerRadius, centerColor } = obstacle
+            map.creatPolygon({
+                coordinates: JSON.parse(JSON.stringify(coordinate)),
+            }, {
+                getFillColor: d => map.convertColor(typeColor),
+                getLineColor: d => map.convertColor(typeColor),
+                getLineWidth: 3
+            }, 'obstacle')
+
+            map.setLayerSortName('buffer', 'obstacleBuffer')
+            map.creatCircle([centerLon, centerLat], {
+                getFillColor: f => map.convertColor(centerColor, 0.5),
+                getLineColor: f => map.convertColor(centerColor, 0.5),
+                getLineWidth: 0,
+                radius: centerRadius
+            }, 'obstacleBuffer')
+        }
+    }
+}
+
+function dealDynamicDatas(datas) {
+    let name = 'dynamicLine';
+    const { color, path } = datas
+    const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(path)))])
+    // safeTrajs[vehicleID]['path'] = path
+    let bufferLine = turf.buffer(lineGeo, 2, { units: "meters" })
+    const obj = {
+        type: "FeatureCollection",
+        features: [bufferLine]
+    }
+    const attr = {
+        // getFillColor: f => map.convertColor(color, 0.3),
+        getLineColor: f => map.convertColor(color, 0.3),
+        getLineWidth: 30
+    }
+    map.createGeoJsonLayer(obj, attr, name)
+}
+
+// 直接监听props.isShowBasic 不会触发
+watch(() => props.isShowBasic, () => {
+    nextTick(() => {
+        // map.invalidateSize(true)
+    })
+})
+
+watch(lanenode, (value) => {
+    dealDivIcon(value, 'lanenode', '#ff0000')
+}, { immediate: true, deep: true })
+
+watch(lane, (value) => {
+    dealMapLayer(value, '#fff', 'lane')
+}, { immediate: true, deep: true })
+
+watch(runablearea, (value) => {
+    dealMapLayer(value, '#98a0a0', 'runablearea')
+}, { immediate: true, deep: true })
+
+watch(centerline, (value) => {
+    dealMapLayer(value, '#eee', 'centerline')
+}, { immediate: true, deep: true })
+
+watch(obstacles, (value) => {
+    dealDivIcon(value, 'obstacles')
+    dealMapLayer(value, '#6f9bdd', 'obstacles')
+}, { immediate: true, deep: true })
+
+watch(diggingworkarea, (value) => {
+    dealDivIcon(value, 'diggingworkarea')
+    dealMapLayer(value, '#886e26', 'diggingworkarea')
+}, { immediate: true, deep: true })
+
+watch(dumparea, (value) => {
+    dealDivIcon(value, 'dumparea')
+    dealMapLayer(value, '#886e26', 'dumparea')
+}, { immediate: true, deep: true })
+
+watch(barricade, (value) => {
+    dealMapLayer(value, '#0000ff', 'barricade')
+}, { immediate: true, deep: true })
+
+watch(stationarea, (value) => {
+    dealDivIcon(value, 'stationarea')
+    dealMapLayer(value, '#90ee90', 'stationarea')
+}, { immediate: true, deep: true })
+
+watch(parkspot, (value) => {
+    dealDivIcon(value, 'parkspot')
+    dealMapLayer(value, '#7e8185', 'parkspot')
+}, { immediate: true, deep: true })
+
+watch(staticobjs, (value) => {
+    dealMapLayer(value, '#98a0a0', 'staticobjs')
+}, { immediate: true, deep: true })
+
+watch(electronicFence, (value) => {
+    dealDivIcon(value, 'electronicFence')
+    dealMapLayer(value, '#d51d20', 'electronicFence')
+}, { immediate: true, deep: true })
+
+watch(nextPathinfo, (value) => {
+    dealMapPath(value, 'nextPath', nextPathAvailable.value === 1 ? '#19ae19' : '#8B4513')
+}, { immediate: true, deep: true })
+
+watch(currPathinfo, (value) => {
+    dealMapPath(value, 'currentPath', '#19ae19')
+}, { immediate: true, deep: true })
+
+watch(avoidancePath, (value) => {
+    dealMapPath(value, 'avoidancePath', 'blue')
+}, { immediate: true, deep: true })
+
+watch(vehiclesPositioninfo, (value) => {
+    dealVehiclePosition(value)
+}, {
+    immediate: true,
+    deep: true
+})
+
+watch(safeObj, (value) => {
+    Object.keys(value).forEach(item => {
+        dealSafe(item, value[item])
+    })
+}, {
+    immediate: true,
+    deep: true
+})
+
+watch(trajObj, (value) => {
+    Object.keys(value).forEach(item => {
+        dealTraj(item, value[item])
+    })
+}, {
+    immediate: true,
+    deep: true
+})
+
+watch(obstacleData, (value) => {
+    dealObtacleData(value)
+}, { immediate: true, deep: true })
+
+watch(deleteVehicles, (data) => {
+    if (!map) return
+    if (data && data.length) {
+        data.forEach(item => {
+            // map.removeLayer(vehicles[item])
+            removeLayer(safeTrajs, item)
+            removeLayer(safeObjects, item)
+            delete vehicles[item]
+            initCar()
+        })
+    }
+}, {
+    immediate: true
+})
+
+watch(() => props.clearSinglePointEnable, (enable) => {
+    if (!enable) return
+    isSinglePreview.value = true
+    singlePaths.forEach(item => map.removeLayer('map',item))
+}, { deep: true })
+
+watch([morepoint, morepath], (pointData, pathData) => {
+    if (isSinglePreview.value && (pointData || pathData)) {
+        let datas = pointData.concat(pathData)
+        for (let i = 0; i < datas.length; i++) {
+            dealSingleDatas(datas[i])
+        }
+    }
+}, { deep: true })
+
+watch(dynamicPathinfo, (pathData) => {
+    if (pathData.length > 0) {
+        for (let i = 0; i < pathData.length; i++) {
+            dealDynamicDatas(pathData[i])
+        }
+    }
+}, { deep: true })
+
+watch(deviceId, (value) => {
+    if (value && map) {
+        dealMapRotate(currentRotation.value, currentPosition, map.getZoom())
+    }
+}, { deep: true })
+
+function doUnmount() {
+    Object.keys(mapLayers).map(layer => map.removeLayer(mapLayers[layer]))
+    let mapDom = root.value
+    mapDom.removeEventListener('mousedown', changeMouseDown)
+    mapDom.removeEventListener('mousemove', changeMouseMove)
+    mapDom.removeEventListener('mouseup', changeMouseUp)
+
+    map.remove()
+    map = null
+}
+
+watch(() => props.reloadData, (value) => {
+    if (value) {
+        doUnmount()
+    }
+})
+
+onBeforeUnmount(() => {
+    doUnmount()
+})
+</script>
+
+<style lang="less" scope>
+.map-contain {
+    height: 100%;
+    overflow: hidden;
+}
+
+#map {
+    width: 200% !important;
+    height: 200% !important;
+    top: -50%;
+    left: -50%;
+    background: #171A23;
+    position: relative !important;
+}
+
+.navigate-preview {
+    background: #4A75A9;
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+    border-radius: 10px;
+    opacity: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.compass,
+.navigate-preview {
+    position: absolute;
+    width: 4vw;
+    height: 4vw;
+    z-index: 999;
+}
+
+.compass {
+    bottom: 88px;
+    max-width: 60px;
+    max-height: 60px;
+}
+
+.navigate-preview {
+    bottom: 24px;
+    max-width: 60px;
+    max-height: 60px;
+}
+</style>
+<style lang="less">
+.icon-node {
+    width: 120px !important;
+    white-space: nowrap;
+    color: #676565;
+    // padding-left: -2em !important;
+    z-index: 1;
+    font-size: 12px !important;
+    font-family: "Open Sans Regular", "Arial Unicode MS Regular", sans-serif;
+    text-transform: uppercase;
+    text-align: center;
+    -webkit-text-stroke-display: block;
+    -webkit-text-stroke-width: 1px;
+    -webkit-text-stroke-color: rgba(33, 33, 33, 0.8);
+}
+
+@media screen and (min-width: 1700px) {
+    .icon-node {
+        font-size: 18px !important;
+    }
+}
+
+.icon-node-name {
+    display: inline-block;
+    transform: scale(.6);
+    padding-left: -20px !important;
+}
+
+.hide {
+    display: none !important;
+}
+
+.middle-line {
+    // 为svg设置虚线,数字越大,虚线段越长,
+    // 设置2个参数,参数1: 虚线的长度  参数2: 虚线和虚线之间的间隔, 如果只设置一个参数,说明两个值一样大小
+    stroke-dasharray: 15 20;
+    z-index: 999;
+}
+
+.leaflet-tooltip {
+    color: #fff !important;
+    background-color: rgba(255, 255, 255, 0) !important;
+    border: 0 !important;
+    box-shadow: rgba(0, 0, 0, 0);
+    font-size: 12px !important;
+}
+
+.leaflet-control-attribution {
+    display: none !important;
+}
+</style>
\ No newline at end of file

.history/src/views/map/MapLeaflet_20230817152238.vue

+<template>
+    <div class="map-contain">
+        <canvas id="map" ref="root"></canvas>
+        <img src="/image/compass.png" class="compass" ref="compass"
+            :style="`transform: rotateZ(${compassRotationAngle}rad)`" alt="" @click="changeCompass">
+        <div class="navigate-preview">
+            <img src="/image/navigate.png" class="navigate" @click="changeNavigate" alt="" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { markRaw, onMounted, watch, ref, computed, onBeforeUnmount, nextTick } from 'vue'
+import { useMapStore } from '@/store/MapStore.js'
+import { useVehicleStore } from '@/store/VehicleStore'
+import { storeToRefs } from 'pinia'
+import { vehicleScale } from '../js/tools'
+import DeckNew from '@/tools/Deck';
+import * as turf from '@turf/turf'
+
+const safe_color = '#FFA500'
+const BASE_RAD = 1.5707963267948966
+const MAP_ZOOM = 17
+const LAYER_PROPOITY = {
+    runablearea: 1,
+    staticobjs: 2,
+    diggingarea: 3,
+    diggingworkarea: 3,
+    dumparea: 4,
+    barricade: 5,
+    electronicFence: 6,
+    wetArea: 7,
+    lane: 8,
+    obstacles: 9,
+    stationarea: 10,
+    parkspot: 11,
+    lanenode: 12,
+    currPathinfo: 13,
+    nextPathinfo: 14,
+    avoidancePath: 15,
+    traj: 16,
+    obstacle: 17
+}
+
+const vehicles = {}
+let ismousedown = false
+let ismousemove = false
+let resetTime = null
+let obstaclePolygons = []
+let dynamicPaths = []
+
+const reNavigateTime = 2 * 1000
+
+const props = defineProps({
+    isShowBasic: Boolean,
+    clearSinglePointEnable: Boolean,
+    reloadData: Boolean
+})
+
+let map = markRaw({})
+let currentPosition = markRaw([])
+const root = ref(null)
+const mapLayers = markRaw({})
+const safeObjects = markRaw({})
+const safeTrajs = markRaw({})
+const singlePaths = markRaw([])
+const navigate = ref(true)
+const currentRotation = ref(0)
+const markerLayerGroupLists = markRaw({})
+const isSinglePreview = ref(false)
+const compassRotationAngle = ref(0)
+const compass = ref(null)
+const mapStore = useMapStore()
+const mapStoreToRefs = storeToRefs(mapStore)
+const {
+    lanenode,
+    lane,
+    runablearea,
+    centerline,
+    obstacles,
+    diggingworkarea,
+    dumparea,
+    barricade,
+    stationarea,
+    parkspot,
+    staticobjs,
+    electronicFence,
+    morepoint, // 单机循迹单路径
+    morepath, // 单机循迹多路径
+    nextPathinfo,
+    currPathinfo,
+    nextPathAvailable,
+    avoidancePath, // 绕障路径
+    obstacleData,
+    dynamicPathinfo, // 车辆动态路权信息
+} = mapStoreToRefs
+const vehicleStore = useVehicleStore()
+const vehicleStoreToRefs = storeToRefs(vehicleStore)
+const { vehiclesPositioninfo, safeObj, trajObj, paraminfo, deleteVehicles } = vehicleStoreToRefs
+
+const deviceId = computed(() => {
+    return paraminfo.value.deviceId
+})
+
+const emits = defineEmits(['handleSend'])
+
+onMounted(() => {
+    //阻止鼠标右键
+    document.oncontextmenu = f => {
+        event.returnValue = false
+    }
+    let currentCoordinate = []
+    let bool = false
+    map = new DeckNew({
+        initialViewState: {
+            latitude: document.location.mapCenter[0],
+            longitude: document.location.mapCenter[1],
+            zoom: MAP_ZOOM,
+            // pickingRadius:5,
+            controller: true,
+        },
+        controller: true,
+        // parent: document.getElementById('mapMain'),
+        canvas: 'map',
+        //如果deck滚动条滚动或者拖动地图时，不进行地图角度和等级矫正
+        onInteractionStateChange: f => {
+           
+            if (!currentPosition) return
+            if (f.isZooming || f.isDragging) {
+                navigate.value = false
+                clearTimeout(resetTime)
+                resetTime = window.setTimeout(() => {
+                    if (!navigate.value) {
+                        navigate.value = true
+                        dealVehicleRotate()
+                        currentRotation.value = BASE_RAD
+                        clearTimeout(resetTime)
+                        resetTime=null;
+                    }
+                }, reNavigateTime)
+            }
+        }
+    })
+    map.setPitch(40)
+
+    emits('handleSend', {
+        type: 'syncMapVersion',
+        msg: {}
+    })
+})
+
+function changeNavigate() {
+    navigate.value = true
+    dealMapRotate(currentRotation.value, currentPosition, map.getZoom())
+}
+
+// 指南针
+function changeCompass() {
+    dealVehicleRotate(0)
+    currentRotation.value = BASE_RAD
+    if (navigate.value) {
+        setTimeout(() => {
+            dealVehicleRotate()
+        }, 3 * 1000)
+    }
+}
+
+
+
+function dealVehicleRotate(rotate) {
+    let keys = Object.keys(vehicles)
+    let target = keys.find(item => item === deviceId.value)
+    let currentTarget = vehicles[target]
+    let vehicleHeading = BASE_RAD
+    let currentOldHeading = currentTarget && currentTarget.options.vehicleHeading
+    if (typeof rotate === 'number') {
+        dealMapRotate(0, currentPosition, map.getZoom())
+    } else {
+        vehicleHeading = currentOldHeading
+        currentRotation.value = vehicleHeading
+        dealMapRotate(vehicleHeading, currentPosition, map.getZoom())
+    }
+}
+
+function dealMapLayer(value, color, layerName) {
+    if (!value || !map) return
+
+    let result = JSON.parse(value)
+    if (!result) return
+    let attr = {};
+    if (layerName === 'barricade') {
+        attr = {
+            getLineColor: map.convertColor('#0066ff', 1),
+            // width: 5
+        }
+    } else {
+        attr = {
+            getLineColor: feature => {
+                return layerName === 'lane' ? map.convertColor('#eee', 0.5) : map.convertColor(feature.properties.color, 1)
+            },
+            getFillColor: feature => {
+                let opacity = 0.7;
+                if (layerName === 'runablearea') {
+                    opacity = 0.5
+                }
+                return layerName === 'electronicFence' ? map.convertColor(feature.properties.color, opacity) : color ? map.convertColor(color, opacity) : map.convertColor(feature.properties.color, opacity)
+            }
+        }
+    }
+    map.createGeoJsonLayer(result, attr, layerName)
+    mapStore.setData(layerName, null)
+}
+
+function dealMapPath(value, layerName, color) {
+    if (value && value.length) {
+        let data = JSON.parse(JSON.stringify(value))
+        let path = map.createPathLayer([
+            {
+                path: [...map.coorReverse(data)],
+                name: layerName,
+            }
+        ], {
+            getColor: f => map.convertColor('#ffff00'),
+        }, layerName)
+        mapLayers[layerName] = layerName
+        const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(data)))])
+        let bufferLine = turf.buffer(lineGeo, 6.5, { units: "meters" })
+        const obj = {
+            type: "FeatureCollection",
+            features: [bufferLine]
+        }
+        const attr = {
+            getFillColor: f => map.convertColor(color, 0.6),
+            getLineColor: f => map.convertColor(color, 1)
+        }
+        // map.setLayerSortName('bufferLayer', layerName + 'Buffer')
+        map.createGeoJsonLayer(obj, attr, layerName + 'Buffer')
+        mapLayers[`${layerName}Buffer`] = `${layerName}Buffer`
+    }
+}
+
+
+function dealDivIcon(value, layerName) {
+    if (!value || !map) return
+    let result = JSON.parse(value)
+    if (!result) return
+
+    const { features } = result
+
+    for (let i = 0; i < features.length; i++) {
+        let feature = features[i]
+        let { name, id } = feature.properties
+        let { coordinates } = feature.geometry
+        let markerCoor = null
+        if (layerName === 'lanenode') {
+            markerCoor = [coordinates[1], coordinates[0]]
+        } else {
+            let center = turf.center(feature)
+            markerCoor = [center.geometry.coordinates[1], center.geometry.coordinates[0]]
+        }
+        let texData = {
+            name: name,
+            id: id,
+            coordinates: [markerCoor[1], markerCoor[0], 1],
+        }
+        if (markerLayerGroupLists[`${layerName}${id}`]) {
+            markerLayerGroupLists[`${layerName}${id}`] = texData
+        } else {
+            markerLayerGroupLists[`${layerName}${id}`] = texData
+        }
+    }
+    map.createTextLayer([...Object.values(markerLayerGroupLists)], {
+        getSize: 15
+    }, 'text')
+    // map.setLayerSortName('marker', 'marker')
+    map.setLayerSortName('markerLayer', 'marker')
+    map.creatCircle(Object.values(markerLayerGroupLists), {
+        getFillColor: f => map.convertColor('#2aa1fa', 1),
+        getLineColor: f => map.convertColor('#2aa1fa', 0.5),
+        getLineWidth: 0.5,
+        radius: 1.5
+    }, 'marker')
+
+    mapStore.setData(layerName, null)
+}
+
+function removeLayer(obj, vehicleID) {
+    if (obj[vehicleID]) {
+        for (let item in obj[vehicleID]) {
+            map.removeLayer('map', obj[vehicleID][item])
+        }
+    }
+}
+
+
+function dealSafe(vehicleID, safe) {
+    if (!map) return
+
+    const { enable, data, dealedData, vehicleType, vehicleLatitude, vehicleLongtitude } = safe
+    removeLayer(safeObjects, vehicleID)
+    safeObjects[vehicleID] = {}
+    if (!enable) return
+
+    let safeType = [1, 20, 21].includes(vehicleType) ? 'circle' : 'rectangle'
+    let zIndex = 16
+    for (let i = 0; i < dealedData.length; i++) {
+        let item = JSON.parse(JSON.stringify(dealedData[i]))
+        let layer = safeType === 'rectangle' ? map.creatPolygon({
+            coordinates: item,
+        }, {
+            getFillColor: d => map.convertColor(safe_color),
+            getLineColor: d => map.convertColor(safe_color),
+            getLineWidth: 1
+        }, 'rectangle') : map.creatCircle([vehicleLongtitude, vehicleLatitude], {
+            getFillColor: f => map.convertColor(safe_color),
+            getLineColor: f => map.convertColor(safe_color),
+            getLineWidth: 1,
+            radius: data[i]
+        }, vehicleID)
+        safeObjects[vehicleID][i] = vehicleID
+    }
+}
+
+function dealTraj(vehicleID, traj) {
+    if (!traj || !map) return
+    const { trajPathWid, radius, dealedData, vehicleType, vehicleLatitude, vehicleLongtitude } = traj
+    removeLayer(safeTrajs, vehicleID)
+    safeTrajs[vehicleID] = {}
+    // if (!dealedData) return
+    // if ((dealedData && !dealedData.length) || !radius)) return
+    if ([1, 20, 21].includes(vehicleType && !radius)) return;
+
+    const zIndex = LAYER_PROPOITY['traj']
+    if ([1, 20, 21].includes(vehicleType) && radius) {
+        map.creatCircle([vehicleLongtitude, vehicleLatitude], {
+            getFillColor: f => map.convertColor('#FFA500'),
+            getLineColor: f => map.convertColor('#FFA500'),
+            getLineWidth: 1,
+            radius: radius
+        }, vehicleID)
+        safeTrajs[vehicleID]['circle'] = vehicleID
+    } else {
+        if (dealedData && !dealedData.length) return;
+        const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(dealedData)))])
+        // safeTrajs[vehicleID]['path'] = path
+        let bufferLine = turf.buffer(lineGeo, trajPathWid / 2, { units: "meters" })
+        const data = {
+            type: "FeatureCollection",
+            features: [bufferLine]
+        }
+        const attr = {
+            getFillColor: f => map.convertColor(safe_color, 0.4),
+            getLineColor: f => map.convertColor(safe_color, 1)
+        }
+        safeTrajs[vehicleID]['pathBuffer'] = vehicleID + 'Buffer'
+        map.setLayerSortName('bufferLayer', vehicleID + 'Buffer', 1)
+        map.createGeoJsonLayer(data, attr, vehicleID + 'Buffer')
+    }
+}
+
+
+function dealMapRotate(rotationAngle, center, zoom) {
+    let rotate = 0
+    if (rotationAngle) {
+        rotate = turf.radiansToDegrees(rotationAngle - BASE_RAD)
+    }
+    if (compass.value) {
+        compassRotationAngle.value = rotationAngle
+        map.setRotation(rotate)
+    }
+    center && center.length && map.flyTo(center, zoom, { animate: false })
+}
+
+function dealVehiclePosition(value) {
+    if (!map || !value.length) return
+
+    let zoom = map.getZoom()
+    for (let i = 0; i < value.length; i++) {
+        const item = value[i]
+        const { vehicleLatitude, vehicleLongtitude, vehicleHeading, vehicleID, image } = item
+        let vehiclePosition = [vehicleLatitude, vehicleLongtitude]
+        let baseObj = {
+            name: vehicleID,
+            rotate: vehicleHeading,
+            coordinates: [vehicleLongtitude, vehicleLatitude],
+            image: image,
+            options: {
+                vehicleHeading: vehicleHeading
+            }
+        }
+
+        if (vehicles[vehicleID]) {
+            vehicles[vehicleID] = baseObj
+        } else {
+            vehicles[vehicleID] = baseObj        
+        }
+     
+        if (vehicleID === deviceId.value) {
+            currentPosition = vehiclePosition
+
+            if (navigate.value) {
+                currentRotation.value = vehicleHeading
+                dealMapRotate(vehicleHeading, vehiclePosition, zoom <= MAP_ZOOM ? MAP_ZOOM : zoom)
+              
+            } 
+        } 
+    }
+    initCar()
+}
+
+function initCar(){
+    map.clearLayer('car')
+    const nameText = JSON.parse(JSON.stringify(Object.values(vehicles))).map(item => {
+        item.coordinates = [item.coordinates[0], item.coordinates[1], 10]
+        return item
+    })
+    map.createTextLayer(nameText, {
+        getSize: 15,
+        getColor: f => [255, 255, 255, 255],
+        fontWeight: 400,
+        fontSettings: {
+            buffer: 2,
+            sdf: true,
+            smoothing: 0.5
+        },
+    }, 'carName')
+    let car = {};
+    Object.values(vehicles).forEach(item => {
+        if (car.hasOwnProperty(item.image)) {
+            car[item.image].push(item)
+        } else {
+            car[item.image] = [item]
+        }
+
+    })
+    for (let key in car) {
+        // map.setLayerSortName('carLayer', key)
+        let imageURL = `image/${key}.glb`
+        map.createCarModel(car[key], { scenegraph: imageURL }, key)
+    }
+}
+
+function dealSingleDatas(datas) {
+    const { color, coor } = datas
+    let data = JSON.parse(JSON.stringify(value))
+    const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(data)))])
+    // safeTrajs[vehicleID]['path'] = path
+    let bufferLine = turf.buffer(lineGeo, 2, { units: "meters" })
+    const obj = {
+        type: "FeatureCollection",
+        features: [bufferLine]
+    }
+    const attr = {
+        getFillColor: f => map.convertColor(color, 0.4),
+        getLineColor: f => map.convertColor(color, 1)
+    }
+    map.createGeoJsonLayer(obj, attr, layerName)
+    singlePaths.push(layerName)
+}
+
+function dealObtacleData(value) {
+    if (value && value.length) {
+        for (let i = 0; i < value.length; i++) {
+            let obstacle = value[i]
+            let { typeColor, coordinate, centerLon, centerLat, centerRadius, centerColor } = obstacle
+            map.creatPolygon({
+                coordinates: JSON.parse(JSON.stringify(coordinate)),
+            }, {
+                getFillColor: d => map.convertColor(typeColor),
+                getLineColor: d => map.convertColor(typeColor),
+                getLineWidth: 3
+            }, 'obstacle')
+
+            map.setLayerSortName('buffer', 'obstacleBuffer')
+            map.creatCircle([centerLon, centerLat], {
+                getFillColor: f => map.convertColor(centerColor, 0.5),
+                getLineColor: f => map.convertColor(centerColor, 0.5),
+                getLineWidth: 0,
+                radius: centerRadius
+            }, 'obstacleBuffer')
+        }
+    }
+}
+
+function dealDynamicDatas(datas) {
+    let name = 'dynamicLine';
+    const { color, path } = datas
+    const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(path)))])
+    // safeTrajs[vehicleID]['path'] = path
+    let bufferLine = turf.buffer(lineGeo, 2, { units: "meters" })
+    const obj = {
+        type: "FeatureCollection",
+        features: [bufferLine]
+    }
+    const attr = {
+        // getFillColor: f => map.convertColor(color, 0.3),
+        getLineColor: f => map.convertColor(color, 0.3),
+        getLineWidth: 30
+    }
+    map.createGeoJsonLayer(obj, attr, name)
+}
+
+// 直接监听props.isShowBasic 不会触发
+watch(() => props.isShowBasic, () => {
+    nextTick(() => {
+        // map.invalidateSize(true)
+    })
+})
+
+watch(lanenode, (value) => {
+    dealDivIcon(value, 'lanenode', '#ff0000')
+}, { immediate: true, deep: true })
+
+watch(lane, (value) => {
+    dealMapLayer(value, '#fff', 'lane')
+}, { immediate: true, deep: true })
+
+watch(runablearea, (value) => {
+    dealMapLayer(value, '#98a0a0', 'runablearea')
+}, { immediate: true, deep: true })
+
+watch(centerline, (value) => {
+    dealMapLayer(value, '#eee', 'centerline')
+}, { immediate: true, deep: true })
+
+watch(obstacles, (value) => {
+    dealDivIcon(value, 'obstacles')
+    dealMapLayer(value, '#6f9bdd', 'obstacles')
+}, { immediate: true, deep: true })
+
+watch(diggingworkarea, (value) => {
+    dealDivIcon(value, 'diggingworkarea')
+    dealMapLayer(value, '#886e26', 'diggingworkarea')
+}, { immediate: true, deep: true })
+
+watch(dumparea, (value) => {
+    dealDivIcon(value, 'dumparea')
+    dealMapLayer(value, '#886e26', 'dumparea')
+}, { immediate: true, deep: true })
+
+watch(barricade, (value) => {
+    dealMapLayer(value, '#0000ff', 'barricade')
+}, { immediate: true, deep: true })
+
+watch(stationarea, (value) => {
+    dealDivIcon(value, 'stationarea')
+    dealMapLayer(value, '#90ee90', 'stationarea')
+}, { immediate: true, deep: true })
+
+watch(parkspot, (value) => {
+    dealDivIcon(value, 'parkspot')
+    dealMapLayer(value, '#7e8185', 'parkspot')
+}, { immediate: true, deep: true })
+
+watch(staticobjs, (value) => {
+    dealMapLayer(value, '#98a0a0', 'staticobjs')
+}, { immediate: true, deep: true })
+
+watch(electronicFence, (value) => {
+    dealDivIcon(value, 'electronicFence')
+    dealMapLayer(value, '#d51d20', 'electronicFence')
+}, { immediate: true, deep: true })
+
+watch(nextPathinfo, (value) => {
+    dealMapPath(value, 'nextPath', nextPathAvailable.value === 1 ? '#19ae19' : '#8B4513')
+}, { immediate: true, deep: true })
+
+watch(currPathinfo, (value) => {
+    dealMapPath(value, 'currentPath', '#19ae19')
+}, { immediate: true, deep: true })
+
+watch(avoidancePath, (value) => {
+    dealMapPath(value, 'avoidancePath', 'blue')
+}, { immediate: true, deep: true })
+
+watch(vehiclesPositioninfo, (value) => {
+    dealVehiclePosition(value)
+}, {
+    immediate: true,
+    deep: true
+})
+
+watch(safeObj, (value) => {
+    Object.keys(value).forEach(item => {
+        dealSafe(item, value[item])
+    })
+}, {
+    immediate: true,
+    deep: true
+})
+
+watch(trajObj, (value) => {
+    Object.keys(value).forEach(item => {
+        dealTraj(item, value[item])
+    })
+}, {
+    immediate: true,
+    deep: true
+})
+
+watch(obstacleData, (value) => {
+    dealObtacleData(value)
+}, { immediate: true, deep: true })
+
+watch(deleteVehicles, (data) => {
+    if (!map) return
+    if (data && data.length) {
+        data.forEach(item => {
+            // map.removeLayer(vehicles[item])
+            removeLayer(safeTrajs, item)
+            removeLayer(safeObjects, item)
+            delete vehicles[item]
+            initCar()
+        })
+    }
+}, {
+    immediate: true
+})
+
+watch(() => props.clearSinglePointEnable, (enable) => {
+    if (!enable) return
+    isSinglePreview.value = true
+    singlePaths.forEach(item => map.removeLayer('map',item))
+}, { deep: true })
+
+watch([morepoint, morepath], (pointData, pathData) => {
+    if (isSinglePreview.value && (pointData || pathData)) {
+        let datas = pointData.concat(pathData)
+        for (let i = 0; i < datas.length; i++) {
+            dealSingleDatas(datas[i])
+        }
+    }
+}, { deep: true })
+
+watch(dynamicPathinfo, (pathData) => {
+    if (pathData.length > 0) {
+        for (let i = 0; i < pathData.length; i++) {
+            dealDynamicDatas(pathData[i])
+        }
+    }
+}, { deep: true })
+
+watch(deviceId, (value) => {
+    if (value && map) {
+        dealMapRotate(currentRotation.value, currentPosition, map.getZoom())
+    }
+}, { deep: true })
+
+function doUnmount() {
+    Object.keys(mapLayers).map(layer => map.removeLayer(mapLayers[layer]))
+    let mapDom = root.value
+    mapDom.removeEventListener('mousedown', changeMouseDown)
+    mapDom.removeEventListener('mousemove', changeMouseMove)
+    mapDom.removeEventListener('mouseup', changeMouseUp)
+
+    map.remove()
+    map = null
+}
+
+watch(() => props.reloadData, (value) => {
+    if (value) {
+        doUnmount()
+    }
+})
+
+onBeforeUnmount(() => {
+    doUnmount()
+})
+</script>
+
+<style lang="less" scope>
+.map-contain {
+    height: 100%;
+    overflow: hidden;
+}
+
+#map {
+    width: 200% !important;
+    height: 200% !important;
+    top: -50%;
+    left: -50%;
+    background: #171A23;
+    position: relative !important;
+}
+
+.navigate-preview {
+    background: #4A75A9;
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+    border-radius: 10px;
+    opacity: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.compass,
+.navigate-preview {
+    position: absolute;
+    width: 4vw;
+    height: 4vw;
+    z-index: 999;
+}
+
+.compass {
+    bottom: 88px;
+    max-width: 60px;
+    max-height: 60px;
+}
+
+.navigate-preview {
+    bottom: 24px;
+    max-width: 60px;
+    max-height: 60px;
+}
+</style>
+<style lang="less">
+.icon-node {
+    width: 120px !important;
+    white-space: nowrap;
+    color: #676565;
+    // padding-left: -2em !important;
+    z-index: 1;
+    font-size: 12px !important;
+    font-family: "Open Sans Regular", "Arial Unicode MS Regular", sans-serif;
+    text-transform: uppercase;
+    text-align: center;
+    -webkit-text-stroke-display: block;
+    -webkit-text-stroke-width: 1px;
+    -webkit-text-stroke-color: rgba(33, 33, 33, 0.8);
+}
+
+@media screen and (min-width: 1700px) {
+    .icon-node {
+        font-size: 18px !important;
+    }
+}
+
+.icon-node-name {
+    display: inline-block;
+    transform: scale(.6);
+    padding-left: -20px !important;
+}
+
+.hide {
+    display: none !important;
+}
+
+.middle-line {
+    // 为svg设置虚线,数字越大,虚线段越长,
+    // 设置2个参数,参数1: 虚线的长度  参数2: 虚线和虚线之间的间隔, 如果只设置一个参数,说明两个值一样大小
+    stroke-dasharray: 15 20;
+    z-index: 999;
+}
+
+.leaflet-tooltip {
+    color: #fff !important;
+    background-color: rgba(255, 255, 255, 0) !important;
+    border: 0 !important;
+    box-shadow: rgba(0, 0, 0, 0);
+    font-size: 12px !important;
+}
+
+.leaflet-control-attribution {
+    display: none !important;
+}
+</style>
\ No newline at end of file

.history/src/views/map/MapLeaflet_20230817152330.vue

+<template>
+    <div class="map-contain">
+        <canvas id="map" ref="root"></canvas>
+        <img src="/image/compass.png" class="compass" ref="compass"
+            :style="`transform: rotateZ(${compassRotationAngle}rad)`" alt="" @click="changeCompass">
+        <div class="navigate-preview">
+            <img src="/image/navigate.png" class="navigate" @click="changeNavigate" alt="" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { markRaw, onMounted, watch, ref, computed, onBeforeUnmount, nextTick } from 'vue'
+import { useMapStore } from '@/store/MapStore.js'
+import { useVehicleStore } from '@/store/VehicleStore'
+import { storeToRefs } from 'pinia'
+import { vehicleScale } from '../js/tools'
+import DeckNew from '@/tools/Deck';
+import * as turf from '@turf/turf'
+
+const safe_color = '#FFA500'
+const BASE_RAD = 1.5707963267948966
+const MAP_ZOOM = 17
+const LAYER_PROPOITY = {
+    runablearea: 1,
+    staticobjs: 2,
+    diggingarea: 3,
+    diggingworkarea: 3,
+    dumparea: 4,
+    barricade: 5,
+    electronicFence: 6,
+    wetArea: 7,
+    lane: 8,
+    obstacles: 9,
+    stationarea: 10,
+    parkspot: 11,
+    lanenode: 12,
+    currPathinfo: 13,
+    nextPathinfo: 14,
+    avoidancePath: 15,
+    traj: 16,
+    obstacle: 17
+}
+
+const vehicles = {}
+let ismousedown = false
+let ismousemove = false
+let resetTime = null
+let obstaclePolygons = []
+let dynamicPaths = []
+
+const reNavigateTime = 2.5 * 1000
+
+const props = defineProps({
+    isShowBasic: Boolean,
+    clearSinglePointEnable: Boolean,
+    reloadData: Boolean
+})
+
+let map = markRaw({})
+let currentPosition = markRaw([])
+const root = ref(null)
+const mapLayers = markRaw({})
+const safeObjects = markRaw({})
+const safeTrajs = markRaw({})
+const singlePaths = markRaw([])
+const navigate = ref(true)
+const currentRotation = ref(0)
+const markerLayerGroupLists = markRaw({})
+const isSinglePreview = ref(false)
+const compassRotationAngle = ref(0)
+const compass = ref(null)
+const mapStore = useMapStore()
+const mapStoreToRefs = storeToRefs(mapStore)
+const {
+    lanenode,
+    lane,
+    runablearea,
+    centerline,
+    obstacles,
+    diggingworkarea,
+    dumparea,
+    barricade,
+    stationarea,
+    parkspot,
+    staticobjs,
+    electronicFence,
+    morepoint, // 单机循迹单路径
+    morepath, // 单机循迹多路径
+    nextPathinfo,
+    currPathinfo,
+    nextPathAvailable,
+    avoidancePath, // 绕障路径
+    obstacleData,
+    dynamicPathinfo, // 车辆动态路权信息
+} = mapStoreToRefs
+const vehicleStore = useVehicleStore()
+const vehicleStoreToRefs = storeToRefs(vehicleStore)
+const { vehiclesPositioninfo, safeObj, trajObj, paraminfo, deleteVehicles } = vehicleStoreToRefs
+
+const deviceId = computed(() => {
+    return paraminfo.value.deviceId
+})
+
+const emits = defineEmits(['handleSend'])
+
+onMounted(() => {
+    //阻止鼠标右键
+    document.oncontextmenu = f => {
+        event.returnValue = false
+    }
+    let currentCoordinate = []
+    let bool = false
+    map = new DeckNew({
+        initialViewState: {
+            latitude: document.location.mapCenter[0],
+            longitude: document.location.mapCenter[1],
+            zoom: MAP_ZOOM,
+            // pickingRadius:5,
+            controller: true,
+        },
+        controller: true,
+        // parent: document.getElementById('mapMain'),
+        canvas: 'map',
+        //如果deck滚动条滚动或者拖动地图时，不进行地图角度和等级矫正
+        onInteractionStateChange: f => {
+           
+            if (!currentPosition) return
+            if (f.isZooming || f.isDragging) {
+                navigate.value = false
+                clearTimeout(resetTime)
+                resetTime = window.setTimeout(() => {
+                    if (!navigate.value) {
+                        navigate.value = true
+                        dealVehicleRotate()
+                        currentRotation.value = BASE_RAD
+                        clearTimeout(resetTime)
+                        resetTime=null;
+                    }
+                }, reNavigateTime)
+            }
+        }
+    })
+    map.setPitch(40)
+
+    emits('handleSend', {
+        type: 'syncMapVersion',
+        msg: {}
+    })
+})
+
+function changeNavigate() {
+    navigate.value = true
+    dealMapRotate(currentRotation.value, currentPosition, map.getZoom())
+}
+
+// 指南针
+function changeCompass() {
+    dealVehicleRotate(0)
+    currentRotation.value = BASE_RAD
+    if (navigate.value) {
+        setTimeout(() => {
+            dealVehicleRotate()
+        }, 3 * 1000)
+    }
+}
+
+
+
+function dealVehicleRotate(rotate) {
+    let keys = Object.keys(vehicles)
+    let target = keys.find(item => item === deviceId.value)
+    let currentTarget = vehicles[target]
+    let vehicleHeading = BASE_RAD
+    let currentOldHeading = currentTarget && currentTarget.options.vehicleHeading
+    if (typeof rotate === 'number') {
+        dealMapRotate(0, currentPosition, map.getZoom())
+    } else {
+        vehicleHeading = currentOldHeading
+        currentRotation.value = vehicleHeading
+        dealMapRotate(vehicleHeading, currentPosition, map.getZoom())
+    }
+}
+
+function dealMapLayer(value, color, layerName) {
+    if (!value || !map) return
+
+    let result = JSON.parse(value)
+    if (!result) return
+    let attr = {};
+    if (layerName === 'barricade') {
+        attr = {
+            getLineColor: map.convertColor('#0066ff', 1),
+            // width: 5
+        }
+    } else {
+        attr = {
+            getLineColor: feature => {
+                return layerName === 'lane' ? map.convertColor('#eee', 0.5) : map.convertColor(feature.properties.color, 1)
+            },
+            getFillColor: feature => {
+                let opacity = 0.7;
+                if (layerName === 'runablearea') {
+                    opacity = 0.5
+                }
+                return layerName === 'electronicFence' ? map.convertColor(feature.properties.color, opacity) : color ? map.convertColor(color, opacity) : map.convertColor(feature.properties.color, opacity)
+            }
+        }
+    }
+    map.createGeoJsonLayer(result, attr, layerName)
+    mapStore.setData(layerName, null)
+}
+
+function dealMapPath(value, layerName, color) {
+    if (value && value.length) {
+        let data = JSON.parse(JSON.stringify(value))
+        let path = map.createPathLayer([
+            {
+                path: [...map.coorReverse(data)],
+                name: layerName,
+            }
+        ], {
+            getColor: f => map.convertColor('#ffff00'),
+        }, layerName)
+        mapLayers[layerName] = layerName
+        const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(data)))])
+        let bufferLine = turf.buffer(lineGeo, 6.5, { units: "meters" })
+        const obj = {
+            type: "FeatureCollection",
+            features: [bufferLine]
+        }
+        const attr = {
+            getFillColor: f => map.convertColor(color, 0.6),
+            getLineColor: f => map.convertColor(color, 1)
+        }
+        // map.setLayerSortName('bufferLayer', layerName + 'Buffer')
+        map.createGeoJsonLayer(obj, attr, layerName + 'Buffer')
+        mapLayers[`${layerName}Buffer`] = `${layerName}Buffer`
+    }
+}
+
+
+function dealDivIcon(value, layerName) {
+    if (!value || !map) return
+    let result = JSON.parse(value)
+    if (!result) return
+
+    const { features } = result
+
+    for (let i = 0; i < features.length; i++) {
+        let feature = features[i]
+        let { name, id } = feature.properties
+        let { coordinates } = feature.geometry
+        let markerCoor = null
+        if (layerName === 'lanenode') {
+            markerCoor = [coordinates[1], coordinates[0]]
+        } else {
+            let center = turf.center(feature)
+            markerCoor = [center.geometry.coordinates[1], center.geometry.coordinates[0]]
+        }
+        let texData = {
+            name: name,
+            id: id,
+            coordinates: [markerCoor[1], markerCoor[0], 1],
+        }
+        if (markerLayerGroupLists[`${layerName}${id}`]) {
+            markerLayerGroupLists[`${layerName}${id}`] = texData
+        } else {
+            markerLayerGroupLists[`${layerName}${id}`] = texData
+        }
+    }
+    map.createTextLayer([...Object.values(markerLayerGroupLists)], {
+        getSize: 15
+    }, 'text')
+    // map.setLayerSortName('marker', 'marker')
+    map.setLayerSortName('markerLayer', 'marker')
+    map.creatCircle(Object.values(markerLayerGroupLists), {
+        getFillColor: f => map.convertColor('#2aa1fa', 1),
+        getLineColor: f => map.convertColor('#2aa1fa', 0.5),
+        getLineWidth: 0.5,
+        radius: 1.5
+    }, 'marker')
+
+    mapStore.setData(layerName, null)
+}
+
+function removeLayer(obj, vehicleID) {
+    if (obj[vehicleID]) {
+        for (let item in obj[vehicleID]) {
+            map.removeLayer('map', obj[vehicleID][item])
+        }
+    }
+}
+
+
+function dealSafe(vehicleID, safe) {
+    if (!map) return
+
+    const { enable, data, dealedData, vehicleType, vehicleLatitude, vehicleLongtitude } = safe
+    removeLayer(safeObjects, vehicleID)
+    safeObjects[vehicleID] = {}
+    if (!enable) return
+
+    let safeType = [1, 20, 21].includes(vehicleType) ? 'circle' : 'rectangle'
+    let zIndex = 16
+    for (let i = 0; i < dealedData.length; i++) {
+        let item = JSON.parse(JSON.stringify(dealedData[i]))
+        let layer = safeType === 'rectangle' ? map.creatPolygon({
+            coordinates: item,
+        }, {
+            getFillColor: d => map.convertColor(safe_color),
+            getLineColor: d => map.convertColor(safe_color),
+            getLineWidth: 1
+        }, 'rectangle') : map.creatCircle([vehicleLongtitude, vehicleLatitude], {
+            getFillColor: f => map.convertColor(safe_color),
+            getLineColor: f => map.convertColor(safe_color),
+            getLineWidth: 1,
+            radius: data[i]
+        }, vehicleID)
+        safeObjects[vehicleID][i] = vehicleID
+    }
+}
+
+function dealTraj(vehicleID, traj) {
+    if (!traj || !map) return
+    const { trajPathWid, radius, dealedData, vehicleType, vehicleLatitude, vehicleLongtitude } = traj
+    removeLayer(safeTrajs, vehicleID)
+    safeTrajs[vehicleID] = {}
+    // if (!dealedData) return
+    // if ((dealedData && !dealedData.length) || !radius)) return
+    if ([1, 20, 21].includes(vehicleType && !radius)) return;
+
+    const zIndex = LAYER_PROPOITY['traj']
+    if ([1, 20, 21].includes(vehicleType) && radius) {
+        map.creatCircle([vehicleLongtitude, vehicleLatitude], {
+            getFillColor: f => map.convertColor('#FFA500'),
+            getLineColor: f => map.convertColor('#FFA500'),
+            getLineWidth: 1,
+            radius: radius
+        }, vehicleID)
+        safeTrajs[vehicleID]['circle'] = vehicleID
+    } else {
+        if (dealedData && !dealedData.length) return;
+        const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(dealedData)))])
+        // safeTrajs[vehicleID]['path'] = path
+        let bufferLine = turf.buffer(lineGeo, trajPathWid / 2, { units: "meters" })
+        const data = {
+            type: "FeatureCollection",
+            features: [bufferLine]
+        }
+        const attr = {
+            getFillColor: f => map.convertColor(safe_color, 0.4),
+            getLineColor: f => map.convertColor(safe_color, 1)
+        }
+        safeTrajs[vehicleID]['pathBuffer'] = vehicleID + 'Buffer'
+        map.setLayerSortName('bufferLayer', vehicleID + 'Buffer', 1)
+        map.createGeoJsonLayer(data, attr, vehicleID + 'Buffer')
+    }
+}
+
+
+function dealMapRotate(rotationAngle, center, zoom) {
+    let rotate = 0
+    if (rotationAngle) {
+        rotate = turf.radiansToDegrees(rotationAngle - BASE_RAD)
+    }
+    if (compass.value) {
+        compassRotationAngle.value = rotationAngle
+        map.setRotation(rotate)
+    }
+    center && center.length && map.flyTo(center, zoom, { animate: false })
+}
+
+function dealVehiclePosition(value) {
+    if (!map || !value.length) return
+
+    let zoom = map.getZoom()
+    for (let i = 0; i < value.length; i++) {
+        const item = value[i]
+        const { vehicleLatitude, vehicleLongtitude, vehicleHeading, vehicleID, image } = item
+        let vehiclePosition = [vehicleLatitude, vehicleLongtitude]
+        let baseObj = {
+            name: vehicleID,
+            rotate: vehicleHeading,
+            coordinates: [vehicleLongtitude, vehicleLatitude],
+            image: image,
+            options: {
+                vehicleHeading: vehicleHeading
+            }
+        }
+
+        if (vehicles[vehicleID]) {
+            vehicles[vehicleID] = baseObj
+        } else {
+            vehicles[vehicleID] = baseObj        
+        }
+     
+        if (vehicleID === deviceId.value) {
+            currentPosition = vehiclePosition
+
+            if (navigate.value) {
+                currentRotation.value = vehicleHeading
+                dealMapRotate(vehicleHeading, vehiclePosition, zoom <= MAP_ZOOM ? MAP_ZOOM : zoom)
+              
+            } 
+        } 
+    }
+    initCar()
+}
+
+function initCar(){
+    map.clearLayer('car')
+    const nameText = JSON.parse(JSON.stringify(Object.values(vehicles))).map(item => {
+        item.coordinates = [item.coordinates[0], item.coordinates[1], 10]
+        return item
+    })
+    map.createTextLayer(nameText, {
+        getSize: 15,
+        getColor: f => [255, 255, 255, 255],
+        fontWeight: 400,
+        fontSettings: {
+            buffer: 2,
+            sdf: true,
+            smoothing: 0.5
+        },
+    }, 'carName')
+    let car = {};
+    Object.values(vehicles).forEach(item => {
+        if (car.hasOwnProperty(item.image)) {
+            car[item.image].push(item)
+        } else {
+            car[item.image] = [item]
+        }
+
+    })
+    for (let key in car) {
+        // map.setLayerSortName('carLayer', key)
+        let imageURL = `image/${key}.glb`
+        map.createCarModel(car[key], { scenegraph: imageURL }, key)
+    }
+}
+
+function dealSingleDatas(datas) {
+    const { color, coor } = datas
+    let data = JSON.parse(JSON.stringify(value))
+    const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(data)))])
+    // safeTrajs[vehicleID]['path'] = path
+    let bufferLine = turf.buffer(lineGeo, 2, { units: "meters" })
+    const obj = {
+        type: "FeatureCollection",
+        features: [bufferLine]
+    }
+    const attr = {
+        getFillColor: f => map.convertColor(color, 0.4),
+        getLineColor: f => map.convertColor(color, 1)
+    }
+    map.createGeoJsonLayer(obj, attr, layerName)
+    singlePaths.push(layerName)
+}
+
+function dealObtacleData(value) {
+    if (value && value.length) {
+        for (let i = 0; i < value.length; i++) {
+            let obstacle = value[i]
+            let { typeColor, coordinate, centerLon, centerLat, centerRadius, centerColor } = obstacle
+            map.creatPolygon({
+                coordinates: JSON.parse(JSON.stringify(coordinate)),
+            }, {
+                getFillColor: d => map.convertColor(typeColor),
+                getLineColor: d => map.convertColor(typeColor),
+                getLineWidth: 3
+            }, 'obstacle')
+
+            map.setLayerSortName('buffer', 'obstacleBuffer')
+            map.creatCircle([centerLon, centerLat], {
+                getFillColor: f => map.convertColor(centerColor, 0.5),
+                getLineColor: f => map.convertColor(centerColor, 0.5),
+                getLineWidth: 0,
+                radius: centerRadius
+            }, 'obstacleBuffer')
+        }
+    }
+}
+
+function dealDynamicDatas(datas) {
+    let name = 'dynamicLine';
+    const { color, path } = datas
+    const lineGeo = turf.lineString([...map.coorReverse(JSON.parse(JSON.stringify(path)))])
+    // safeTrajs[vehicleID]['path'] = path
+    let bufferLine = turf.buffer(lineGeo, 2, { units: "meters" })
+    const obj = {
+        type: "FeatureCollection",
+        features: [bufferLine]
+    }
+    const attr = {
+        // getFillColor: f => map.convertColor(color, 0.3),
+        getLineColor: f => map.convertColor(color, 0.3),
+        getLineWidth: 30
+    }
+    map.createGeoJsonLayer(obj, attr, name)
+}
+
+// 直接监听props.isShowBasic 不会触发
+watch(() => props.isShowBasic, () => {
+    nextTick(() => {
+        // map.invalidateSize(true)
+    })
+})
+
+watch(lanenode, (value) => {
+    dealDivIcon(value, 'lanenode', '#ff0000')
+}, { immediate: true, deep: true })
+
+watch(lane, (value) => {
+    dealMapLayer(value, '#fff', 'lane')
+}, { immediate: true, deep: true })
+
+watch(runablearea, (value) => {
+    dealMapLayer(value, '#98a0a0', 'runablearea')
+}, { immediate: true, deep: true })
+
+watch(centerline, (value) => {
+    dealMapLayer(value, '#eee', 'centerline')
+}, { immediate: true, deep: true })
+
+watch(obstacles, (value) => {
+    dealDivIcon(value, 'obstacles')
+    dealMapLayer(value, '#6f9bdd', 'obstacles')
+}, { immediate: true, deep: true })
+
+watch(diggingworkarea, (value) => {
+    dealDivIcon(value, 'diggingworkarea')
+    dealMapLayer(value, '#886e26', 'diggingworkarea')
+}, { immediate: true, deep: true })
+
+watch(dumparea, (value) => {
+    dealDivIcon(value, 'dumparea')
+    dealMapLayer(value, '#886e26', 'dumparea')
+}, { immediate: true, deep: true })
+
+watch(barricade, (value) => {
+    dealMapLayer(value, '#0000ff', 'barricade')
+}, { immediate: true, deep: true })
+
+watch(stationarea, (value) => {
+    dealDivIcon(value, 'stationarea')
+    dealMapLayer(value, '#90ee90', 'stationarea')
+}, { immediate: true, deep: true })
+
+watch(parkspot, (value) => {
+    dealDivIcon(value, 'parkspot')
+    dealMapLayer(value, '#7e8185', 'parkspot')
+}, { immediate: true, deep: true })
+
+watch(staticobjs, (value) => {
+    dealMapLayer(value, '#98a0a0', 'staticobjs')
+}, { immediate: true, deep: true })
+
+watch(electronicFence, (value) => {
+    dealDivIcon(value, 'electronicFence')
+    dealMapLayer(value, '#d51d20', 'electronicFence')
+}, { immediate: true, deep: true })
+
+watch(nextPathinfo, (value) => {
+    dealMapPath(value, 'nextPath', nextPathAvailable.value === 1 ? '#19ae19' : '#8B4513')
+}, { immediate: true, deep: true })
+
+watch(currPathinfo, (value) => {
+    dealMapPath(value, 'currentPath', '#19ae19')
+}, { immediate: true, deep: true })
+
+watch(avoidancePath, (value) => {
+    dealMapPath(value, 'avoidancePath', 'blue')
+}, { immediate: true, deep: true })
+
+watch(vehiclesPositioninfo, (value) => {
+    dealVehiclePosition(value)
+}, {
+    immediate: true,
+    deep: true
+})
+
+watch(safeObj, (value) => {
+    Object.keys(value).forEach(item => {
+        dealSafe(item, value[item])
+    })
+}, {
+    immediate: true,
+    deep: true
+})
+
+watch(trajObj, (value) => {
+    Object.keys(value).forEach(item => {
+        dealTraj(item, value[item])
+    })
+}, {
+    immediate: true,
+    deep: true
+})
+
+watch(obstacleData, (value) => {
+    dealObtacleData(value)
+}, { immediate: true, deep: true })
+
+watch(deleteVehicles, (data) => {
+    if (!map) return
+    if (data && data.length) {
+        data.forEach(item => {
+            // map.removeLayer(vehicles[item])
+            removeLayer(safeTrajs, item)
+            removeLayer(safeObjects, item)
+            delete vehicles[item]
+            initCar()
+        })
+    }
+}, {
+    immediate: true
+})
+
+watch(() => props.clearSinglePointEnable, (enable) => {
+    if (!enable) return
+    isSinglePreview.value = true
+    singlePaths.forEach(item => map.removeLayer('map',item))
+}, { deep: true })
+
+watch([morepoint, morepath], (pointData, pathData) => {
+    if (isSinglePreview.value && (pointData || pathData)) {
+        let datas = pointData.concat(pathData)
+        for (let i = 0; i < datas.length; i++) {
+            dealSingleDatas(datas[i])
+        }
+    }
+}, { deep: true })
+
+watch(dynamicPathinfo, (pathData) => {
+    if (pathData.length > 0) {
+        for (let i = 0; i < pathData.length; i++) {
+            dealDynamicDatas(pathData[i])
+        }
+    }
+}, { deep: true })
+
+watch(deviceId, (value) => {
+    if (value && map) {
+        dealMapRotate(currentRotation.value, currentPosition, map.getZoom())
+    }
+}, { deep: true })
+
+function doUnmount() {
+    Object.keys(mapLayers).map(layer => map.removeLayer(mapLayers[layer]))
+    let mapDom = root.value
+    mapDom.removeEventListener('mousedown', changeMouseDown)
+    mapDom.removeEventListener('mousemove', changeMouseMove)
+    mapDom.removeEventListener('mouseup', changeMouseUp)
+
+    map.remove()
+    map = null
+}
+
+watch(() => props.reloadData, (value) => {
+    if (value) {
+        doUnmount()
+    }
+})
+
+onBeforeUnmount(() => {
+    doUnmount()
+})
+</script>
+
+<style lang="less" scope>
+.map-contain {
+    height: 100%;
+    overflow: hidden;
+}
+
+#map {
+    width: 200% !important;
+    height: 200% !important;
+    top: -50%;
+    left: -50%;
+    background: #171A23;
+    position: relative !important;
+}
+
+.navigate-preview {
+    background: #4A75A9;
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+    border-radius: 10px;
+    opacity: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.compass,
+.navigate-preview {
+    position: absolute;
+    width: 4vw;
+    height: 4vw;
+    z-index: 999;
+}
+
+.compass {
+    bottom: 88px;
+    max-width: 60px;
+    max-height: 60px;
+}
+
+.navigate-preview {
+    bottom: 24px;
+    max-width: 60px;
+    max-height: 60px;
+}
+</style>
+<style lang="less">
+.icon-node {
+    width: 120px !important;
+    white-space: nowrap;
+    color: #676565;
+    // padding-left: -2em !important;
+    z-index: 1;
+    font-size: 12px !important;
+    font-family: "Open Sans Regular", "Arial Unicode MS Regular", sans-serif;
+    text-transform: uppercase;
+    text-align: center;
+    -webkit-text-stroke-display: block;
+    -webkit-text-stroke-width: 1px;
+    -webkit-text-stroke-color: rgba(33, 33, 33, 0.8);
+}
+
+@media screen and (min-width: 1700px) {
+    .icon-node {
+        font-size: 18px !important;
+    }
+}
+
+.icon-node-name {
+    display: inline-block;
+    transform: scale(.6);
+    padding-left: -20px !important;
+}
+
+.hide {
+    display: none !important;
+}
+
+.middle-line {
+    // 为svg设置虚线,数字越大,虚线段越长,
+    // 设置2个参数,参数1: 虚线的长度  参数2: 虚线和虚线之间的间隔, 如果只设置一个参数,说明两个值一样大小
+    stroke-dasharray: 15 20;
+    z-index: 999;
+}
+
+.leaflet-tooltip {
+    color: #fff !important;
+    background-color: rgba(255, 255, 255, 0) !important;
+    border: 0 !important;
+    box-shadow: rgba(0, 0, 0, 0);
+    font-size: 12px !important;
+}
+
+.leaflet-control-attribution {
+    display: none !important;
+}
+</style>
\ No newline at end of file

src/views/map/MapLeaflet.vue

@@ -49,7 +49,7 @@ let resetTime = null
 let obstaclePolygons = []
 let dynamicPaths = []
 
-const reNavigateTime = 10 * 1000
+const reNavigateTime = 2.5 * 1000
 
 const props = defineProps({
     isShowBasic: Boolean,
@@ -128,6 +128,7 @@ onMounted(() => {
             if (!currentPosition) return
             if (f.isZooming || f.isDragging) {
                 navigate.value = false
+                clearTimeout(resetTime)
                 resetTime = window.setTimeout(() => {
                     if (!navigate.value) {
                         navigate.value = true