BigScreenUI/src/components/mapBaidu/mapLine.vue

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

    </div>
</template>
  
<script setup lang="ts">
import { getImg } from "@/utils/index"
import { fa, tr } from "element-plus/es/locale";
import { apiBmCompanyInfoTimeListTime } from "http/api/echartApi"
import { parseArgs } from "util";
let map: any = null
let centerPoint: any = null
let domId = ref("0")
let domShow = ref(false)
onMounted(() => {
    console.log("map", "map")
})

const linePointList: any = []

const initMap = () => {
    map = new BMap.Map("equipmentIdMap" + domId.value);
    map.centerAndZoom(new BMap.Point(116.3944, 39.9063), 18);
    console.log("map", map)
    map.enableScrollWheelZoom();
    setTimeout(() => {
        // initCustomDot()
        const startIcon = {
            imgUrl: '/src/assets/img/mapStart.png',
            position: [116.3964, 39.9093],
            size: [60, 60]

        }
        const endIcon = {
            imgUrl: '/src/assets/img/mapStart.png',
            position: [116.3964, 39.9093],
            size: [60, 60]

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


const initCustomDot = (centerPoint: any) => {
    function ComplexCustomOverlay(centerPoint) {
    }
    ComplexCustomOverlay.prototype = new BMap.Overlay();
    ComplexCustomOverlay.prototype.initialize = function (map) {
        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 initPolyline = () => {
    var polyline = new BMap.Polyline(linePointList, { strokeColor: '#0788e6', strokeWeight: 4, strokeOpacity: 1. });
    map.addOverlay(polyline);
}

const initIcon = (imgUrl: any, position: any, size: any) => {
    var myIcon = new BMap.Icon("https://api.map.baidu.com/img/markers.png", new BMap.Size(60, 60));
    // 创建Marker标注，使用小车图标
    var pt = new BMap.Point(...position);
    var marker = new BMap.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 BMap.Point(lngcenter, latcenter);
    return pointcenter;

}
const initMapLine = (params: any) => {
    domId.value = params.id
    domShow.value = false
    initApiBmCompanyInfoTimeListTime(params)
}

const initApiBmCompanyInfoTimeListTime = async (val: any) => {

    try {
        const res: any = await apiBmCompanyInfoTimeListTime(val)
        domShow.value = true
        console.log("apiBmCompanyInfoTimeListTime", res)
        res.forEach((ele: any) => {
            linePointList.push(new BMap.Point(Number(ele.lon), Number(ele.lat)))
        })
        nextTick(() => {
            initMap()
            centerPoint = getcenterpoiont(res[0], res[res.length - 1])
            console.log("centerPoint", centerPoint)
            initCustomDot(centerPoint)
        })

    } catch (error) {

    }

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