3.3 1.自定义标签，退出后自动清除 2.自定义标签，转换二维码的数据格式ok，移动端对接二维码ok， 3.自定义标签点击移动到指定位置 ok 4....

liuyg

2022-03-04 a22aa1086eeef39a26cc161326ce09cd183185ea

 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>