school-web.git - Gitblit

parent: f25852bc | patch | commit | ignore whitespace

liuyg

2022-01-08 638b3c635aaa47e5cae723466ca8a11df59877bf

+加入导航

7 files modified

1 files added

	public/index.html	9 ●●●●● patch \| view \| raw \| blame \| history
	src/components/mobileCloseRouter/index.vue	55 ●●●●● patch \| view \| raw \| blame \| history
	src/components/mobileGoTo/index.vue	84 ●●●●● patch \| view \| raw \| blame \| history
	src/components/mobilePopupOurAfter/index.vue	19 ●●●●● patch \| view \| raw \| blame \| history
	src/components/mobileWindow/index.vue	5 ●●●●● patch \| view \| raw \| blame \| history
	src/components/mobilemap/index.vue	11 ●●●●● patch \| view \| raw \| blame \| history
	src/store/getters.js	4 ●●●●● patch \| view \| raw \| blame \| history
	src/store/modules/mobile.js	129 ●●●●● patch \| view \| raw \| blame \| history

 public/index.html

@@ -9,18 +9,21 @@
  <title>智慧社区大数据三维可视化平台</title>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <!-- 高德定位 -->
  <script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=4b3e1db3211054ce5b466407cbb9d221"></script>
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=4b3e1db3211054ce5b466407cbb9d221">
  </script>
  <!-- ip -->
  <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
  <!-- 语音播放 -->
  <!-- <script src="http://cdn.javanx.cn/wp-content/themes/lensnews2.2/js/jquery.min.js?ver=3.1.1"></script> -->
  <!-- 高德地图路线规划 -->
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=4b3e1db3211054ce5b466407cbb9d221">
  </script>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
      Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->

 src/components/mobileCloseRouter/index.vue

New file
@@ -0,0 +1,55 @@
<template>
  <!-- v-show="isOpenDrawALine" -->
  <div
    :class="['mobileCloseRouter', isOpenDrawALine ? 'mobileCloseActive' : '']"
    @click="mobileRouterClose"
  >
    退出导航
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "mobileCloseRouter",
  computed: {
    ...mapGetters(["isOpenDrawALine"]),
  },
  watch: {
    isOpenDrawALine() {
      if (this.isOpenDrawALine) {
      } else {
      }
    },
  },
  methods: {
    mobileRouterClose() {
      this.$store.commit("removePolyline");
    },
  },
};
</script>

<style lang="scss" scoped>
.mobileCloseRouter {
  position: fixed;
  width: 80px;
  height: 32px;
  background-color: #409eff;
  z-index: 600;
  right: -100px;
  opacity: 0;
  bottom: 320px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px 0 0 8px;
  color: #fff;
  transition: all 0.5s;
}
.mobileCloseActive {
  right: 0px;
  opacity: 1;
}
</style>

 src/components/mobileGoTo/index.vue

@@ -1,16 +1,25 @@
<template>
  <div v-show="openmobileGoTo" class="mobileGoTo">
    <el-input v-model="height"></el-input>
  <div v-if="openmobileGoTo" class="mobileGoTo">
    <el-input v-model="int1"></el-input>
    <el-input v-model="lat1"></el-input>
    <el-input v-model="int2"></el-input>
    <el-input v-model="lat2"></el-input>
    <!-- <el-input v-model="lnt"></el-input>
    <el-input v-model="lat"></el-input> -->
    <!-- <el-input v-model="height"></el-input>
    <el-input v-model="heading"></el-input>
    <el-input v-model="pitch"></el-input>
    <el-input v-model="roll"></el-input>
    <el-input v-model="roll"></el-input> -->
    <!-- <el-input v-model="alt"></el-input> -->
    <el-button type="primary" @click="submitForm('')">跳转</el-button>
    <div class="mobileGoTocontext">{{ context }}</div>
    <el-button type="primary" @click="dingwei">规划路线</el-button>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import axios from "axios";
