iot定位设备新需求增加
This commit is contained in:
BianLzhaoMin
parent
1c5dd1f5a2
commit
7b1c73b230
|
|
@ -10,6 +10,8 @@
|
|||
<title>
|
||||
<%= webpackConfig.name %>
|
||||
</title>
|
||||
<script async src="https://api.map.baidu.com/api?v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
|
||||
<script src="https://api.map.baidu.com/api?type=webgl&v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
|
||||
<script type="text/javascript" src="//api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>
|
||||
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
|
||||
<style>
|
||||
|
|
|
|||
14
src/App.vue
14
src/App.vue
|
|
@ -24,13 +24,13 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
const script_1 = document.createElement('script')
|
||||
const script_2 = document.createElement('script')
|
||||
script_1.src = `https://api.map.baidu.com/api?v=2.0&ak=${process.env.VUE_APP_BAIDU_MAP_AK}`
|
||||
script_2.src = `https://api.map.baidu.com/api?type=webgl&v=2.0&ak=${process.env.VUE_APP_BAIDU_MAP_AK}`
|
||||
script_1.async = true
|
||||
document.body.appendChild(script_1)
|
||||
document.body.appendChild(script_2)
|
||||
// const script_1 = document.createElement('script')
|
||||
// const script_2 = document.createElement('script')
|
||||
// script_1.src = `https://api.map.baidu.com/api?v=2.0&ak=${process.env.VUE_APP_BAIDU_MAP_AK}`
|
||||
// script_2.src = `https://api.map.baidu.com/api?type=webgl&v=2.0&ak=${process.env.VUE_APP_BAIDU_MAP_AK}`
|
||||
// script_1.async = true
|
||||
// document.body.appendChild(script_1)
|
||||
// document.body.appendChild(script_2)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -304,7 +304,7 @@ export default {
|
|||
this.parkList.forEach((e) => {
|
||||
console.log(e, '----')
|
||||
e.startTime = moment(parseInt(e.beginTime)).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
'YYYY-MM-DD HH:mm',
|
||||
)
|
||||
|
||||
e.hours = parseInt(
|
||||
|
|
@ -353,6 +353,14 @@ export default {
|
|||
|
||||
this.tripInfoListNew = tripInfoList
|
||||
|
||||
console.log(
|
||||
' this.tripInfoListNew行程信息---',
|
||||
this.tripInfoListNew,
|
||||
)
|
||||
|
||||
if (this.tripInfoListNew.length < 1) return
|
||||
this.onDrawLine(this.tripInfoListNew)
|
||||
|
||||
// console.log(tripInfoList, '处理后的行程---')
|
||||
// let tripInfo = JSON.parse(res.msg)
|
||||
// console.log(tripInfo, '反序列化之后', this.parkList)
|
||||
|
|
@ -388,6 +396,7 @@ export default {
|
|||
},
|
||||
/** 查看行程 */
|
||||
handlePreviewTrip(item, index) {
|
||||
const this_ = this
|
||||
this.activeIndex = index
|
||||
if (this.trackAni) {
|
||||
this.trackAni.cancel()
|
||||
|
|
@ -399,30 +408,102 @@ export default {
|
|||
this.linePointList[1].lng = item.endLng
|
||||
this.linePointList[1].lat = item.endLat
|
||||
if (this.linePointList.length === 0) return
|
||||
for (var i = 0; i < this.linePointList.length; i++) {
|
||||
pointList.push(
|
||||
new BMapGL.Point(
|
||||
this.linePointList[i].lng,
|
||||
this.linePointList[i].lat,
|
||||
),
|
||||
)
|
||||
}
|
||||
// for (var i = 0; i < this.linePointList.length; i++) {
|
||||
// var pointArr = []
|
||||
// var points = new BMapGL.Point(
|
||||
// this.linePointList[i].lng,
|
||||
// this.linePointList[i].lat,
|
||||
// )
|
||||
// var convertor = new BMapGL.Convertor()
|
||||
// pointArr.push(points)
|
||||
// convertor.translate(
|
||||
// pointArr,
|
||||
// COORDINATES_WGS84,
|
||||
// COORDINATES_BD09,
|
||||
// function (data) {
|
||||
// // newPointList.push(data.points[0])
|
||||
// newPoints = data.points[0]
|
||||
// },
|
||||
// )
|
||||
// }
|
||||
|
||||
// pointList.push(new BMapGL.Point(item.slon, item.slat))
|
||||
// pointList.push(new BMapGL.Point(item.elon, item.elat))
|
||||
let polyline = new BMapGL.Polyline(pointList)
|
||||
// 修改线的样式
|
||||
polyline.setStrokeColor('#EA3323') // 线颜色 #EA3323
|
||||
// polyline.setStrokeWeight(2) // 线宽
|
||||
this.trackAni = new BMapGLLib.TrackAnimation(this.map, polyline, {
|
||||
overallView: true, // 动画完成后自动调整视野到总览
|
||||
tilt: 55, // 轨迹播放的角度，默认为55
|
||||
duration: 1500, // 动画持续时长，默认为10000，单位ms
|
||||
delay: 100, // 动画开始的延迟，默认0，单位ms
|
||||
var pointArr = []
|
||||
var points = new BMapGL.Point(
|
||||
this.linePointList[0].lng,
|
||||
this.linePointList[0].lat,
|
||||
)
|
||||
var points_2 = new BMapGL.Point(
|
||||
this.linePointList[1].lng,
|
||||
this.linePointList[1].lat,
|
||||
)
|
||||
var convertor = new BMapGL.Convertor()
|
||||
pointArr.push(points)
|
||||
pointArr.push(points_2)
|
||||
convertor.translate(
|
||||
pointArr,
|
||||
COORDINATES_WGS84,
|
||||
COORDINATES_BD09,
|
||||
function (data) {
|
||||
let polyline = new BMapGL.Polyline(data.points)
|
||||
// 修改线的样式
|
||||
polyline.setStrokeColor('#EA3323') // 线颜色 #EA3323
|
||||
// polyline.setStrokeWeight(2) // 线宽
|
||||
this_.trackAni = new BMapGLLib.TrackAnimation(
|
||||
this_.map,
|
||||
polyline,
|
||||
{
|
||||
overallView: true, // 动画完成后自动调整视野到总览
|
||||
tilt: 55, // 轨迹播放的角度，默认为55
|
||||
duration: 1500, // 动画持续时长，默认为10000，单位ms
|
||||
delay: 100, // 动画开始的延迟，默认0，单位ms
|
||||
},
|
||||
)
|
||||
this_.trackAni.start()
|
||||
// 设置起点终点图标
|
||||
this_.triggerMovement()
|
||||
},
|
||||
)
|
||||
},
|
||||
|
||||
onDrawLine(list) {
|
||||
const this_ = this
|
||||
if (this.trackAni) {
|
||||
this.trackAni.cancel()
|
||||
}
|
||||
this.map.clearOverlays()
|
||||
let pointArr = []
|
||||
list.forEach((e, index) => {
|
||||
if (index === list.length - 1) {
|
||||
pointArr.push(new BMapGL.Point(e.startLng, e.startLat))
|
||||
pointArr.push(new BMapGL.Point(e.endLng, e.endLat))
|
||||
} else {
|
||||
pointArr.push(new BMapGL.Point(e.startLng, e.startLat))
|
||||
}
|
||||
})
|
||||
this.trackAni.start()
|
||||
// 设置起点终点图标
|
||||
this.triggerMovement()
|
||||
const convertor = new BMapGL.Convertor()
|
||||
convertor.translate(
|
||||
pointArr,
|
||||
COORDINATES_WGS84,
|
||||
COORDINATES_BD09,
|
||||
function (data) {
|
||||
let polyline = new BMapGL.Polyline(data.points)
|
||||
// 修改线的样式
|
||||
polyline.setStrokeColor('#EA3323') // 线颜色 #EA3323
|
||||
// polyline.setStrokeWeight(2) // 线宽
|
||||
this_.trackAni = new BMapGLLib.TrackAnimation(
|
||||
this_.map,
|
||||
polyline,
|
||||
{
|
||||
overallView: true, // 动画完成后自动调整视野到总览
|
||||
tilt: 55, // 轨迹播放的角度，默认为55
|
||||
duration: 1500, // 动画持续时长，默认为10000，单位ms
|
||||
delay: 100, // 动画开始的延迟，默认0，单位ms
|
||||
},
|
||||
)
|
||||
this_.trackAni.start()
|
||||
this_.drawMaker(data.points)
|
||||
},
|
||||
)
|
||||
},
|
||||
// async handleQuery() {
|
||||
// console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.date)
|
||||
|
|
@ -453,6 +534,7 @@ export default {
|
|||
initMap() {
|
||||
console.log('地图初始化--')
|
||||
this.$nextTick(() => {
|
||||
const this_ = this
|
||||
this.map = new BMapGL.Map('container') // 创建地图实例
|
||||
// let point = new BMapGL.Point(117.13805, 31.8734) // 创建点坐标
|
||||
let point = new BMapGL.Point(this.calLon, this.calLat) // 创建点坐标
|
||||
|
|
@ -460,35 +542,75 @@ export default {
|
|||
this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
|
||||
this.map.setHeading(64.5) //设置地图旋转角度
|
||||
this.map.setTilt(73) //设置地图的倾斜角度
|
||||
let marker = new BMapGL.Marker(point) // 创建标点
|
||||
this.map.addOverlay(marker)
|
||||
|
||||
var convertor = new BMapGL.Convertor()
|
||||
var pointArr = []
|
||||
pointArr.push(point)
|
||||
convertor.translate(
|
||||
pointArr,
|
||||
COORDINATES_WGS84,
|
||||
COORDINATES_BD09,
|
||||
function (data) {
|
||||
let marker = new BMapGL.Marker(data.points[0]) // 创建标点
|
||||
this_.map.addOverlay(marker)
|
||||
},
|
||||
)
|
||||
|
||||
var myGeo = new BMapGL.Geocoder()
|
||||
// 根据坐标得到地址描述
|
||||
// myGeo.getLocation(new BMapGL.Point(this.calLon, this.calLat))
|
||||
|
||||
// this.map.getLocation(point, (res) => {
|
||||
// console.log(res, '所在位置--')
|
||||
// })
|
||||
})
|
||||
},
|
||||
|
||||
// 添加起点和终点的标记
|
||||
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)
|
||||
// const startPoints = this.translateCallback(startLatLng)
|
||||
const this_ = this
|
||||
var convertor = new BMapGL.Convertor()
|
||||
var pointArr = []
|
||||
pointArr.push(startLatLng)
|
||||
pointArr.push(endLatLng)
|
||||
convertor.translate(
|
||||
pointArr,
|
||||
COORDINATES_WGS84,
|
||||
COORDINATES_BD09,
|
||||
function (data) {
|
||||
let startIcon = new BMapGL.Icon(
|
||||
require('/src/assets/images/startIcon.png'),
|
||||
new BMapGL.Size(32, 32),
|
||||
)
|
||||
|
||||
let endIcon = new BMapGL.Icon(
|
||||
require('/src/assets/images/endIcon.png'),
|
||||
new BMapGL.Size(32, 32),
|
||||
let startMarker = new BMapGL.Marker(data.points[0], {
|
||||
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(data.points[1], {
|
||||
icon: endIcon,
|
||||
})
|
||||
this_.map.addOverlay(endMarker)
|
||||
},
|
||||
)
|
||||
let endMarker = new BMapGL.Marker(endLatLng, { icon: endIcon })
|
||||
this.map.addOverlay(endMarker)
|
||||
|
||||
// var endPointArr = []
|
||||
// endPointArr.push(endLatLng)
|
||||
// convertor.translate(
|
||||
// endPointArr,
|
||||
// COORDINATES_WGS84,
|
||||
// COORDINATES_BD09,
|
||||
// function (data) {},
|
||||
// )
|
||||
},
|
||||
|
||||
drawMaker(list) {
|
||||
list.forEach((e, index) => {
|
||||
let marker = new BMapGL.Marker(e)
|
||||
this.map.addOverlay(marker)
|
||||
})
|
||||
},
|
||||
// 轨迹运动结束后的回调
|
||||
triggerMovement() {
|
||||
|
|
|
|||
|
|
@ -42,11 +42,11 @@ module.exports = {
|
|||
// target: `https://test-cc.zhgkxt.com`,//线上环境-南网
|
||||
// target: `https://z.csgmall.com.cn`,
|
||||
|
||||
target: `http://192.168.2.127:39080`, //超
|
||||
// target: `http://192.168.2.127:39080`, //超
|
||||
// target: `http://10.40.92.81:8080`, //韩/
|
||||
// target: `http://192.168.2.74:49080`, //旭/
|
||||
// target: `http://192.168.2.17:39080`, //帅
|
||||
// target: `http://192.168.2.234:49080`, //福
|
||||
target: `http://192.168.2.209:49080`, //福
|
||||
// target: `http://192.168.0.37:49080`, //跃
|
||||
|
||||
//******** 注意事项 ********* */
|
||||
|
|
|
|||
Loading…
Reference in New Issue