百度地图BMapGL通过websocket发送的实时点进行打点，并给每个点添加点击事件

本文主要是介绍百度地图BMapGL通过websocket发送的实时点进行打点，并给每个点添加点击事件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

由于BMapGL没有海量打点的方法、Bmap3.0没有卫星地图,在各种取舍下还是使用了BMapGL进行打点
并且在开发过程中发现百度地图的画线方法Polyline实时的画线是监听不到点击事件的（必须要一条完整的线）所有只能用Marker进行打点

通过websocket实时发送数据

//websocket数据样式 例
data: {
latitude: 36.00
longitude: 116.11
sendTime: 1650006526000
Id: 1
}
type: 2

vue

<template><div class="viewBox"><div class="bm-view" id="container"></div></div>
</template><script>
//Websocket 的封装和网上分享的封装都大差不差就不展示出来了
import { sendWebsocket, closeWebsocket } from "@/utils/websocket.js";
import { reactive,toRefs,onBeforeMount,onMounted} from 'vue'
import { initMap, setPoint,setMarker} from "../utils/BDmap";
import { ElLoading } from "element-plus";
export default {name: 'BDmap',setup() {onMounted(() => {//param是我这边后台需要的idopenWebsocket(param);Loading();//当地图加载完毕后回调结束LoadinginitMap((tilesloaded) => {loadingState.close();});})function Loading() {loadingState = ElLoading.service({lock: true,text: "正在加载地图",background: "rgba(0, 0, 0, 0.7)",});}//Websocket返还的消息function wsMessage(data) {if (data.type === 2) {setMarker([data.data]);}}//给Websocket发送消息function openWebsocket(param) {/**@param  发送参数 @wsMessage 返还的参数的方法@wsError 发生错误的方法**/sendWebsocket(param, wsMessage, wsError);}return {}}};
</script>

BDmap.js

let map
let init = [116.404, 39.925];
let points = [];
let Marker
let opts = {width: 200,height: 80,title: '信息'
};//初始化地图的方法
export function initMap(callback) {map = new BMapGL.Map("container");setPoint(init);map.addControl(new BMapGL.ScaleControl()); // 添加比例尺控件// map.addControl(new BMapGL.OverviewMapControl()); //添加缩略地图控件map.enableScrollWheelZoom(true);map.setMapType(BMAP_EARTH_MAP);map.addEventListener("tilesloaded", function () {callback('tilesloaded')});
}//重新定向地图 在项目中有些功能会重复使用
export function setPoint(point) {map.centerAndZoom(new BMapGL.Point(point[0], point[1]), 16);
}//删除点
function removeMaker() {let allOverlay = map.getOverlays();map.removeOverlay(allOverlay[0]);
}//进行打点
export function setMarker(mapData) {
//设置一个值超过这个值进行动态删除，以免无限扩大let allOverlay = map.getOverlays();if (allOverlay.length >= 400) {removeMaker()}// let myIcon = new BMapGL.Icon("/jsdemo/img/car.png", new BMapGL.Size(52, 26));let point = new BMapGL.Point(mapData.longitude, mapData.latitude);Marker = new BMapGL.Marker(point);Marker.id= mapData.id;Marker.sendTime = mapData.sendTime;//设置监听事件Marker.addEventListener('click', function (e) {let infoWindow = new BMapGL.InfoWindow(`<p>id:${e.currentTarget.id}</p><p>发送时间:${parseTime(e.currentTarget.sendTime)}</p>`, opts);map.openInfoWindow(infoWindow, point); // 开启信息窗口});map.addOverlay(Marker);
}