IM 聊天记录
This commit is contained in:
@@ -2,6 +2,16 @@
|
||||
<div id="content">
|
||||
<div id="map" ref="map" style="width: 100vw; height: 100vh"/>
|
||||
<div id="overlay-box"/>
|
||||
|
||||
<div class="timeSelectBox" v-if="page=='planningPath'">
|
||||
<div class="timeSelectBoxItem">
|
||||
<van-button :type="routeType=='car'?'primary':'default'" @click="routeType='car'">驾 车</van-button>
|
||||
</div>
|
||||
<div class="timeSelectBoxItem">
|
||||
<van-button :type="routeType=='foot'?'primary':'default'" @click="routeType='foot'">步行骑行</van-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="addAlarmPoint" v-if="page=='addAlarmPoint'">
|
||||
<div class="addAlarmPointNext" @click="addAlarmPointNextAction">下一步</div>
|
||||
</div>
|
||||
@@ -78,6 +88,12 @@ export default {
|
||||
geometryMove: {},
|
||||
featureMove: {},
|
||||
styles: {
|
||||
routeFoot: new Style({
|
||||
stroke: new Stroke({
|
||||
width: 6,
|
||||
color: "#07FA66",
|
||||
}),
|
||||
}),
|
||||
route: new Style({
|
||||
stroke: new Stroke({
|
||||
width: 6,
|
||||
@@ -127,7 +143,8 @@ export default {
|
||||
planningVectorLayer: {},
|
||||
parentPostMessageData: [],
|
||||
isCanDraw: true,
|
||||
from: ""
|
||||
from: "",
|
||||
routeType: "car",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@@ -271,8 +288,6 @@ export default {
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// 切片方案（0-18级
|
||||
const projection = getProjection('EPSG:3857');
|
||||
const projectionExtent = projection.getExtent();
|
||||
@@ -373,6 +388,95 @@ export default {
|
||||
this.addPoints(e.coordinate);
|
||||
}
|
||||
});
|
||||
},
|
||||
planningPathFoot() {
|
||||
const startPoint = ol.proj.transform(this.navigationStartPoint, 'EPSG:4326', 'EPSG:3857');
|
||||
const endPoint = ol.proj.transform(this.navigationEndPoint, 'EPSG:4326', 'EPSG:3857');
|
||||
let _url = "https://172.16.3.19/route/v1/driving/"
|
||||
_url = _url + this.navigationStartPoint[0] + ","
|
||||
_url = _url + this.navigationStartPoint[1] + ";"
|
||||
_url = _url + this.navigationEndPoint[0] + ","
|
||||
_url = _url + this.navigationEndPoint[1]
|
||||
_url = _url + "?" + "overview=false&alternatives=true&steps=true";
|
||||
|
||||
|
||||
axios({
|
||||
method: "get",
|
||||
url: _url,
|
||||
headers: {
|
||||
'Content-Type': 'application/json;charset=utf-8'
|
||||
},
|
||||
}).then(res => {
|
||||
console.log("================================获取到了导航结果")
|
||||
|
||||
res=res.data;
|
||||
|
||||
/*
|
||||
console.log(res)
|
||||
if (res.code != "OK") {
|
||||
return false;
|
||||
}else {
|
||||
console.log("================================获取到了导航结果,开始步行导航")
|
||||
}
|
||||
*/
|
||||
let pathList = [startPoint];
|
||||
|
||||
const steps=res.routes[0].legs[0].steps
|
||||
|
||||
steps.map(item0=>{
|
||||
item0.intersections.map(item1=>{
|
||||
const _point = ol.proj.transform(item1.location,'EPSG:4326', 'EPSG:3857');
|
||||
pathList.push(_point)
|
||||
})
|
||||
})
|
||||
|
||||
// let _list=res.route[0].legs[0].steps[0].intersections
|
||||
//
|
||||
// _list.map((item, index) => {
|
||||
//
|
||||
// })
|
||||
pathList.push(endPoint)
|
||||
console.log("==============================pathList")
|
||||
console.log(pathList)
|
||||
|
||||
const route = new LineString(pathList)
|
||||
|
||||
const geometryMove = new Point(route.getFirstCoordinate());
|
||||
|
||||
const featureMove = new Feature({
|
||||
type: "featureMove",
|
||||
geometry: geometryMove,
|
||||
});
|
||||
// this.planningVectorLayer.set('id', 'planningVectorLayer');
|
||||
//先清空 再清除
|
||||
this.map.removeLayer(this.planningVectorLayer)
|
||||
this.planningVectorLayer = new VectorLayer({
|
||||
source: new VectorSource({
|
||||
features: [
|
||||
new Feature({
|
||||
type: "routeFoot",
|
||||
geometry: route,
|
||||
}),
|
||||
featureMove,
|
||||
new Feature({
|
||||
type: "icon",
|
||||
geometry: new Point(route.getFirstCoordinate()),
|
||||
}),
|
||||
new Feature({
|
||||
type: "icon",
|
||||
geometry: new Point(route.getLastCoordinate()),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
style: (feature) => {
|
||||
return this.styles[feature.get("type")];
|
||||
},
|
||||
});
|
||||
|
||||
this.map.addLayer(this.planningVectorLayer)
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
planningPath() {
|
||||
|
||||
@@ -642,8 +746,8 @@ export default {
|
||||
let pointList = []
|
||||
|
||||
featureGeoJson.geometry.coordinates.map(item => {
|
||||
const _item1 = ol.proj.transform(item, 'EPSG:3857', 'EPSG:4326');
|
||||
pointList.push(_item1)
|
||||
const _item1 = ol.proj.transform(item, 'EPSG:3857', 'EPSG:4326');
|
||||
pointList.push(_item1)
|
||||
})
|
||||
|
||||
window.parent.postMessage(JSON.stringify(pointList), "*");
|
||||
@@ -914,7 +1018,12 @@ export default {
|
||||
this.navigationEndPoint = res.data.result.location.split(",")
|
||||
this.addPointWidthCoordinate(res.data.result.location, "alarm", res.data.result)
|
||||
setInterval(() => {
|
||||
this.planningPath()
|
||||
if (this.routeType == "car") {
|
||||
this.planningPath()
|
||||
}
|
||||
if (this.routeType == "foot") {
|
||||
this.planningPathFoot()
|
||||
}
|
||||
}, 2000)
|
||||
|
||||
}
|
||||
@@ -1189,4 +1298,21 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeSelectBox {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -187,7 +187,7 @@ export default {
|
||||
this.patrolInstanceId = this.$route.query.patrolInstanceId||getUrlParam("patrolInstanceId");
|
||||
this.equipmentId = this.$route.query.equipmentId||getUrlParam("equipmentId");
|
||||
this.moveUserId = this.$route.query.uerId||getUrlParam("uerId");
|
||||
this.busId = this.$route.query.uerId||getUrlParam("busId");
|
||||
this.busId = this.$route.query.busId||getUrlParam("busId");
|
||||
|
||||
this.token = getUrlParam("token")
|
||||
|
||||
@@ -1128,7 +1128,7 @@ export default {
|
||||
|
||||
service.get(`/middlegroundPeriodicWorkOrderInstance/queryById`, {
|
||||
params: {
|
||||
id: this.patrolInstanceId
|
||||
id: this.busId
|
||||
}
|
||||
}).then((res) => {
|
||||
if (res.status == 200) {
|
||||
|
||||
@@ -86,6 +86,9 @@ import {OL as ol} from "plot-ol/plottingol";
|
||||
import GeoJSON from 'ol/format/GeoJSON'
|
||||
import service from "@/utils/service";
|
||||
import {appInit, getStatisFileUrl,getUrlParam} from "../utils/publicFun";
|
||||
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
|
||||
import {get as getProjection} from 'ol/proj.js';
|
||||
import {getTopLeft, getWidth} from 'ol/extent.js';
|
||||
|
||||
|
||||
import dayjs from "dayjs"
|
||||
|
||||
Reference in New Issue
Block a user