From a22aa1086eeef39a26cc161326ce09cd183185ea Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Fri, 04 Mar 2022 15:57:47 +0800
Subject: [PATCH] 3.3 1.自定义标签，退出后自动清除 2.自定义标签，转换二维码的数据格式ok，移动端对接二维码ok， 3.自定义标签点击移动到指定位置 ok 4.面板自适应高度 4.更换定位依赖，自定义标签扫码入移动端可以定位并显示路线
---
src/components/campusNav/index.vue | 1022 ++++++++++++++++++++++++++++++++++----------------------
1 files changed, 620 insertions(+), 402 deletions(-)
diff --git a/src/components/campusNav/index.vue b/src/components/campusNav/index.vue
index 54ba0d4..cacac45 100644
--- a/src/components/campusNav/index.vue
+++ b/src/components/campusNav/index.vue
@@ -1,436 +1,654 @@
<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>
+ <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>
- <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 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 class="container">
- <div>
- <div id="ToNameContainer">
- <el-input v-model="toNameText" @input="toNameChange" placeholder="起点……">
- <template slot="prepend">
- <i class="el-icon-location" 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" 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>
+ </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'
+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
+ 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;
}
+ },
},
- computed: {
- ...mapGetters([
- 'viewer',
- 'twoOrThree',
- // 起点
- 'startingPoint',
- // 终点
- 'terminus',
- // 出发名称
- 'getToName',
- // 到达名称
- 'comeName',
- // 点信息
- 'pointPosition',
- 'campusNavFlag'
- ])
- },
- watch: {
- getToName: {
- immediate: true,
- handler (newCode, oldCode) {
- this.toNameText = newCode
- }
- },
- comeName: {
- immediate: true,
- handler (newCode, oldCode) {
- this.comeNameText = newCode
- }
- },
- 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);
+ });
},
- created () {
- this.DC = global.DC
+ 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);
},
- methods: {
- closeModel () {
- if (this.$route.path.indexOf('/campusnavi') != -1) {
- this.$store.dispatch('delVisitedViews', this.$route)
- this.$router.push('/pcLayout/default')
+
+ 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,
+ });
}
- this.toNameText = ''
- this.toNameList = []
- this.toNameShow = false
- this.comeNameText = ''
- this.comeNameList = []
- this.comeNameShow = false
- if (this.routeLayer != null) {
- this.routeLayer.clear()
- }
- 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)
- },
+ res.data.route.paths[0].steps.forEach((item) => {
+ item.polyline = item.polyline.split(";");
- tabClick (param) {
- this.navigationWay = param
- this.tabOneFlag = !this.tabOneFlag
- this.tabTwoFlag = !this.tabTwoFlag
- },
+ var lineArr = [];
- startNavigation () {
- if (this.routeLayer == null) {
- this.routeLayer = new this.DC.VectorLayer('navigation')
- this.viewer.addLayer(this.routeLayer)
+ 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 {
- this.routeLayer.clear()
+ 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,
+ },
+ });
}
- if (this.startingPoint == null) {
- this.$message('请输入起点！！！')
- }
- if (this.terminus == null) {
- this.$message('请输入终点！！！')
- }
+ });
+ } 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 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 lineArr = [];
- var routes = ''
+ item.polyline.forEach((it) => {
+ it = it.split(",");
+ lineArr.push(
+ this.DC.CoordTransform.GCJ02ToWGS84(it[0], it[1]).join(",")
+ );
+ });
- 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)
+ lineArr = lineArr.join(";");
- var origin = this.DC.CoordTransform.WGS84ToGCJ02(startLog, startLat)
- var destination = this.DC.CoordTransform.WGS84ToGCJ02(endLog, endLat)
+ lineArr += ";";
- 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
- })
- }
+ routes += lineArr;
+ });
- res.data.route.paths[0].steps.forEach(item => {
- item.polyline = item.polyline.split(';')
+ routes =
+ startLog + "," + startLat + ";" + routes + endLog + "," + endLat;
- var lineArr = []
+ 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);
- 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
- }
-
- 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
- }
- })
- }
- })
+ if (this.twoOrThree == "真三维") {
+ this.viewer.flyTo(this.routeLayer);
} 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
- }
-
- 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
- }
- })
- }
- })
+ 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()
- }
- },
+ 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 = []
+ 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>
+<style lang="scss" scope></style>
--
Gitblit v1.9.3