<template>
|
<public-box class="campus-nav-box">
|
<template slot="public-box-header">
|
<div class="title">
|
<img class="icon deblurring" src="/img/icon/xndh.png" alt />
|
<span>校区内导航</span>
|
</div>
|
<img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
|
</template>
|
<template slot="public-box-content">
|
<div class="tab">
|
<ul>
|
<li @click="tabClick('步行')" :class="{ on: tabOneFlag }">
|
<i></i>
|
步行
|
</li>
|
<li @click="tabClick('驾车')" :class="{ on: tabTwoFlag }">
|
<i></i>
|
驾车
|
</li>
|
</ul>
|
</div>
|
<div class="container">
|
<div>
|
<div id="ToNameContainer">
|
<el-input
|
v-model="toNameText"
|
@input="toNameChange"
|
placeholder="起点……"
|
>
|
<template slot="prepend">
|
<i class="el-icon-location mydingwei" style="color: green"></i>
|
</template>
|
</el-input>
|
<div v-show="toNameShow" class="toname-value-box">
|
<ul>
|
<li
|
v-for="(item, index) in toNameList"
|
:key="index"
|
@click="originChange(item)"
|
>
|
{{ item.mechanismname }}
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div id="ComeNameContainer">
|
<el-input
|
v-model="comeNameText"
|
@input="comeNameChange"
|
placeholder="终点……"
|
>
|
<template slot="prepend">
|
<i class="el-icon-location mydingwei" style="color: red"></i>
|
</template>
|
</el-input>
|
<div v-show="comeNameShow" class="comename-value-box">
|
<ul>
|
<li
|
v-for="(item, index) in comeNameList"
|
:key="index"
|
@click="terminusChange(item)"
|
>
|
{{ item.mechanismname }}
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div>
|
<el-button @click="startNavigation" type="primary">导航</el-button>
|
</div>
|
</div>
|
</template>
|
</public-box>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex";
|
import { getSearchList } from "@/api/pc/public/search";
|
import axios from "axios";
|
export default {
|
name: "campusNav",
|
data() {
|
return {
|
tabOneFlag: true,
|
tabTwoFlag: false,
|
DC: null,
|
navigationWay: "步行",
|
routeLayer: null,
|
toNameText: "",
|
comeNameText: "",
|
toNameList: [],
|
comeNameList: [],
|
toNameShow: false,
|
comeNameShow: false,
|
|
overChouse: false,
|
butChouse: "",
|
startLayer: null,
|
endLayer: null,
|
|
isOverRouter: false, //是否启用了导航
|
};
|
},
|
computed: {
|
...mapGetters([
|
"viewer",
|
"twoOrThree",
|
// 起点
|
"startingPoint",
|
// 终点
|
"terminus",
|
// 出发名称
|
"getToName",
|
// 到达名称
|
"comeName",
|
// 点信息
|
"pointPosition",
|
"campusNavFlag",
|
]),
|
},
|
watch: {
|
getToName: {
|
immediate: true,
|
handler(newCode, oldCode) {
|
this.toNameText = newCode;
|
console.log(newCode, "see");
|
},
|
},
|
comeName: {
|
immediate: true,
|
handler(newCode, oldCode) {
|
this.comeNameText = newCode;
|
console.log(newCode, "see");
|
},
|
},
|
campusNavFlag: {
|
immediate: true,
|
handler(newCode, oldCode) {
|
if (newCode == false) {
|
this.navigationWay = "步行";
|
this.tabOneFlag = true;
|
this.tabTwoFlag = false;
|
}
|
},
|
},
|
},
|
created() {
|
this.DC = global.DC;
|
},
|
mounted() {
|
let leftBut = document.querySelectorAll(".el-input-group__prepend");
|
leftBut[0].onclick = () => {
|
this.chouseDian("start");
|
};
|
leftBut[1].onclick = () => {
|
this.chouseDian("end");
|
};
|
},
|
methods: {
|
chouseDian(val) {
|
let that = this;
|
|
that.clearLayer(); //清除完成的导航
|
if (that.isOverRouter) {
|
//若是已经有导航，恢复未点击图标
|
if (val == "start") {
|
//初始化图标图层
|
if (this.endLayer == null) {
|
this.endLayer = new this.DC.VectorLayer("endLayer");
|
this.viewer.addLayer(this.endLayer);
|
} else {
|
this.endLayer.clear();
|
}
|
// console.log("baoliuend", "see");
|
that.$store.commit("SET_STARTINGPOINT", []);
|
const endEntity = new that.DC.Billboard(
|
new that.DC.Position(
|
Number(this.terminus[0]),
|
Number(this.terminus[1]),
|
Number(this.terminus[2])
|
),
|
"/img/navicon/end.png"
|
);
|
that.endLayer.addOverlay(endEntity);
|
} else if (val == "end") {
|
//初始化图标图层
|
if (this.startLayer == null) {
|
this.startLayer = new this.DC.VectorLayer("startLayer");
|
this.viewer.addLayer(this.startLayer);
|
} else {
|
this.startLayer.clear();
|
}
|
// console.log("baoliustart", "see");
|
that.$store.commit("SET_TERMINUS", []);
|
const startEntity = new that.DC.Billboard(
|
new that.DC.Position(
|
Number(this.startingPoint[0]),
|
Number(this.startingPoint[1]),
|
Number(this.startingPoint[2])
|
),
|
"/img/navicon/start.png"
|
);
|
that.startLayer.addOverlay(startEntity);
|
}
|
}
|
|
// console.log(val, "see1");
|
this.butChouse = val;
|
//关闭其他地图事件
|
that.$store.commit("set_closeMapClick", true);
|
//添加标记
|
let tooltip = that.viewer.tooltip;
|
tooltip.enable = true;
|
let title = "";
|
if (val == "start") {
|
title = "点击放置起点";
|
//初始化图标图层
|
if (this.startLayer == null) {
|
this.startLayer = new this.DC.VectorLayer("startLayer");
|
this.viewer.addLayer(this.startLayer);
|
} else {
|
this.startLayer.clear();
|
}
|
} else if (val == "end") {
|
title = "点击放置终点";
|
//初始化图标图层
|
if (this.endLayer == null) {
|
this.endLayer = new this.DC.VectorLayer("endLayer");
|
this.viewer.addLayer(this.endLayer);
|
} else {
|
this.endLayer.clear();
|
}
|
}
|
that.overChouse = false; //开启事件
|
// 地图选点
|
that.clicks = that.viewer.on(that.DC.MouseEventType.CLICK, (e) => {
|
if (that.overChouse) {
|
return;
|
}
|
let lnglat = [e.wgs84SurfacePosition.lng, e.wgs84SurfacePosition.lat];
|
// console.log(lnglat, "see11");
|
// console.log(that.butChouse, "see11");
|
//应用数据
|
if (that.butChouse == "start") {
|
that.toNameText = "自定义起点";
|
//传输坐标数据
|
that.$store.commit("SET_STARTINGPOINT", [...lnglat, 0]);
|
//起点
|
const startEntity = new that.DC.Billboard(
|
new that.DC.Position(
|
Number(lnglat[0]),
|
Number(lnglat[1]),
|
Number(0)
|
),
|
"/img/navicon/start.png"
|
);
|
that.startLayer.addOverlay(startEntity);
|
} else if (that.butChouse == "end") {
|
that.comeNameText = "自定义终点";
|
//传输坐标数据
|
that.$store.commit("SET_TERMINUS", [...lnglat, 0]);
|
//终点
|
const endEntity = new that.DC.Billboard(
|
new that.DC.Position(
|
Number(lnglat[0]),
|
Number(lnglat[1]),
|
Number(0)
|
),
|
"/img/navicon/end.png"
|
);
|
that.endLayer.addOverlay(endEntity);
|
}
|
title = "";
|
tooltip.enable = false;
|
that.overChouse = true; //关闭事件
|
//开启其他地图事件
|
that.$store.commit("set_closeMapClick", false);
|
});
|
that.moves = that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) => {
|
if (that.overChouse) {
|
return;
|
}
|
// let lnglat = [e.wgs84SurfacePosition.lng, e.wgs84SurfacePosition.lat];
|
tooltip.showAt(e.windowPosition, title);
|
});
|
},
|
closeModel() {
|
if (this.$route.path.indexOf("/campusnavi") != -1) {
|
this.$store.dispatch("delVisitedViews", this.$route);
|
this.$router.push("/pcLayout/default");
|
}
|
|
this.toNameText = "";
|
this.toNameList = [];
|
this.toNameShow = false;
|
this.comeNameText = "";
|
this.comeNameList = [];
|
this.comeNameShow = false;
|
if (this.routeLayer != null) {
|
this.routeLayer.clear();
|
this.isOverRouter = false;
|
}
|
//清除自定义位置
|
if (this.startLayer != null) {
|
this.startLayer.clear();
|
// this.startLayer = null;
|
}
|
if (this.endLayer != null) {
|
this.endLayer.clear();
|
// this.endLayer = null;
|
}
|
this.$store.commit("SET_COMENAME", "");
|
this.$store.commit("SET_TERMINUS", null);
|
this.$store.commit("SET_GETTONAME", "");
|
this.$store.commit("SET_STARTINGPOINT", null);
|
this.$store.commit("SET_CAMPUSNAVFLAG", false);
|
},
|
|
tabClick(param) {
|
this.navigationWay = param;
|
this.tabOneFlag = !this.tabOneFlag;
|
this.tabTwoFlag = !this.tabTwoFlag;
|
},
|
|
startNavigation() {
|
let that = this;
|
//清除自定义位置
|
if (this.startLayer != null) {
|
this.startLayer.clear();
|
// this.startLayer = null;
|
}
|
if (this.endLayer != null) {
|
this.endLayer.clear();
|
// this.endLayer = null;
|
}
|
|
if (this.routeLayer == null) {
|
this.routeLayer = new this.DC.VectorLayer("navigation");
|
this.viewer.addLayer(this.routeLayer);
|
} else {
|
this.routeLayer.clear();
|
}
|
if (this.startingPoint == null) {
|
this.$message("请输入起点！！！");
|
}
|
if (this.terminus == null) {
|
this.$message("请输入终点！！！");
|
}
|
|
// var start = this.DC.Transform.transformWGS84ToCartesian()
|
const startEntity = new this.DC.Billboard(
|
new this.DC.Position(
|
Number(this.startingPoint[0]),
|
Number(this.startingPoint[1]),
|
Number(this.startingPoint[2])
|
),
|
"/img/navicon/start.png"
|
);
|
this.routeLayer.addOverlay(startEntity);
|
// var end = this.DC.Transform.transformWGS84ToCartesian()
|
const endEntity = new this.DC.Billboard(
|
new this.DC.Position(
|
Number(this.terminus[0]),
|
Number(this.terminus[1]),
|
Number(this.terminus[2])
|
),
|
"/img/navicon/end.png"
|
);
|
this.routeLayer.addOverlay(endEntity);
|
|
var routes = "";
|
|
var startLog = Number(this.startingPoint[0]).toFixed(6);
|
var startLat = Number(this.startingPoint[1]).toFixed(6);
|
var endLog = Number(this.terminus[0]).toFixed(6);
|
var endLat = Number(this.terminus[1]).toFixed(6);
|
|
var origin = this.DC.CoordTransform.WGS84ToGCJ02(startLog, startLat);
|
var destination = this.DC.CoordTransform.WGS84ToGCJ02(endLog, endLat);
|
|
if (this.navigationWay == "步行") {
|
axios
|
.get("https://restapi.amap.com/v3/direction/walking", {
|
params: {
|
origin: `${origin[0].toFixed(6) + "," + origin[1].toFixed(6)}`,
|
destination: `${
|
destination[0].toFixed(6) + "," + destination[1].toFixed(6)
|
}`,
|
key: "4b3e1db3211054ce5b466407cbb9d221",
|
output: "json",
|
},
|
})
|
.then((res) => {
|
if (res.data.info == "OVER_DIRECTION_RANGE") {
|
this.$message({
|
message: "超出步行范围！",
|
type: "warning",
|
duration: 3000,
|
});
|
}
|
|
res.data.route.paths[0].steps.forEach((item) => {
|
item.polyline = item.polyline.split(";");
|
|
var lineArr = [];
|
|
item.polyline.forEach((it) => {
|
it = it.split(",");
|
lineArr.push(
|
this.DC.CoordTransform.GCJ02ToWGS84(it[0], it[1]).join(",")
|
);
|
});
|
|
lineArr = lineArr.join(";");
|
|
lineArr += ";";
|
|
routes += lineArr;
|
});
|
|
routes =
|
startLog + "," + startLat + ";" + routes + endLog + "," + endLat;
|
|
const polyline = new this.DC.Polyline(routes);
|
polyline.setStyle({
|
width: 3,
|
material: new this.DC.PolylineTrailMaterialProperty({
|
color: this.DC.Color.RED,
|
speed: 10,
|
}),
|
clampToGround: true,
|
});
|
this.routeLayer.addOverlay(polyline);
|
if (this.twoOrThree == "真三维") {
|
this.viewer.flyTo(this.routeLayer);
|
} else {
|
var longitude = null;
|
var latitude = null;
|
startLog = Number(startLog);
|
endLog = Number(endLog);
|
if (startLog > endLog) {
|
longitude = (startLog - endLog) / 2 + endLog;
|
} else {
|
longitude = (endLog - startLog) / 2 + startLog;
|
}
|
startLat = Number(startLat);
|
endLat = Number(endLat);
|
if (startLat > endLat) {
|
latitude = (startLat - endLat) / 2 + endLat;
|
} else {
|
latitude = (endLat - startLat) / 2 + startLat;
|
}
|
that.isOverRouter = true;
|
this.viewer.camera.setView({
|
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
|
// fromDegrees()方法，将经纬度和高程转换为世界坐标
|
destination: this.DC.Namespace.Cesium.Cartesian3.fromDegrees(
|
longitude,
|
latitude,
|
600
|
),
|
orientation: {
|
// 指向
|
heading: this.DC.Namespace.Cesium.Math.toRadians(0, 0),
|
// 视角
|
pitch: this.DC.Namespace.Cesium.Math.toRadians(-90),
|
roll: 0.0,
|
},
|
});
|
}
|
});
|
} else {
|
axios
|
.get("https://restapi.amap.com/v3/direction/driving", {
|
params: {
|
origin: `${origin[0].toFixed(6) + "," + origin[1].toFixed(6)}`,
|
destination: `${
|
destination[0].toFixed(6) + "," + destination[1].toFixed(6)
|
}`,
|
key: "4b3e1db3211054ce5b466407cbb9d221",
|
strategy: 2,
|
extensions: "all",
|
output: "json",
|
},
|
})
|
.then((res) => {
|
res.data.route.paths[0].steps.forEach((item) => {
|
item.polyline = item.polyline.split(";");
|
|
var lineArr = [];
|
|
item.polyline.forEach((it) => {
|
it = it.split(",");
|
lineArr.push(
|
this.DC.CoordTransform.GCJ02ToWGS84(it[0], it[1]).join(",")
|
);
|
});
|
|
lineArr = lineArr.join(";");
|
|
lineArr += ";";
|
|
routes += lineArr;
|
});
|
|
routes =
|
startLog + "," + startLat + ";" + routes + endLog + "," + endLat;
|
|
const polyline = new this.DC.Polyline(routes);
|
polyline.setStyle({
|
width: 3,
|
material: new this.DC.PolylineTrailMaterialProperty({
|
color: this.DC.Color.RED,
|
speed: 10,
|
}),
|
clampToGround: true,
|
});
|
this.routeLayer.addOverlay(polyline);
|
|
if (this.twoOrThree == "真三维") {
|
this.viewer.flyTo(this.routeLayer);
|
} else {
|
var longitude = null;
|
var latitude = null;
|
startLog = Number(startLog);
|
endLog = Number(endLog);
|
if (startLog > endLog) {
|
longitude = (startLog - endLog) / 2 + endLog;
|
} else {
|
longitude = (endLog - startLog) / 2 + startLog;
|
}
|
startLat = Number(startLat);
|
endLat = Number(endLat);
|
if (startLat > endLat) {
|
latitude = (startLat - endLat) / 2 + endLat;
|
} else {
|
latitude = (endLat - startLat) / 2 + startLat;
|
}
|
that.isOverRouter = true;
|
this.viewer.camera.setView({
|
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
|
// fromDegrees()方法，将经纬度和高程转换为世界坐标
|
destination: this.DC.Namespace.Cesium.Cartesian3.fromDegrees(
|
longitude,
|
latitude,
|
600
|
),
|
orientation: {
|
// 指向
|
heading: this.DC.Namespace.Cesium.Math.toRadians(0, 0),
|
// 视角
|
pitch: this.DC.Namespace.Cesium.Math.toRadians(-90),
|
roll: 0.0,
|
},
|
});
|
}
|
});
|
}
|
},
|
|
clearLayer() {
|
if (this.routeLayer != null) {
|
this.routeLayer.clear();
|
}
|
},
|
|
toNameChange() {
|
if (this.toNameText == "") {
|
this.toNameList = [];
|
this.toNameShow = false;
|
return;
|
}
|
getSearchList({ mechanismName: this.toNameText }).then((res) => {
|
if (res.data.data.length > 0) {
|
this.toNameList = res.data.data;
|
this.toNameShow = true;
|
}
|
});
|
},
|
|
comeNameChange() {
|
if (this.comeNameText == "") {
|
this.comeNameList = [];
|
this.comeNameShow = false;
|
return;
|
}
|
getSearchList({ mechanismName: this.comeNameText }).then((res) => {
|
if (res.data.data.length > 0) {
|
this.comeNameList = res.data.data;
|
this.comeNameShow = true;
|
}
|
});
|
},
|
|
shortcutShow(event) {
|
var toBox = document.getElementById("ToNameContainer");
|
|
if (toBox) {
|
if (!toBox.contains(event.target)) {
|
// 这句是说如果我们点击到了id为myPanel以外的区域
|
this.toNameShow = false;
|
}
|
}
|
|
var comeBox = document.getElementById("ComeNameContainer");
|
|
if (comeBox) {
|
if (!comeBox.contains(event.target)) {
|
// 这句是说如果我们点击到了id为myPanel以外的区域
|
this.comeNameShow = false;
|
}
|
}
|
},
|
|
originChange(param) {
|
this.$store.commit("SET_POINTPOSITION", [
|
Number(param.jd),
|
Number(param.wd),
|
Number(param.gd),
|
Number(param.heading),
|
Number(param.pitch),
|
Number(param.roll),
|
]);
|
this.$store.commit("SET_GETTONAME", param.mechanismname);
|
this.$store.commit("SET_STARTINGPOINT", this.pointPosition);
|
this.toNameShow = false;
|
this.toNameList = [];
|
},
|
|
terminusChange(param) {
|
this.$store.commit("SET_POINTPOSITION", [
|
Number(param.jd),
|
Number(param.wd),
|
Number(param.gd),
|
Number(param.heading),
|
Number(param.pitch),
|
Number(param.roll),
|
]);
|
this.$store.commit("SET_COMENAME", param.mechanismname);
|
this.$store.commit("SET_TERMINUS", this.pointPosition);
|
this.comeNameShow = false;
|
this.comeNameList = [];
|
},
|
},
|
destroyed() {
|
console.log("endssss", "see");
|
// this.closeModel();
|
},
|
};
|
</script>
|
|
<style lang="scss" scope></style>
|