export default {
  name: "mobileGoTo",
  computed: {
@@ -22,17 +31,33 @@
      "ccDataState",
      "perspectiveControls",
      "perspectiveControl",
      "dimensionData",
      "isendPosition",
      "endPosition",
    ]),
    startLngLat() {
      return [+this.int1, +this.lat1];
    },
    endLngLat() {
      return [+this.int2, +this.lat2];
    },
  },
  data() {
    return {
      lnt: "121.53772514948211",
      lat: "31.23938286341316",
      alt: "90.648862227",
      lnt: "114.039946",
      lat: "27.628475",
      alt: "0",
      height: 800,
      heading: 0,
      pitch: -45,
      roll: 0,
      context: null,
      // startLngLat: [114.039946, 27.628475],
      // endLngLat: [114.038355, 27.63057],
      int1: 114.039946,
      lat1: 27.628475,
      int2: 114.038355,
      lat2: 27.63057,
    };
  },
  watch: {
@@ -50,29 +75,40 @@
      this.pitch = this.perspectiveControl.pitch;
      this.roll = this.perspectiveControl.roll;
    },
    isendPosition() {
      this.int2 = this.endPosition[0];
      this.lat2 = this.endPosition[1];
      console.log(this.endPosition);
    },
  },
  methods: {
    submitForm() {
      if (this.lnt && this.lat) {
        let that = this;
        // 定制化窗体
        // let position = {};
        // let lntLat = [that.lnt, that.lat];
        // let d = {
        //   position,
        //   lntLat,
        //   query: { position, lntLat },
        //   useJWD: true, //仅使用经纬度
        // };
        // that.$store.dispatch("setMobileWindows", d);
        let position = {};
        let lntLat = [that.lnt, that.lat];
        let d = {
          height: this.height,
          heading: this.heading,
          pitch: this.pitch,
          roll: this.roll,
          position,
          lntLat,
          query: { position, lntLat },
          useJWD: true, //仅使用经纬度
        };
        that.$store.dispatch("MSET_GOTOCC", d);
        that.$store.dispatch("setMobileWindows", d);
        //   let d = {
        //     height: this.height,
        //     heading: this.heading,
        //     pitch: this.pitch,
        //     roll: this.roll,
        //   };
        //   that.$store.dispatch("MSET_GOTOCC", d);
      }
    },
    // dingwei(startLngLat, endLngLat) {
    dingwei() {
      let ints = [this.startLngLat, this.endLngLat];
      console.log(ints);
      this.$store.dispatch("MSET_GOTOWHERE", ints);
    },
  },
};
@@ -84,5 +120,11 @@
  bottom: 60px;
  width: 73%;
  z-index: 500;
  .mobileGoTocontext {
    width: 100%;
    height: 100%;
    background-color: #fff;
    word-wrap: break-word;
  }
}
</style>
</style>

 src/components/mobilePopupOurAfter/index.vue

@@ -1,5 +1,9 @@
<template>
  <div id="mobilePopupOurAfter">
  <div
    class="mobilePopupOurAfter"
    :class="{ ismBigPopupAfter: mBigPopupAfter }"
  >
    <!-- v-show="mBigPopupAfter" -->
    <div class="m_p_a_heard">
      <div><i class="el-icon-menu icon"></i></div>
      <div @click="closeBigPopupAfter"><i class="el-icon-close icon"></i></div>
@@ -32,6 +36,7 @@
</template>

