定位页面开发
This commit is contained in:
parent
6adb1dc728
commit
d04f23454b
|
|
@ -45,14 +45,7 @@ export default {
|
|||
equipmentNumber: 'H906L', // 设备编号
|
||||
engineering: '大禹治水', // 工程
|
||||
map: null,
|
||||
centerPoint: [113.271431, 23.135336], // 中心点
|
||||
animiationLineList: [], // 动画线
|
||||
lineStyle: {
|
||||
// 线样式
|
||||
color: '#0e83ed',
|
||||
width: 2,
|
||||
opacity: 0.6,
|
||||
},
|
||||
// 轨迹点
|
||||
linePointList: [
|
||||
{
|
||||
lng: 116.297611,
|
||||
|
|
@ -82,24 +75,7 @@ export default {
|
|||
lng: 116.307223,
|
||||
lat: 40.056379,
|
||||
},
|
||||
], // 线点
|
||||
// map: {
|
||||
// center: { lng: 113.763924, lat: 22.938634 },
|
||||
// zoom: 18,
|
||||
// show: true,
|
||||
// dragging: true,
|
||||
// },
|
||||
// lineList: [
|
||||
// { lng: 113.763924, lat: 22.938634 },
|
||||
// { lng: 113.759621, lat: 22.933625 },
|
||||
// { lng: 113.76654, lat: 22.934174 },
|
||||
// { lng: 113.766558, lat: 22.932916 },
|
||||
// { lng: 113.766558, lat: 22.932916 },
|
||||
// { lng: 113.768745, lat: 22.93173 },
|
||||
// { lng: 113.76945, lat: 22.930731 },
|
||||
// { lng: 113.772022, lat: 22.93014 },
|
||||
// { lng: 108.952789, lat: 34.348938 },
|
||||
// ],
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
|
|
@ -122,78 +98,56 @@ export default {
|
|||
// 初始化地图和轨迹
|
||||
initMap() {
|
||||
this.$nextTick(() => {
|
||||
// // 创建地图实例
|
||||
// this.map = new BMapGL.Map('map')
|
||||
// // 创建点坐标
|
||||
// this.map.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 18)
|
||||
// // 启用滚轮放大缩小
|
||||
// this.map.enableScrollWheelZoom(true)
|
||||
// // setTimeout
|
||||
// setTimeout(() => {
|
||||
// // const startIcon = {
|
||||
// // imgUrl: new URL('/src/assets/images/startIcon', import.meta.url).href,
|
||||
// // position: [this.linePointList[0].lng, this.linePointList[0].lat],
|
||||
// // size: [50, 50],
|
||||
// // }
|
||||
// // const endIcon = {
|
||||
// // imgUrl: new URL('/src/assets/images/endIcon', import.meta.url).href,
|
||||
// // position: [this.linePointList[this.linePointList.length - 1].lng, this.linePointList[linePointList.length - 1].lat],
|
||||
// // size: [50, 50],
|
||||
// // }
|
||||
// this.initIcon(startIcon.imgUrl, startIcon.position, startIcon.size)
|
||||
// this.initIcon(endIcon.imgUrl, endIcon.position, endIcon.size)
|
||||
// }, 100)
|
||||
this.map = new BMapGL.Map('container') // 创建地图实例
|
||||
let point = new BMapGL.Point(116.297611, 40.047363) // 创建点坐标
|
||||
let point = new BMapGL.Point(117.14, 31.87) // 创建点坐标
|
||||
console.log('🚀 ~ this.$nextTick ~ point:', point)
|
||||
this.map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
|
||||
this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
|
||||
// 设置起点终点图标
|
||||
setTimeout(async () => {
|
||||
const startIcon = {
|
||||
imgUrl: await import('/src/assets/images/startIcon.png'),
|
||||
position: [linePointList[0].lng, linePointList[0].lat],
|
||||
size: [50, 50],
|
||||
}
|
||||
const endIcon = {
|
||||
imgUrl: await import('/src/assets/images/endIcon.png'),
|
||||
position: [linePointList[linePointList.length - 1].lng, linePointList[linePointList.length - 1].lat],
|
||||
size: [50, 50],
|
||||
}
|
||||
initIcon(startIcon.imgUrl, startIcon.position, startIcon.size)
|
||||
initIcon(endIcon.imgUrl, endIcon.position, endIcon.size)
|
||||
// initPolyline()
|
||||
// initPolylineAnimation()
|
||||
// setViewPortFn()
|
||||
}, 200)
|
||||
|
||||
// 添加轨迹
|
||||
let pointList = []
|
||||
for (var i = 0; i < this.linePointList.length; i++) {
|
||||
pointList.push(new BMapGL.Point(this.linePointList[i].lng, this.linePointList[i].lat))
|
||||
}
|
||||
let pl = new BMapGL.Polyline(pointList)
|
||||
let polyline = new BMapGL.Polyline(pointList)
|
||||
// 修改线的样式
|
||||
polyline.setStrokeColor('#EA3323') // 线颜色 #EA3323
|
||||
// polyline.setStrokeWeight(2) // 线宽
|
||||
|
||||
let trackAni = new BMapGLLib.TrackAnimation(this.map, pl, {
|
||||
let trackAni = new BMapGLLib.TrackAnimation(this.map, polyline, {
|
||||
overallView: true, // 动画完成后自动调整视野到总览
|
||||
tilt: 30, // 轨迹播放的角度，默认为55
|
||||
duration: 10000, // 动画持续时长，默认为10000，单位ms
|
||||
delay: 3000, // 动画开始的延迟，默认0，单位ms
|
||||
delay: 2000, // 动画开始的延迟，默认0，单位ms
|
||||
})
|
||||
|
||||
// 设置起点终点图标
|
||||
this.simulateMovement()
|
||||
trackAni.start()
|
||||
})
|
||||
},
|
||||
initIcon(imgUrl, position, size) {
|
||||
// var myIcon = new BMapGL.Icon("https://api.map.baidu.com/img/markers.png", new BMapGL.Size(50, 50));
|
||||
var myIcon = new BMapGL.Icon(imgUrl, new BMapGL.Size(size))
|
||||
// 创建Marker标注，使用小车图标
|
||||
var pt = new BMapGL.Point(...position)
|
||||
var marker = new BMapGL.Marker(pt, {
|
||||
icon: myIcon,
|
||||
})
|
||||
// 将标注添加到地图
|
||||
this.map.addOverlay(marker)
|
||||
// 添加起点和终点的标记
|
||||
addStartEndMarkers(startLatLng, endLatLng) {
|
||||
let startIcon = new BMapGL.Icon(require('/src/assets/images/startIcon.png'), new BMapGL.Size(32, 32))
|
||||
let startMarker = new BMapGL.Marker(startLatLng, { icon: startIcon })
|
||||
this.map.addOverlay(startMarker)
|
||||
|
||||
let endIcon = new BMapGL.Icon(require('/src/assets/images/endIcon.png'), new BMapGL.Size(32, 32))
|
||||
let endMarker = new BMapGL.Marker(endLatLng, { icon: endIcon })
|
||||
this.map.addOverlay(endMarker)
|
||||
},
|
||||
|
||||
// 模拟轨迹运动结束后的回调
|
||||
simulateMovement() {
|
||||
// 模拟轨迹运动结束后获取起点和终点的经纬度坐标
|
||||
let startLatLng = new BMapGL.Point(this.linePointList[0].lng, this.linePointList[0].lat)
|
||||
let endLatLng = new BMapGL.Point(
|
||||
this.linePointList[this.linePointList.length - 1].lng,
|
||||
this.linePointList[this.linePointList.length - 1].lat
|
||||
)
|
||||
|
||||
// 添加起点和终点的图标
|
||||
this.addStartEndMarkers(startLatLng, endLatLng)
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue