百度地图的官方文档
百度地图必须的三个引用
完整代码
<template>
<AButton style="background-color: #3ba7ea;color: white;width: 100px;float: right" @click="buttonClick">轨迹回放</AButton>
<div :style="props.style" id="map">
</div>
</template>
<script lang="ts">
import moment from "moment";
import {computed, defineComponent, nextTick, onMounted, reactive, ref, watch} from 'vue';
import {colSpan, lg, md, sm, xl, xs, xxl} from "/@/enums/cacheEnum";
import {ifNull, isMyEmpty, replaceNullByLine} from "/@/utils/commonFunctions/commonFunctions";
import {useMessage} from "/@/hooks/web/useMessage";
import {readFile} from "fs-extra";
import endMarker from '/@/assets/images/endMarker.png';
import startMarker from '/@/assets/images/startMarker.png';
import AButton from "/@/components/Button/src/BasicButton.vue";
interface variable {
pointsTranslateData: any[]
points:any[]
lineLayer:any
trackingAni:Boolean
}
export default defineComponent({
name: "ShowDataForm",
props: {
data:{
type: Array,
default: [],
require: true
},
style:{
type: String,
default: "height: 200px;width: 800px",
require: true
},
transfer:{
type: Boolean,
default: true,
require: true
}
},
components: {
AButton
},
setup(props, { slots }){
const {createMessage} = useMessage();
const variable = reactive<variable>({
pointsTranslateData:[],
points:[],
lineLayer:{},
trackingAni:false,
})
//创建地图并绘制路线
const map=ref();
let mapHolder=null;
onMounted(()=>{
if (props.data.length>0){
props.data.forEach((item)=>{
var point = new BMapGL.Point(item.longitude, item.latitude); // 创建点坐标
variable.points.push(point)
})
if (props.transfer){
doTransefer(variable.points,callBack)
}else {
variable.pointsTranslateData=variable.points
}
}
creatMap()
})
//监听值改变
watch(props, (value) => {
variable.points=[]
props.data.forEach((item)=>{
var point = new BMapGL.Point(item.longitude, item.latitude); // 创建点坐标
variable.points.push(point)
})
if (props.transfer){
doTransefer(variable.points,callBack)
}else {
variable.pointsTranslateData=variable.points
drawMap()
}
})
onMounted(()=>{
variable.points=[]
props.data.forEach((item)=>{
var point = new BMapGL.Point(item.longitude, item.latitude); // 创建点坐标
variable.points.push(point)
})
if (props.transfer){
doTransefer(variable.points,callBack)
}else {
variable.pointsTranslateData=variable.points
drawMap()
}
})
const creatMap=()=>{
mapHolder = new BMapGL.Map("map"); // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
mapHolder.centerAndZoom(point, 15); // 初始化地图，设置中
var zoomCtrl = new window.BMapGL.ZoomControl(); // 添加缩放控件
mapHolder.addControl(zoomCtrl);
}
//轨迹回放按钮
const buttonClick=()=>{
variable.trackingAni=true
startTrackAni(mapHolder)
}
//轨迹回放
const startTrackAni=(mapHolder)=>{
mapHolder.clearOverlays()
mapHolder.removeNormalLayer(variable.lineLayer)
creatMark(mapHolder)
var pl = new BMapGL.Polyline(variable.pointsTranslateData);
var trackAni = new BMapGLLib.TrackAnimation(mapHolder, pl, {
overallView: true, // 动画完成后自动调整视野到总览
tilt: 30, // 轨迹播放的角度，默认为55
duration: 10000, // 动画持续时长，默认为10000，单位ms
delay: 1000 // 动画开始的延迟，默认0，单位ms
});
trackAni.start();
}
//地图绘制
const drawMap=()=>{
mapHolder.clearOverlays()
mapHolder.removeNormalLayer(variable.lineLayer)
if (!variable.pointsTranslateData.length>0){
return
}
creatLine(mapHolder)
creatMark(mapHolder)
creatArrowMark(mapHolder)
//自动缩放
let res=getCenterPoint(variable.pointsTranslateData);
var point = new BMapGL.Point(res[0], res[1]); // 创建点坐标
mapHolder.centerAndZoom(point, res[2]); // 初始化地图，设置中
}
const callBack = (points, traslatePoints) => {
variable.pointsTranslateData = traslatePoints;
};
//输入原始的坐标，然后会调用完成的回调函数 回调函数会给两个参数 转换前的数组 转换后的数组
const doTransefer = (points, callBack) => {
var convertor = new window.BMapGL.Convertor();
let translateCount = 0;
let pointsTransLate = [];
// 总共需要轮回多少次
const max = Math.ceil(points.length / 10) - 1;
//转化坐标点
const translateCallback = function(data) {
if (data.status === 0) {
// 遍历转换后的点
for (let i = 0; i < data.points.length; i++) {
pointsTransLate.push(data.points[i]);
}
translateCount += 1;
// 剩余的还有完整的一轮
if ((points.length - (translateCount * 10)) > 10) {
convertor.translate(points.slice(translateCount * 10, (translateCount + 1) * 10), 1, 5, translateCallback);
} else if ((points.length - (translateCount * 10)) > 0) {
// 没有完整的一轮 跑剩下的
convertor.translate(points.slice(translateCount * 10, points.length), 1, 5, translateCallback);
} else {//跑完了
callBack(points, pointsTransLate);
}
} else {
createMessage.error("地图绘制失败: 转换坐标点失败");
}
};
convertor.translate(props.data.slice(0, 10), 1, 5, translateCallback);
};
//获取缩放比
const getRoom =(diff)=> {
var room = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14);
var diffArr = new Array(360, 180, 90, 45, 22, 11, 5, 2.5, 1.25, 0.6, 0.3, 0.15, 0.07, 0.03, 0);
for (var i = 0; i < diffArr.length; i++) {
if (diff - diffArr[i] >= 0) {
return room[i];
}
}
return 14;
}
const getCenterPoint=(points) => {
//通过经纬度获取中心位置和缩放级别
var maxJ = points[0].lng;
var minJ = points[0].lng;
var maxW = points[0].lat;
var minW = points[0].lat;
var res;
for (var i = points.length - 1; i >= 0; i--) {
res = points[i];
if (res.lng > maxJ) maxJ = res.lng;
if (res.lng < minJ) minJ = res.lng;
if (res.lat > maxW) maxW = res.lat;
if (res.lat < minW) minW = res.lat;
}
//就是一个点
if (maxJ == minJ && maxW == minW) return [maxJ, maxW, 9];
//找经度和维度差 最大的按个
var diff = maxJ - minJ;
if (diff < maxW - minW) diff = maxW - minW;
diff = parseInt(10000 * diff) / 10000;
var centerJ = minJ * 1000000 + (1000000 * (maxJ - minJ)) / 2;
var centerW = minW * 1000000 + (1000000 * (maxW - minW)) / 2;
var zoom = getRoom(diff);
return [centerJ / 1000000, centerW / 1000000, zoom];
}
//选择哪个车
const getCarDirction=(points)=>{
var startJ = points[0].lng;
var startW = points[0].lat;
var endJ = points[1].lng;
var endW = points[1].lat;
let top=true;
let left=true;
var diffJ=0;
var diffW =0;
if (startJ>endJ){
left=true
diffJ=startJ-endJ
}else{
left=false
diffJ=endJ-startJ
}
if (startW>endW){//往下
top=false
diffW=startW-endW
}else{
top=true
diffW=endW-startW
}
//只管上下 还是左右
if (left){
return '/resource/img/carLeft.svg'
}else{
return '/resource/img/carRight.svg'
}
}
const creatLine=(mapHolder)=>{
var polyline = new window.BMapGL.Polyline(variable.pointsTranslateData, {strokeColor:"#0e6eb8", strokeWeight:2, strokeOpacity:0.5});
mapHolder.addOverlay(polyline);
}
//在两个点之间加箭头
const creatArrowMark=(mapHolder)=>{
//根据点去画标记
// for (let i = 0; i < variable.pointsTranslateData.length-1; i++) {
// console.log('pointsTranslateData',variable.pointsTranslateData[i])
// let centerPoints = getCenterPoint([variable.pointsTranslateData[i],variable.pointsTranslateData[i+1]])
// let angle= getAngle(variable.pointsTranslateData[i],variable.pointsTranslateData[i+1])
// var center = new window.BMapGL.Point(centerPoints[0], centerPoints[1]); // 创建点坐标
// var arrowMark= new window.BMapGL.Marker(center, {icon: new window.BMapGL.Icon("/resource/img/gpsArrow.png", new window.BMapGL.Size(10, 10)),rotation:angle});
// //画箭头
// mapHolder.addOverlay(arrowMark);
// }
}
//创建标点
const creatMark=(mapHolder)=>{
//根据点去画标记
for (let i = 0; i < variable.pointsTranslateData.length; i++) {
(function(){//闭包 用来解决弹框不对的问题
var itemPoint=variable.pointsTranslateData[i]
if (i<variable.pointsTranslateData.length-1){
let angle= getAngle(variable.pointsTranslateData[i],variable.pointsTranslateData[i+1])
console.log("angle",angle)
var gpsMark= new window.BMapGL.Marker(itemPoint, {icon: new window.BMapGL.Icon("/resource/img/gpsArrow.png", new window.BMapGL.Size(12, 15),{
})});//普通小圆点
gpsMark.setRotation(angle)
}
//特殊的图标
if (i===0){//起点
gpsMark = new window.BMapGL.Marker(itemPoint, {icon: new window.BMapGL.Icon("/resource/img/startMarker.png", new window.BMapGL.Size(32, 32))}); // 创
}
else if(i===variable.pointsTranslateData.length-1){//终点
gpsMark = new window.BMapGL.Marker(itemPoint, {icon: new window.BMapGL.Icon("/resource/img/endMarker.png", new window.BMapGL.Size(32, 32))}); // 创
}
else if (i===variable.pointsTranslateData.length-2){//车的位置
var startPont=variable.pointsTranslateData[0];
var endPont=variable.pointsTranslateData[variable.pointsTranslateData.length-1];
let iconDirction=getCarDirction([startPont,endPont])
gpsMark= new window.BMapGL.Marker(itemPoint, {icon: new window.BMapGL.Icon(iconDirction, new window.BMapGL.Size(32, 32))});
}
//画标注
mapHolder.addOverlay(gpsMark);
let infoWindow= creatinfoWindow(props.data[i])//根据原始数据创建info
gpsMark.addEventListener("click", function(){
mapHolder.openInfoWindow(infoWindow, itemPoint); //开启信息窗口
});
})();
}
}
//创建展示弹框
const creatinfoWindow=(record)=>{
var opts = {
width : 200, // 信息窗口宽度
height: 150, // 信息窗口高度
title : "当前车辆信息" , // 信息窗口
}
var carContent = "<h4 style='margin:0 0 5px 0;'>"+"车牌号:"+ifNull(record.plateNo,'')+"</h4>"
+"<h4 style='margin:0 0 5px 0;'>"+"经度:"+ifNull(record.longitude,'')+"</h4>"
+"<h4 style='margin:0 0 5px 0;'>"+"维度:"+ifNull(record.latitude,'')+"</h4>"
+"<h4 style='margin:0 0 5px 0;'>"+"时间:"+ifNull(record.gpsTime,'')+"</h4>";
var infoWindow = new window.BMapGL.InfoWindow(carContent, opts); // 创建信息窗口对象
return infoWindow;
}
const getAngle=(start,end)=>{
// 通过 a、b 确定角度所处的象限
let a = start.lng - end.lng,
b = start.lat - end.lat;
//
let a_c = Math.abs(a),
b_c = Math.abs(b);
// 获取得三角形的斜边 Math.hypot();
let c = Math.hypot(a_c,b_c);
// 计算弧度
let radina = Math.acos(a_c/c);
// 计算角度
let angleVal = Math.floor(radina*180/Math.PI);
// 处理最终需要旋转的角度
if(a > 0){
// 第二、三象限
if(b>0){
// 三
angleVal = 90 + 90 - angleVal;
}else {
angleVal = -180 + angleVal;
}
}else{
// 一、四象限
if(b>0){
// 四
angleVal = angleVal;
}else{
// 一
angleVal = - angleVal;
}
}
return angleVal;
}
//贴图线
const creatImageLine=(mapHolder)=>{
// //线
// let upTwo1='/resource/img/red.png'
// variable.lineLayer = new BMapGL.LineLayer({
// enablePicked: true,
// autoSelect: true,
// pickWidth: 30,
// pickHeight: 30,
// opacity: 1,
// selectedColor: 'blue', // 选中项颜色
// style: {
// sequence: false, // 是否采用间隔填充纹理，默认false
// marginLength: 16, // 间隔距离，默认16，单位像素
// // borderColor: 'rgba(ff,144,132,132)',
// // borderMask: true, // 是否受内部填充区域掩膜，默认true,如果存在borderWeight小于0，则自动切换false
// // borderWeight: 2, // 描边宽度，可以设置负值
// strokeWeight: 6, // 描边线宽度，默认0
// strokeLineJoin: 'miter',//描边线连接处类型, 可选'miter', 'round', 'bevel'
// strokeLineCap: 'square',// 描边线端头类型，可选'round', 'butt', 'square'，默认round
// // 填充纹理图片地址，默认是空。图片需要是竖向表达，在填充时会自动横向处理。
// strokeTextureUrl:upTwo1,
// strokeTextureWidth: 16,
// strokeTextureHeight: 64,
//
// strokeOpacity: .5
// }
// });
//
// mapHolder.addNormalLayer(variable.lineLayer);
// let lineData={
// "type": "FeatureCollection",
// "features": [
// { "type": "Feature", "properties": { "name": "demo1" },
// "geometry": { "type": "LineString", "coordinates":
// [
// // [116.23128, 40.22077],
// ]}}
// ]
// };
//
//
// variable.pointsTranslateData.forEach((item)=>{
// lineData.features[0].geometry.coordinates.push([item.lng,item.lat])
// })
//
//
// variable.lineLayer.setData(lineData)
}
return{
colSpan,
xs,
xxl,
md,
xl,
sm,
lg,
props,
map,
buttonClick
}
}
});
</script>
<style scoped>
</style>
使用
<BaiDuMap :transfer="false" :data="variable.points" style="height: 500px;width: 100%;margin-top: 20px"> </BaiDuMap>
去查询gps的数据,反正数据格式一样就行了.现在variable.points是个数组,里面point就俩属性longitude和latitude.其实里面的弹框有用到其他的属性,反正到时候用到啥加啥
//查询gps信息
variable.points=[]
if (isMyEmpty(variable.data.loadNo)){
}else{
let gpsRes=await esbGpsPostionPage({loadNo:variable.data.loadNo});
gpsRes.rows.forEach(item=>{
//数据格式需要转化
let point={longitude:item.lon,latitude:item.lat}
variable.points.push(point)
})
}
1897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