<script>
import { mapGetters } from "vuex";
import { getList } from "@/api/mobile/orgnav/index"; //机构单位
import { getChildNavList } from "@/api/mobile/public/arc"; //社区建筑
import {
@@ -51,6 +56,9 @@
// import { getListparking } from "@/api/mobile/stop/index"; //停车场
export default {
  name: "mobilePopupOurAfter",
  computed: {
    ...mapGetters(["mBigPopupAfter"]),
  },
  data() {
    return {
      choiceValue: "",
@@ -158,14 +166,16 @@
  align-items: center;
  justify-content: center;
}
#mobilePopupOurAfter {
.mobilePopupOurAfter {
  position: fixed;
  top: 37.5%;
  left: 13.5%;
  // left: 13.5%;
  left: -1000px;
  width: 75%;
  height: 25%;
  background-color: #fff;
  box-shadow: 0px 0px 5px #29baf1;
  transition: all 0.5s;
  // background-image: linear-gradient(
  //     // 135deg,
  //     #28bbf06c 30px,
@@ -230,4 +240,7 @@
    }
  }
}
.ismBigPopupAfter {
  left: 13.5%;
}
</style>

 src/components/mobileWindow/index.vue

@@ -206,7 +206,10 @@
      let that = this;
      if (val == "去这") {
        //定位
        console.log(this.query.query);
        // console.log(this.query.query);
        // that.$store.commit("set_endPosition", this.query.query.lntLat);
        let ints = [[114.039946, 27.628475], that.query.query.lntLat];
        that.$store.dispatch("MSET_GOTOWHERE", ints);
      } else if (val == "实景") {
        this.$store.commit(
          "MSET_OPENMOBILEPANORAMA",

 src/components/mobilemap/index.vue

@@ -14,13 +14,16 @@
    <mobileCortrolSearch ref="mobileCortrolSearch"></mobileCortrolSearch>
    <!-- 控制↑ -->
    <!-- 控制大弹窗的弹窗 -->
    <mobilePopupOurAfter v-if="mBigPopupAfter"></mobilePopupOurAfter>
    <!-- v-if="mBigPopupAfter" -->
    <mobilePopupOurAfter></mobilePopupOurAfter>
    <!-- 大弹窗 -->
    <mobilePopupOur :style="[bigPopup]" v-if="mBigPopup"></mobilePopupOur>
    <!-- 测试-跳转位置 -->
    <!-- <mobileGoTo></mobileGoTo> -->
    <mobileGoTo></mobileGoTo>
    <!-- 实景窗口 -->
    <mobilePanorama></mobilePanorama>
    <!-- <mobilePanorama></mobilePanorama> -->
    <!-- 退出导航 -->
    <mobileCloseRouter></mobileCloseRouter>
    <!-- 盖住左下角 -->
    <div class="cover_mobileMap">智慧社区</div>
  </div>
@@ -325,7 +328,7 @@
        luminanceAtZenith: 0.5,
      });

      tilesetLayer.addOverlay(tileset);
      // tilesetLayer.addOverlay(tileset);
      // tilesetLayer.show = false;

      let silhouetteBlue =

 src/store/getters.js

@@ -21,6 +21,10 @@
  dimensionData: (state) => state.mobile.dimensionData, // 维度镜头数据
  perspectiveControl: (state) => state.mobile.perspectiveControl, ///视角控制：高度、角度  ()=>{}
  audioState: (state) => state.mobile.audioState, //文字转语音状态

  isOpenDrawALine: (state) => state.mobile.isOpenDrawALine, //是否开启路线
  isendPosition: (state) => state.mobile.isendPosition, //路线导航终点数据改变
  endPosition: (state) => state.mobile.endPosition, //路线导航终点数据
};

