百度地图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是我这边后台需要的id
            openWebsocket(param);
         	Loading();
    		//当地图加载完毕后回调结束Loading
    		 initMap((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);
}

//例

---

以上