khyznh-ui/src/components/Map/map.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 carImage from "@/assets/images/icon/小货车.png";
import { listCarInfo, getCarInfo, delCarInfo, addCarInfo, updateCarInfo } from '@/api/carInfo';
import add from '@/views/car/carInfo/add.vue';
import { color } from 'echarts';

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

// const map = shallowRef(null);
const path = ref([]);
const current_position = ref([]);
let mapObj = ref()
let singleMarker = ref(null);
const fontColor = ref('#6cb3e0')

const lineObj = ref(null);

const iconImage = new URL("@/assets/images/home/Point.png",import.meta.url);

const getCarInfoList = () => {
    listCarInfo({pageSzie:1000}).then(res=>{
            for (var index in res.rows) {
            var obj = res.rows[index].location;
            // console.log(obj.toString())
            var location = formatGCJ(obj.lng,obj.lat);
            // console.log(location.toString())
            addMarker(location, res.rows[index], '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', 'location')
        }
    })
}


const getDictsData = (param) => {
    getDicts(param).then(res => {
        for (var index in res.data) {
            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', 'location')
        }
    })
}

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((AMap) => {
        const map = new AMap.Map("container", {  //设置地图容器id
            viewMode: "3D",    //是否为3D地图模式
            zoom: 13,           //初始化地图级别
            center: [119.807462, 26.958413], //初始化地图中心点位置
        });
        mapObj.value = map;

        if (props.darkType) {
            var styleName = "amap://styles/8b9b98f3e261fb3096f4425490da9c5d";
            map.setMapStyle(styleName);
        }
        // 添加插件
        // 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()); // 实现默认图层与卫星图,实时交通图层之间切换

        // });
        getCarInfoList();
        // 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);
    })
}

const addMarker = (obj, data, src, type) => {
    const marker = new AMap.Marker({
        icon: new AMap.Icon({
            image: iconImage,
            imageSize: new AMap.Size(28, 28) //图标大小
        }),
        position: obj, // 这里我们通过上面的点击获取经纬度坐标,实时添加标记
        // 通过设置 offset 来添加偏移量
        offset: new AMap.Pixel(-10, -20),
    });
    if (props.darkType) {
        fontColor.value = '#ffffff'
    }
    marker.setLabel({
        offset: new AMap.Pixel(-50, 25),
        content: data.carNum,
    });
    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) => {
    emit('childToParent', e.target.getExtData())
}

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%;
}

.amap-marker-label{
    border: 0px solid #00f;
    background-color: transparent;
    color: v-bind(fontColor);;
}
</style>