BigScreenUI/src/components/mapBaidu/mapLine.vue

<template>
    <div v-if="domShow" :id="'equipmentIdMap' + domId" class="map">

    </div>
</template>
  
<script setup lang="ts">


let map: any = null
let centerPoint: any = null
let domId = ref(0)
let domShow = ref(false)
let animiationLineList = []
const state = reactive({
    lineStyle: {
        strokeColor: "#0e83ed",
        strokeWeight: 3,
        strokeOpacity: 0.6,
    }
})
onMounted(() => {
    console.log("map", "map")
})

let linePointList: any = []

const initMap = () => {
    map = new BMapGL.Map("equipmentIdMap" + domId.value);
    map.centerAndZoom(new BMapGL.Point(centerPoint), 18);
    console.log("map", map)
    map.enableScrollWheelZoom();
    setTimeout(() => {
        // initCustomDot()
        const startIcon = {
            imgUrl: '/src/assets/img/mapStart.png',
            position: [linePointList[0].lng, linePointList[0].lat],
            size: [60, 60]

        }
        const endIcon = {
            imgUrl: '/src/assets/img/mapEnd.png',
            position: [linePointList[linePointList.length - 1].lng, linePointList[linePointList.length - 1].lat],
            size: [60, 60]

        }
        initIcon(startIcon.imgUrl, startIcon.position, startIcon.size)
        initIcon(endIcon.imgUrl, endIcon.position, endIcon.size)
        // initPolyline()
        initPolylineAnimation()
        setViewPortFn()
    }, 200)
}


const initCustomDot = (centerPoint: any) => {
    function ComplexCustomOverlay(centerPoint: any) {
    }
    ComplexCustomOverlay.prototype = new BMapGL.Overlay();
    ComplexCustomOverlay.prototype.initialize = function (map: any) {
        const div = this._div = document.createElement("div");
        div.style.position = "absolute";
        div.style.width = "30px";
        div.style.height = "30px";
        div.style.background = "#fff";
        div.style.borderRadius = "50%";
        const divInner = this._divInner = document.createElement("div");
        divInner.style.position = "absolute";
        divInner.style.width = "20px";
        divInner.style.height = "20px";
        divInner.style.left = "5px";
        divInner.style.top = "5px";
        divInner.style.background = "#0788e6";
        divInner.style.borderRadius = "50%";
        map.getPanes().labelPane.appendChild(div);
        map.getPanes().labelPane.appendChild(divInner);

        return div;
    }
    ComplexCustomOverlay.prototype.draw = function () {
        const pixel = map.pointToOverlayPixel(centerPoint);
        this._div.style.left = pixel.x + "px";
        this._div.style.top = pixel.y + "px";
        this._divInner.style.left = pixel.x + 5 + "px";
        this._divInner.style.top = pixel.y + 5 + "px";
    }
    const myCompOverlay: any = new ComplexCustomOverlay(centerPoint);
    map.addOverlay(myCompOverlay);
}



const initPolylineAnimation = () => {
    var pl = new BMapGL.Polyline(linePointList, state.lineStyle);
    // setTimeout('start()', 3000);
    const trackAni = new BMapGLLib.TrackAnimation(map, pl, {
        overallView: true,
        tilt: 30,
        duration: 4000,
        delay: 300,
    });
    start()
    function start() {
        trackAni.start();
    }


}

const initIcon = (imgUrl: any, position: any, size: any) => {
    // var myIcon = new BMapGL.Icon("https://api.map.baidu.com/img/markers.png", new BMapGL.Size(60, 60));
    var myIcon = new BMapGL.Icon(imgUrl, new BMapGL.Size(60, 60));
    // 创建Marker标注，使用小车图标
    var pt = new BMapGL.Point(...position);
    var marker = new BMapGL.Marker(pt, {
        icon: myIcon
    });
    // 将标注添加到地图
    map.addOverlay(marker);
}

const setViewPortFn = () => {
    const boundList = linePointList
    map.setViewport(boundList)
}


// var pointArr = [new BMap.Point(106.607421,29.570857),new BMap.Point(106.620931,29.586185)];

const getcenterpoiont = (pointStart: any, pointEnd: any) => {
    const lng1 = Number(pointStart.lon);
    const lat1 = Number(pointStart.lat);

    const lng2 = Number(pointEnd.lon);
    const lat2 = Number(pointEnd.lat);

    const lngca = (Math.max(lng1, lng2) - Math.min(lng1, lng2)) / 2;
    const latca = (Math.max(lat1, lat2) - Math.min(lat1, lat2)) / 2;

    const lngcenter = Math.min(lng1, lng2) + lngca;
    const latcenter = Math.min(lat1, lat2) + latca;

    const pointcenter = new BMapGL.Point(lngcenter, latcenter);
    return pointcenter;

}
const initMapLine = (res: any, id: any) => {
    domId.value = id
    domShow.value = false
      res.forEach((ele: any) => {
        linePointList.push(new BMapGL.Point(Number(ele.lon), Number(ele.lat)))
    })
    nextTick(() => {
        domShow.value = true
        setTimeout(() => {
            initMap()
            centerPoint = getcenterpoiont(res[0], res[res.length - 1])
            console.log("centerPoint", centerPoint)
            initCustomDot(centerPoint)
        })
    })
}

defineExpose({
    initMapLine
})
</script>
  
<style scoped lang="scss">
.map {
    width: 100%;
    height: 100%;
}
</style>