|
|
@@ -1,725 +1,839 @@
|
|
|
<template>
|
|
|
- <div class="container">
|
|
|
- <div id="amap-container"></div>
|
|
|
- <div class="controller">
|
|
|
- <div class="in_transit_information">
|
|
|
- <span class="item_details">车牌号:</span> <el-input style="width: 100px;" class="inputStyle" v-model="carNumber"> </el-input>
|
|
|
- </div>
|
|
|
- <div class="in_transit_information2">
|
|
|
- <span class="item_details">时间段:</span>
|
|
|
- <el-date-picker
|
|
|
- class="date_picker_style"
|
|
|
- v-model="time"
|
|
|
- @change="changeTime"
|
|
|
- type="datetimerange"
|
|
|
- format="yyyy-MM-dd HH:mm:ss"
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期">
|
|
|
- </el-date-picker>
|
|
|
- <el-button type="primary" class="searchstyle" @click="initData">查询</el-button>
|
|
|
- </div>
|
|
|
- <div class="driving_information">
|
|
|
- <span class="item_details2">时间:{{runRoute.gtm}}</span>
|
|
|
- <br/>
|
|
|
- <span class="item_details2" >车速:{{runRoute.spd}}千米/小时</span>
|
|
|
- <br/>
|
|
|
- </div>
|
|
|
- <div class="map-control">
|
|
|
- <!--播放暂停按钮-->
|
|
|
- 进度:
|
|
|
- <Icon v-if="!isPlay" class="play-icon play" type="ios-play" @click="isPlay=true;play();"/>
|
|
|
- <Icon v-else class="play-icon pause" type="ios-pause" @click="isPlay=false;stop();navgControl('pause')"/>
|
|
|
- <Icon class="play-icon quickly" type="ios-play" @click="addProgress()"/>
|
|
|
- <div class="mySlider"><Slider class="map-slider" v-model="sliderVal" :tip-format="hideFormat" :step="0.0001"></Slider></div>
|
|
|
- <!--速度-->
|
|
|
- <div class="mySlider2"><el-slider v-model="speedVal" show-input></el-slider></div>
|
|
|
- </div>
|
|
|
- <div class="in_transit_information3" v-if="listPath.length>0">
|
|
|
- <span class="item_details">停车时长:</span>
|
|
|
- <el-select style="width:100px" @change="changeParkingTime" v-model="parkingTime" placeholder="停车">
|
|
|
- <el-option
|
|
|
- v-for="item in parkingOptions"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div class="in_transit_information3" v-if="listPath.length>0">
|
|
|
- <span class="item_details">离线时长:</span>
|
|
|
- <el-select style="width:100px" @change="changeLeaveTime" v-model="leaveTime" placeholder="离线">
|
|
|
- <el-option
|
|
|
- v-for="item in parkingOptions"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="container">
|
|
|
+ <div id="amap-container"></div>
|
|
|
+ <div class="controller">
|
|
|
+ <div class="in_transit_information">
|
|
|
+ <span class="item_details">车牌号:</span>
|
|
|
+ <el-input
|
|
|
+ style="width: 100px;"
|
|
|
+ class="inputStyle"
|
|
|
+ v-model="carNumber"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="in_transit_information2">
|
|
|
+ <span class="item_details">时间段:</span>
|
|
|
+ <el-date-picker
|
|
|
+ class="date_picker_style"
|
|
|
+ v-model="time"
|
|
|
+ @change="changeTime"
|
|
|
+ type="datetimerange"
|
|
|
+ format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ <el-button type="primary" class="searchstyle" @click="initData"
|
|
|
+ >查询</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="driving_information">
|
|
|
+ <span class="item_details2">时间:{{ runRoute.gtm }}</span>
|
|
|
+ <br />
|
|
|
+ <span class="item_details2">车速:{{ runRoute.spd }}千米/小时</span>
|
|
|
+ <br />
|
|
|
+ </div>
|
|
|
+ <div class="map-control">
|
|
|
+ <!--播放暂停按钮-->
|
|
|
+ 进度:
|
|
|
+ <Icon
|
|
|
+ v-if="!isPlay"
|
|
|
+ class="play-icon play"
|
|
|
+ type="ios-play"
|
|
|
+ @click="
|
|
|
+ isPlay = true;
|
|
|
+ play();
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <Icon
|
|
|
+ v-else
|
|
|
+ class="play-icon pause"
|
|
|
+ type="ios-pause"
|
|
|
+ @click="
|
|
|
+ isPlay = false;
|
|
|
+ stop();
|
|
|
+ navgControl('pause');
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <Icon
|
|
|
+ class="play-icon quickly"
|
|
|
+ type="ios-play"
|
|
|
+ @click="addProgress()"
|
|
|
+ />
|
|
|
+ <div class="mySlider">
|
|
|
+ <Slider
|
|
|
+ class="map-slider"
|
|
|
+ v-model="sliderVal"
|
|
|
+ :tip-format="hideFormat"
|
|
|
+ :step="0.0001"
|
|
|
+ ></Slider>
|
|
|
+ </div>
|
|
|
+ <!--速度-->
|
|
|
+ <div class="mySlider2">
|
|
|
+ <el-slider v-model="speedVal" show-input></el-slider>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="in_transit_information3" v-if="listPath.length > 0">
|
|
|
+ <span class="item_details">停车时长:</span>
|
|
|
+ <el-select
|
|
|
+ style="width:100px"
|
|
|
+ @change="changeParkingTime"
|
|
|
+ v-model="parkingTime"
|
|
|
+ placeholder="停车"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in parkingOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="in_transit_information3" v-if="listPath.length > 0">
|
|
|
+ <span class="item_details">离线时长:</span>
|
|
|
+ <el-select
|
|
|
+ style="width:100px"
|
|
|
+ @change="changeLeaveTime"
|
|
|
+ v-model="leaveTime"
|
|
|
+ placeholder="离线"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in parkingOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { shallowRef } from '@vue/reactivity'
|
|
|
-import { lazyAMapApiLoaderInstance } from 'vue-amap';
|
|
|
-import { sjTime,stringToDate } from "@/utils/sharedJsFile";
|
|
|
-import Slider from './slider.vue'
|
|
|
-Vue.use(Slider)
|
|
|
-import Vue from 'vue';
|
|
|
+import { shallowRef } from "@vue/reactivity";
|
|
|
+import { lazyAMapApiLoaderInstance } from "vue-amap";
|
|
|
+import { sjTime, stringToDate } from "@/utils/sharedJsFile";
|
|
|
+import Slider from "./slider.vue";
|
|
|
+Vue.use(Slider);
|
|
|
+import Vue from "vue";
|
|
|
export default {
|
|
|
- name: "PathView",
|
|
|
- setup(){
|
|
|
- const map = shallowRef(null);
|
|
|
- return{
|
|
|
- map,
|
|
|
+ name: "PathView",
|
|
|
+ setup() {
|
|
|
+ const map = shallowRef(null);
|
|
|
+ return {
|
|
|
+ map
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ speedVal: {
|
|
|
+ deep: true,
|
|
|
+ handler(val, oldVal) {
|
|
|
+ let that = this;
|
|
|
+ if (that.pathNavigator != null) {
|
|
|
+ that.pathNavigator.setSpeed(100 * val);
|
|
|
}
|
|
|
- },
|
|
|
- watch:{
|
|
|
- speedVal:{
|
|
|
- deep: true,
|
|
|
- handler(val, oldVal) {
|
|
|
- let that=this;
|
|
|
- if(that.pathNavigator!=null){
|
|
|
- that.pathNavigator.setSpeed(100*val)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- //一、 查询相关
|
|
|
- //选择时间区间
|
|
|
- time:[],
|
|
|
- //查询车牌号
|
|
|
- carNumber:"",
|
|
|
- //选择停车时长
|
|
|
- parkingTime:null,
|
|
|
- //停车时长选择区间
|
|
|
- parkingOptions: [{
|
|
|
- value: 600000,
|
|
|
- label: '10分钟'
|
|
|
- }, {
|
|
|
- value: 1200000,
|
|
|
- label: '20分钟'
|
|
|
- }, {
|
|
|
- value: 1800000,
|
|
|
- label: '30分钟'
|
|
|
- }, {
|
|
|
- value: 2400000,
|
|
|
- label: '40分钟'
|
|
|
- }, {
|
|
|
- value: 3000000,
|
|
|
- label: '50分钟'
|
|
|
- }
|
|
|
- , {
|
|
|
- value: 3600000,
|
|
|
- label: '60分钟'
|
|
|
- }
|
|
|
- ],
|
|
|
- //选择离线时长
|
|
|
- leaveTime:null,
|
|
|
- //离线时长选择区间
|
|
|
- leaveOptions: [{
|
|
|
- value: 600000,
|
|
|
- label: '10分钟'
|
|
|
- }, {
|
|
|
- value: 1200000,
|
|
|
- label: '20分钟'
|
|
|
- }, {
|
|
|
- value: 1800000,
|
|
|
- label: '30分钟'
|
|
|
- }, {
|
|
|
- value: 2400000,
|
|
|
- label: '40分钟'
|
|
|
- }, {
|
|
|
- value: 3000000,
|
|
|
- label: '50分钟'
|
|
|
- }
|
|
|
- , {
|
|
|
- value: 3600000,
|
|
|
- label: '60分钟'
|
|
|
- }
|
|
|
- ],
|
|
|
- //二、 展示相关
|
|
|
- //离线图标
|
|
|
- leaveMark:[],
|
|
|
- //停车图标
|
|
|
- parkMark:[],
|
|
|
- //开始地址
|
|
|
- startPointName:"",
|
|
|
- //结束地址
|
|
|
- endPointName:"",
|
|
|
- //小车行驶当前点所在的位置
|
|
|
- runRoute:
|
|
|
- {
|
|
|
- //正北方向夹角
|
|
|
- agl: "0",
|
|
|
- //当前的时间
|
|
|
- gtm: "0",
|
|
|
- //海拔
|
|
|
- hgt: "0",
|
|
|
- //进度
|
|
|
- lat: "0",
|
|
|
- //纬度
|
|
|
- lon: "0",
|
|
|
- //累计行驶距离（是车辆GPS安装开始到现在的距离,如果你想要查询范围内的行驶距离，用开始的累计距离和结束点累计距离相减）
|
|
|
- mil: "0",
|
|
|
- //这个时间的速度
|
|
|
- spd: "0"
|
|
|
- },
|
|
|
- //小车行驶当前点下标
|
|
|
- point:"",
|
|
|
- //三、 播放相关
|
|
|
- //是否暂停
|
|
|
- isPlay:true,
|
|
|
- //播放进度值
|
|
|
- sliderVal:0,
|
|
|
- //播放速度值
|
|
|
- speedVal:10,
|
|
|
- //四、组件相关
|
|
|
- //自定义窗体信息
|
|
|
- // ctmarkes:{
|
|
|
- // lat:"33.015888071433764",
|
|
|
- // lon : "115.96995235868168",
|
|
|
- // title:"豫SE8888",
|
|
|
- // details:"安徽省阜阳市颍东区阜阳舜岳水泥公司,西北方向,155.1米"
|
|
|
- // },
|
|
|
- //五、返回值相关
|
|
|
- //返回值集合
|
|
|
- listPath:[],
|
|
|
- //六、地图组件相关值
|
|
|
- //创建轨迹
|
|
|
- pathSimplifierIns:{},
|
|
|
- //巡回器
|
|
|
- pathNavigator:{},
|
|
|
- //初始化巡回器速度
|
|
|
- speed:1000,
|
|
|
- //地图解析
|
|
|
- geocoder:null,
|
|
|
- };
|
|
|
- },
|
|
|
- created(){
|
|
|
-
|
|
|
- },
|
|
|
- mounted() {
|
|
|
-
|
|
|
- },
|
|
|
- methods: {
|
|
|
-
|
|
|
- //停车时间改变
|
|
|
- changeParkingTime(){
|
|
|
- let that=this;
|
|
|
- //清除之前的停车点
|
|
|
- that.hideParkingMark();
|
|
|
- //计算时间的点
|
|
|
- let calculationPoint=null;
|
|
|
- that.listPath[0].runRoute.forEach(function(item,indexOf){
|
|
|
- if(indexOf+1<that.listPath[0].runRoute.length){
|
|
|
- //判断calculationPoint是否为空，如果是空的说明当前没有在计算停车时间
|
|
|
- if(calculationPoint==null&&item.spd=='0.0'){
|
|
|
- calculationPoint=item
|
|
|
- } else if(calculationPoint!=null&&item.spd!='0.0'){
|
|
|
- let beforeTime=that.stringToDate(calculationPoint.gtm)
|
|
|
- let item2=that.listPath[0].runRoute[indexOf];
|
|
|
- let afterTime=that.stringToDate(item2.gtm);
|
|
|
- let second=afterTime-beforeTime;
|
|
|
- if(second>that.parkingTime){
|
|
|
- let message='停车:'+second/60000;
|
|
|
- that.initParkingMarkes(20,35,require('@/assets/img/start.png'),calculationPoint.lon,calculationPoint.lat,message.split('.')[0]+"分钟");
|
|
|
- }
|
|
|
- calculationPoint=null;
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- //停车所有离线图标
|
|
|
- hideParkingMark(){
|
|
|
- let that=this;
|
|
|
- that.parkMark.forEach(function(item,indexOf){
|
|
|
- item.hide();
|
|
|
- });
|
|
|
- },
|
|
|
- //离线时间改变时获得超过时间的点信息
|
|
|
- changeLeaveTime(){
|
|
|
- let that=this;
|
|
|
- //关闭所有图标
|
|
|
- that.hideLeaveMark();
|
|
|
- that.listPath[0].runRoute.forEach(function(item,indexOf){
|
|
|
- if(indexOf+1<that.listPath[0].runRoute.length){
|
|
|
- let beforeTime=that.stringToDate(item.gtm)
|
|
|
- let item2=that.listPath[0].runRoute[indexOf+1];
|
|
|
- let afterTime=that.stringToDate(item2.gtm);
|
|
|
- let second=afterTime-beforeTime;
|
|
|
- if(second>that.leaveTime){
|
|
|
- let message='离线:'+second/60000;
|
|
|
- that.initLeaveMarkes(20,35,require('@/assets/img/start.png'),item2.lon,item2.lat,message.split('.')[0]+"分钟");
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //一、 查询相关
|
|
|
+ //选择时间区间
|
|
|
+ time: [],
|
|
|
+ //查询车牌号
|
|
|
+ carNumber: "",
|
|
|
+ //选择停车时长
|
|
|
+ parkingTime: null,
|
|
|
+ //停车时长选择区间
|
|
|
+ parkingOptions: [
|
|
|
+ {
|
|
|
+ value: 600000,
|
|
|
+ label: "10分钟"
|
|
|
},
|
|
|
- //关闭所有离线图标
|
|
|
- hideLeaveMark(){
|
|
|
- let that=this;
|
|
|
- that.leaveMark.forEach(function(item,indexOf){
|
|
|
- item.hide();
|
|
|
- });
|
|
|
+ {
|
|
|
+ value: 1200000,
|
|
|
+ label: "20分钟"
|
|
|
},
|
|
|
- //字符串转为Date
|
|
|
- stringToDate(dateString){
|
|
|
- let dateStr=dateString.replace('年','-').replace('月','-').replace('日','');
|
|
|
- return Date.parse(dateStr);
|
|
|
+ {
|
|
|
+ value: 1800000,
|
|
|
+ label: "30分钟"
|
|
|
},
|
|
|
- //校验查询时间
|
|
|
- changeTime(){
|
|
|
- let that=this;
|
|
|
- console.log((that.time[1]-that.time[0])-(86400000*3))
|
|
|
- if((that.time[1]-that.time[0])>86400000*3){
|
|
|
- this.$message.error('时间查询范围不能超过3天');
|
|
|
- that.time=[];
|
|
|
- }
|
|
|
+ {
|
|
|
+ value: 2400000,
|
|
|
+ label: "40分钟"
|
|
|
},
|
|
|
- //启动
|
|
|
- play(){
|
|
|
- let that =this;
|
|
|
- that.pathNavigator.resume();
|
|
|
+ {
|
|
|
+ value: 3000000,
|
|
|
+ label: "50分钟"
|
|
|
},
|
|
|
- //停止
|
|
|
- stop(){
|
|
|
- let that =this;
|
|
|
- that.pathNavigator.pause();
|
|
|
+ {
|
|
|
+ value: 3600000,
|
|
|
+ label: "60分钟"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ //选择离线时长
|
|
|
+ leaveTime: null,
|
|
|
+ //离线时长选择区间
|
|
|
+ leaveOptions: [
|
|
|
+ {
|
|
|
+ value: 600000,
|
|
|
+ label: "10分钟"
|
|
|
},
|
|
|
- //添加进度
|
|
|
- addProgress(){
|
|
|
- let that =this;
|
|
|
- let increment=(that.listPath[0].runPath.length*0.1)
|
|
|
- that.pathNavigator.start(((that.point+increment)%that.listPath[0].runPath.length))
|
|
|
+ {
|
|
|
+ value: 1200000,
|
|
|
+ label: "20分钟"
|
|
|
},
|
|
|
- //进度监听
|
|
|
- hideFormat(value){
|
|
|
- let that=this;
|
|
|
- that.sliderVal=value;
|
|
|
+ {
|
|
|
+ value: 1800000,
|
|
|
+ label: "30分钟"
|
|
|
},
|
|
|
- //获得开始地址
|
|
|
- getStartPointName(lnglatXY){
|
|
|
- let that=this;
|
|
|
- console.log("start",that.geocoder)
|
|
|
- that.geocoder.getAddress(lnglatXY, function(status, result) {
|
|
|
- if (status === 'complete' && result.info === 'OK') {
|
|
|
- that.startPointName = result.regeocode.formattedAddress;
|
|
|
- }
|
|
|
- });
|
|
|
+ {
|
|
|
+ value: 2400000,
|
|
|
+ label: "40分钟"
|
|
|
},
|
|
|
- //获得结束地址
|
|
|
- getEndPointName(lnglatXY){
|
|
|
- let that=this;
|
|
|
- that.geocoder.getAddress(lnglatXY, function(status, result) {
|
|
|
- if (status === 'complete' && result.info === 'OK') {
|
|
|
- that.endPointName = result.regeocode.formattedAddress;
|
|
|
- that.initCustomMarkes(that.carNumber+"("+that.listPath[0].miled+")","起点："+that.startPointName+"<br/>"+"终点："+that.endPointName,lnglatXY[0],lnglatXY[1])
|
|
|
- }
|
|
|
- });
|
|
|
+ {
|
|
|
+ value: 3000000,
|
|
|
+ label: "50分钟"
|
|
|
},
|
|
|
- //初始化数据
|
|
|
- initData(){
|
|
|
- let that=this;
|
|
|
- that.listPath=[];
|
|
|
- if(that.carNumber==""){
|
|
|
- this.$message.error('车牌号不能为空！');
|
|
|
- return;
|
|
|
- }
|
|
|
- if(that.time==[]){
|
|
|
- this.$message.error('请选择时间');
|
|
|
+ {
|
|
|
+ value: 3600000,
|
|
|
+ label: "60分钟"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ //二、 展示相关
|
|
|
+ //离线图标
|
|
|
+ leaveMark: [],
|
|
|
+ //停车图标
|
|
|
+ parkMark: [],
|
|
|
+ //开始地址
|
|
|
+ startPointName: "",
|
|
|
+ //结束地址
|
|
|
+ endPointName: "",
|
|
|
+ //小车行驶当前点所在的位置
|
|
|
+ runRoute: {
|
|
|
+ //正北方向夹角
|
|
|
+ agl: "0",
|
|
|
+ //当前的时间
|
|
|
+ gtm: "0",
|
|
|
+ //海拔
|
|
|
+ hgt: "0",
|
|
|
+ //进度
|
|
|
+ lat: "0",
|
|
|
+ //纬度
|
|
|
+ lon: "0",
|
|
|
+ //累计行驶距离（是车辆GPS安装开始到现在的距离,如果你想要查询范围内的行驶距离，用开始的累计距离和结束点累计距离相减）
|
|
|
+ mil: "0",
|
|
|
+ //这个时间的速度
|
|
|
+ spd: "0"
|
|
|
+ },
|
|
|
+ //小车行驶当前点下标
|
|
|
+ point: "",
|
|
|
+ //三、 播放相关
|
|
|
+ //是否暂停
|
|
|
+ isPlay: true,
|
|
|
+ //播放进度值
|
|
|
+ sliderVal: 0,
|
|
|
+ //播放速度值
|
|
|
+ speedVal: 10,
|
|
|
+ //四、组件相关
|
|
|
+ //自定义窗体信息
|
|
|
+ // ctmarkes:{
|
|
|
+ // lat:"33.015888071433764",
|
|
|
+ // lon : "115.96995235868168",
|
|
|
+ // title:"豫SE8888",
|
|
|
+ // details:"安徽省阜阳市颍东区阜阳舜岳水泥公司,西北方向,155.1米"
|
|
|
+ // },
|
|
|
+ //五、返回值相关
|
|
|
+ //返回值集合
|
|
|
+ listPath: [],
|
|
|
+ //六、地图组件相关值
|
|
|
+ //创建轨迹
|
|
|
+ pathSimplifierIns: {},
|
|
|
+ //巡回器
|
|
|
+ pathNavigator: {},
|
|
|
+ //初始化巡回器速度
|
|
|
+ speed: 1000,
|
|
|
+ //地图解析
|
|
|
+ geocoder: null
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ //停车时间改变
|
|
|
+ changeParkingTime() {
|
|
|
+ let that = this;
|
|
|
+ //清除之前的停车点
|
|
|
+ that.hideParkingMark();
|
|
|
+ //计算时间的点
|
|
|
+ let calculationPoint = null;
|
|
|
+ that.listPath[0].runRoute.forEach(function(item, indexOf) {
|
|
|
+ if (indexOf + 1 < that.listPath[0].runRoute.length) {
|
|
|
+ //判断calculationPoint是否为空，如果是空的说明当前没有在计算停车时间
|
|
|
+ if (calculationPoint == null && item.spd == "0.0") {
|
|
|
+ calculationPoint = item;
|
|
|
+ } else if (calculationPoint != null && item.spd != "0.0") {
|
|
|
+ let beforeTime = that.stringToDate(calculationPoint.gtm);
|
|
|
+ let item2 = that.listPath[0].runRoute[indexOf];
|
|
|
+ let afterTime = that.stringToDate(item2.gtm);
|
|
|
+ let second = afterTime - beforeTime;
|
|
|
+ if (second > that.parkingTime) {
|
|
|
+ let message = "停车:" + second / 60000;
|
|
|
+ that.initParkingMarkes(
|
|
|
+ 20,
|
|
|
+ 35,
|
|
|
+ require("@/assets/img/start.png"),
|
|
|
+ calculationPoint.lon,
|
|
|
+ calculationPoint.lat,
|
|
|
+ message.split(".")[0] + "分钟"
|
|
|
+ );
|
|
|
}
|
|
|
- that.axios.post("/api/v1/otms/fullPathVisualizationByCarNumber",{
|
|
|
- "capacityNumber":that.carNumber,
|
|
|
- "startTime":that.formatDate(that.time[0],"yyyy-MM-dd hh:mm:ss"),
|
|
|
- "endTime":that.formatDate(that.time[1],"yyyy-MM-dd hh:mm:ss"),
|
|
|
- }).then((res) => {
|
|
|
- if(res.data.startAndEndRoutes!=''){
|
|
|
- that.listPath=res.data.startAndEndRoutes;
|
|
|
- that.initMap();
|
|
|
- }else{
|
|
|
- this.$message.error('车辆没有开启GPS');
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- //初始化地图
|
|
|
- initMap(){
|
|
|
- lazyAMapApiLoaderInstance.load().then(() => {
|
|
|
- let that=this;
|
|
|
- that.map = new AMap.Map("amap-container",{ //设置地图容器id
|
|
|
- viewMode:"2D", //是否为2D地图模式
|
|
|
- zoom:10, //初始化地图级别
|
|
|
- center:[105.602725,37.076636], //初始化地图中心点位置
|
|
|
- });
|
|
|
- //初始化
|
|
|
- that.initGeocoder();
|
|
|
- //初始化巡航轨迹和巡航器
|
|
|
- that.initPathSimplifier();
|
|
|
- //初始化起点、当前点、当前点
|
|
|
- that.initThreeMarker();
|
|
|
- //初始化当前点标记
|
|
|
- //that.initCustomMarkes(that.carNumber+"("+that.listPath[0].miled+")",that.listPath[0].currentPointName,that.listPath[0].currentPoint.lon,that.listPath[0].currentPoint.lat)
|
|
|
- //that.initEndline();
|
|
|
-
|
|
|
- });
|
|
|
- },
|
|
|
- //结束点
|
|
|
- initEndline(){
|
|
|
- let that=this;
|
|
|
- that.initPolyline(that.listPath[0].estimatePath,"#FF0000");
|
|
|
- },
|
|
|
- //创建起点终点当前点
|
|
|
- initThreeMarker(){
|
|
|
- let that=this;
|
|
|
- that.listPath.forEach((element,index) => {
|
|
|
- //起点名称
|
|
|
- that.getStartPointName([element.startPoint.lon,element.startPoint.lat])
|
|
|
-
|
|
|
-
|
|
|
- //开始标记点
|
|
|
- if(element.startPoint.lon!=''&&element.startPoint.lat!=''){
|
|
|
-
|
|
|
- that.initMarkes(20,35,require('@/assets/img/start.png'),element.startPoint.lon,element.startPoint.lat,'起点');
|
|
|
- }
|
|
|
- //结束标记点
|
|
|
- if(element.endPoint!={}&&element.endPoint!=''&&element.endPoint!=null){
|
|
|
- // that.initMarkes(20,35,require('@/assets/img/end.png'),element.endPoint.lon,element.endPoint.lat,'终点');
|
|
|
- //终点名称
|
|
|
- that.getEndPointName([element.endPoint.lon,element.endPoint.lat]);
|
|
|
- }else{
|
|
|
- // that.initMarkes(20,35,require('@/assets/img/end.png'),element.runRoute[element.runRoute.length-1].lon,element.runRoute[element.runRoute.length-1].lat,'终点');
|
|
|
- //终点名称
|
|
|
- that.getEndPointName([element.runRoute[element.runRoute.length-1].lon,element.runRoute[element.runRoute.length-1].lat])
|
|
|
- }
|
|
|
-
|
|
|
- });
|
|
|
-
|
|
|
- },
|
|
|
- //初始化窗体
|
|
|
- initCustomMarkes(title,details,lon,lat){
|
|
|
- let that=this;
|
|
|
- //自定义窗体内容
|
|
|
- var content = [
|
|
|
- "<div style='top:1px;width: 180px; background-color: rgba(0, 0, 0, 1);' ><font color='white'>"+title+"</font>",
|
|
|
- "<div style='background-color:rgba(255, 255, 255, 0.5);'><font color='white'>"+details+"</font></div></div>",
|
|
|
- ];
|
|
|
- // 创建 infoWindow 实例
|
|
|
- var infoWindow = new AMap.InfoWindow({
|
|
|
- content: content.join("<br>") //传入 dom 对象，或者 html 字符串
|
|
|
- });
|
|
|
- // 打开信息窗体
|
|
|
- infoWindow.open(that.map,[lon,lat]);
|
|
|
- },
|
|
|
- //初始化预计轨迹
|
|
|
- initPolyline(path,color){
|
|
|
- let that=this;
|
|
|
- //预计轨迹
|
|
|
- var endLine = new AMap.Polyline({
|
|
|
- map:that.map,//地图组件
|
|
|
- path: path,//预计轨迹
|
|
|
- isOutline: true,
|
|
|
- outlineColor: color,//轨迹颜色
|
|
|
- borderWeight: 0,
|
|
|
- strokeColor: "#FF0000",
|
|
|
- strokeOpacity: 1,
|
|
|
- strokeWeight: 5,
|
|
|
- // 折线样式还支持 'dashed'
|
|
|
- strokeStyle: "solid",
|
|
|
- // strokeStyle是dashed时有效
|
|
|
- strokeDasharray: [10, 5],
|
|
|
- lineJoin: 'round',
|
|
|
- lineCap: 'round',
|
|
|
- zIndex: 50,
|
|
|
- })
|
|
|
- that.map.setFitView([[ endLine ]])
|
|
|
- },
|
|
|
- initParkingMarkes(weight,height,image,lon,lat,title){
|
|
|
- let that=this;
|
|
|
- //图标标记点
|
|
|
- let pointicon = new AMap.Icon({
|
|
|
- size: new AMap.Size(weight, height), // 图标尺寸
|
|
|
- image: image, // Icon的图像
|
|
|
- imageOffset: new AMap.Pixel(0,0), // 图像相对展示区域的偏移量，适于雪碧图等
|
|
|
- imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
|
|
|
- });
|
|
|
- // 创建一个 Marker 实例：
|
|
|
- var pointmarker = new AMap.Marker({
|
|
|
- position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
- icon: pointicon,
|
|
|
- title: title
|
|
|
- });
|
|
|
- that.parkMark.push(pointmarker)
|
|
|
- // 将创建的点标记添加到已有的地图实例：
|
|
|
- that.map.add(pointmarker);
|
|
|
- },
|
|
|
- //创建离线和停车的标记
|
|
|
- initLeaveMarkes(weight,height,image,lon,lat,title){
|
|
|
- let that=this;
|
|
|
- //图标标记点
|
|
|
- let pointicon = new AMap.Icon({
|
|
|
- size: new AMap.Size(weight, height), // 图标尺寸
|
|
|
- image: image, // Icon的图像
|
|
|
- imageOffset: new AMap.Pixel(0,0), // 图像相对展示区域的偏移量，适于雪碧图等
|
|
|
- imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
|
|
|
- });
|
|
|
- // 创建一个 Marker 实例：
|
|
|
- var pointmarker = new AMap.Marker({
|
|
|
- position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
- icon: pointicon,
|
|
|
- title: title
|
|
|
- });
|
|
|
- that.leaveMark.push(pointmarker)
|
|
|
- // 将创建的点标记添加到已有的地图实例：
|
|
|
- that.map.add(pointmarker);
|
|
|
- },
|
|
|
- //创建简单的标记
|
|
|
- initMarkes(weight,height,image,lon,lat,title){
|
|
|
- let that=this;
|
|
|
- //图标标记点
|
|
|
- let pointicon = new AMap.Icon({
|
|
|
- size: new AMap.Size(weight, height), // 图标尺寸
|
|
|
- image: image, // Icon的图像
|
|
|
- imageOffset: new AMap.Pixel(0,0), // 图像相对展示区域的偏移量，适于雪碧图等
|
|
|
- imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
|
|
|
- });
|
|
|
- // 创建一个 Marker 实例：
|
|
|
- var pointmarker = new AMap.Marker({
|
|
|
- position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
- icon: pointicon,
|
|
|
- title: title
|
|
|
- });
|
|
|
- // 将创建的点标记添加到已有的地图实例：
|
|
|
- that.map.add(pointmarker);
|
|
|
- },
|
|
|
- //创建轨迹和巡航器
|
|
|
- initPathSimplifier() {
|
|
|
- let that=this;
|
|
|
- // ...你的操作
|
|
|
- new AMapUI.load(['ui/misc/PathSimplifier'], (PathSimplifier) => {
|
|
|
- if (!PathSimplifier.supportCanvas) {
|
|
|
- alert('当前环境不支持 Canvas！')
|
|
|
- return
|
|
|
- }
|
|
|
- //创建轨迹和巡航器
|
|
|
- // 创建组件实例
|
|
|
- that.pathSimplifierIns = new PathSimplifier({
|
|
|
- map: that.map,
|
|
|
- zIndex: 100, // 图层叠加顺序
|
|
|
- data: that.listPath, // 巡航路径
|
|
|
- // 获取巡航路径中的路径坐标数组
|
|
|
- getPath: (pathData, pathIndex) => {
|
|
|
- return pathData.runPath;
|
|
|
- },
|
|
|
- //鼠标悬浮停时显示消息
|
|
|
- getHoverTitle: function(pathData, pathIndex, pointIndex) {
|
|
|
- //返回鼠标悬停时显示的信息
|
|
|
- if (pointIndex >= 0) {
|
|
|
- if(pathData.runRoute[pointIndex].gtm!=='undefined'){
|
|
|
- //鼠标悬停在某个轨迹节点上
|
|
|
- return pathData.runRoute[pointIndex].gtm + '，速度'+ pathData.runRoute[pointIndex].spd+'千米/小时';
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- //设置轨迹样式
|
|
|
- renderOptions: {
|
|
|
- //轨迹线的样式
|
|
|
- pathLineStyle: {
|
|
|
- strokeStyle: 'black',//路径颜色
|
|
|
- lineWidth: 6,
|
|
|
- dirArrowStyle: true
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- // 创建巡航器
|
|
|
- that.pathNavigator = that.pathSimplifierIns.createPathNavigator(0, {
|
|
|
- loop: true, // 是否循环
|
|
|
- speed: that.speed ,// 速度(km/h)
|
|
|
- pathNavigatorStyle: {
|
|
|
- width: 20,//车辆图片宽度
|
|
|
- height: 40,//车辆图片高度
|
|
|
- content:PathSimplifier.Render.Canvas.getImageContent( require('@/assets/img/smallcar.png'), onload, onerror),//车辆图片
|
|
|
- strokeStyle: null,
|
|
|
- fillStyle: null
|
|
|
- }
|
|
|
- })
|
|
|
- //开启巡航
|
|
|
- that.pathNavigator.start()
|
|
|
-
|
|
|
- //开始事件监听
|
|
|
- that.pathNavigator.on("start resume", function() {
|
|
|
- });
|
|
|
-
|
|
|
- //暂停事件监听
|
|
|
- that.pathNavigator.on("stop pause", function() {
|
|
|
- });
|
|
|
+ calculationPoint = null;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //停车所有离线图标
|
|
|
+ hideParkingMark() {
|
|
|
+ let that = this;
|
|
|
+ that.parkMark.forEach(function(item, indexOf) {
|
|
|
+ item.hide();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //离线时间改变时获得超过时间的点信息
|
|
|
+ changeLeaveTime() {
|
|
|
+ let that = this;
|
|
|
+ //关闭所有图标
|
|
|
+ that.hideLeaveMark();
|
|
|
+ that.listPath[0].runRoute.forEach(function(item, indexOf) {
|
|
|
+ if (indexOf + 1 < that.listPath[0].runRoute.length) {
|
|
|
+ let beforeTime = that.stringToDate(item.gtm);
|
|
|
+ let item2 = that.listPath[0].runRoute[indexOf + 1];
|
|
|
+ let afterTime = that.stringToDate(item2.gtm);
|
|
|
+ let second = afterTime - beforeTime;
|
|
|
+ if (second > that.leaveTime) {
|
|
|
+ let message = "离线:" + second / 60000;
|
|
|
+ that.initLeaveMarkes(
|
|
|
+ 20,
|
|
|
+ 35,
|
|
|
+ require("@/assets/img/start.png"),
|
|
|
+ item2.lon,
|
|
|
+ item2.lat,
|
|
|
+ message.split(".")[0] + "分钟"
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //关闭所有离线图标
|
|
|
+ hideLeaveMark() {
|
|
|
+ let that = this;
|
|
|
+ that.leaveMark.forEach(function(item, indexOf) {
|
|
|
+ item.hide();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //字符串转为Date
|
|
|
+ stringToDate(dateString) {
|
|
|
+ let dateStr = dateString
|
|
|
+ .replace("年", "-")
|
|
|
+ .replace("月", "-")
|
|
|
+ .replace("日", "");
|
|
|
+ return Date.parse(dateStr);
|
|
|
+ },
|
|
|
+ //校验查询时间
|
|
|
+ changeTime() {
|
|
|
+ let that = this;
|
|
|
+ console.log(that.time[1] - that.time[0] - 86400000 * 3);
|
|
|
+ if (that.time[1] - that.time[0] > 86400000 * 3) {
|
|
|
+ this.$message.error("时间查询范围不能超过3天");
|
|
|
+ that.time = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //启动
|
|
|
+ play() {
|
|
|
+ let that = this;
|
|
|
+ that.pathNavigator.resume();
|
|
|
+ },
|
|
|
+ //停止
|
|
|
+ stop() {
|
|
|
+ let that = this;
|
|
|
+ that.pathNavigator.pause();
|
|
|
+ },
|
|
|
+ //添加进度
|
|
|
+ addProgress() {
|
|
|
+ let that = this;
|
|
|
+ let increment = that.listPath[0].runPath.length * 0.1;
|
|
|
+ that.pathNavigator.start(
|
|
|
+ (that.point + increment) % that.listPath[0].runPath.length
|
|
|
+ );
|
|
|
+ },
|
|
|
+ //进度监听
|
|
|
+ hideFormat(value) {
|
|
|
+ let that = this;
|
|
|
+ that.sliderVal = value;
|
|
|
+ },
|
|
|
+ //获得开始地址
|
|
|
+ getStartPointName(lnglatXY) {
|
|
|
+ let that = this;
|
|
|
+ console.log("start", that.geocoder);
|
|
|
+ that.geocoder.getAddress(lnglatXY, function(status, result) {
|
|
|
+ if (status === "complete" && result.info === "OK") {
|
|
|
+ that.startPointName = result.regeocode.formattedAddress;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获得结束地址
|
|
|
+ getEndPointName(lnglatXY) {
|
|
|
+ let that = this;
|
|
|
+ that.geocoder.getAddress(lnglatXY, function(status, result) {
|
|
|
+ if (status === "complete" && result.info === "OK") {
|
|
|
+ that.endPointName = result.regeocode.formattedAddress;
|
|
|
+ that.initCustomMarkes(
|
|
|
+ that.carNumber + "(" + that.listPath[0].miled + ")",
|
|
|
+ "起点：" +
|
|
|
+ that.startPointName +
|
|
|
+ "<br/>" +
|
|
|
+ "终点：" +
|
|
|
+ that.endPointName,
|
|
|
+ lnglatXY[0],
|
|
|
+ lnglatXY[1]
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //初始化数据
|
|
|
+ initData() {
|
|
|
+ let that = this;
|
|
|
+ that.listPath = [];
|
|
|
+ if (that.carNumber == "") {
|
|
|
+ this.$message.error("车牌号不能为空！");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (that.time == []) {
|
|
|
+ this.$message.error("请选择时间");
|
|
|
+ }
|
|
|
+ that.axios
|
|
|
+ .post("/api/v1/otms/fullPathVisualizationByCarNumber", {
|
|
|
+ capacityNumber: that.carNumber,
|
|
|
+ startTime: that.formatDate(that.time[0], "yyyy-MM-dd hh:mm:ss"),
|
|
|
+ endTime: that.formatDate(that.time[1], "yyyy-MM-dd hh:mm:ss")
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ if (res.data.startAndEndRoutes != "") {
|
|
|
+ that.listPath = res.data.startAndEndRoutes;
|
|
|
+ that.initMap();
|
|
|
+ } else {
|
|
|
+ this.$message.error("车辆没有开启GPS");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //初始化地图
|
|
|
+ initMap() {
|
|
|
+ lazyAMapApiLoaderInstance.load().then(() => {
|
|
|
+ let that = this;
|
|
|
+ that.map = new AMap.Map("amap-container", {
|
|
|
+ //设置地图容器id
|
|
|
+ viewMode: "2D", //是否为2D地图模式
|
|
|
+ zoom: 10, //初始化地图级别
|
|
|
+ center: [105.602725, 37.076636] //初始化地图中心点位置
|
|
|
+ });
|
|
|
+ //初始化
|
|
|
+ that.initGeocoder();
|
|
|
+ //初始化巡航轨迹和巡航器
|
|
|
+ that.initPathSimplifier();
|
|
|
+ //初始化起点、当前点、当前点
|
|
|
+ that.initThreeMarker();
|
|
|
+ //初始化当前点标记
|
|
|
+ //that.initCustomMarkes(that.carNumber+"("+that.listPath[0].miled+")",that.listPath[0].currentPointName,that.listPath[0].currentPoint.lon,that.listPath[0].currentPoint.lat)
|
|
|
+ //that.initEndline();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //结束点
|
|
|
+ initEndline() {
|
|
|
+ let that = this;
|
|
|
+ that.initPolyline(that.listPath[0].estimatePath, "#FF0000");
|
|
|
+ },
|
|
|
+ //创建起点终点当前点
|
|
|
+ initThreeMarker() {
|
|
|
+ let that = this;
|
|
|
+ that.listPath.forEach((element, index) => {
|
|
|
+ //起点名称
|
|
|
+ that.getStartPointName([
|
|
|
+ element.startPoint.lon,
|
|
|
+ element.startPoint.lat
|
|
|
+ ]);
|
|
|
|
|
|
- //移动事件监听
|
|
|
- that.pathNavigator.on('move', function (data,value) {
|
|
|
- that.updateLable(value)
|
|
|
- });
|
|
|
- })
|
|
|
- },
|
|
|
- //实时展示
|
|
|
- updateLable(value){
|
|
|
- let that=this;
|
|
|
- that.point=value.dataItem.pointIndex;
|
|
|
- that.runRoute=value.dataItem.pathData.runRoute[that.point];
|
|
|
- that.sliderVal=(value.dataItem.pointIndex/value.dataItem.pathData.runRoute.length)*100;
|
|
|
- },
|
|
|
- //逆解码函数
|
|
|
- initGeocoder(){
|
|
|
- let that=this;
|
|
|
- console.log("initGeocoder") ;
|
|
|
- AMap.plugin('AMap.Geocoder',function(){
|
|
|
- that.geocoder = new AMap.Geocoder({
|
|
|
- radius: 1000,
|
|
|
- extensions: "all"
|
|
|
- });
|
|
|
-
|
|
|
- console.log(that.geocoder)
|
|
|
- })
|
|
|
- },
|
|
|
- //时间格式转换
|
|
|
- formatDate (date, fmt) {
|
|
|
- if (/(y+)/.test(fmt)) {
|
|
|
- fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
|
|
|
- }
|
|
|
- let o = {
|
|
|
- 'M+': date.getMonth() + 1,
|
|
|
- 'd+': date.getDate(),
|
|
|
- "h+": date.getHours(),
|
|
|
- "m+": date.getMinutes(),
|
|
|
- "s+": date.getSeconds(),
|
|
|
+ //开始标记点
|
|
|
+ if (element.startPoint.lon != "" && element.startPoint.lat != "") {
|
|
|
+ that.initMarkes(
|
|
|
+ 20,
|
|
|
+ 35,
|
|
|
+ require("@/assets/img/start.png"),
|
|
|
+ element.startPoint.lon,
|
|
|
+ element.startPoint.lat,
|
|
|
+ "起点"
|
|
|
+ );
|
|
|
+ }
|
|
|
+ //结束标记点
|
|
|
+ if (
|
|
|
+ element.endPoint != {} &&
|
|
|
+ element.endPoint != "" &&
|
|
|
+ element.endPoint != null
|
|
|
+ ) {
|
|
|
+ // that.initMarkes(20,35,require('@/assets/img/end.png'),element.endPoint.lon,element.endPoint.lat,'终点');
|
|
|
+ //终点名称
|
|
|
+ that.getEndPointName([element.endPoint.lon, element.endPoint.lat]);
|
|
|
+ } else {
|
|
|
+ // that.initMarkes(20,35,require('@/assets/img/end.png'),element.runRoute[element.runRoute.length-1].lon,element.runRoute[element.runRoute.length-1].lat,'终点');
|
|
|
+ //终点名称
|
|
|
+ that.getEndPointName([
|
|
|
+ element.runRoute[element.runRoute.length - 1].lon,
|
|
|
+ element.runRoute[element.runRoute.length - 1].lat
|
|
|
+ ]);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //初始化窗体
|
|
|
+ initCustomMarkes(title, details, lon, lat) {
|
|
|
+ let that = this;
|
|
|
+ //自定义窗体内容
|
|
|
+ var content = [
|
|
|
+ "<div style='top:1px;width: 180px; background-color: rgba(0, 0, 0, 1);' ><font color='white'>" +
|
|
|
+ title +
|
|
|
+ "</font>",
|
|
|
+ "<div style='background-color:rgba(255, 255, 255, 0.5);'><font color='white'>" +
|
|
|
+ details +
|
|
|
+ "</font></div></div>"
|
|
|
+ ];
|
|
|
+ // 创建 infoWindow 实例
|
|
|
+ var infoWindow = new AMap.InfoWindow({
|
|
|
+ content: content.join("<br>") //传入 dom 对象，或者 html 字符串
|
|
|
+ });
|
|
|
+ // 打开信息窗体
|
|
|
+ infoWindow.open(that.map, [lon, lat]);
|
|
|
+ },
|
|
|
+ //初始化预计轨迹
|
|
|
+ initPolyline(path, color) {
|
|
|
+ let that = this;
|
|
|
+ //预计轨迹
|
|
|
+ var endLine = new AMap.Polyline({
|
|
|
+ map: that.map, //地图组件
|
|
|
+ path: path, //预计轨迹
|
|
|
+ isOutline: true,
|
|
|
+ outlineColor: color, //轨迹颜色
|
|
|
+ borderWeight: 0,
|
|
|
+ strokeColor: "#FF0000",
|
|
|
+ strokeOpacity: 1,
|
|
|
+ strokeWeight: 5,
|
|
|
+ // 折线样式还支持 'dashed'
|
|
|
+ strokeStyle: "solid",
|
|
|
+ // strokeStyle是dashed时有效
|
|
|
+ strokeDasharray: [10, 5],
|
|
|
+ lineJoin: "round",
|
|
|
+ lineCap: "round",
|
|
|
+ zIndex: 50
|
|
|
+ });
|
|
|
+ that.map.setFitView([[endLine]]);
|
|
|
+ },
|
|
|
+ initParkingMarkes(weight, height, image, lon, lat, title) {
|
|
|
+ let that = this;
|
|
|
+ //图标标记点
|
|
|
+ let pointicon = new AMap.Icon({
|
|
|
+ size: new AMap.Size(weight, height), // 图标尺寸
|
|
|
+ image: image, // Icon的图像
|
|
|
+ imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
|
|
|
+ imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
|
|
|
+ });
|
|
|
+ // 创建一个 Marker 实例：
|
|
|
+ var pointmarker = new AMap.Marker({
|
|
|
+ position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
+ icon: pointicon,
|
|
|
+ title: title
|
|
|
+ });
|
|
|
+ that.parkMark.push(pointmarker);
|
|
|
+ // 将创建的点标记添加到已有的地图实例：
|
|
|
+ that.map.add(pointmarker);
|
|
|
+ },
|
|
|
+ //创建离线和停车的标记
|
|
|
+ initLeaveMarkes(weight, height, image, lon, lat, title) {
|
|
|
+ let that = this;
|
|
|
+ //图标标记点
|
|
|
+ let pointicon = new AMap.Icon({
|
|
|
+ size: new AMap.Size(weight, height), // 图标尺寸
|
|
|
+ image: image, // Icon的图像
|
|
|
+ imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
|
|
|
+ imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
|
|
|
+ });
|
|
|
+ // 创建一个 Marker 实例：
|
|
|
+ var pointmarker = new AMap.Marker({
|
|
|
+ position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
+ icon: pointicon,
|
|
|
+ title: title
|
|
|
+ });
|
|
|
+ that.leaveMark.push(pointmarker);
|
|
|
+ // 将创建的点标记添加到已有的地图实例：
|
|
|
+ that.map.add(pointmarker);
|
|
|
+ },
|
|
|
+ //创建简单的标记
|
|
|
+ initMarkes(weight, height, image, lon, lat, title) {
|
|
|
+ let that = this;
|
|
|
+ //图标标记点
|
|
|
+ let pointicon = new AMap.Icon({
|
|
|
+ size: new AMap.Size(weight, height), // 图标尺寸
|
|
|
+ image: image, // Icon的图像
|
|
|
+ imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
|
|
|
+ imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
|
|
|
+ });
|
|
|
+ // 创建一个 Marker 实例：
|
|
|
+ var pointmarker = new AMap.Marker({
|
|
|
+ position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
+ icon: pointicon,
|
|
|
+ title: title
|
|
|
+ });
|
|
|
+ // 将创建的点标记添加到已有的地图实例：
|
|
|
+ that.map.add(pointmarker);
|
|
|
+ },
|
|
|
+ //创建轨迹和巡航器
|
|
|
+ initPathSimplifier() {
|
|
|
+ let that = this;
|
|
|
+ // ...你的操作
|
|
|
+ new AMapUI.load(["ui/misc/PathSimplifier"], PathSimplifier => {
|
|
|
+ if (!PathSimplifier.supportCanvas) {
|
|
|
+ alert("当前环境不支持 Canvas！");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ //创建轨迹和巡航器
|
|
|
+ // 创建组件实例
|
|
|
+ that.pathSimplifierIns = new PathSimplifier({
|
|
|
+ map: that.map,
|
|
|
+ zIndex: 100, // 图层叠加顺序
|
|
|
+ data: that.listPath, // 巡航路径
|
|
|
+ // 获取巡航路径中的路径坐标数组
|
|
|
+ getPath: (pathData, pathIndex) => {
|
|
|
+ return pathData.runPath;
|
|
|
+ },
|
|
|
+ //鼠标悬浮停时显示消息
|
|
|
+ getHoverTitle: function(pathData, pathIndex, pointIndex) {
|
|
|
+ //返回鼠标悬停时显示的信息
|
|
|
+ if (pointIndex >= 0) {
|
|
|
+ if (pathData.runRoute[pointIndex].gtm !== "undefined") {
|
|
|
+ //鼠标悬停在某个轨迹节点上
|
|
|
+ return (
|
|
|
+ pathData.runRoute[pointIndex].gtm +
|
|
|
+ "，速度" +
|
|
|
+ pathData.runRoute[pointIndex].spd +
|
|
|
+ "千米/小时"
|
|
|
+ );
|
|
|
+ }
|
|
|
}
|
|
|
- for (let k in o) {
|
|
|
- if (new RegExp(`(${k})`).test(fmt)) {
|
|
|
- let str = o[k] + ''
|
|
|
- fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : ('00' + str).substr(str.length))
|
|
|
- }
|
|
|
+ },
|
|
|
+ //设置轨迹样式
|
|
|
+ renderOptions: {
|
|
|
+ //轨迹线的样式
|
|
|
+ pathLineStyle: {
|
|
|
+ strokeStyle: "black", //路径颜色
|
|
|
+ lineWidth: 6,
|
|
|
+ dirArrowStyle: true
|
|
|
}
|
|
|
- return fmt
|
|
|
- },
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 创建巡航器
|
|
|
+ that.pathNavigator = that.pathSimplifierIns.createPathNavigator(0, {
|
|
|
+ loop: true, // 是否循环
|
|
|
+ speed: that.speed, // 速度(km/h)
|
|
|
+ pathNavigatorStyle: {
|
|
|
+ width: 20, //车辆图片宽度
|
|
|
+ height: 40, //车辆图片高度
|
|
|
+ content: PathSimplifier.Render.Canvas.getImageContent(
|
|
|
+ require("@/assets/img/smallcar.png"),
|
|
|
+ onload,
|
|
|
+ onerror
|
|
|
+ ), //车辆图片
|
|
|
+ strokeStyle: null,
|
|
|
+ fillStyle: null
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //开启巡航
|
|
|
+ that.pathNavigator.start();
|
|
|
+
|
|
|
+ //开始事件监听
|
|
|
+ that.pathNavigator.on("start resume", function() {});
|
|
|
+
|
|
|
+ //暂停事件监听
|
|
|
+ that.pathNavigator.on("stop pause", function() {});
|
|
|
+
|
|
|
+ //移动事件监听
|
|
|
+ that.pathNavigator.on("move", function(data, value) {
|
|
|
+ that.updateLable(value);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //实时展示
|
|
|
+ updateLable(value) {
|
|
|
+ let that = this;
|
|
|
+ that.point = value.dataItem.pointIndex;
|
|
|
+ that.runRoute = value.dataItem.pathData.runRoute[that.point];
|
|
|
+ that.sliderVal =
|
|
|
+ (value.dataItem.pointIndex / value.dataItem.pathData.runRoute.length) *
|
|
|
+ 100;
|
|
|
+ },
|
|
|
+ //逆解码函数
|
|
|
+ initGeocoder() {
|
|
|
+ let that = this;
|
|
|
+ console.log("initGeocoder");
|
|
|
+ AMap.plugin("AMap.Geocoder", function() {
|
|
|
+ that.geocoder = new AMap.Geocoder({
|
|
|
+ radius: 1000,
|
|
|
+ extensions: "all"
|
|
|
+ });
|
|
|
+
|
|
|
+ console.log(that.geocoder);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //时间格式转换
|
|
|
+ formatDate(date, fmt) {
|
|
|
+ if (/(y+)/.test(fmt)) {
|
|
|
+ fmt = fmt.replace(
|
|
|
+ RegExp.$1,
|
|
|
+ (date.getFullYear() + "").substr(4 - RegExp.$1.length)
|
|
|
+ );
|
|
|
+ }
|
|
|
+ let o = {
|
|
|
+ "M+": date.getMonth() + 1,
|
|
|
+ "d+": date.getDate(),
|
|
|
+ "h+": date.getHours(),
|
|
|
+ "m+": date.getMinutes(),
|
|
|
+ "s+": date.getSeconds()
|
|
|
+ };
|
|
|
+ for (let k in o) {
|
|
|
+ if (new RegExp(`(${k})`).test(fmt)) {
|
|
|
+ let str = o[k] + "";
|
|
|
+ fmt = fmt.replace(
|
|
|
+ RegExp.$1,
|
|
|
+ RegExp.$1.length === 1 ? str : ("00" + str).substr(str.length)
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return fmt;
|
|
|
}
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
<style>
|
|
|
-.inputStyle{
|
|
|
- position: absolute;
|
|
|
- width: 200px;
|
|
|
- left: 50px;
|
|
|
+.inputStyle {
|
|
|
+ position: absolute;
|
|
|
+ width: 200px;
|
|
|
+ left: 50px;
|
|
|
}
|
|
|
|
|
|
-.controller{
|
|
|
- width: 100%; height: 70px;
|
|
|
- background: white;
|
|
|
- position: absolute;z-index:99;top:0;left:0;
|
|
|
-
|
|
|
+.controller {
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ background: white;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 99;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
}
|
|
|
-.in_transit_information{
|
|
|
-
|
|
|
- width: 200px;
|
|
|
- float: left;
|
|
|
- height: 40px;
|
|
|
+.in_transit_information {
|
|
|
+ width: 200px;
|
|
|
+ float: left;
|
|
|
+ height: 40px;
|
|
|
}
|
|
|
-.in_transit_information3{
|
|
|
- float: right;
|
|
|
- height: 40px;
|
|
|
- width: 180px;
|
|
|
+.in_transit_information3 {
|
|
|
+ float: right;
|
|
|
+ height: 40px;
|
|
|
+ width: 180px;
|
|
|
}
|
|
|
.in_transit_information2 {
|
|
|
-
|
|
|
- height: 40px;
|
|
|
- float: left;
|
|
|
- width: 580px;
|
|
|
+ height: 40px;
|
|
|
+ float: left;
|
|
|
+ width: 580px;
|
|
|
}
|
|
|
-.container{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
+.container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
span.item_details2 {
|
|
|
- position: relative;
|
|
|
- top: 20px;
|
|
|
+ position: relative;
|
|
|
+ top: 20px;
|
|
|
}
|
|
|
-.date_picker_style{
|
|
|
- position: relative;
|
|
|
- left: 50px;
|
|
|
+.date_picker_style {
|
|
|
+ position: relative;
|
|
|
+ left: 50px;
|
|
|
}
|
|
|
.item_details {
|
|
|
- position: relative;
|
|
|
- top: 5px;
|
|
|
- height: 0px;
|
|
|
- left: 0px;
|
|
|
+ position: relative;
|
|
|
+ top: 5px;
|
|
|
+ height: 0px;
|
|
|
+ left: 0px;
|
|
|
}
|
|
|
#amap-container {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
- margin: 0;
|
|
|
- font-family: "微软雅黑";
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0;
|
|
|
+ font-family: "微软雅黑";
|
|
|
}
|
|
|
|
|
|
-
|
|
|
/* 进度条 */
|
|
|
.mySlider {
|
|
|
-
|
|
|
- width: 150px;
|
|
|
- height: 20px;
|
|
|
- display: inline-block;
|
|
|
- position: relative;
|
|
|
- left: 32px;
|
|
|
+ width: 150px;
|
|
|
+ height: 20px;
|
|
|
+ display: inline-block;
|
|
|
+ position: relative;
|
|
|
+ left: 32px;
|
|
|
}
|
|
|
/* 进度条 */
|
|
|
.mySlider2 {
|
|
|
-
|
|
|
- width: 400px;
|
|
|
- height: 20px;
|
|
|
- display: inline-block;
|
|
|
- position: relative;
|
|
|
- left: 32px;
|
|
|
+ width: 400px;
|
|
|
+ height: 20px;
|
|
|
+ display: inline-block;
|
|
|
+ position: relative;
|
|
|
+ left: 32px;
|
|
|
}
|
|
|
.play {
|
|
|
- position: relative;
|
|
|
- left: 28px;
|
|
|
+ position: relative;
|
|
|
+ left: 28px;
|
|
|
}
|
|
|
-.quickly
|
|
|
-{
|
|
|
- float: right;
|
|
|
- position: relative;
|
|
|
- left: -20px;
|
|
|
- top: 10px;
|
|
|
+.quickly {
|
|
|
+ float: right;
|
|
|
+ position: relative;
|
|
|
+ left: -20px;
|
|
|
+ top: 10px;
|
|
|
}
|
|
|
.pause {
|
|
|
- position: relative;
|
|
|
- left: 28px;
|
|
|
+ position: relative;
|
|
|
+ left: 28px;
|
|
|
}
|
|
|
-.passed-time{
|
|
|
- position: relative;
|
|
|
- left: 5px;
|
|
|
+.passed-time {
|
|
|
+ position: relative;
|
|
|
+ left: 5px;
|
|
|
}
|
|
|
-.end-time{
|
|
|
- position: relative;
|
|
|
- left: 5px;
|
|
|
+.end-time {
|
|
|
+ position: relative;
|
|
|
+ left: 5px;
|
|
|
}
|
|
|
.map-times {
|
|
|
- position: relative;
|
|
|
- width: 40px;
|
|
|
+ position: relative;
|
|
|
+ width: 40px;
|
|
|
}
|
|
|
-.searchstyle{
|
|
|
- position: relative;
|
|
|
- left: 5px;
|
|
|
+.searchstyle {
|
|
|
+ position: relative;
|
|
|
+ left: 5px;
|
|
|
}
|
|
|
-.map-control{
|
|
|
- float: left;
|
|
|
- width: 270px;
|
|
|
+.map-control {
|
|
|
+ float: left;
|
|
|
+ width: 270px;
|
|
|
}
|
|
|
.driving_information {
|
|
|
- height: 40px;
|
|
|
- width: 240px;
|
|
|
- float: left;
|
|
|
- top: 0px;
|
|
|
+ height: 40px;
|
|
|
+ width: 240px;
|
|
|
+ float: left;
|
|
|
+ top: 0px;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
luobang