由于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);
}
//例
以上