const navigation = {

 src/store/modules/mobile.js

@@ -1,4 +1,5 @@
import $store from "../index";
import axios from "axios";
const mobile = {
  state: {
    mviewer: null, // 地图实体类
@@ -51,6 +52,13 @@

    audioData: null, //语音
    audioState: false, //语音状态

    navigationStartLngLat: "", //导航起点
    navigationEndLngLat: "", //导航终点
    drawALineLayer: null, //导航路径图层
    isOpenDrawALine: false, //是否开启路径
    endPosition: "", //传送终点经纬度--
    isendPosition: false, //传送终点经纬度--感应数据
  },
  mutations: {
    MSET_VIEWER(state, viewer) {
@@ -221,6 +229,45 @@
      state.wallLayer = data.wallLayer;
      state.tileset = data.tileset;
      state.usetowpointfive = data.usetowpointfive;
    },
    //直接移动
    cameraSetView(state, data) {
      state.mviewer.camera.setView({
        // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
        // fromDegrees()方法，将经纬度和高程转换为世界坐标
        destination: new global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
          // 114.0351,
          // 27.6314,
          // 200.0
          data[0] + 0.0,
          data[1] + 0.00028,
          data[2] || 300
        ),
        orientation: {
          heading: global.DC.Namespace.Cesium.Math.toRadians(
            state.dimensionData.heading
          ),
          pitch: global.DC.Namespace.Cesium.Math.toRadians(
            state.dimensionData.pitch
          ),
          // heading: data.heading,
          // pitch: data.pitch,
          roll: state.dimensionData.roll,
        },
      });
    },
    //删除路线
    removePolyline(state) {
      if (state.drawALineLayer) {
        state.drawALineLayer.remove();
        state.drawALineLayer = null;
        state.isOpenDrawALine = false;
      }
    },
    //传送终点数据
    set_endPosition(state, data) {
      state.isendPosition = !state.isendPosition;
      state.endPosition = data;
    },
  },
  actions: {
@@ -548,6 +595,7 @@
        },
      });
    },
    //文字转语音控制↓
    MSET_GETAUDIO({ state, commit, dispatch }, val) {
      state.audioData = new window.SpeechSynthesisUtterance();
      state.audioData.text = val;
@@ -568,6 +616,87 @@
        }
      }
    },
    //文字转语音控制↑
    //导航系统↓
    MSET_GOTOWHERE({ state, commit, dispatch }, val) {
      //本地图使用的是WGS84坐标，而高德使用的是火星坐标GCJ02，所以需要转换参数过去
      // 返回值需要转换为WGS84坐标
      state.navigationStartLngLat = [+val[0][0], +val[0][1]]; //导航起点
      state.navigationEndLngLat = [+val[1][0], +val[1][1]]; //导航终点
      //转换WGS84坐标为GCJ02
      let GCJ02StartLngLat = global.DC.CoordTransform.WGS84ToGCJ02(
        Number(state.navigationStartLngLat[0]),
        Number(state.navigationStartLngLat[1])
      );
      let GCJ02EndLngLat = global.DC.CoordTransform.WGS84ToGCJ02(
        Number(state.navigationEndLngLat[0]),
        Number(state.navigationEndLngLat[1])
      );
      // 获取路径，使用的是高德API
      axios
        .get("https://restapi.amap.com/v3/direction/walking", {
          params: {
            origin: `${Number(GCJ02StartLngLat[0]).toFixed(6)},${Number(
              GCJ02StartLngLat[1]
            ).toFixed(6)}`,
            destination: `${Number(GCJ02EndLngLat[0]).toFixed(6)},${Number(
              GCJ02EndLngLat[1]
            ).toFixed(6)}`,
            key: "4b3e1db3211054ce5b466407cbb9d221",
            output: "json",
          },
        })
        .then((res) => {
          //回调
          const paths = res.data.route.paths[0].steps;
          drawALine(paths);
        });

      let drawALine = (paths) => {
        //paths是个道路对象，其中polyline是String类型的经纬度
        let Str = state.navigationStartLngLat.join(",") + ";"; //加入起点
        for (let index = 0; index < paths.length; index++) {
          const path = paths[index];
          let polyline = path.polyline; //取到String类型的经纬度
          let polylineArr = polyline.split(";"); //转为数组
          let polylineArrLength = polylineArr.length; //获取长度，避免多次重复读取polylineArr.length
          for (let k = 0; k < polylineArrLength; k++) {
            let inPolylineArr = polylineArr[k].split(","); //转经纬度为单独的数组
            let outIn = global.DC.CoordTransform.GCJ02ToWGS84(
              //处理火星坐标转换成WGS84  GCJ02ToWGS84
              inPolylineArr[0],
              inPolylineArr[1]
            );
            polylineArr[k] = outIn.join(","); //每组经纬度转为String
          }
          polyline = polylineArr.join(";"); //合并转换后的经纬度合集

          Str += polyline; //自加
          Str += ";";
        }
        Str += state.navigationEndLngLat.join(","); //加入终点
        drawALineLayer(Str); //绘画线路
      };

      //绘画线路
      let drawALineLayer = (Str) => {
        //检查是否存在路线
        commit("removePolyline");
        let drawALineLayer = new global.DC.VectorLayer("layer");
        state.mviewer.addLayer(drawALineLayer);
        let polyline = new global.DC.Polyline(Str); //加入绘画点
        polyline.setStyle({
          width: 3,
          material: DC.Color.RED,
          clampToGround: true,
        });
        drawALineLayer.addOverlay(polyline);
        state.drawALineLayer = drawALineLayer;
        state.isOpenDrawALine = true;
        commit("cameraSetView", state.navigationStartLngLat); //移动
      };
    },
    //导航系统↑
  },
};

			@@ -9,18 +9,21 @@
			<title>智慧社区大数据三维可视化平台</title>
			<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
			<!-- 高德定位 -->
			<script type="text/javascript"
			src="https://webapi.amap.com/maps?v=1.4.15&key=4b3e1db3211054ce5b466407cbb9d221"></script>
			<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=4b3e1db3211054ce5b466407cbb9d221">
			</script>
			<!-- ip -->
			<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
			<!-- 语音播放 -->
			<!-- <script src="http://cdn.javanx.cn/wp-content/themes/lensnews2.2/js/jquery.min.js?ver=3.1.1"></script> -->
			<!-- 高德地图路线规划 -->
			<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=4b3e1db3211054ce5b466407cbb9d221">
			</script>
			</head>

			<body>
			<noscript>
			<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
			Please enable it to continue.</strong>
			Please enable it to continue.</strong>
			</noscript>
			<div id="app"></div>
			<!-- built files will be auto injected -->

