khyznh-ui/src/components/Map/videoMap.vue

<template>
    <div class="app-container">
        <div style="background-color: #ffffff;height:100%;">
            <div id="container"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import AMapLoader from '@amap/amap-jsapi-loader';
    /*在Vue3中使用时,需要引入Vue3中的shallowRef方法(使用shallowRef进行非深度监听,
    因为在Vue3中所使用的Proxy拦截操作会改变JSAPI原生对象,所以此处需要区别Vue2使用方式对地图对象进行非深度监听,
    否则会出现问题,建议JSAPI相关对象采用非响应式的普通对象来存储)*/
    import { shallowRef } from '@vue/reactivity';
    import { ref } from "vue";
    import { getDicts } from '@/api/system/dict/data'
    import { getGpsData } from '@/api/gpsData/index'
    import { getCameraPlayerConfig } from '@/api/gpsData';
    import carImage from "@/assets/images/icon/小货车.png";
    import add from '@/views/car/carInfo/add.vue';
    import EZUIKit from 'ezuikit-js';

    const props = defineProps({
        showMarket: {
            type: Boolean,
            default: true
        },
        darkType: {
            type: Boolean,
            default: false
        },
    })

    var content = [
        "<div class='info' style='display:flex;flex-direction:column'><b>摄像头</b>",
        " <div id='video-container' style='border-radius: 10px;width:30vw'></div>",
        "</div>",
    ];

    // const map = shallowRef(null);
    const path = ref([]);
    const playerObj = ref(null)
    const current_position = ref([]);
    let mapObj = ref()
    const allInfoWindow = shallowRef(null);
    let singleMarker = ref(null);

    const lineObj = ref(null);


    const getDictsData = (param) => {
        getDicts(param).then(res => {
            for (var index in res.data) {
                if (res.data[index].cssClass == '2') {
                    console.log(res.data[index])
                    var obj = res.data[index].dictValue.split(",");
                    // console.log(obj.toString())
                    var location = formatGCJ(Number(obj[0]), Number(obj[1]));
                    // console.log(location.toString())
                    addMarker(location, res.data[index], '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', 'kdlocation')
                } else if (res.data[index].cssClass == '3') {
                    console.log(res.data[index])
                    var obj = res.data[index].dictValue.split(",");
                    // console.log(obj.toString())
                    var location = formatGCJ(Number(obj[0]), Number(obj[1]));
                    // console.log(location.toString())
                    addMarker(location, res.data[index], '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png', 'zzlocation')
                }
            }
        })
    }

    const closeVideo = () => {
        console.log('关闭摄像头')
        playerObj.value.stop()
        playerObj.value.destroy()
        document.getElementById('video-container').innerHTML = "";
    }

    const getGpsDataList = (param) => {
        getGpsData(param).then(res => {
            addLine(res.rows);
            if (singleMarker.value != null) {
                mapObj.value.remove(singleMarker.value);
            }
            var car = res.rows[res.rows.length - 1]
            if (car) {
                var location = formatGCJ(car.lng, car.lat);
                // addMarker(location, car, "../src/assets/images/icon/小货车.png", 'car')
                addMarker(location, car, carImage, 'car')
            }
        })
    }


    const setDataList = (data) => {
        tableData.value = data
    }

    const initMap = () => {
        window._AMapSecurityConfig = {
            securityJsCode: 'b16e0ff6d065a3b8a87e6c448e982ca4',
        }
        AMapLoader.load({
            key: "c60c1af6d4f39c5220f3ad36298a8830", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            // plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then(async (AMap) => {
            const map = new AMap.Map("container", {  //设置地图容器id
                viewMode: "3D",    //是否为3D地图模式
                zoom: 13,           //初始化地图级别
                center: [119.807462, 26.958413], //初始化地图中心点位置
            });
            console.log(11111111111);
            console.log(props.darkType)
            if (props.darkType) {
                var styleName = "amap://styles/darkblue";
                map.setMapStyle(styleName);
            }
            mapObj.value = map;
            const infoWindow = new AMap.InfoWindow({
                offset: new AMap.Pixel(16, -45),
                //隐藏原生弹窗边框和关闭按钮
                isCustom: false,
                autoMove: true,
                avoid: [20, 20, 20, 20],
                // 点击地图关闭
                closeWhenClickMap: false,
            });
            allInfoWindow.value = infoWindow
            infoWindow.on('close', closeVideo)
            // console.log(content)
            infoWindow.setContent(content.join(""));
            // infoWindow.open(map, [119.807462, 26.958413]);

            // 添加插件
            // AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye", "AMap.Geolocation", "AMap.MapType", "AMap.MouseTool"], function () {
            //     //异步同时加载多个插件
            //     // 添加地图插件
            //     // map.addControl(new AMap.ToolBar()); // 工具条控件;范围选择控件
            //     map.addControl(new AMap.Scale()); // 显示当前地图中心的比例尺
            //     map.addControl(new AMap.HawkEye()); // 显示缩略图
            //     map.addControl(new AMap.Geolocation()); // 定位当前位置
            //     // map.addControl(new AMap.MapType()); // 实现默认图层与卫星图,实时交通图层之间切换

            // });
            if (props.showMarket) {
                getDictsData("tbl_sites");
            }
            // 单击
            map.on('click', (e) => {
                // lng ==> 经度值  lat => 维度值
                current_position.value = [e.lnglat.lng, e.lnglat.lat];
                path.value.push([e.lnglat.lng, e.lnglat.lat]);
                //addMarker();
                // addPolyLine();
            })


            // 折线
            function addPolyLine() {
                const polyline = new AMap.Polyline({
                    path: path.value,
                    isOutline: true,
                    outlineColor: "#ffeeff",
                    borderWeight: 1,
                    strokeColor: "#3366FF",
                    strokeOpacity: 0.6,
                    strokeWeight: 5,
                    // 折线样式还支持 'dashed'
                    strokeStyle: "solid",
                    // strokeStyle是dashed时有效
                    // strokeDasharray: [10, 5],
                    lineJoin: "round",
                    lineCap: "round",
                    zIndex: 50,
                });
                map.add([polyline]);
            }



        }).catch(e => {
            console.log(e);
            if (e == '多个不一致的 key') {
                const map = new AMap.Map("container", {  //设置地图容器id
                    viewMode: "3D",    //是否为3D地图模式
                    zoom: 13,           //初始化地图级别
                    center: [119.807462, 26.958413], //初始化地图中心点位置
                });
                console.log(11111111111);
                console.log(props.darkType)
                if (props.darkType) {
                    var styleName = "amap://styles/darkblue";
                    map.setMapStyle(styleName);
                }
                mapObj.value = map;
                const infoWindow = new AMap.InfoWindow({
                    offset: new AMap.Pixel(16, -45),
                    //隐藏原生弹窗边框和关闭按钮
                    isCustom: false,
                    autoMove: true,
                    avoid: [20, 20, 20, 20],
                    // 点击地图关闭
                    closeWhenClickMap: false,
                });
                allInfoWindow.value = infoWindow
                infoWindow.on('close', closeVideo)
                // console.log(content)
                infoWindow.setContent(content.join(""));
                if (props.showMarket) {
                    getDictsData("tbl_sites");
                }
                // 单击
                map.on('click', (e) => {
                    // lng ==> 经度值  lat => 维度值
                    current_position.value = [e.lnglat.lng, e.lnglat.lat];
                    path.value.push([e.lnglat.lng, e.lnglat.lat]);
                    //addMarker();
                    // addPolyLine();
                })


                // 折线
                function addPolyLine() {
                    const polyline = new AMap.Polyline({
                        path: path.value,
                        isOutline: true,
                        outlineColor: "#ffeeff",
                        borderWeight: 1,
                        strokeColor: "#3366FF",
                        strokeOpacity: 0.6,
                        strokeWeight: 5,
                        // 折线样式还支持 'dashed'
                        strokeStyle: "solid",
                        // strokeStyle是dashed时有效
                        // strokeDasharray: [10, 5],
                        lineJoin: "round",
                        lineCap: "round",
                        zIndex: 50,
                    });
                    map.add([polyline]);
                }
            }
        })
    }

    const addMarker = (obj, data, src, type) => {
        const marker = new AMap.Marker({
            icon: new AMap.Icon({
                image: src,
                imageSize: new AMap.Size(22, 28) //图标大小
            }),
            position: obj, // 这里我们通过上面的点击获取经纬度坐标,实时添加标记
            // 通过设置 offset 来添加偏移量
            offset: new AMap.Pixel(-10, -20),
        });
        marker.setLabel({
            offset: new AMap.Pixel(-30, 20),
            content: data.dictLabel
        });
        if (type == 'car') {
            singleMarker.value = marker
        }
        marker.setMap(mapObj.value);
        //给marker添加属性
        marker.setExtData(data)
        //给marker添加点击事件
        marker.on('click', clickMarker)
    }

    const addLine = (list) => {
        if (lineObj.value != null) {
            mapObj.value.remove([lineObj.value])
        }
        var dataList = []
        for (var index in list) {
            // console.log('转换前坐标' + [list[index].lng, list[index].lat])
            var location = formatGCJ(list[index].lng, list[index].lat);
            // console.log('转换后坐标' + [location[0], location[1]])
            var obj = new AMap.LngLat(location[0], location[1]);
            dataList.push(obj)
        }
        var polyline = new AMap.Polyline({
            path: dataList,
            strokeWeight: 2, //线条宽度
            strokeColor: "red", //线条颜色
            lineJoin: "round", //折线拐点连接处样式
        });
        // polyline.setMap(mapObj);
        // console.log(mapObj)
        lineObj.value = polyline
        mapObj.value.add(polyline);
    }

    const emit = defineEmits(['childToParent']);

    const clickMarker = (e) => {
        // console.log(e.target.getExtData());

        // var json = JSON.parse(e.target.getExtData().remark)
        console.log(e.target.getExtData().remark)
        if (e.target.getExtData().remark != null && e.target.getExtData().remark != '') {
            var showVideo = false
            var json = JSON.parse(e.target.getExtData().remark)
            for (var index in json) {
                if (json[index].type == "camera") {
                    showVideo = true;
                    allInfoWindow.value.open(mapObj.value, e.target.getPosition());
                    getCameraPlayerConfig(json[index].code).then(res => {
                        console.log(res.data);
                        var player = new EZUIKit.EZUIKitPlayer({
                            template: "pcLive",
                            id: 'video-container', // 视频容器ID
                            ...res.data
                        })
                        playerObj.value = player
                    })
                }
            }
            if (!showVideo) {
                ElMessage({
                    message: '该站点未配置摄像头',
                    type: 'warning',
                })
            }
        } else {
            ElMessage({
                message: '该站点未配置摄像头',
                type: 'warning',
            })
        }
        // emit('childToParent', e.target.getPosition())
    }

    const formatGCJ = (lng, lat) => {
        const x_PI = 3.14159265358979324 * 3000.0 / 180.0
        const PI = 3.1415926535897932384626
        const a = 6378245.0
        const ee = 0.00669342162296594323
        if (outOfChina(lng, lat)) {
            return [lng, lat]
        }
        else {
            var dlat = transformlat(lng - 105.0, lat - 35.0)
            var dlng = transformlng(lng - 105.0, lat - 35.0)
            var radlat = lat / 180.0 * PI
            var magic = Math.sin(radlat)
            magic = 1 - ee * magic * magic
            var sqrtmagic = Math.sqrt(magic)
            dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI)
            dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI)
            const mglat = lat + dlat
            const mglng = lng + dlng
            return [mglng, mglat]
        }
        /*判断是否在国内，不在国内则不做偏移*/
        function transformlat(lng, lat) {
            var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))
            ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
            ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0
            ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0
            return ret
        }

        /**
         * 纬度转换
         * @param { Number } lng
         * @param { Number } lat
         */
        function transformlng(lng, lat) {
            var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))
            ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
            ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0
            ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0
            return ret
        }

        /**
         * 判断是否在国内，不在国内则不做偏移
         * @param {*} lng
         * @param {*} lat
         */
        function outOfChina(lng, lat) {
            return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false)
        }

    }


    initMap()
    console.log(props.showMarket);
    // getGpsDataList();
    defineExpose({
        getGpsDataList,
    });
</script>

<style>
    #container {
        padding: 0px;
        margin: 0px;
        width: 100%;
        height: 100%;
    }

    .info {
        background-color: #fff;
        text-align: center;
        padding: 10px;
        position: relative;
        border: 1px solid #b9b9b9;
    }

    .info img {
        width: 30px;
        height: 23px;
        position: absolute;
        left: calc(50% - 15px);
        bottom: -23px;
    }

    .closeDiv {
        position: absolute;
        top: 1px;
        right: 10px;
        font-size: 20px;
        z-index: 30;
        color: red;
    }

    /* .amap-marker-label{
    border: 0px solid #00f;
    background-color: transparent;
    color: #ffffff;
} */
</style>