|
|
@@ -1,735 +1,839 @@
|
|
|
<template>
|
|
|
- <div class="container">
|
|
|
- <div id="amap-container"></div>
|
|
|
- <div class="mapcontroller">
|
|
|
- <div class="in_transit_information">
|
|
|
- <label class="item_details">起点:{{startPointName}}</label>
|
|
|
- <br/>
|
|
|
- <label class="item_details">收货地址:{{endPointName}}</label>
|
|
|
- <br/>
|
|
|
- </div>
|
|
|
- <div class="driving_information2">
|
|
|
- <label class="item_details">时间:{{runRoute.gtm}}</label>
|
|
|
- <br/>
|
|
|
- <label class="item_details">车速:{{runRoute.spd}}千米/小时</label>
|
|
|
- <br/>
|
|
|
- <br/>
|
|
|
- <!--控制条-->
|
|
|
- <div class="map-control" v-show="isActual">
|
|
|
- <!--播放暂停按钮-->
|
|
|
- <Icon v-if="!isPlay" class="play-icon play" type="ios-play" @click="isPlay=true;play();navgControl(playIcon)"/>
|
|
|
- <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="addIndex()"/>
|
|
|
- <!--已播放时间-->
|
|
|
- <!--进度条-->
|
|
|
- <div class="mySlider"><Slider class="map-slider" v-model="sliderVal" :tip-format="hideFormat" :step="0.0001"></Slider></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <el-row>
|
|
|
- <el-button type="primary" @click="slow">慢速</el-button>
|
|
|
- <el-button type="success" @click="middle">中速</el-button>
|
|
|
- <el-button type="danger" @click="fast">快速</el-button>
|
|
|
- <el-button type="success" @click="addIndex" plain>快进</el-button>
|
|
|
- <el-button type="danger" @click="stop" plain>暂停</el-button>
|
|
|
- <el-button type="success" @click="play" plain>开始</el-button>
|
|
|
- <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>
|
|
|
- <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>
|
|
|
- </el-row>
|
|
|
-
|
|
|
+ <div class="container">
|
|
|
+ <div id="amap-container"></div>
|
|
|
+ <div class="mapcontroller">
|
|
|
+ <div class="in_transit_information">
|
|
|
+ <label class="item_details">起点:{{ startPointName }}</label>
|
|
|
+ <br />
|
|
|
+ <label class="item_details">收货地址:{{ endPointName }}</label>
|
|
|
+ <br />
|
|
|
+ </div>
|
|
|
+ <div class="driving_information2">
|
|
|
+ <label class="item_details">时间:{{ runRoute.gtm }}</label>
|
|
|
+ <br />
|
|
|
+ <label class="item_details">车速:{{ runRoute.spd }}千米/小时</label>
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <!--控制条-->
|
|
|
+ <div class="map-control" v-show="isActual">
|
|
|
+ <!--播放暂停按钮-->
|
|
|
+ <Icon
|
|
|
+ v-if="!isPlay"
|
|
|
+ class="play-icon play"
|
|
|
+ type="ios-play"
|
|
|
+ @click="
|
|
|
+ isPlay = true;
|
|
|
+ play();
|
|
|
+ navgControl(playIcon);
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <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="addIndex()" />
|
|
|
+ <!--已播放时间-->
|
|
|
+ <!--进度条-->
|
|
|
+ <div class="mySlider">
|
|
|
+ <Slider
|
|
|
+ class="map-slider"
|
|
|
+ v-model="sliderVal"
|
|
|
+ :tip-format="hideFormat"
|
|
|
+ :step="0.0001"
|
|
|
+ ></Slider>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-row>
|
|
|
+ <el-button type="primary" @click="slow">慢速</el-button>
|
|
|
+ <el-button type="success" @click="middle">中速</el-button>
|
|
|
+ <el-button type="danger" @click="fast">快速</el-button>
|
|
|
+ <el-button type="success" @click="addIndex" plain>快进</el-button>
|
|
|
+ <el-button type="danger" @click="stop" plain>暂停</el-button>
|
|
|
+ <el-button type="success" @click="play" plain>开始</el-button>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ </el-row>
|
|
|
+ <div class="btnx">
|
|
|
+ <el-button type="primary" class="" @click="openInfo"
|
|
|
+ >打开信息窗体</el-button
|
|
|
+ >
|
|
|
+ <el-button type="primary" class="" @click="closeinfo"
|
|
|
+ >关闭信息窗口</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import AMapLoader from '@amap/amap-jsapi-loader';
|
|
|
-import { shallowRef } from '@vue/reactivity'
|
|
|
-import { Loading } from 'element-ui';
|
|
|
-import { lazyAMapApiLoaderInstance } from 'vue-amap';
|
|
|
-import Slider from './slider.vue'
|
|
|
-Vue.use(Slider)
|
|
|
+import AMapLoader from "@amap/amap-jsapi-loader";
|
|
|
+import { shallowRef } from "@vue/reactivity";
|
|
|
+import { Loading } from "element-ui";
|
|
|
+import { lazyAMapApiLoaderInstance } from "vue-amap";
|
|
|
+import Slider from "./slider.vue";
|
|
|
+Vue.use(Slider);
|
|
|
import AMapJS from "amap-js";
|
|
|
-import Vue from 'vue';
|
|
|
+import Vue from "vue";
|
|
|
+var infoWindow;
|
|
|
export default {
|
|
|
- name: "PathView",
|
|
|
- props:{
|
|
|
- orderNumber:'',
|
|
|
- capacityNumber:'',
|
|
|
- startPointName:'',
|
|
|
- endPointName:'',
|
|
|
- startTime:'',
|
|
|
- endTime:'',
|
|
|
- },
|
|
|
- setup(){
|
|
|
- const map = shallowRef(null);
|
|
|
- return{
|
|
|
- map,
|
|
|
- }
|
|
|
- },
|
|
|
- watch:{
|
|
|
- //监听车牌号变化
|
|
|
- orderNumber:{
|
|
|
- deep: true,
|
|
|
- handler(val, oldVal) {
|
|
|
- console.log(val)
|
|
|
- this.initData(val);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- ///che
|
|
|
- isTimesChoose:false,
|
|
|
- isActual:true,
|
|
|
- isPlay:false,
|
|
|
- passedTime:"12:02:10",
|
|
|
- sliderVal:0,
|
|
|
- times:1,
|
|
|
- totalTime:"11",
|
|
|
- speed:10000,
|
|
|
- //选择停车时长
|
|
|
- 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分钟"
|
|
|
- },
|
|
|
- {
|
|
|
- value: 36000000,
|
|
|
- label: "关闭"
|
|
|
- }
|
|
|
- ],
|
|
|
- //离线图标
|
|
|
- leaveMark: [],
|
|
|
- //停车图标
|
|
|
- parkMark: [],
|
|
|
- //选择离线时长
|
|
|
- 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分钟"
|
|
|
- },
|
|
|
- {
|
|
|
- value: 36000000,
|
|
|
- label: "关闭"
|
|
|
- }
|
|
|
- ],
|
|
|
- //已行驶轨迹
|
|
|
- runRoute:
|
|
|
- {
|
|
|
- agl: "",
|
|
|
- gtm: "",
|
|
|
- hgt: "",
|
|
|
- lat: "",
|
|
|
- lon: "",
|
|
|
- mil: "",
|
|
|
- spd: ""
|
|
|
- },
|
|
|
- point:"",
|
|
|
- pointNext:"",
|
|
|
- loading : null,
|
|
|
- navgtrSpeed:1,
|
|
|
- //地图中心位置
|
|
|
- centerPoint:{
|
|
|
- pointLat:"",
|
|
|
- pointLon:""
|
|
|
- },
|
|
|
- //自定义窗体信息
|
|
|
- ctmarkes:{
|
|
|
- lat:"33.015888071433764",
|
|
|
- lon : "115.96995235868168",
|
|
|
- title:"豫SE8888",
|
|
|
- details:"安徽省阜阳市颍东区阜阳舜岳水泥公司,西北方向,155.1米"
|
|
|
- },
|
|
|
- //运输详情
|
|
|
- transportDetail:{
|
|
|
- //车牌号
|
|
|
- capacityNumber:'',
|
|
|
- //规划路线
|
|
|
- estimateRoute:[
|
|
|
- {
|
|
|
- lat:"33.015888071433764",
|
|
|
- lon : "115.96995235868168"
|
|
|
- }
|
|
|
- ],
|
|
|
- //规划线路
|
|
|
- estimatePath:[
|
|
|
- [
|
|
|
- 114.03046212985384,
|
|
|
- 32.49786984660489
|
|
|
- ],
|
|
|
-
|
|
|
- ],
|
|
|
- //已行驶轨迹
|
|
|
- runRoute:[
|
|
|
- {
|
|
|
- agl: "44",
|
|
|
- gtm: "2022年03月09日 16:47:24",
|
|
|
- hgt: "13",
|
|
|
- lat: "32.906411535084985",
|
|
|
- lon: "115.76177868692135",
|
|
|
- mil: "429409.2",
|
|
|
- spd: "17.0"
|
|
|
- },
|
|
|
- ],
|
|
|
- runPath: [
|
|
|
- [
|
|
|
- 114.03922119568348,
|
|
|
- 32.49746162481379
|
|
|
- ],
|
|
|
- ],
|
|
|
- //当前位置
|
|
|
- currentPointName:"中国达州市通川区",
|
|
|
- //当前位置经纬度
|
|
|
- currentPoint:{
|
|
|
- lat:"",
|
|
|
- lon:""
|
|
|
- },
|
|
|
- //起点位置
|
|
|
- startPointName:"中国达州市通川区",
|
|
|
- //起点位置经纬度
|
|
|
- startPoint:{
|
|
|
- lon:"114.03922119568348",
|
|
|
- lat:"32.49746162481379"
|
|
|
- },
|
|
|
- //终点位置
|
|
|
- endPointName:"中国成都萧山",
|
|
|
- //终点位置经纬度
|
|
|
- endPoint:{
|
|
|
- lon:"115.96995737755431",
|
|
|
- lat:"33.01595479752097"
|
|
|
- },
|
|
|
- //自定义标记
|
|
|
- content:[],
|
|
|
- //异常位置
|
|
|
- abnormalLocation:[],
|
|
|
-
|
|
|
- },
|
|
|
- listPath:[
|
|
|
-
|
|
|
- ],
|
|
|
- //组件
|
|
|
- pathSimplifierIns:{},
|
|
|
- pathNavigator:{},
|
|
|
- //地图解析
|
|
|
- geocoder:null,
|
|
|
- currentPointName:""
|
|
|
- };
|
|
|
- },
|
|
|
- created(){
|
|
|
- let that=this;
|
|
|
- that.initData(that.orderNumber)
|
|
|
- },
|
|
|
- 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/park.png"),
|
|
|
- calculationPoint.lon,
|
|
|
- calculationPoint.lat,
|
|
|
- message.split(".")[0] + "分钟"
|
|
|
- );
|
|
|
- }
|
|
|
- calculationPoint = null;
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
+ name: "PathView",
|
|
|
+ props: {
|
|
|
+ orderNumber: "",
|
|
|
+ capacityNumber: "",
|
|
|
+ startPointName: "",
|
|
|
+ endPointName: "",
|
|
|
+ startTime: "",
|
|
|
+ endTime: ""
|
|
|
+ },
|
|
|
+ setup() {
|
|
|
+ const map = shallowRef(null);
|
|
|
+ return {
|
|
|
+ map
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ //监听车牌号变化
|
|
|
+ orderNumber: {
|
|
|
+ deep: true,
|
|
|
+ handler(val, oldVal) {
|
|
|
+ console.log(val);
|
|
|
+ this.initData(val);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ ///che
|
|
|
+ isTimesChoose: false,
|
|
|
+ isActual: true,
|
|
|
+ isPlay: false,
|
|
|
+ passedTime: "12:02:10",
|
|
|
+ sliderVal: 0,
|
|
|
+ times: 1,
|
|
|
+ totalTime: "11",
|
|
|
+ speed: 10000,
|
|
|
+ //选择停车时长
|
|
|
+ parkingTime: null,
|
|
|
+ //停车时长选择区间
|
|
|
+ parkingOptions: [
|
|
|
+ {
|
|
|
+ value: 600000,
|
|
|
+ label: "10分钟"
|
|
|
},
|
|
|
- //字符串转为Date
|
|
|
- stringToDate(dateString) {
|
|
|
- console.log(dateString)
|
|
|
- let dateStr = dateString.replace("年", "-").replace("月", "-").replace("日", "");
|
|
|
- return Date.parse(dateStr);
|
|
|
-
|
|
|
-
|
|
|
+ {
|
|
|
+ value: 1200000,
|
|
|
+ label: "20分钟"
|
|
|
},
|
|
|
- //停车所有离线图标
|
|
|
- hideParkingMark() {
|
|
|
- let that = this;
|
|
|
-
|
|
|
- that.parkMark.forEach(function(item, indexOf) {
|
|
|
- item.hide();
|
|
|
- });
|
|
|
+ {
|
|
|
+ value: 1800000,
|
|
|
+ label: "30分钟"
|
|
|
},
|
|
|
- //离线时间改变时获得超过时间的点信息
|
|
|
- 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/leave.png"),
|
|
|
- item2.lon,
|
|
|
- item2.lat,
|
|
|
- message.split(".")[0] + "分钟"
|
|
|
- );
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
+ {
|
|
|
+ value: 2400000,
|
|
|
+ label: "40分钟"
|
|
|
},
|
|
|
- //关闭所有离线图标
|
|
|
- hideLeaveMark() {
|
|
|
- let that = this;
|
|
|
- that.leaveMark.forEach(function(item, indexOf) {
|
|
|
- item.hide();
|
|
|
- });
|
|
|
+ {
|
|
|
+ value: 3000000,
|
|
|
+ label: "50分钟"
|
|
|
},
|
|
|
- slow(){
|
|
|
- console.log("slow")
|
|
|
- let that=this;
|
|
|
- that.pathNavigator.setSpeed(1000);
|
|
|
+ {
|
|
|
+ value: 3600000,
|
|
|
+ label: "60分钟"
|
|
|
},
|
|
|
- middle(){
|
|
|
- console.log("middle")
|
|
|
- let that=this;
|
|
|
- that.pathNavigator.setSpeed(10000);
|
|
|
+ {
|
|
|
+ value: 36000000,
|
|
|
+ label: "关闭"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ //离线图标
|
|
|
+ leaveMark: [],
|
|
|
+ //停车图标
|
|
|
+ parkMark: [],
|
|
|
+ //选择离线时长
|
|
|
+ leaveTime: null,
|
|
|
+ //离线时长选择区间
|
|
|
+ leaveOptions: [
|
|
|
+ {
|
|
|
+ value: 600000,
|
|
|
+ label: "10分钟"
|
|
|
},
|
|
|
- fast(){
|
|
|
- console.log("fast")
|
|
|
- let that=this;
|
|
|
- that.pathNavigator.setSpeed(100000);
|
|
|
+ {
|
|
|
+ value: 1200000,
|
|
|
+ label: "20分钟"
|
|
|
},
|
|
|
- play(){
|
|
|
- let that =this;
|
|
|
- that.pathNavigator.resume();
|
|
|
+ {
|
|
|
+ value: 1800000,
|
|
|
+ label: "30分钟"
|
|
|
},
|
|
|
- stop(){
|
|
|
- let that =this;
|
|
|
- that.pathNavigator.pause();
|
|
|
+ {
|
|
|
+ value: 2400000,
|
|
|
+ label: "40分钟"
|
|
|
},
|
|
|
- addIndex(){
|
|
|
-
|
|
|
- let that =this;
|
|
|
- let increment=(that.listPath[0].runPath.length*0.1)
|
|
|
- that.pathNavigator.start(((that.point+increment)%that.listPath[0].runPath.length))
|
|
|
+ {
|
|
|
+ value: 3000000,
|
|
|
+ label: "50分钟"
|
|
|
},
|
|
|
- ///che
|
|
|
- navgControl(){
|
|
|
-
|
|
|
+ {
|
|
|
+ value: 3600000,
|
|
|
+ label: "60分钟"
|
|
|
},
|
|
|
- hideFormat(value){
|
|
|
- let that=this;
|
|
|
- that.sliderVal=value;
|
|
|
+ {
|
|
|
+ value: 36000000,
|
|
|
+ label: "关闭"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ //已行驶轨迹
|
|
|
+ runRoute: {
|
|
|
+ agl: "",
|
|
|
+ gtm: "",
|
|
|
+ hgt: "",
|
|
|
+ lat: "",
|
|
|
+ lon: "",
|
|
|
+ mil: "",
|
|
|
+ spd: ""
|
|
|
+ },
|
|
|
+ point: "",
|
|
|
+ pointNext: "",
|
|
|
+ loading: null,
|
|
|
+ navgtrSpeed: 1,
|
|
|
+ //地图中心位置
|
|
|
+ centerPoint: {
|
|
|
+ pointLat: "",
|
|
|
+ pointLon: ""
|
|
|
+ },
|
|
|
+ //自定义窗体信息
|
|
|
+ ctmarkes: {
|
|
|
+ lat: "33.015888071433764",
|
|
|
+ lon: "115.96995235868168",
|
|
|
+ title: "豫SE8888",
|
|
|
+ details: "安徽省阜阳市颍东区阜阳舜岳水泥公司,西北方向,155.1米"
|
|
|
+ },
|
|
|
+ //运输详情
|
|
|
+ transportDetail: {
|
|
|
+ //车牌号
|
|
|
+ capacityNumber: "",
|
|
|
+ //规划路线
|
|
|
+ estimateRoute: [
|
|
|
+ {
|
|
|
+ lat: "33.015888071433764",
|
|
|
+ lon: "115.96995235868168"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ //规划线路
|
|
|
+ estimatePath: [[114.03046212985384, 32.49786984660489]],
|
|
|
+ //已行驶轨迹
|
|
|
+ runRoute: [
|
|
|
+ {
|
|
|
+ agl: "44",
|
|
|
+ gtm: "2022年03月09日 16:47:24",
|
|
|
+ hgt: "13",
|
|
|
+ lat: "32.906411535084985",
|
|
|
+ lon: "115.76177868692135",
|
|
|
+ mil: "429409.2",
|
|
|
+ spd: "17.0"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ runPath: [[114.03922119568348, 32.49746162481379]],
|
|
|
+ //当前位置
|
|
|
+ currentPointName: "中国达州市通川区",
|
|
|
+ //当前位置经纬度
|
|
|
+ currentPoint: {
|
|
|
+ lat: "",
|
|
|
+ lon: ""
|
|
|
},
|
|
|
- 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);
|
|
|
+ //起点位置
|
|
|
+ startPointName: "中国达州市通川区",
|
|
|
+ //起点位置经纬度
|
|
|
+ startPoint: {
|
|
|
+ lon: "114.03922119568348",
|
|
|
+ lat: "32.49746162481379"
|
|
|
},
|
|
|
- //创建离线和停车的标记
|
|
|
- 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) // 根据所设置的大小拉伸或压缩图片
|
|
|
+ //终点位置
|
|
|
+ endPointName: "中国成都萧山",
|
|
|
+ //终点位置经纬度
|
|
|
+ endPoint: {
|
|
|
+ lon: "115.96995737755431",
|
|
|
+ lat: "33.01595479752097"
|
|
|
+ },
|
|
|
+ //自定义标记
|
|
|
+ content: [],
|
|
|
+ //异常位置
|
|
|
+ abnormalLocation: []
|
|
|
+ },
|
|
|
+ listPath: [],
|
|
|
+ //组件
|
|
|
+ pathSimplifierIns: {},
|
|
|
+ pathNavigator: {},
|
|
|
+ //地图解析
|
|
|
+ geocoder: null,
|
|
|
+ currentPointName: ""
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ let that = this;
|
|
|
+ that.initData(that.orderNumber);
|
|
|
+ },
|
|
|
+ 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/park.png"),
|
|
|
+ calculationPoint.lon,
|
|
|
+ calculationPoint.lat,
|
|
|
+ message.split(".")[0] + "分钟"
|
|
|
+ );
|
|
|
+ }
|
|
|
+ calculationPoint = null;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //字符串转为Date
|
|
|
+ stringToDate(dateString) {
|
|
|
+ console.log(dateString);
|
|
|
+ let dateStr = dateString
|
|
|
+ .replace("年", "-")
|
|
|
+ .replace("月", "-")
|
|
|
+ .replace("日", "");
|
|
|
+ return Date.parse(dateStr);
|
|
|
+ },
|
|
|
+ //停车所有离线图标
|
|
|
+ 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/leave.png"),
|
|
|
+ item2.lon,
|
|
|
+ item2.lat,
|
|
|
+ message.split(".")[0] + "分钟"
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //关闭所有离线图标
|
|
|
+ hideLeaveMark() {
|
|
|
+ let that = this;
|
|
|
+ that.leaveMark.forEach(function(item, indexOf) {
|
|
|
+ item.hide();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ slow() {
|
|
|
+ console.log("slow");
|
|
|
+ let that = this;
|
|
|
+ that.pathNavigator.setSpeed(1000);
|
|
|
+ },
|
|
|
+ middle() {
|
|
|
+ console.log("middle");
|
|
|
+ let that = this;
|
|
|
+ that.pathNavigator.setSpeed(10000);
|
|
|
+ },
|
|
|
+ fast() {
|
|
|
+ console.log("fast");
|
|
|
+ let that = this;
|
|
|
+ that.pathNavigator.setSpeed(100000);
|
|
|
+ },
|
|
|
+ play() {
|
|
|
+ let that = this;
|
|
|
+ that.pathNavigator.resume();
|
|
|
+ },
|
|
|
+ stop() {
|
|
|
+ let that = this;
|
|
|
+ that.pathNavigator.pause();
|
|
|
+ },
|
|
|
+ addIndex() {
|
|
|
+ let that = this;
|
|
|
+ let increment = that.listPath[0].runPath.length * 0.1;
|
|
|
+ that.pathNavigator.start(
|
|
|
+ (that.point + increment) % that.listPath[0].runPath.length
|
|
|
+ );
|
|
|
+ },
|
|
|
+ ///che
|
|
|
+ navgControl() {},
|
|
|
+ hideFormat(value) {
|
|
|
+ let that = this;
|
|
|
+ that.sliderVal = value;
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+ initData(orderNumber) {
|
|
|
+ let that = this;
|
|
|
+ that.axios
|
|
|
+ .post("/api/v1/otms/fullPath?orderNumber=" + orderNumber)
|
|
|
+ .then(res => {
|
|
|
+ console.log(res.data);
|
|
|
+ if (res.data.data == "-1") {
|
|
|
+ this.$message.error("自提车辆无权查看!");
|
|
|
+ } else if (res.data.data.startAndEndRoutes != null) {
|
|
|
+ that.listPath = res.data.data.startAndEndRoutes;
|
|
|
+ that.initMap();
|
|
|
+ } else {
|
|
|
+ that.listPath = [];
|
|
|
+ this.$message.error("车辆没有开启GPS");
|
|
|
+ }
|
|
|
});
|
|
|
- // 创建一个 Marker 实例：
|
|
|
- var pointmarker = new AMap.Marker({
|
|
|
- position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
- icon: pointicon,
|
|
|
- title: title
|
|
|
+ },
|
|
|
+ endline() {
|
|
|
+ let that = this;
|
|
|
+ that.initPolyline(that.listPath[0].estimatePath, "#FF0000");
|
|
|
+ },
|
|
|
+ //创建起点终点当前点
|
|
|
+ threeMarker() {
|
|
|
+ let that = this;
|
|
|
+ that.listPath.forEach((element, index) => {
|
|
|
+ //开始标记点
|
|
|
+ if (element.startPoint.lon != "" && element.startPoint.lat != "") {
|
|
|
+ that.initMarkes(
|
|
|
+ 20,
|
|
|
+ 35,
|
|
|
+ require("@/assets/img/start.png"),
|
|
|
+ element.startPoint.lon,
|
|
|
+ element.startPoint.lat,
|
|
|
+ "起点"
|
|
|
+ );
|
|
|
+ }
|
|
|
+ //当前点
|
|
|
+ that.getCurrentPointName([
|
|
|
+ element.runRoute[element.runRoute.length - 1].lon,
|
|
|
+ element.runRoute[element.runRoute.length - 1].lat
|
|
|
+ ]);
|
|
|
+ //结束标记点
|
|
|
+ if (element.endPoint.lon != "" && element.endPoint.lat != "") {
|
|
|
+ that.initMarkes(
|
|
|
+ 20,
|
|
|
+ 35,
|
|
|
+ require("@/assets/img/end.png"),
|
|
|
+ element.endPoint.lon,
|
|
|
+ element.endPoint.lat,
|
|
|
+ "终点"
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获得结束地址
|
|
|
+ getCurrentPointName(lnglatXY) {
|
|
|
+ let that = this;
|
|
|
+ that.geocoder.getAddress(lnglatXY, function(status, result) {
|
|
|
+ if (status === "complete" && result.info === "OK") {
|
|
|
+ that.currentPointName = result.regeocode.formattedAddress;
|
|
|
+ that.initCustomMarkes(
|
|
|
+ that.capacityNumber,
|
|
|
+ "位置：" +
|
|
|
+ that.currentPointName +
|
|
|
+ "<br/>" +
|
|
|
+ "距离：" +
|
|
|
+ that.listPath[0].miled,
|
|
|
+ lnglatXY[0],
|
|
|
+ lnglatXY[1]
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //defualt数据
|
|
|
+ defaultDate() {
|
|
|
+ // let that=this;
|
|
|
+ // that.pathNavigator.start(that.listPath[0].runPath.length)
|
|
|
+ // that.pathNavigator.pause();
|
|
|
+ },
|
|
|
+ //初始化地图
|
|
|
+ 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.leaveMark.push(pointmarker);
|
|
|
- // 将创建的点标记添加到已有的地图实例：
|
|
|
- that.map.add(pointmarker);
|
|
|
- },
|
|
|
- initData(orderNumber){
|
|
|
- let that=this;
|
|
|
- that.axios.post("/api/v1/otms/fullPath?orderNumber="+orderNumber).then((res) => {
|
|
|
- console.log(res.data)
|
|
|
- if(res.data.data=='-1'){
|
|
|
- this.$message.error('自提车辆无权查看!');
|
|
|
- }else if(res.data.data.startAndEndRoutes!=null){
|
|
|
- that.listPath=res.data.data.startAndEndRoutes
|
|
|
- that.initMap();
|
|
|
- }else{
|
|
|
- that.listPath=[];
|
|
|
- this.$message.error('车辆没有开启GPS');
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- endline(){
|
|
|
- let that=this;
|
|
|
- that.initPolyline(that.listPath[0].estimatePath,"#FF0000");
|
|
|
- },
|
|
|
- //创建起点终点当前点
|
|
|
- threeMarker(){
|
|
|
- let that=this;
|
|
|
- that.listPath.forEach((element,index) => {
|
|
|
- //开始标记点
|
|
|
- if(element.startPoint.lon!=''&&element.startPoint.lat!=''){
|
|
|
- that.initMarkes(20,35,require('@/assets/img/start.png'),element.startPoint.lon,element.startPoint.lat,'起点');
|
|
|
- }
|
|
|
- //当前点
|
|
|
- that.getCurrentPointName([element.runRoute[element.runRoute.length-1].lon,element.runRoute[element.runRoute.length-1].lat])
|
|
|
- //结束标记点
|
|
|
- if(element.endPoint.lon!=''&&element.endPoint.lat!=''){
|
|
|
- that.initMarkes(20,35,require('@/assets/img/end.png'),element.endPoint.lon,element.endPoint.lat,'终点');
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- //获得结束地址
|
|
|
- getCurrentPointName(lnglatXY){
|
|
|
- let that=this;
|
|
|
- that.geocoder.getAddress(lnglatXY, function(status, result) {
|
|
|
- if (status === 'complete' && result.info === 'OK') {
|
|
|
- that.currentPointName = result.regeocode.formattedAddress;
|
|
|
- that.initCustomMarkes(that.capacityNumber,"位置："+that.currentPointName+"<br/>"+"距离："+that.listPath[0].miled,lnglatXY[0],lnglatXY[1])
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- //defualt数据
|
|
|
- defaultDate(){
|
|
|
- // let that=this;
|
|
|
- // that.pathNavigator.start(that.listPath[0].runPath.length)
|
|
|
- // that.pathNavigator.pause();
|
|
|
-
|
|
|
- },
|
|
|
- //初始化地图
|
|
|
- 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.threeMarker();
|
|
|
- //that.initCustomMarkes(that.capacityNumber+"("+that.listPath[0].miled+")",that.listPath[0].currentPointName,that.listPath[0].currentPoint.lon,that.listPath[0].currentPoint.lat)
|
|
|
- that.endline();
|
|
|
-
|
|
|
- });
|
|
|
- },
|
|
|
- initCustomMarkes(title,details,lon,lat){
|
|
|
- let that=this;
|
|
|
- //自定义窗体内容
|
|
|
- var content = [
|
|
|
- "<div style='top:1px;width: 180px; background-color: rgba(22, 160, 133, 1);' ><font color='white'>"+title+"</font>",
|
|
|
- "<div style='background-color:(22, 160, 133, 1); ;'><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 ]])
|
|
|
- },
|
|
|
- //创建简单的标记
|
|
|
- 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);
|
|
|
- },
|
|
|
+ that.initGeocoder();
|
|
|
+ that.initPathSimplifier();
|
|
|
+ that.threeMarker();
|
|
|
+ //that.initCustomMarkes(that.capacityNumber+"("+that.listPath[0].miled+")",that.listPath[0].currentPointName,that.listPath[0].currentPoint.lon,that.listPath[0].currentPoint.lat)
|
|
|
+ that.endline();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ initCustomMarkes(title, details, lon, lat) {
|
|
|
+ let that = this;
|
|
|
+ //自定义窗体内容
|
|
|
+ var content = [
|
|
|
+ "<div style='top:1px;width: 180px; background-color: rgba(22, 160, 133, 1);' ><font color='white'>" +
|
|
|
+ title +
|
|
|
+ "</font>",
|
|
|
+ "<div style='background-color:(22, 160, 133, 1); ;'><font color='white'>" +
|
|
|
+ details +
|
|
|
+ "</font></div></div>"
|
|
|
+ ];
|
|
|
+ // 创建 infoWindow 实例
|
|
|
+ infoWindow = new AMap.InfoWindow({
|
|
|
+ content: content.join("<br>") //传入 dom 对象，或者 html 字符串
|
|
|
+ });
|
|
|
+ // 打开信息窗体
|
|
|
+ infoWindow.open(that.map, [lon, lat]);
|
|
|
+ },
|
|
|
+ // 关闭信息窗口
|
|
|
+ closeinfo() {
|
|
|
+ infoWindow.close();
|
|
|
+ },
|
|
|
+ openInfo() {
|
|
|
+ let lon = null;
|
|
|
+ let lat = null;
|
|
|
+ console.log(this.listPath);
|
|
|
+ this.listPath.forEach(e => {
|
|
|
+ if (e.endPoint != {} && e.endPoint != "" && e.endPoint != null) {
|
|
|
+ lon = e.endPoint.lon;
|
|
|
+ lat = e.endPoint.lat;
|
|
|
+ } else {
|
|
|
+ lon = e.runRoute[e.runRoute.length - 1].lon;
|
|
|
+ lat = e.runRoute[e.runRoute.length - 1].lat;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ infoWindow.open(this.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]]);
|
|
|
+ },
|
|
|
+ //创建简单的标记
|
|
|
+ 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;
|
|
|
+ }
|
|
|
//创建轨迹和巡航器
|
|
|
- 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.defaultDate();
|
|
|
-
|
|
|
- //开始事件
|
|
|
- that.pathNavigator.on("start resume", function() {
|
|
|
- // that.navgtr._startTime = Date.now();
|
|
|
- // that.navgtr._startDist = this.getMovedDistance();
|
|
|
- });
|
|
|
- //暂停
|
|
|
- that.pathNavigator.on("stop pause", function() {
|
|
|
- // that.navgtr._movedTime = Date.now() - that.navgtr._startTime;
|
|
|
- // that.navgtr._movedDist = this.getMovedDistance() - that.navgtr._startDist;
|
|
|
- });
|
|
|
- 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;
|
|
|
- },
|
|
|
- changeSpeed(value){
|
|
|
- // console.log(value)
|
|
|
- // let that=this;
|
|
|
- // that.times=value;
|
|
|
-
|
|
|
- },
|
|
|
- playIcon(){
|
|
|
- console.log("nihoa")
|
|
|
- },
|
|
|
- //逆解码函数
|
|
|
- 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)
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
+ // 创建组件实例
|
|
|
+ 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.defaultDate();
|
|
|
+
|
|
|
+ //开始事件
|
|
|
+ that.pathNavigator.on("start resume", function() {
|
|
|
+ // that.navgtr._startTime = Date.now();
|
|
|
+ // that.navgtr._startDist = this.getMovedDistance();
|
|
|
+ });
|
|
|
+ //暂停
|
|
|
+ that.pathNavigator.on("stop pause", function() {
|
|
|
+ // that.navgtr._movedTime = Date.now() - that.navgtr._startTime;
|
|
|
+ // that.navgtr._movedDist = this.getMovedDistance() - that.navgtr._startDist;
|
|
|
+ });
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+ changeSpeed(value) {
|
|
|
+ // console.log(value)
|
|
|
+ // let that=this;
|
|
|
+ // that.times=value;
|
|
|
+ },
|
|
|
+ playIcon() {
|
|
|
+ console.log("nihoa");
|
|
|
+ },
|
|
|
+ //逆解码函数
|
|
|
+ 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);
|
|
|
+ });
|
|
|
}
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
<style>
|
|
|
-.mapcontroller{
|
|
|
- width: 250px; height: 260px;
|
|
|
- background: white;
|
|
|
- position: absolute;z-index:99;top:0;left:0
|
|
|
+.mapcontroller {
|
|
|
+ width: 250px;
|
|
|
+ height: 260px;
|
|
|
+ background: white;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 99;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
}
|
|
|
-.container{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
+.container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
.item_details {
|
|
|
- display: block;
|
|
|
- margin-top: 20px;
|
|
|
- position: relative;
|
|
|
- left: 30px;
|
|
|
- width: 200px;
|
|
|
- height: 0px;
|
|
|
+ display: block;
|
|
|
+ margin-top: 20px;
|
|
|
+ position: relative;
|
|
|
+ left: 30px;
|
|
|
+ width: 200px;
|
|
|
+ height: 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: "微软雅黑";
|
|
|
}
|
|
|
.driving_information2 {
|
|
|
- position: relative;
|
|
|
- top: 70px;
|
|
|
+ position: relative;
|
|
|
+ top: 70px;
|
|
|
}
|
|
|
.driving_information3 {
|
|
|
- position: absolute;z-index:99;top:0;left:0;
|
|
|
- position: relative;
|
|
|
- top: 50px;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 99;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ position: relative;
|
|
|
+ top: 50px;
|
|
|
}
|
|
|
|
|
|
/* 进度条 */
|
|
|
.mySlider {
|
|
|
-
|
|
|
- width: 150px;
|
|
|
- height: 20px;
|
|
|
- display: inline-block;
|
|
|
- position: relative;
|
|
|
- left: 32px;
|
|
|
+ width: 150px;
|
|
|
+ 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;
|
|
|
- background-color: red;
|
|
|
- width: 40px;
|
|
|
+ position: relative;
|
|
|
+ background-color: red;
|
|
|
+ width: 40px;
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-</style>
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.btnx {
|
|
|
+ z-index: 1000;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 10px;
|
|
|
+ right: 10px;
|
|
|
+}
|
|
|
+</style>
|
luobang