New file
			@@ -0,0 +1,55 @@
			<template>
			<!-- v-show="isOpenDrawALine" -->
			<div
			:class="['mobileCloseRouter', isOpenDrawALine ? 'mobileCloseActive' : '']"
			@click="mobileRouterClose"
			>
			退出导航
			</div>
			</template>

			<script>
			import { mapGetters } from "vuex";
			export default {
			name: "mobileCloseRouter",
			computed: {
			...mapGetters(["isOpenDrawALine"]),
			},
			watch: {
			isOpenDrawALine() {
			if (this.isOpenDrawALine) {
			} else {
			}
			},
			},
			methods: {
			mobileRouterClose() {
			this.$store.commit("removePolyline");
			},
			},
			};
			</script>

			<style lang="scss" scoped>
			.mobileCloseRouter {
			position: fixed;
			width: 80px;
			height: 32px;
			background-color: #409eff;
			z-index: 600;
			right: -100px;
			opacity: 0;
			bottom: 320px;
			font-size: 14px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 8px 0 0 8px;
			color: #fff;
			transition: all 0.5s;
			}
			.mobileCloseActive {
			right: 0px;
			opacity: 1;
			}
			</style>

			@@ -1,16 +1,25 @@
			<template>
			<div v-show="openmobileGoTo" class="mobileGoTo">
			<el-input v-model="height"></el-input>
			<div v-if="openmobileGoTo" class="mobileGoTo">
			<el-input v-model="int1"></el-input>
			<el-input v-model="lat1"></el-input>
			<el-input v-model="int2"></el-input>
			<el-input v-model="lat2"></el-input>
			<!-- <el-input v-model="lnt"></el-input>
			<el-input v-model="lat"></el-input> -->
			<!-- <el-input v-model="height"></el-input>
			<el-input v-model="heading"></el-input>
			<el-input v-model="pitch"></el-input>
			<el-input v-model="roll"></el-input>
			<el-input v-model="roll"></el-input> -->
			<!-- <el-input v-model="alt"></el-input> -->
			<el-button type="primary" @click="submitForm('')">跳转</el-button>
			<div class="mobileGoTocontext">{{ context }}</div>
			<el-button type="primary" @click="dingwei">规划路线</el-button>
			</div>
			</template>

			<script>
			import { mapGetters } from "vuex";
			import axios from "axios";
			export default {
			name: "mobileGoTo",
			computed: {
			@@ -22,17 +31,33 @@
			"ccDataState",
			"perspectiveControls",
			"perspectiveControl",
			"dimensionData",
			"isendPosition",
			"endPosition",
			]),
			startLngLat() {
			return [+this.int1, +this.lat1];
			},
			endLngLat() {
			return [+this.int2, +this.lat2];
			},
			},
			data() {
			return {
			lnt: "121.53772514948211",
			lat: "31.23938286341316",
			alt: "90.648862227",
			lnt: "114.039946",
			lat: "27.628475",
			alt: "0",
			height: 800,
			heading: 0,
			pitch: -45,
			roll: 0,
			context: null,
			// startLngLat: [114.039946, 27.628475],
			// endLngLat: [114.038355, 27.63057],
			int1: 114.039946,
			lat1: 27.628475,
			int2: 114.038355,
			lat2: 27.63057,
			};
			},
			watch: {
			@@ -50,29 +75,40 @@
			this.pitch = this.perspectiveControl.pitch;
			this.roll = this.perspectiveControl.roll;
			},
			isendPosition() {
			this.int2 = this.endPosition[0];
			this.lat2 = this.endPosition[1];
			console.log(this.endPosition);
			},
			},
			methods: {
			submitForm() {
			if (this.lnt && this.lat) {
			let that = this;
			// 定制化窗体
			// let position = {};
			// let lntLat = [that.lnt, that.lat];
			// let d = {
			// position,
			// lntLat,
			// query: { position, lntLat },
			// useJWD: true, //仅使用经纬度
			// };
			// that.$store.dispatch("setMobileWindows", d);
			let position = {};
			let lntLat = [that.lnt, that.lat];
			let d = {
			height: this.height,
			heading: this.heading,
			pitch: this.pitch,
			roll: this.roll,
			position,
			lntLat,
			query: { position, lntLat },
			useJWD: true, //仅使用经纬度
			};
			that.$store.dispatch("MSET_GOTOCC", d);
			that.$store.dispatch("setMobileWindows", d);
			// let d = {
			// height: this.height,
			// heading: this.heading,
			// pitch: this.pitch,
			// roll: this.roll,
			// };
			// that.$store.dispatch("MSET_GOTOCC", d);
			}
			},
			// dingwei(startLngLat, endLngLat) {
			dingwei() {
			let ints = [this.startLngLat, this.endLngLat];
			console.log(ints);
			this.$store.dispatch("MSET_GOTOWHERE", ints);
			},
			},
			};
			@@ -84,5 +120,11 @@
			bottom: 60px;
			width: 73%;
			z-index: 500;
			.mobileGoTocontext {
			width: 100%;
			height: 100%;
			background-color: #fff;
			word-wrap: break-word;
			}
			}
			</style>
			</style>

			@@ -1,5 +1,9 @@
			<template>
			<div id="mobilePopupOurAfter">
			<div
			class="mobilePopupOurAfter"
			:class="{ ismBigPopupAfter: mBigPopupAfter }"
			>
			<!-- v-show="mBigPopupAfter" -->
			<div class="m_p_a_heard">
			<div><i class="el-icon-menu icon"></i></div>
			<div @click="closeBigPopupAfter"><i class="el-icon-close icon"></i></div>
			@@ -32,6 +36,7 @@
			</template>

			<script>
			import { mapGetters } from "vuex";
			import { getList } from "@/api/mobile/orgnav/index"; //机构单位
			import { getChildNavList } from "@/api/mobile/public/arc"; //社区建筑
			import {
			@@ -51,6 +56,9 @@
			// import { getListparking } from "@/api/mobile/stop/index"; //停车场
			export default {
			name: "mobilePopupOurAfter",
			computed: {
			...mapGetters(["mBigPopupAfter"]),
			},
			data() {
			return {
			choiceValue: "",
			@@ -158,14 +166,16 @@
			align-items: center;
			justify-content: center;
			}
			#mobilePopupOurAfter {
			.mobilePopupOurAfter {
			position: fixed;
			top: 37.5%;
			left: 13.5%;
			// left: 13.5%;
			left: -1000px;
			width: 75%;
			height: 25%;
			background-color: #fff;
			box-shadow: 0px 0px 5px #29baf1;
			transition: all 0.5s;
			// background-image: linear-gradient(
			// // 135deg,
			// #28bbf06c 30px,
			@@ -230,4 +240,7 @@
			}
			}
			}
			.ismBigPopupAfter {
			left: 13.5%;
			}
			</style>

			@@ -206,7 +206,10 @@
			let that = this;
			if (val == "去这") {
			//定位
			console.log(this.query.query);
			// console.log(this.query.query);
			// that.$store.commit("set_endPosition", this.query.query.lntLat);
			let ints = [[114.039946, 27.628475], that.query.query.lntLat];
			that.$store.dispatch("MSET_GOTOWHERE", ints);
			} else if (val == "实景") {
			this.$store.commit(
			"MSET_OPENMOBILEPANORAMA",

			@@ -14,13 +14,16 @@
			<mobileCortrolSearch ref="mobileCortrolSearch"></mobileCortrolSearch>
			<!-- 控制↑ -->
			<!-- 控制大弹窗的弹窗 -->
			<mobilePopupOurAfter v-if="mBigPopupAfter"></mobilePopupOurAfter>
			<!-- v-if="mBigPopupAfter" -->
			<mobilePopupOurAfter></mobilePopupOurAfter>
			<!-- 大弹窗 -->
			<mobilePopupOur :style="[bigPopup]" v-if="mBigPopup"></mobilePopupOur>
			<!-- 测试-跳转位置 -->
			<!-- <mobileGoTo></mobileGoTo> -->
			<mobileGoTo></mobileGoTo>
			<!-- 实景窗口 -->
			<mobilePanorama></mobilePanorama>
			<!-- <mobilePanorama></mobilePanorama> -->
			<!-- 退出导航 -->
			<mobileCloseRouter></mobileCloseRouter>
			<!-- 盖住左下角 -->
			<div class="cover_mobileMap">智慧社区</div>
			</div>
			@@ -325,7 +328,7 @@
			luminanceAtZenith: 0.5,
			});

			tilesetLayer.addOverlay(tileset);
			// tilesetLayer.addOverlay(tileset);
			// tilesetLayer.show = false;

			let silhouetteBlue =

			@@ -21,6 +21,10 @@
			dimensionData: (state) => state.mobile.dimensionData, // 维度镜头数据
			perspectiveControl: (state) => state.mobile.perspectiveControl, ///视角控制：高度、角度 ()=>{}
			audioState: (state) => state.mobile.audioState, //文字转语音状态

			isOpenDrawALine: (state) => state.mobile.isOpenDrawALine, //是否开启路线
			isendPosition: (state) => state.mobile.isendPosition, //路线导航终点数据改变
			endPosition: (state) => state.mobile.endPosition, //路线导航终点数据
			};

			const navigation = {

			@@ -1,4 +1,5 @@
			import $store from "../index";
			import axios from "axios";
			const mobile = {
			state: {
			mviewer: null, // 地图实体类
			@@ -51,6 +52,13 @@

			audioData: null, //语音
			audioState: false, //语音状态

			navigationStartLngLat: "", //导航起点
			navigationEndLngLat: "", //导航终点
			drawALineLayer: null, //导航路径图层
			isOpenDrawALine: false, //是否开启路径
			endPosition: "", //传送终点经纬度--
			isendPosition: false, //传送终点经纬度--感应数据
			},
			mutations: {
			MSET_VIEWER(state, viewer) {
			@@ -221,6 +229,45 @@
			state.wallLayer = data.wallLayer;
			state.tileset = data.tileset;
			state.usetowpointfive = data.usetowpointfive;
			},
			//直接移动
			cameraSetView(state, data) {
			state.mviewer.camera.setView({
			// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
			// fromDegrees()方法，将经纬度和高程转换为世界坐标
			destination: new global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
			// 114.0351,
			// 27.6314,
			// 200.0
			data[0] + 0.0,
			data[1] + 0.00028,
			data[2] \|\| 300
			),
			orientation: {
			heading: global.DC.Namespace.Cesium.Math.toRadians(
			state.dimensionData.heading
			),
			pitch: global.DC.Namespace.Cesium.Math.toRadians(
			state.dimensionData.pitch
			),
			// heading: data.heading,
			// pitch: data.pitch,
			roll: state.dimensionData.roll,
			},
			});
			},
			//删除路线
			removePolyline(state) {
			if (state.drawALineLayer) {
			state.drawALineLayer.remove();
			state.drawALineLayer = null;
			state.isOpenDrawALine = false;
			}
			},
			//传送终点数据
			set_endPosition(state, data) {
			state.isendPosition = !state.isendPosition;
			state.endPosition = data;
			},
			},
			actions: {
			@@ -548,6 +595,7 @@
			},
			});
			},
			//文字转语音控制↓
			MSET_GETAUDIO({ state, commit, dispatch }, val) {
			state.audioData = new window.SpeechSynthesisUtterance();
			state.audioData.text = val;
			@@ -568,6 +616,87 @@
			}
			}
			},
			//文字转语音控制↑
			//导航系统↓
			MSET_GOTOWHERE({ state, commit, dispatch }, val) {
			//本地图使用的是WGS84坐标，而高德使用的是火星坐标GCJ02，所以需要转换参数过去
			// 返回值需要转换为WGS84坐标
			state.navigationStartLngLat = [+val[0][0], +val[0][1]]; //导航起点
			state.navigationEndLngLat = [+val[1][0], +val[1][1]]; //导航终点
			//转换WGS84坐标为GCJ02
			let GCJ02StartLngLat = global.DC.CoordTransform.WGS84ToGCJ02(
			Number(state.navigationStartLngLat[0]),
			Number(state.navigationStartLngLat[1])
			);
			let GCJ02EndLngLat = global.DC.CoordTransform.WGS84ToGCJ02(
			Number(state.navigationEndLngLat[0]),
			Number(state.navigationEndLngLat[1])
			);
			// 获取路径，使用的是高德API
			axios
			.get("https://restapi.amap.com/v3/direction/walking", {
			params: {
			origin: `${Number(GCJ02StartLngLat[0]).toFixed(6)},${Number(
			GCJ02StartLngLat[1]
			).toFixed(6)}`,
			destination: `${Number(GCJ02EndLngLat[0]).toFixed(6)},${Number(
			GCJ02EndLngLat[1]
			).toFixed(6)}`,
			key: "4b3e1db3211054ce5b466407cbb9d221",
			output: "json",
			},
			})
			.then((res) => {
			//回调
			const paths = res.data.route.paths[0].steps;
			drawALine(paths);
			});

			let drawALine = (paths) => {
			//paths是个道路对象，其中polyline是String类型的经纬度
			let Str = state.navigationStartLngLat.join(",") + ";"; //加入起点
			for (let index = 0; index < paths.length; index++) {
			const path = paths[index];
			let polyline = path.polyline; //取到String类型的经纬度
			let polylineArr = polyline.split(";"); //转为数组
			let polylineArrLength = polylineArr.length; //获取长度，避免多次重复读取polylineArr.length
			for (let k = 0; k < polylineArrLength; k++) {
			let inPolylineArr = polylineArr[k].split(","); //转经纬度为单独的数组
			let outIn = global.DC.CoordTransform.GCJ02ToWGS84(
			//处理火星坐标转换成WGS84 GCJ02ToWGS84
			inPolylineArr[0],
			inPolylineArr[1]
			);
			polylineArr[k] = outIn.join(","); //每组经纬度转为String
			}
			polyline = polylineArr.join(";"); //合并转换后的经纬度合集

			Str += polyline; //自加
			Str += ";";
			}
			Str += state.navigationEndLngLat.join(","); //加入终点
			drawALineLayer(Str); //绘画线路
			};

			//绘画线路
			let drawALineLayer = (Str) => {
			//检查是否存在路线
			commit("removePolyline");
			let drawALineLayer = new global.DC.VectorLayer("layer");
			state.mviewer.addLayer(drawALineLayer);
			let polyline = new global.DC.Polyline(Str); //加入绘画点
			polyline.setStyle({
			width: 3,
			material: DC.Color.RED,
			clampToGround: true,
			});
			drawALineLayer.addOverlay(polyline);
			state.drawALineLayer = drawALineLayer;
			state.isOpenDrawALine = true;
			commit("cameraSetView", state.navigationStartLngLat); //移动
			};
			},
			//导航系统↑
			},
			};