定位页面搭建
This commit is contained in:
parent
22ec75cbf2
commit
6adb1dc728
|
|
@ -11,6 +11,9 @@
|
|||
<%= webpackConfig.name %>
|
||||
</title>
|
||||
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
|
||||
<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>
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 地图弹框 展示设备轨迹 -->
|
||||
<el-dialog title="装备定位信息" :visible.sync="openMap" width="80%" :close-on-click-modal="false" append-to-body>
|
||||
<el-dialog title="装备定位信息" :visible.sync="openMap" width="80%" :close-on-click-modal="false" @close="close">
|
||||
<!-- 表单 根据日期查询设备轨迹 -->
|
||||
<el-card shadow="hover">
|
||||
<el-form :model="queryForm" inline>
|
||||
|
|
@ -19,6 +19,14 @@
|
|||
<el-button type="primary" size="small" @click="handleQuery">轨迹查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div>
|
||||
<h2>{{ equipment }}</h2>
|
||||
<div class="equipment">定位设备编号: {{ equipmentNumber }}</div>
|
||||
<div class="equipment">{{ engineering }}工程</div>
|
||||
</div>
|
||||
|
||||
<!-- 地图 -->
|
||||
<div v-if="openMap" id="container" style="height: 500px; background-color: #bfc; margin-top: 13px"></div>
|
||||
</el-card>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
|
@ -26,27 +34,175 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MapDIalog',
|
||||
props: {
|
||||
openMap: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
name: 'MapDialog',
|
||||
data() {
|
||||
return {
|
||||
openMap: false, // 是否打开地图弹框
|
||||
queryForm: {
|
||||
date: '',
|
||||
},
|
||||
equipment: '', // 设备名称
|
||||
equipmentNumber: 'H906L', // 设备编号
|
||||
engineering: '大禹治水', // 工程
|
||||
map: null,
|
||||
centerPoint: [113.271431, 23.135336], // 中心点
|
||||
animiationLineList: [], // 动画线
|
||||
lineStyle: {
|
||||
// 线样式
|
||||
color: '#0e83ed',
|
||||
width: 2,
|
||||
opacity: 0.6,
|
||||
},
|
||||
linePointList: [
|
||||
{
|
||||
lng: 116.297611,
|
||||
lat: 40.047363,
|
||||
},
|
||||
{
|
||||
lng: 116.302839,
|
||||
lat: 40.048219,
|
||||
},
|
||||
{
|
||||
lng: 116.308301,
|
||||
lat: 40.050566,
|
||||
},
|
||||
{
|
||||
lng: 116.305732,
|
||||
lat: 40.054957,
|
||||
},
|
||||
{
|
||||
lng: 116.304754,
|
||||
lat: 40.057953,
|
||||
},
|
||||
{
|
||||
lng: 116.306487,
|
||||
lat: 40.058312,
|
||||
},
|
||||
{
|
||||
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 },
|
||||
// ],
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
handleQuery() {
|
||||
console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.date)
|
||||
},
|
||||
openMapDialog(val) {
|
||||
this.openMap = val
|
||||
},
|
||||
close() {
|
||||
this.openMap = false
|
||||
this.$emit('getList')
|
||||
},
|
||||
// 获取装备信息
|
||||
getEquipmentInfo(params) {
|
||||
console.log('🚀 ~ getEquipmentInfo ~ 获取装备信息', params)
|
||||
this.equipment = params.deviceType
|
||||
},
|
||||
// 初始化地图和轨迹
|
||||
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) // 创建点坐标
|
||||
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 trackAni = new BMapGLLib.TrackAnimation(this.map, pl, {
|
||||
overallView: true, // 动画完成后自动调整视野到总览
|
||||
tilt: 30, // 轨迹播放的角度，默认为55
|
||||
duration: 10000, // 动画持续时长，默认为10000，单位ms
|
||||
delay: 3000, // 动画开始的延迟，默认0，单位ms
|
||||
})
|
||||
|
||||
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)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.equipment {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -533,7 +533,7 @@
|
|||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<MapDIalog :openMap="openMap" />
|
||||
<MapDialog ref="mapDIalog" @getList="getList" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<BindIOT :isShow="isShow" />
|
||||
|
|
@ -557,13 +557,13 @@ import { listHouseTree } from '@/api/store/shelves'
|
|||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import QRCode from 'qrcodejs2'
|
||||
import BindIOT from './component/BindIOT.vue'
|
||||
import MapDIalog from './component/MapDIalog.vue'
|
||||
import BindIOT from './component/BindIOT'
|
||||
import MapDialog from './component/MapDialog'
|
||||
|
||||
export default {
|
||||
name: 'Devices',
|
||||
dicts: ['sys_normal_disable'],
|
||||
components: { Treeselect, BindIOT, MapDIalog },
|
||||
components: { Treeselect, BindIOT, MapDialog },
|
||||
data() {
|
||||
return {
|
||||
openMap: false,
|
||||
|
|
@ -820,8 +820,13 @@ export default {
|
|||
},
|
||||
handleMap(row) {
|
||||
console.log('~ handleMap ~ 地图', row)
|
||||
const params = {
|
||||
deviceType: row.deviceType,
|
||||
}
|
||||
// 点击打开弹框
|
||||
this.openMap = true
|
||||
this.$refs.mapDIalog.openMapDialog(true)
|
||||
this.$refs.mapDIalog.getEquipmentInfo(params)
|
||||
this.$refs.mapDIalog.initMap()
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue