删除注释

shuishen

2022-03-07 c9570001ad913c37e161618c99ce2f194298ae3a

删除注释

 src/App.vue

@@ -1,169 +1,168 @@
<template>
  <div id="app" :class="{ cantdoit: cantdoits }">
    <router-view></router-view>
  </div>
    <div id="app" :class="{ cantdoit: cantdoits }">
        <router-view></router-view>
    </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  name: "App",
  data() {
    return {
      //   consoles: 1,
      //   consoles1: 1,
      cantdoits: false,
    };
  },
  mounted() {
    let that = this;

    // console.log(frames, 789456);
    // setInterval(function () {
    //   check();
    // }, 4000);
    // var check = function () {
    //   function doCheck(a) {
    //     if (("" + a / a)["length"] !== 1 || a % 20 === 0) {
    //       //   (function () {}["constructor"]("debugger")());
    //       console.log("已打开控制台1");
    //       that.consoles++;
    //       return;
    //     } else {
    //       //   (function () {}["constructor"]("debugger")());
    //       //   console.log("已打开控制台2");
    //       //   return;
    //       that.consoles++;
    //     }
    //     doCheck(++a);
    //   }
    //   try {
    //     doCheck(0);
    //   } catch (err) {}
    // };
    // check();
    // console.log(this.getQueryString("data"), "window.location");
    // var reg = new RegExp("(^|&)" + "data" + "=([^&]*)(&|$)");
    let data = this.getQueryString("data");
    // console.log(data);
    try {
      data = JSON.parse(data);
    } catch (error) {}

    this.$store.commit("set_urlParameterData", data); //传入数据

    let d = {
      methods: "goto",
      jd: 125.11111,
      wd: 25.555555,
    };
    // console.log(
    //   "http://192.168.0.222:8080/#/mobileLayout/default?data=" +
    //     JSON.stringify(d)
    // );
    if (this._isMobile()) {
      this.cantdoits = true;
      // 手机端
      this.$router.replace("/mobileLayout");

      AMapLoader.load({
        key: "9c4b1a0ce88821775605e726073c52b5", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], //插件列表
      })
        .then((AMap) => {
          console.log(AMap);
          window.AMap = AMap;
          // that.map = new AMap.Map("mymap", {
          //   center: [115.84414205551147, 28.678983439095823],
          //   zoom: 14,
          // });

          // this.map.on('touchmove', (e) => {
          //     console.log(e)
          // })

          // that.getLocationInfor(AMap, 115.84414205551147, 28.678983439095823);
          // that.map.on("mapmove", () => {
          //   that.mouseMoveFlag = false;
          //   that.mouseMoveFlag = true;
          //   var currentCenter = that.map.getCenter();
          //   if (that.setime) {
          //     clearTimeout(that.setime);
          //   }
          //   that.setime = setTimeout(() => {
          //     that.getLocationInfor(AMap, currentCenter.lng, currentCenter.lat);
          //     clearTimeout(that.setime);
          //     that.setime = null;
          //   }, 200);
          // });

          // this.map.on('mousemove', (e) => {
          //     console.log(e)
          // })
        })
        .catch((e) => {
          console.log(e);
        });
    } else {
      // pc端
      this.$router.replace("/pcLayout");
    }
  },
  methods: {
    getQueryString(name) {
      let inlength =
        window.location.href.indexOf("?" + name + "=") + name.length + 2;
      // console.log(inlength);
      // console.log(window.location.href);
      var r = window.location.href.slice(inlength);
      if (r != null) return decodeURIComponent(r);
      return null;
    },
    getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
    name: 'App',
    data () {
        return {
            //   consoles: 1,
            //   consoles1: 1,
            cantdoits: false
        }
      }
      return false;
    },
    _isMobile() {
      const flag = navigator.userAgent.match(
        /(phone|pad|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows phone)/i
      );
      return flag;
    mounted () {
        const that = this

        // console.log(frames, 789456);
        // setInterval(function () {
        //   check();
        // }, 4000);
        // var check = function () {
        //   function doCheck(a) {
        //     if (("" + a / a)["length"] !== 1 || a % 20 === 0) {
        //       //   (function () {}["constructor"]("debugger")());
        //       console.log("已打开控制台1");
        //       that.consoles++;
        //       return;
        //     } else {
        //       //   (function () {}["constructor"]("debugger")());
        //       //   console.log("已打开控制台2");
        //       //   return;
        //       that.consoles++;
        //     }
        //     doCheck(++a);
        //   }
        //   try {
        //     doCheck(0);
        //   } catch (err) {}
        // };
        // check();
        // console.log(this.getQueryString("data"), "window.location");
        // var reg = new RegExp("(^|&)" + "data" + "=([^&]*)(&|$)");
        let data = this.getQueryString('data')
        // console.log(data);
        try {
            data = JSON.parse(data)
        } catch (error) { }

        this.$store.commit('set_urlParameterData', data) // 传入数据

        const d = {
            methods: 'goto',
            jd: 125.11111,
            wd: 25.555555
        }
        // console.log(
        //   "http://192.168.0.222:8080/#/mobileLayout/default?data=" +
        //     JSON.stringify(d)
        // );
        if (this._isMobile()) {
            this.cantdoits = true
            // 手机端
            this.$router.replace('/mobileLayout')

            AMapLoader.load({
                key: '9c4b1a0ce88821775605e726073c52b5', // 申请好的Web端开发者Key，首次调用 load 时必填
                version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: [] // 插件列表
            })
                .then((AMap) => {
                    window.AMap = AMap
                    // that.map = new AMap.Map("mymap", {
                    //   center: [115.84414205551147, 28.678983439095823],
                    //   zoom: 14,
                    // });

                    // this.map.on('touchmove', (e) => {
                    //     console.log(e)
                    // })

                    // that.getLocationInfor(AMap, 115.84414205551147, 28.678983439095823);
                    // that.map.on("mapmove", () => {
                    //   that.mouseMoveFlag = false;
                    //   that.mouseMoveFlag = true;
                    //   var currentCenter = that.map.getCenter();
                    //   if (that.setime) {
                    //     clearTimeout(that.setime);
                    //   }
                    //   that.setime = setTimeout(() => {
                    //     that.getLocationInfor(AMap, currentCenter.lng, currentCenter.lat);
                    //     clearTimeout(that.setime);
                    //     that.setime = null;
                    //   }, 200);
                    // });

                    // this.map.on('mousemove', (e) => {
                    //     console.log(e)
                    // })
                })
                .catch((e) => {
                    console.log(e)
                })
        } else {
            // pc端
            this.$router.replace('/pcLayout')
        }
    },
  },
};
    methods: {
        getQueryString (name) {
            const inlength =
                window.location.href.indexOf('?' + name + '=') + name.length + 2
            // console.log(inlength);
            // console.log(window.location.href);
            var r = window.location.href.slice(inlength)
            if (r != null) return decodeURIComponent(r)
            return null
        },
        getQueryVariable (variable) {
            var query = window.location.search.substring(1)
            var vars = query.split('&')
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split('=')
                if (pair[0] == variable) {
                    return pair[1]
                }
            }
            return false
        },
        _isMobile () {
            const flag = navigator.userAgent.match(
                /(phone|pad|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows phone)/i
            )
            return flag
        }
    }
}
</script>

<style>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  width: 100%;
  height: 100%;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    width: 100%;
    height: 100%;
}
.cantdoit * {
  -webkit-touch-callout: none !important; /*系统默认菜单被禁用*/
  -webkit-user-select: none !important; /*webkit浏览器*/
  -khtml-user-select: none !important; /*早期浏览器*/
  -moz-user-select: none !important; /*火狐*/
  -ms-user-select: none !important; /*IE10*/
  user-select: none !important;
    -webkit-touch-callout: none !important; /*系统默认菜单被禁用*/
    -webkit-user-select: none !important; /*webkit浏览器*/
    -khtml-user-select: none !important; /*早期浏览器*/
    -moz-user-select: none !important; /*火狐*/
    -ms-user-select: none !important; /*IE10*/
    user-select: none !important;
}
</style>

 src/components/campusNav/index.vue

@@ -1,654 +1,637 @@
<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>
    <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>
          </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>
            <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>
        </div>
        <div>
          <el-button @click="startNavigation" type="primary">导航</el-button>
        </div>
      </div>
    </template>
  </public-box>
            <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";
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,
            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");
      },
            isOverRouter: false // 是否启用了导航
        }
    },
    comeName: {
      immediate: true,
      handler(newCode, oldCode) {
        this.comeNameText = newCode;
        console.log(newCode, "see");
      },
    computed: {
        ...mapGetters([
            'viewer',
            'twoOrThree',
            // 起点
            'startingPoint',
            // 终点
            'terminus',
            // 出发名称
            'getToName',
            // 到达名称
            'comeName',
            // 点信息
            'pointPosition',
            'campusNavFlag'
        ])
    },
    campusNavFlag: {
      immediate: true,
      handler(newCode, oldCode) {
        if (newCode == false) {
          this.navigationWay = "步行";
          this.tabOneFlag = true;
          this.tabTwoFlag = false;
    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);
    mounted () {
        const leftBut = document.querySelectorAll('.el-input-group__prepend')
        leftBut[0].onclick = () => {
            this.chouseDian('start')
        }
        leftBut[1].onclick = () => {
            this.chouseDian('end')
        }
    },
    methods: {
        chouseDian (val) {
            const that = this

    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,
              });
            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)
                }
            }

            res.data.route.paths[0].steps.forEach((item) => {
              item.polyline = item.polyline.split(";");
            // console.log(val, "see1");
            this.butChouse = val
            // 关闭其他地图事件
            that.$store.commit('set_closeMapClick', true)
            // 添加标记
            const 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
                }
                const 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')
            }

              var lineArr = [];
            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)
        },

              item.polyline.forEach((it) => {
                it = it.split(",");
                lineArr.push(
                  this.DC.CoordTransform.GCJ02ToWGS84(it[0], it[1]).join(",")
                );
              });
        tabClick (param) {
            this.navigationWay = param
            this.tabOneFlag = !this.tabOneFlag
            this.tabTwoFlag = !this.tabTwoFlag
        },

              lineArr = lineArr.join(";");
        startNavigation () {
            const that = this
            // 清除自定义位置
            if (this.startLayer != null) {
                this.startLayer.clear()
                // this.startLayer = null;
            }
            if (this.endLayer != null) {
                this.endLayer.clear()
                // this.endLayer = null;
            }

              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);
            if (this.routeLayer == null) {
                this.routeLayer = new this.DC.VectorLayer('navigation')
                this.viewer.addLayer(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,
                },
              });
                this.routeLayer.clear()
            }
          });
      } 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(";");
            if (this.startingPoint == null) {
                this.$message('请输入起点！！！')
            }
            if (this.terminus == null) {
                this.$message('请输入终点！！！')
            }

              var lineArr = [];
            // 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)

              item.polyline.forEach((it) => {
                it = it.split(",");
                lineArr.push(
                  this.DC.CoordTransform.GCJ02ToWGS84(it[0], it[1]).join(",")
                );
              });
            var routes = ''

              lineArr = lineArr.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 += ";";
            var origin = this.DC.CoordTransform.WGS84ToGCJ02(startLog, startLat)
            var destination = this.DC.CoordTransform.WGS84ToGCJ02(endLog, endLat)

              routes += 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 =
              startLog + "," + startLat + ";" + routes + endLog + "," + endLat;
                        res.data.route.paths[0].steps.forEach((item) => {
                            item.polyline = item.polyline.split(';')

            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);
                            var lineArr = []

            if (this.twoOrThree == "真三维") {
              this.viewer.flyTo(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 {
                            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 {
              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,
                },
              });
                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();
      }
    },
        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;
        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 = []
        }
      });
    },

    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();
  },
};
    destroyed () {
        // this.closeModel();
    }
}
</script>

<style lang="scss" scope></style>

 src/components/leftNav/index.vue

@@ -1,145 +1,141 @@
<template>
  <div class="left-nav">
    <ul>
      <li
        v-for="(item, index) in leftNavData"
        :key="index"
        @click="leftNavClick(item)"
      >
        <img :src="item.img" alt="" />
        <span>{{ item.label }}</span>
      </li>
      <li class="addIcons" @click="addIcons">
        <!-- <img :style="[imgStyle]" :src="item.img" alt="" /> -->
        <span>+</span>
      </li>
    </ul>
  </div>
    <div class="left-nav">
        <ul>
            <li v-for="(item, index) in leftNavData" :key="index" @click="leftNavClick(item)">
                <img :src="item.img" alt />
                <span>{{ item.label }}</span>
            </li>
            <li class="addIcons" @click="addIcons">
                <!-- <img :style="[imgStyle]" :src="item.img" alt="" /> -->
                <span>+</span>
            </li>
        </ul>
    </div>
</template>

<script>
import {
  getLifeList,
  getMonitorList,
  getSceneList,
  getWayList,
  getTagList,
} from "@/api/pc/leftNav/index";
import { mapGetters } from "vuex";
    getLifeList,
    getMonitorList,
    getSceneList,
    getWayList,
    getTagList
} from '@/api/pc/leftNav/index'
import { mapGetters } from 'vuex'
export default {
  name: "leftNav",
  computed: {
    ...mapGetters([
      "viewer",
      "closeMapClick", // 关闭地图点击，防止新增标签误触
      "addIconsLayerIconPopup", //传送关闭编辑窗口，刷新标签数据
    ]),
  },
  data() {
    return {
      leftNavData: [
        {
          flag: true,
          label: "标签",
          img: "/img/leftnav/tag-checked.png",
          normal: "/img/leftnav/tag.png",
          checked: "/img/leftnav/tag-checked.png",
          layer: "tagLayer",
        },
        {
          flag: false,
          label: "道路",
          img: "/img/leftnav/way.png",
          normal: "/img/leftnav/way.png",
          checked: "/img/leftnav/way-checked.png",
          layer: "wayLayer",
        },
        {
          flag: false,
          label: "实景",
          img: "/img/leftnav/scene.png",
          normal: "/img/leftnav/scene.png",
          checked: "/img/leftnav/scene-checked.png",
          layer: "sceneLayer",
        },
        {
          flag: false,
          label: "监控",
          img: "/img/leftnav/monitor.png",
          normal: "/img/leftnav/monitor.png",
          checked: "/img/leftnav/monitor-checked.png",
          layer: "monitorLayer",
        },
        // {
        //     flag: false,
        //     label: '活动',
        //     img: '/img/leftnav/activity.png',
        //     normal: '/img/leftnav/activity.png',
        //     checked: '/img/leftnav/activity-checked.png',
        //     layer: 'activityLayer'
        // },
        // {
        //     flag: false,
        //     label: 'AED',
        //     img: '/img/leftnav/aed.png',
        //     normal: '/img/leftnav/aed.png',
        //     checked: '/img/leftnav/aed-checked.png',
        //     layer: 'aedLayer'
        // },
        {
          flag: false,
          label: "停车",
          img: "/img/leftnav/park.png",
          normal: "/img/leftnav/park.png",
          checked: "/img/leftnav/park-checked.png",
          layer: "parkLayer",
        },
        {
          flag: false,
          label: "出入",
          img: "/img/leftnav/come.png",
          normal: "/img/leftnav/come.png",
          checked: "/img/leftnav/come-checked.png",
          layer: "comeLayer",
        },
      ],
      viewer: null,
      DC: null,
      tagLayer: null,
      wayLayer: null,
      sceneLayer: null,
      monitorLayer: null,
      activityLayer: null,
      aedLayer: null,
      parkLayer: null,
      comeLayer: null,
    };
  },
  created() {
    this.DC = global.DC;
  },
  mounted() {
    //初始化新增标签图层
    // this.$store.commit("createAddIconsLayerIconLayer", { viewer: this.viewer });
  },
  watch: {
    addIconsLayerIconPopup() {
      if (!this.addIconsLayerIconPopup) {
        this.reself();
      }
    name: 'leftNav',
    computed: {
        ...mapGetters([
            'viewer',
            'closeMapClick', // 关闭地图点击，防止新增标签误触
            'addIconsLayerIconPopup' // 传送关闭编辑窗口，刷新标签数据
        ])
    },
  },
  methods: {
    reself() {
      let that = this;
      if (this.tagLayer) {
        this.tagLayer.clear();
      }
      getTagList().then((res) => {
        res.data.data.forEach((item) => {
          const divIcon = new this.DC.DivIcon(
            new that.DC.Position(Number(item.jd), Number(item.wd), 0),
            `
    data () {
        return {
            leftNavData: [
                {
                    flag: true,
                    label: '标签',
                    img: '/img/leftnav/tag-checked.png',
                    normal: '/img/leftnav/tag.png',
                    checked: '/img/leftnav/tag-checked.png',
                    layer: 'tagLayer'
                },
                {
                    flag: false,
                    label: '道路',
                    img: '/img/leftnav/way.png',
                    normal: '/img/leftnav/way.png',
                    checked: '/img/leftnav/way-checked.png',
                    layer: 'wayLayer'
                },
                {
                    flag: false,
                    label: '实景',
                    img: '/img/leftnav/scene.png',
                    normal: '/img/leftnav/scene.png',
                    checked: '/img/leftnav/scene-checked.png',
                    layer: 'sceneLayer'
                },
                {
                    flag: false,
                    label: '监控',
                    img: '/img/leftnav/monitor.png',
                    normal: '/img/leftnav/monitor.png',
                    checked: '/img/leftnav/monitor-checked.png',
                    layer: 'monitorLayer'
                },
                // {
                //     flag: false,
                //     label: '活动',
                //     img: '/img/leftnav/activity.png',
                //     normal: '/img/leftnav/activity.png',
                //     checked: '/img/leftnav/activity-checked.png',
                //     layer: 'activityLayer'
                // },
                // {
                //     flag: false,
                //     label: 'AED',
                //     img: '/img/leftnav/aed.png',
                //     normal: '/img/leftnav/aed.png',
                //     checked: '/img/leftnav/aed-checked.png',
                //     layer: 'aedLayer'
                // },
                {
                    flag: false,
                    label: '停车',
                    img: '/img/leftnav/park.png',
                    normal: '/img/leftnav/park.png',
                    checked: '/img/leftnav/park-checked.png',
                    layer: 'parkLayer'
                },
                {
                    flag: false,
                    label: '出入',
                    img: '/img/leftnav/come.png',
                    normal: '/img/leftnav/come.png',
                    checked: '/img/leftnav/come-checked.png',
                    layer: 'comeLayer'
                }
            ],
            viewer: null,
            DC: null,
            tagLayer: null,
            wayLayer: null,
            sceneLayer: null,
            monitorLayer: null,
            activityLayer: null,
            aedLayer: null,
            parkLayer: null,
            comeLayer: null
        }
    },
    created () {
        this.DC = global.DC
    },
    mounted () {
        // 初始化新增标签图层
        // this.$store.commit("createAddIconsLayerIconLayer", { viewer: this.viewer });
    },
    watch: {
        addIconsLayerIconPopup () {
            if (!this.addIconsLayerIconPopup) {
                this.reself()
            }
        }
    },
    methods: {
        reself () {
            const that = this
            if (this.tagLayer) {
                this.tagLayer.clear()
            }
            getTagList().then((res) => {
                res.data.data.forEach((item) => {
                    const divIcon = new this.DC.DivIcon(
                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
                        `
                        <div class="tag-entitys-box">
                            <div class="tag-content">
                                ${item.mechanismname}
@@ -149,89 +145,87 @@
                            </div>
                        </div>
                    `
          );
          //订阅事件
          divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
            if (that.closeMapClick) {
              return;
            }
            that.openPopups({
              lng: e.overlay.position.lng,
              lat: e.overlay.position.lat,
              item: item,
            });
          });
          this.tagLayer.addOverlay(divIcon);
          if (!this.leftNavData[0].flag) {
            this.tagLayer.show = false;
          }
        });
      });
    },
    addIcons() {
      if (this.closeMapClick) {
        //若正在加标签，退出
        return;
      }
      //加标签
      console.log("addIcons", "see");
      this.$store.dispatch("chouseAddIconsLayerIcon", {
        //新增标签 选定位置
        viewer: this.viewer,
        fn: (lnglat) => {
          //返回选定坐标
          console.log(lnglat, "see");
          //添加空白标签
          this.$store.dispatch("addIconsLayerIcon", {
            lnglat: lnglat,
            viewer: this.viewer,
          });
                    )
                    // 订阅事件
                    divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
                        if (that.closeMapClick) {
                            return
                        }
                        that.openPopups({
                            lng: e.overlay.position.lng,
                            lat: e.overlay.position.lat,
                            item: item
                        })
                    })
                    this.tagLayer.addOverlay(divIcon)
                    if (!this.leftNavData[0].flag) {
                        this.tagLayer.show = false
                    }
                })
            })
        },
      });
    },
    generatePosition(num) {
      const list = [];
      for (let i = 0; i < num; i++) {
        const lng = 115.86271917 + Math.random() * 0.01;
        const lat = 28.73615593 + Math.random() * 0.02;
        list.push(new this.DC.Position(lng, lat, 0));
      }
      return list;
    },
    leftNavClick(item) {
      item.flag = !item.flag;
      if (item.flag == true) {
        item.img = item.checked;
        this[item.layer].show = true;
      } else {
        item.img = item.normal;
        this[item.layer].show = false;
      }
    },
    initialize(viewer) {
      var that = this;
      viewer.scene.globe.depthTestAgainstTerrain = false;
      this.viewer = viewer;
      this.tagLayer = new this.DC.HtmlLayer("tagLayer");
      viewer.addLayer(this.tagLayer);
      this.wayLayer = new this.DC.HtmlLayer("wayLayer");
      viewer.addLayer(this.wayLayer);
      this.sceneLayer = new this.DC.HtmlLayer("sceneLayer");
      viewer.addLayer(this.sceneLayer);
      this.monitorLayer = new this.DC.HtmlLayer("monitorLayer");
      viewer.addLayer(this.monitorLayer);
      this.aedLayer = new this.DC.VectorLayer("aedLayer");
      viewer.addLayer(this.aedLayer);
      this.parkLayer = new this.DC.HtmlLayer("parkLayer");
      viewer.addLayer(this.parkLayer);
      this.comeLayer = new this.DC.VectorLayer("comeLayer");
      viewer.addLayer(this.comeLayer);
        addIcons () {
            if (this.closeMapClick) {
                // 若正在加标签，退出
                return
            }
            // 加标签
            this.$store.dispatch('chouseAddIconsLayerIcon', {
                // 新增标签 选定位置
                viewer: this.viewer,
                fn: (lnglat) => {
                    // 返回选定坐标
                    // 添加空白标签
                    this.$store.dispatch('addIconsLayerIcon', {
                        lnglat: lnglat,
                        viewer: this.viewer
                    })
                }
            })
        },
        generatePosition (num) {
            const list = []
            for (let i = 0; i < num; i++) {
                const lng = 115.86271917 + Math.random() * 0.01
                const lat = 28.73615593 + Math.random() * 0.02
                list.push(new this.DC.Position(lng, lat, 0))
            }
            return list
        },
        leftNavClick (item) {
            item.flag = !item.flag
            if (item.flag == true) {
                item.img = item.checked
                this[item.layer].show = true
            } else {
                item.img = item.normal
                this[item.layer].show = false
            }
        },
        initialize (viewer) {
            var that = this
            viewer.scene.globe.depthTestAgainstTerrain = false
            this.viewer = viewer
            this.tagLayer = new this.DC.HtmlLayer('tagLayer')
            viewer.addLayer(this.tagLayer)
            this.wayLayer = new this.DC.HtmlLayer('wayLayer')
            viewer.addLayer(this.wayLayer)
            this.sceneLayer = new this.DC.HtmlLayer('sceneLayer')
            viewer.addLayer(this.sceneLayer)
            this.monitorLayer = new this.DC.HtmlLayer('monitorLayer')
            viewer.addLayer(this.monitorLayer)
            this.aedLayer = new this.DC.VectorLayer('aedLayer')
            viewer.addLayer(this.aedLayer)
            this.parkLayer = new this.DC.HtmlLayer('parkLayer')
            viewer.addLayer(this.parkLayer)
            this.comeLayer = new this.DC.VectorLayer('comeLayer')
            viewer.addLayer(this.comeLayer)

      getTagList().then((res) => {
        res.data.data.forEach((item) => {
          const divIcon = new this.DC.DivIcon(
            new that.DC.Position(Number(item.jd), Number(item.wd), 0),
            `
            getTagList().then((res) => {
                res.data.data.forEach((item) => {
                    const divIcon = new this.DC.DivIcon(
                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
                        `
                        <div class="tag-entitys-box">
                            <div class="tag-content">
                                ${item.mechanismname}
@@ -241,29 +235,29 @@
                            </div>
                        </div>
                    `
          );
          //订阅事件
          divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
            if (that.closeMapClick) {
              return;
            }
            // console.log(item, "see11111");
            that.openPopups({
              lng: e.overlay.position.lng,
              lat: e.overlay.position.lat,
              item: item,
            });
          });
          this.tagLayer.addOverlay(divIcon);
        });
        // this.tagLayer.show = false
      });
                    )
                    // 订阅事件
                    divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
                        if (that.closeMapClick) {
                            return
                        }
                        // console.log(item, "see11111");
                        that.openPopups({
                            lng: e.overlay.position.lng,
                            lat: e.overlay.position.lat,
                            item: item
                        })
                    })
                    this.tagLayer.addOverlay(divIcon)
                })
                // this.tagLayer.show = false
            })

      getWayList().then((res) => {
        res.data.data.forEach((item) => {
          const divIcon = new this.DC.DivIcon(
            new that.DC.Position(Number(item.jd), Number(item.wd), 0),
            `
            getWayList().then((res) => {
                res.data.data.forEach((item) => {
                    const divIcon = new this.DC.DivIcon(
                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
                        `
                        <div  class="way-entitys-box">
                            <div  class="way-title" style="border: white 1px solid; font-size: 0.875rem; background: #0066ff;  width: 18px; line-height: 14px; padding: 6px 2px 6px 2px; color: white; text-align: center;">
                                 ${item.roadname}
@@ -273,141 +267,141 @@
                            </div>
                        </div>
                    `
          );
          this.wayLayer.addOverlay(divIcon);
        });
        this.wayLayer.show = false;
      });
                    )
                    this.wayLayer.addOverlay(divIcon)
                })
                this.wayLayer.show = false
            })

      getMonitorList().then((res) => {
        res.data.data.forEach((item) => {
          const divIcon = new this.DC.DivIcon(
            new that.DC.Position(Number(item.jd), Number(item.wd), 0),
            `
            getMonitorList().then((res) => {
                res.data.data.forEach((item) => {
                    const divIcon = new this.DC.DivIcon(
                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
                        `
                        <div class="monitor-entitys-box">
                            <div>${item.mechanismname}</div>
                            <img class="monitor-entitys-box" src="/img/leftnav/map-monitor.png" alt="">
                        </div>
                        `
          );
          divIcon.attrParams = item;
          this.monitorLayer.addOverlay(divIcon);
                    )
                    divIcon.attrParams = item
                    this.monitorLayer.addOverlay(divIcon)

          divIcon.on(that.DC.MouseEventType.CLICK, (e) => {
            this.$store.commit("SET_PANORAMAPOPUP", false);
            this.$store.commit("SET_DETAILSPOPUP", false);
            this.$store.commit(
              "SET_STATENAME",
              e.overlay.attrParams.mechanismname
            );
            this.$store.commit("SET_MONITORURL", e.overlay.attrParams.videourl);
            // eslint-disable-next-line new-cap
            var positions = this.DC.Transform.transformWGS84ToCartesian(
              new this.DC.Position.fromArray([
                Number(item.jd),
                Number(item.wd),
                0,
                0,
                -90,
                0,
              ])
            );
            this.viewer.scene.globe.depthTestAgainstTerrain = false;
            // eslint-disable-next-line no-unused-vars
            var monitor = new this.DC.PanoramaBox(this.viewer, {
              domId: "MonitorBox",
              position: [positions],
            });
                    divIcon.on(that.DC.MouseEventType.CLICK, (e) => {
                        this.$store.commit('SET_PANORAMAPOPUP', false)
                        this.$store.commit('SET_DETAILSPOPUP', false)
                        this.$store.commit(
                            'SET_STATENAME',
                            e.overlay.attrParams.mechanismname
                        )
                        this.$store.commit('SET_MONITORURL', e.overlay.attrParams.videourl)
                        // eslint-disable-next-line new-cap
                        var positions = this.DC.Transform.transformWGS84ToCartesian(
                            new this.DC.Position.fromArray([
                                Number(item.jd),
                                Number(item.wd),
                                0,
                                0,
                                -90,
                                0
                            ])
                        )
                        this.viewer.scene.globe.depthTestAgainstTerrain = false
                        // eslint-disable-next-line no-unused-vars
                        var monitor = new this.DC.PanoramaBox(this.viewer, {
                            domId: 'MonitorBox',
                            position: [positions]
                        })

            this.$store.commit("SET_MONITORPOPUP", true);
          });
        });
                        this.$store.commit('SET_MONITORPOPUP', true)
                    })
                })

        this.monitorLayer.show = false;
      });
                this.monitorLayer.show = false
            })

      getSceneList().then((res) => {
        res.data.data.forEach((item) => {
          const divIcon = new this.DC.DivIcon(
            new that.DC.Position(Number(item.jd), Number(item.wd), 0),
            `
            getSceneList().then((res) => {
                res.data.data.forEach((item) => {
                    const divIcon = new this.DC.DivIcon(
                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
                        `
                        <div class="scene-entitys-box">
                            <div>${item.mechanismname}</div>
                            <img src="/img/leftnav/map-panorama.png" alt="">
                        </div>
                        `
          );
          divIcon.attrParams = item;
          this.sceneLayer.addOverlay(divIcon);
                    )
                    divIcon.attrParams = item
                    this.sceneLayer.addOverlay(divIcon)

          divIcon.on(that.DC.MouseEventType.CLICK, (e) => {
            this.$store.commit("SET_DETAILSPOPUP", false);
            this.$store.commit("SET_MONITORPOPUP", false);
            this.$store.commit(
              "SET_STATENAME",
              e.overlay.attrParams.mechanismname
            );
            this.$store.commit(
              "SET_PANORAMAURL",
              e.overlay.attrParams.panoramaurl
            );
            // eslint-disable-next-line new-cap
            var positions = this.DC.Transform.transformWGS84ToCartesian(
              new this.DC.Position.fromArray([
                Number(item.jd),
                Number(item.wd),
                0,
                0,
                -90,
                0,
              ])
            );
            this.viewer.scene.globe.depthTestAgainstTerrain = false;
            // eslint-disable-next-line no-unused-vars
            var panorama = new this.DC.PanoramaBox(this.viewer, {
              domId: "PanoramaBox",
              position: [positions],
            });
                    divIcon.on(that.DC.MouseEventType.CLICK, (e) => {
                        this.$store.commit('SET_DETAILSPOPUP', false)
                        this.$store.commit('SET_MONITORPOPUP', false)
                        this.$store.commit(
                            'SET_STATENAME',
                            e.overlay.attrParams.mechanismname
                        )
                        this.$store.commit(
                            'SET_PANORAMAURL',
                            e.overlay.attrParams.panoramaurl
                        )
                        // eslint-disable-next-line new-cap
                        var positions = this.DC.Transform.transformWGS84ToCartesian(
                            new this.DC.Position.fromArray([
                                Number(item.jd),
                                Number(item.wd),
                                0,
                                0,
                                -90,
                                0
                            ])
                        )
                        this.viewer.scene.globe.depthTestAgainstTerrain = false
                        // eslint-disable-next-line no-unused-vars
                        var panorama = new this.DC.PanoramaBox(this.viewer, {
                            domId: 'PanoramaBox',
                            position: [positions]
                        })

            this.$store.commit("SET_PANORAMAPOPUP", true);
          });
        });
                        this.$store.commit('SET_PANORAMAPOPUP', true)
                    })
                })

        this.sceneLayer.show = false;
      });
                this.sceneLayer.show = false
            })

      getLifeList({ lifetype: 9 }).then((res) => {
        res.data.data.forEach((item) => {
          const label = new this.DC.Label(
            new that.DC.Position(Number(item.jd), Number(item.wd), 0),
            item.mechanismname
          );
          label.setStyle({
            fillColor: this.DC.Color.CRIMSON,
            style: that.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
            outlineColor: that.DC.Color.WHITE, // 边框颜色
            outlineWidth: 8, // 边框大小，
            font: "14px sans-serif",
            pixelOffset: { x: 0, y: -24 },
          });
          this.aedLayer.addOverlay(label);
            getLifeList({ lifetype: 9 }).then((res) => {
                res.data.data.forEach((item) => {
                    const label = new this.DC.Label(
                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
                        item.mechanismname
                    )
                    label.setStyle({
                        fillColor: this.DC.Color.CRIMSON,
                        style: that.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
                        outlineColor: that.DC.Color.WHITE, // 边框颜色
                        outlineWidth: 8, // 边框大小，
                        font: '14px sans-serif',
                        pixelOffset: { x: 0, y: -24 }
                    })
                    this.aedLayer.addOverlay(label)

          const billboard = new this.DC.Billboard(
            new that.DC.Position(Number(item.jd), Number(item.wd), 0),
            "/img/leftnav/map-aed.png"
          );
          billboard.size = [20, 20];
                    const billboard = new this.DC.Billboard(
                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
                        '/img/leftnav/map-aed.png'
                    )
                    billboard.size = [20, 20]

          this.aedLayer.addOverlay(billboard);
        });
        this.aedLayer.show = false;
      });
                    this.aedLayer.addOverlay(billboard)
                })
                this.aedLayer.show = false
            })

      getLifeList({ lifetype: 11 }).then((res) => {
        res.data.data.forEach((item) => {
          const divIcon = new this.DC.DivIcon(
            new that.DC.Position(Number(item.jd), Number(item.wd), 0),
            `
            getLifeList({ lifetype: 11 }).then((res) => {
                res.data.data.forEach((item) => {
                    const divIcon = new this.DC.DivIcon(
                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
                        `
                        <div class="park-entitys-box">
                            <div class="park-title" alt="${item.mechanismname}">
                            </div>
@@ -421,122 +415,122 @@
                            </div>
                        </div>
                    `
          );
          this.parkLayer.addOverlay(divIcon);
        });
        this.parkLayer.show = false;
      });
                    )
                    this.parkLayer.addOverlay(divIcon)
                })
                this.parkLayer.show = false
            })

      getLifeList({ lifetype: 12 }).then((res) => {
        res.data.data.forEach((item) => {
          const label = new that.DC.Label(
            new that.DC.Position(Number(item.jd), Number(item.wd), 0),
            item.mechanismname
          );
          label.setStyle({
            fillColor: that.DC.Color.FUCHSIA,
            style: that.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
            outlineColor: that.DC.Color.WHITE, // 边框颜色
            outlineWidth: 8, // 边框大小，
            font: "14px sans-serif",
            pixelOffset: { x: 0, y: -40 },
          });
          that.comeLayer.addOverlay(label);
            getLifeList({ lifetype: 12 }).then((res) => {
                res.data.data.forEach((item) => {
                    const label = new that.DC.Label(
                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
                        item.mechanismname
                    )
                    label.setStyle({
                        fillColor: that.DC.Color.FUCHSIA,
                        style: that.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
                        outlineColor: that.DC.Color.WHITE, // 边框颜色
                        outlineWidth: 8, // 边框大小，
                        font: '14px sans-serif',
                        pixelOffset: { x: 0, y: -40 }
                    })
                    that.comeLayer.addOverlay(label)

          const billboard = new that.DC.Billboard(
            new that.DC.Position(Number(item.jd), Number(item.wd), 0),
            "/img/leftnav/map-activity.png"
          );
          billboard.size = [20, 20];
          billboard.setStyle({
            pixelOffset: { x: 0, y: -16 },
          });
                    const billboard = new that.DC.Billboard(
                        new that.DC.Position(Number(item.jd), Number(item.wd), 0),
                        '/img/leftnav/map-activity.png'
                    )
                    billboard.size = [20, 20]
                    billboard.setStyle({
                        pixelOffset: { x: 0, y: -16 }
                    })

          that.comeLayer.addOverlay(billboard);
        });
        this.comeLayer.show = false;
      });
    },
    openPopups(value) {
      var popup = new this.DC.DivForms(this.viewer, {
        domId: "divFormsDomBox",
        position: [
          this.DC.Transform.transformWGS84ToCartesian(
            new this.DC.Position(
              Number(value.lng),
              Number(value.lat),
              Number(value.alt || 0)
            )
          ),
        ],
      });
      // console.log(value, "see");
      this.$store.dispatch("setOurDataInPoput", value);
      this.$store.dispatch("pcFlyView", {
        jd: value.lng,
        wd: value.lat,
        viewer: this.viewer,
      });
    },
  },
};
                    that.comeLayer.addOverlay(billboard)
                })
                this.comeLayer.show = false
            })
        },
        openPopups (value) {
            var popup = new this.DC.DivForms(this.viewer, {
                domId: 'divFormsDomBox',
                position: [
                    this.DC.Transform.transformWGS84ToCartesian(
                        new this.DC.Position(
                            Number(value.lng),
                            Number(value.lat),
                            Number(value.alt || 0)
                        )
                    )
                ]
            })
            // console.log(value, "see");
            this.$store.dispatch('setOurDataInPoput', value)
            this.$store.dispatch('pcFlyView', {
                jd: value.lng,
                wd: value.lat,
                viewer: this.viewer
            })
        }
    }
}
</script>

<style scoped lang="scss">
.left-nav {
  position: fixed;
  top: 160px;
  right: 30px;
  // bottom: 20px;
  // left: 0;
  z-index: 1;
  ul {
    // display: flex;
    li {
      // margin: 0 8px;
      margin-bottom: 12px;
      font-weight: 400;
      display: block;
      width: 98px;
      height: 33px;
      line-height: 33px;
      background-color: #fff;
      border-radius: 17px;
      text-align: center;
      font-size: 0;
      cursor: pointer;
    position: fixed;
    top: 160px;
    right: 30px;
    // bottom: 20px;
    // left: 0;
    z-index: 1;
    ul {
        // display: flex;
        li {
            // margin: 0 8px;
            margin-bottom: 12px;
            font-weight: 400;
            display: block;
            width: 98px;
            height: 33px;
            line-height: 33px;
            background-color: #fff;
            border-radius: 17px;
            text-align: center;
            font-size: 0;
            cursor: pointer;

      img {
        width: 24px;
        height: 24px;
        vertical-align: middle;
        margin-right: 10px;
        image-rendering: -moz-crisp-edges;
        image-rendering: -o-crisp-edges;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor;
      }
            img {
                width: 24px;
                height: 24px;
                vertical-align: middle;
                margin-right: 10px;
                image-rendering: -moz-crisp-edges;
                image-rendering: -o-crisp-edges;
                image-rendering: -webkit-optimize-contrast;
                image-rendering: crisp-edges;
                -ms-interpolation-mode: nearest-neighbor;
            }

      span {
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        color: #2f2f2f;
      }
            span {
                display: inline-block;
                vertical-align: middle;
                font-size: 14px;
                color: #2f2f2f;
            }
        }
    }
  }
}
.addIcons {
  position: absolute;
  top: 0;
  left: -60px;
  width: 50px !important;
  span {
    font-size: 25px !important;
  }
    position: absolute;
    top: 0;
    left: -60px;
    width: 50px !important;
    span {
        font-size: 25px !important;
    }
}
.avtiveAddIcons {
  background-color: aqua;
    background-color: aqua;
}
</style>

 src/components/map/components/mapPopup copy.vue

@@ -1166,7 +1166,6 @@
            }
            //   console.log(data);
            setlabel(data).then((res) => {
                console.log(res)
                if (res.data.code == 200) {
                    doit()
                    that.$message({

 src/components/map/components/mapPopup.vue

@@ -1,433 +1,423 @@
<template>
  <div>
    <div id="map_popup_content">
      <div v-if="detailsPopup" class="divForms-dom" id="divFormsDomBox">
        <div style="width: 100%; height: 100%">
          <div class="divForms divForms-theme">
            <div class="divForms-wrap">
              <div class="area">
                <div class="arrow-lt"></div>
                <div class="b-t"></div>
                <div class="b-r"></div>
                <div class="b-b"></div>
                <div class="b-l"></div>
                <div class="arrow-rb"></div>
                <div class="label-wrap">
                  <div class="title">
                    {{ stateName }}
                    <img
                      v-show="introduceText != null && introduceText != ''"
                      @click="audioPlay"
                      class="audio-control"
                      src="/img/navicon/audio.png"
                      alt
                    />
                    <img
                      @click="closeMapPopupBox"
                      class="close-box"
                      src="/img/navicon/close.png"
                      alt
                    />
                  </div>
                  <div class="label-content">
                    <div class="arc-bcg">
                      <img :src="popupBgUrl" alt />
                    </div>
                    <div
                      v-show="siteName != null && siteName != ''"
                      class="site"
                    >
                      <strong>地址：</strong>
                      {{ siteName }}
                    </div>
                    <div
                      v-show="telephone != null && telephone != ''"
                      class="phone"
                    >
                      <strong>电话：</strong>
                      {{ telephone }}
                    </div>
                    <div
                      v-show="introduceText != null && introduceText != ''"
                      class="introduce"
                    >
                      <p ref="DomIntroduceText">
                        <strong>介绍：</strong>
                        <span v-html="introduceText"></span>
                      </p>
                    </div>
                    <div class="popup-nav">
                      <ul>
                        <li @click="comeHereClick">
                          <i class="popup-icon come-nav deblurring"></i>
                          到这
                        </li>
                        <li @click="getToHereClick">
                          <i class="popup-icon start-nav deblurring"></i>
                          出发
                        </li>
                        <li v-show="false" @click="qrCodeClick">
                          <i class="popup-icon qr-code-nav deblurring"></i>
                          二维码
                        </li>
                        <li @click="imgsClick">
                          <i class="popup-icon atlas-nav deblurring"></i>
                          图集
                        </li>
                        <li
                          v-show="panoramaUrl != null && panoramaUrl != ''"
                          @click="panoramaClick"
                        >
                          <i class="popup-icon live-action-nav deblurring"></i>
                          实景
                        </li>
                        <!-- v-show="panoramaUrl != null && panoramaUrl != ''" -->
                        <li v-show="false" @click="monitorClick">
                          <i class="popup-icon monitor-nav deblurring"></i>
                          监控
                        </li>
                      </ul>
                    </div>
                    <div
                      v-show="teachList.length > 0 || liveList.length > 0"
                      class="arc-box"
                    >
                      <ul class="tab-btn">
                        <li
                          v-show="teachList.length > 0"
                          :class="{ on: tabBtnFlag == '教学科研行政' }"
                          @click="tabBtnClick('教学科研行政')"
                        >
                          教学科研行政
                        </li>
                        <li
                          v-show="liveList.length > 0"
                          :class="{ on: tabBtnFlag == '生活服务' }"
                          @click="tabBtnClick('生活服务')"
                        >
                          生活服务
                        </li>
                      </ul>
                      <div class="btm-content">
                        <div :class="{ on: tabBtnFlag == '教学科研行政' }">
                          <ul>
                            <li
                              v-for="(item, index) in teachList"
                              :key="index"
                              @click="mechanismDetailPopup(0, item)"
                            >
                              <i
                                class="popup-icon location-icon deblurring"
                              ></i>
                              {{ item }}
                            </li>
                          </ul>
    <div>
        <div id="map_popup_content">
            <div v-if="detailsPopup" class="divForms-dom" id="divFormsDomBox">
                <div style="width: 100%; height: 100%">
                    <div class="divForms divForms-theme">
                        <div class="divForms-wrap">
                            <div class="area">
                                <div class="arrow-lt"></div>
                                <div class="b-t"></div>
                                <div class="b-r"></div>
                                <div class="b-b"></div>
                                <div class="b-l"></div>
                                <div class="arrow-rb"></div>
                                <div class="label-wrap">
                                    <div class="title">
                                        {{ stateName }}
                                        <img
                                            v-show="introduceText != null && introduceText != ''"
                                            @click="audioPlay"
                                            class="audio-control"
                                            src="/img/navicon/audio.png"
                                            alt
                                        />
                                        <img
                                            @click="closeMapPopupBox"
                                            class="close-box"
                                            src="/img/navicon/close.png"
                                            alt
                                        />
                                    </div>
                                    <div class="label-content">
                                        <div class="arc-bcg">
                                            <img :src="popupBgUrl" alt />
                                        </div>
                                        <div
                                            v-show="siteName != null && siteName != ''"
                                            class="site"
                                        >
                                            <strong>地址：</strong>
                                            {{ siteName }}
                                        </div>
                                        <div
                                            v-show="telephone != null && telephone != ''"
                                            class="phone"
                                        >
                                            <strong>电话：</strong>
                                            {{ telephone }}
                                        </div>
                                        <div
                                            v-show="introduceText != null && introduceText != ''"
                                            class="introduce"
                                        >
                                            <p ref="DomIntroduceText">
                                                <strong>介绍：</strong>
                                                <span v-html="introduceText"></span>
                                            </p>
                                        </div>
                                        <div class="popup-nav">
                                            <ul>
                                                <li @click="comeHereClick">
                                                    <i class="popup-icon come-nav deblurring"></i>
                                                    到这
                                                </li>
                                                <li @click="getToHereClick">
                                                    <i class="popup-icon start-nav deblurring"></i>
                                                    出发
                                                </li>
                                                <li v-show="false" @click="qrCodeClick">
                                                    <i class="popup-icon qr-code-nav deblurring"></i>
                                                    二维码
                                                </li>
                                                <li @click="imgsClick">
                                                    <i class="popup-icon atlas-nav deblurring"></i>
                                                    图集
                                                </li>
                                                <li
                                                    v-show="panoramaUrl != null && panoramaUrl != ''"
                                                    @click="panoramaClick"
                                                >
                                                    <i
                                                        class="popup-icon live-action-nav deblurring"
                                                    ></i>
                                                    实景
                                                </li>
                                                <!-- v-show="panoramaUrl != null && panoramaUrl != ''" -->
                                                <li v-show="false" @click="monitorClick">
                                                    <i class="popup-icon monitor-nav deblurring"></i>
                                                    监控
                                                </li>
                                            </ul>
                                        </div>
                                        <div
                                            v-show="teachList.length > 0 || liveList.length > 0"
                                            class="arc-box"
                                        >
                                            <ul class="tab-btn">
                                                <li
                                                    v-show="teachList.length > 0"
                                                    :class="{ on: tabBtnFlag == '教学科研行政' }"
                                                    @click="tabBtnClick('教学科研行政')"
                                                >教学科研行政</li>
                                                <li
                                                    v-show="liveList.length > 0"
                                                    :class="{ on: tabBtnFlag == '生活服务' }"
                                                    @click="tabBtnClick('生活服务')"
                                                >生活服务</li>
                                            </ul>
                                            <div class="btm-content">
                                                <div :class="{ on: tabBtnFlag == '教学科研行政' }">
                                                    <ul>
                                                        <li
                                                            v-for="(item, index) in teachList"
                                                            :key="index"
                                                            @click="mechanismDetailPopup(0, item)"
                                                        >
                                                            <i
                                                                class="popup-icon location-icon deblurring"
                                                            ></i>
                                                            {{ item }}
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div :class="{ on: tabBtnFlag == '生活服务' }">
                                                    <ul>
                                                        <li
                                                            v-for="(item, index) in liveList"
                                                            :key="index"
                                                            @click="mechanismDetailPopup(1, item)"
                                                        >
                                                            <i
                                                                class="popup-icon location-icon deblurring"
                                                            ></i>
                                                            {{ item }}
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="btm-box"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="b-t-l"></div>
                            <div class="b-b-r"></div>
                        </div>
                        <div :class="{ on: tabBtnFlag == '生活服务' }">
                          <ul>
                            <li
                              v-for="(item, index) in liveList"
                              :key="index"
                              @click="mechanismDetailPopup(1, item)"
                            >
                              <i
                                class="popup-icon location-icon deblurring"
                              ></i>
                              {{ item }}
                            </li>
                          </ul>
                        </div>
                      </div>
                        <div class="arrow"></div>
                    </div>
                    <div class="btm-box"></div>
                  </div>
                </div>
              </div>
              <div class="b-t-l"></div>
              <div class="b-b-r"></div>
            </div>
            <div class="arrow"></div>
          </div>
        </div>
      </div>

      <div
        v-if="panoramaPopup"
        class="panorama-dom"
        :class="{ 'change-full': fullscreen }"
        id="PanoramaBox"
      >
        <div style="width: 100%; height: 100%">
          <div class="panorama-container">
            <div class="panorama-wrap">
              <div
                class="content-wrap"
            <div
                v-if="panoramaPopup"
                class="panorama-dom"
                :class="{ 'change-full': fullscreen }"
                id="FullScreenBox"
              >
                <div class="title">
                  {{ stateName }}
                  <img
                    @click="screen"
                    class="full-srceen-btn"
                    :src="fullScreenUrl"
                    alt
                  />
                  <img
                    @click="closePanoramaPopupBox"
                    class="close-box"
                    src="/img/navicon/close.png"
                    alt
                  />
                </div>
                <div class="content">
                  <iframe
                    allowfullscreen="true"
                    :src="panoramaUrl"
                    frameborder="0"
                  ></iframe>
                </div>
              </div>
            </div>
            <div class="arrow"></div>
          </div>
        </div>
      </div>

      <div v-if="monitorPopup" class="monitor-dom" id="MonitorBox">
        <div style="width: 100%; height: 100%">
          <div class="monitor-container">
            <div class="monitor-wrap">
              <div class="content-wrap">
                <div class="title">
                  {{ stateName }}
                  <img
                    @click="closeMonitorPopupBox"
                    class="close-box"
                    src="/img/navicon/close.png"
                    alt
                  />
                </div>
                <div class="content">
                  <video :src="monitorUrl" controls autoplay></video>
                </div>
              </div>
            </div>
            <div class="arrow"></div>
          </div>
        </div>
      </div>

      <div v-if="addTagPopup" class="divForms-dom" id="AddTagBox">
        <div style="width: 100%; height: 100%">
          <div class="divForms divForms-theme">
            <div class="divForms-wrap">
              <div class="area">
                <div class="arrow-lt"></div>
                <div class="b-t"></div>
                <div class="b-r"></div>
                <div class="b-b"></div>
                <div class="b-l"></div>
                <div class="arrow-rb"></div>
                <div class="label-wrap">
                  <div class="title">
                    地图标记
                    <img
                      @click="closeAddTagBox"
                      class="close-box"
                      src="/img/navicon/close.png"
                      alt
                    />
                  </div>
                  <div class="add-tag-content">
                    <div>
                      <el-input
                        v-model="addTagName"
                        placeholder="请输入标签名称"
                      ></el-input>
                id="PanoramaBox"
            >
                <div style="width: 100%; height: 100%">
                    <div class="panorama-container">
                        <div class="panorama-wrap">
                            <div
                                class="content-wrap"
                                :class="{ 'change-full': fullscreen }"
                                id="FullScreenBox"
                            >
                                <div class="title">
                                    {{ stateName }}
                                    <img
                                        @click="screen"
                                        class="full-srceen-btn"
                                        :src="fullScreenUrl"
                                        alt
                                    />
                                    <img
                                        @click="closePanoramaPopupBox"
                                        class="close-box"
                                        src="/img/navicon/close.png"
                                        alt
                                    />
                                </div>
                                <div class="content">
                                    <iframe
                                        allowfullscreen="true"
                                        :src="panoramaUrl"
                                        frameborder="0"
                                    ></iframe>
                                </div>
                            </div>
                        </div>
                        <div class="arrow"></div>
                    </div>
                    <div>
                      <el-button type="primary" @click="createTag"
                        >生成标记</el-button
                      >
                </div>
            </div>

            <div v-if="monitorPopup" class="monitor-dom" id="MonitorBox">
                <div style="width: 100%; height: 100%">
                    <div class="monitor-container">
                        <div class="monitor-wrap">
                            <div class="content-wrap">
                                <div class="title">
                                    {{ stateName }}
                                    <img
                                        @click="closeMonitorPopupBox"
                                        class="close-box"
                                        src="/img/navicon/close.png"
                                        alt
                                    />
                                </div>
                                <div class="content">
                                    <video :src="monitorUrl" controls autoplay></video>
                                </div>
                            </div>
                        </div>
                        <div class="arrow"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="b-t-l"></div>
              <div class="b-b-r"></div>
            </div>
            <div class="arrow"></div>
          </div>
        </div>
      </div>

      <div v-if="labelLayerDataShow" class="divForms-dom" id="labelLayerid">
        <div style="width: 100%; height: 100%">
          <div class="divForms divForms-theme">
            <div class="divForms-wrap">
              <div class="area">
                <div class="arrow-lt"></div>
                <div class="b-t"></div>
                <div class="b-r"></div>
                <div class="b-b"></div>
                <div class="b-l"></div>
                <div class="arrow-rb"></div>
                <div class="label-wrap">
                  <div class="title">
                    {{ nowlabelLayerData.name }} &nbsp; 二维码分享
                    <img
                      @click="closelabelLayerid"
                      class="close-box"
                      src="/img/navicon/close.png"
                      alt
                    />
                  </div>
                  <div class="add-tag-content" style="height: 250px">
                    <!-- data:image/png;base64, -->
                    <img
                      :src="nowlabelLayerData.qrcode"
                      alt
                      class="labelLayeridewm"
                      style="width: 250px; height: 250px"
                    />
                  </div>
            <div v-if="addTagPopup" class="divForms-dom" id="AddTagBox">
                <div style="width: 100%; height: 100%">
                    <div class="divForms divForms-theme">
                        <div class="divForms-wrap">
                            <div class="area">
                                <div class="arrow-lt"></div>
                                <div class="b-t"></div>
                                <div class="b-r"></div>
                                <div class="b-b"></div>
                                <div class="b-l"></div>
                                <div class="arrow-rb"></div>
                                <div class="label-wrap">
                                    <div class="title">
                                        地图标记
                                        <img
                                            @click="closeAddTagBox"
                                            class="close-box"
                                            src="/img/navicon/close.png"
                                            alt
                                        />
                                    </div>
                                    <div class="add-tag-content">
                                        <div>
                                            <el-input v-model="addTagName" placeholder="请输入标签名称"></el-input>
                                        </div>
                                        <div>
                                            <el-button type="primary" @click="createTag">生成标记</el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="b-t-l"></div>
                            <div class="b-b-r"></div>
                        </div>
                        <div class="arrow"></div>
                    </div>
                </div>
              </div>
              <div class="b-t-l"></div>
              <div class="b-b-r"></div>
            </div>
            <div class="arrow"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增编辑标签 -->
    <div v-if="addIconsLayerIconPopup" class="monitor-dom" id="leftNavsAdd">
      <div style="width: 100%; height: 100%">
        <div class="divForms divForms-theme">
          <div class="divForms-wrap">
            <div class="area">
              <div class="arrow-lt"></div>
              <div class="b-t"></div>
              <div class="b-r"></div>
              <div class="b-b"></div>
              <div class="b-l"></div>
              <div class="arrow-rb"></div>
              <div class="label-wrap">
                <div class="title">
                  <el-input
                    v-model="addIconFromcolumn[0].value"
                    placeholder="请输入标签名称"
                    class="addIconFromInput"
                  >
                    <template slot="prepend">标题:</template
                    ><i
                      slot="suffix"
                      class="el-icon-edit el-input__icon addIconFromInputicon"
                    ></i>
                  </el-input>
                  <img
                    @click="closeaddIconsLayerIconPopup"
                    class="close-box"
                    src="/img/navicon/close.png"
                    alt
                  />
            <div v-if="labelLayerDataShow" class="divForms-dom" id="labelLayerid">
                <div style="width: 100%; height: 100%">
                    <div class="divForms divForms-theme">
                        <div class="divForms-wrap">
                            <div class="area">
                                <div class="arrow-lt"></div>
                                <div class="b-t"></div>
                                <div class="b-r"></div>
                                <div class="b-b"></div>
                                <div class="b-l"></div>
                                <div class="arrow-rb"></div>
                                <div class="label-wrap">
                                    <div class="title">
                                        {{ nowlabelLayerData.name }} &nbsp; 二维码分享
                                        <img
                                            @click="closelabelLayerid"
                                            class="close-box"
                                            src="/img/navicon/close.png"
                                            alt
                                        />
                                    </div>
                                    <div class="add-tag-content" style="height: 250px">
                                        <!-- data:image/png;base64, -->
                                        <img
                                            :src="nowlabelLayerData.qrcode"
                                            alt
                                            class="labelLayeridewm"
                                            style="width: 250px; height: 250px"
                                        />
                                    </div>
                                </div>
                            </div>
                            <div class="b-t-l"></div>
                            <div class="b-b-r"></div>
                        </div>
                        <div class="arrow"></div>
                    </div>
                </div>
                <div class="add-tag-content">
                  <div class="addIconsLayer">
                    <div
                      :class="[
            </div>
        </div>

        <!-- 新增编辑标签 -->
        <div v-if="addIconsLayerIconPopup" class="monitor-dom" id="leftNavsAdd">
            <div style="width: 100%; height: 100%">
                <div class="divForms divForms-theme">
                    <div class="divForms-wrap">
                        <div class="area">
                            <div class="arrow-lt"></div>
                            <div class="b-t"></div>
                            <div class="b-r"></div>
                            <div class="b-b"></div>
                            <div class="b-l"></div>
                            <div class="arrow-rb"></div>
                            <div class="label-wrap">
                                <div class="title">
                                    <el-input
                                        v-model="addIconFromcolumn[0].value"
                                        placeholder="请输入标签名称"
                                        class="addIconFromInput"
                                    >
                                        <template slot="prepend">标题:</template>
                                        <i
                                            slot="suffix"
                                            class="el-icon-edit el-input__icon addIconFromInputicon"
                                        ></i>
                                    </el-input>
                                    <img
                                        @click="closeaddIconsLayerIconPopup"
                                        class="close-box"
                                        src="/img/navicon/close.png"
                                        alt
                                    />
                                </div>
                                <div class="add-tag-content">
                                    <div class="addIconsLayer">
                                        <div
                                            :class="[
                        'addIconsLayerinimgs',
                        ourImages.length > 3 ? 'isOverImgs' : '',
                      ]"
                    >
                      <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
                      <el-upload
                        :action="
                                        >
                                            <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
                                            <el-upload
                                                :action="
                          apiUrls +
                          '/blade-resource/oss/endpoint/put-files-talk'
                        "
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :on-success="onsuccess"
                      >
                        <i class="el-icon-plus"></i>
                      </el-upload>
                      <el-dialog
                        :visible.sync="dialogVisible"
                        :modal-append-to-body="false"
                        :append-to-body="true"
                      >
                        <img width="100%" :src="dialogImageUrl" alt="" />
                      </el-dialog>
                    </div>
                    <div
                      class="addIconsLayerin"
                      v-for="(item, index) in addIconFromcolumn"
                      :key="index"
                      v-show="index != 0"
                    >
                      <el-input
                        v-model="item.value"
                        :placeholder="'请输入' + item.label"
                        class="addIconFromInput"
                        :disabled="index == 2 || index == 3"
                      >
                        <template slot="prepend">{{ item.label }}:</template>
                      </el-input>
                                                list-type="picture-card"
                                                :on-preview="handlePictureCardPreview"
                                                :on-remove="handleRemove"
                                                :on-success="onsuccess"
                                            >
                                                <i class="el-icon-plus"></i>
                                            </el-upload>
                                            <el-dialog
                                                :visible.sync="dialogVisible"
                                                :modal-append-to-body="false"
                                                :append-to-body="true"
                                            >
                                                <img width="100%" :src="dialogImageUrl" alt />
                                            </el-dialog>
                                        </div>
                                        <div
                                            class="addIconsLayerin"
                                            v-for="(item, index) in addIconFromcolumn"
                                            :key="index"
                                            v-show="index != 0"
                                        >
                                            <el-input
                                                v-model="item.value"
                                                :placeholder="'请输入' + item.label"
                                                class="addIconFromInput"
                                                :disabled="index == 2 || index == 3"
                                            >
                                                <template slot="prepend">{{ item.label }}:</template>
                                            </el-input>

                      <el-dropdown
                        v-show="index == 2 || index == 3"
                        @command="chouseAddicon"
                      >
                        <span class="el-dropdown-link">
                          <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item
                            v-for="(itemc, indexc) in item.chouse"
                            :key="indexc"
                            :command="{ index: index, indexc: indexc }"
                            >{{ itemc.value }}</el-dropdown-item
                          >
                          <!-- @click="chouseAddicon(index, indexc)" -->
                        </el-dropdown-menu>
                      </el-dropdown>
                                            <el-dropdown
                                                v-show="index == 2 || index == 3"
                                                @command="chouseAddicon"
                                            >
                                                <span class="el-dropdown-link">
                                                    <i class="el-icon-arrow-down el-icon--right"></i>
                                                </span>
                                                <el-dropdown-menu slot="dropdown">
                                                    <el-dropdown-item
                                                        v-for="(itemc, indexc) in item.chouse"
                                                        :key="indexc"
                                                        :command="{ index: index, indexc: indexc }"
                                                    >{{ itemc.value }}</el-dropdown-item>
                                                    <!-- @click="chouseAddicon(index, indexc)" -->
                                                </el-dropdown-menu>
                                            </el-dropdown>
                                        </div>
                                    </div>
                                    <div class="addIconsLayerBut">
                                        <el-button type="primary" @click="saveIconsLayer">保存标签</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="b-t-l"></div>
                        <div class="b-b-r"></div>
                    </div>
                  </div>
                  <div class="addIconsLayerBut">
                    <el-button type="primary" @click="saveIconsLayer"
                      >保存标签</el-button
                    >
                  </div>
                    <div class="arrow"></div>
                </div>
              </div>
            </div>
            <div class="b-t-l"></div>
            <div class="b-b-r"></div>
          </div>
          <div class="arrow"></div>
        </div>
      </div>
    </div>

    <!-- 二维码弹框相关 -->
    <el-dialog
      title="场景二维码"
      :visible.sync="QRCodeFlag"
      :modal="false"
      :modal-append-to-body="false"
      width="44%"
    >
      <div style="margin: 0; position: relative; width: 100%; height: 352px">
        <img
          width="260"
          :src="pupupQRUrl"
          alt
          style="
        <!-- 二维码弹框相关 -->
        <el-dialog
            title="场景二维码"
            :visible.sync="QRCodeFlag"
            :modal="false"
            :modal-append-to-body="false"
            width="44%"
        >
            <div style="margin: 0; position: relative; width: 100%; height: 352px">
                <img
                    width="260"
                    :src="pupupQRUrl"
                    alt
                    style="
            position: absolute;
            top: 0;
            left: 0;
@@ -435,731 +425,728 @@
            bottom: 0;
            margin: auto;
          "
        />
        <div
          style="
                />
                <div
                    style="
            position: absolute;
            bottom: 0;
            width: 100%;
            line-height: 36px;
            text-align: center;
          "
        >
          (右键另存为图片)
        </div>
      </div>
    </el-dialog>
                >(右键另存为图片)</div>
            </div>
        </el-dialog>

    <el-image
      v-show="false"
      style="width: 100px; height: 100px"
      :src="popupImgAtlas[0]"
      :preview-src-list="popupImgAtlas"
      ref="popupImgs"
    ></el-image>
  </div>
        <el-image
            v-show="false"
            style="width: 100px; height: 100px"
            :src="popupImgAtlas[0]"
            :preview-src-list="popupImgAtlas"
            ref="popupImgs"
        ></el-image>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getMechanismDetail } from "@/api/pc/public/arc";
import { setlabel } from "@/api/pc/label";
import { add } from "@/api/pc/leftNav/index";
import { mapGetters } from 'vuex'
import { getMechanismDetail } from '@/api/pc/public/arc'
import { setlabel } from '@/api/pc/label'
import { add } from '@/api/pc/leftNav/index'

export default {
  name: "mapPopup",
    name: 'mapPopup',

  data() {
    let apiUrls = window.$apiUrls;
    return {
      ourImages: [],
      dialogImageUrl: "",
      dialogVisible: false,
      apiUrls: $apiUrls,
      DC: null,
      tabBtnFlag: "教学科研行政",
      QRCodeFlag: false,
      audioSource: "",
      audioFlag: false,
      audioCourse: false,
      audioSynth: null,
      audioMsg: null,
      fullscreen: false,
      fullScreenUrl: "/img/icon/bigScreen.png",
      addTagName: "",
      addTagLayer: null,
      addIconFromcolumn: [
        //顺序不要随便换
        {
          label: "名称",
          prop: "mechanismname",
          value: "",
        },
        {
          label: "电话",
          prop: "telephone",
          value: "",
        },
        {
          label: "所属建筑",
          prop: "type",
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=building",
          props: {
            label: "dictValue",
            value: "dictKey",
          },
          value: "红旗校区",
          valueid: "1",
          chouse: [
            {
              id: "1",
              value: "红旗校区",
            },
            {
              id: "2",
              value: "黄河路",
            },
            {
              id: "3",
              value: "科学园",
            },
            {
              id: "4",
              value: "土木楼",
            },
            {
              id: "5",
              value: "三江校区",
            },
          ],
        },
        {
          label: "所属社区",
          searchLabelWidth: "110",
          value: "行政办公",
          valueid: "1",
          prop: "campus",
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=campus",
          chouse: [
            {
              id: "1",
              value: "行政办公",
            },
            {
              id: "2",
              value: "教学科研",
            },
            {
              id: "3",
              value: "社区场馆",
            },
            {
              id: "4",
              value: "学生宿舍",
            },
            {
              id: "5",
              value: "文化风景",
            },
            {
              id: "6",
              value: "家属住宅",
            },
            {
              id: "7",
              value: "主要楼宇",
            },
          ],
        },
    data () {
        return {
            ourImages: [],
            dialogImageUrl: '',
            dialogVisible: false,
            apiUrls: null,
            DC: null,
            tabBtnFlag: '教学科研行政',
            QRCodeFlag: false,
            audioSource: '',
            audioFlag: false,
            audioCourse: false,
            audioSynth: null,
            audioMsg: null,
            fullscreen: false,
            fullScreenUrl: '/img/icon/bigScreen.png',
            addTagName: '',
            addTagLayer: null,
            addIconFromcolumn: [
                // 顺序不要随便换
                {
                    label: '名称',
                    prop: 'mechanismname',
                    value: ''
                },
                {
                    label: '电话',
                    prop: 'telephone',
                    value: ''
                },
                {
                    label: '所属建筑',
                    prop: 'type',
                    dicUrl: '/api/blade-system/dict-biz/dictionary?code=building',
                    props: {
                        label: 'dictValue',
                        value: 'dictKey'
                    },
                    value: '红旗校区',
                    valueid: '1',
                    chouse: [
                        {
                            id: '1',
                            value: '红旗校区'
                        },
                        {
                            id: '2',
                            value: '黄河路'
                        },
                        {
                            id: '3',
                            value: '科学园'
                        },
                        {
                            id: '4',
                            value: '土木楼'
                        },
                        {
                            id: '5',
                            value: '三江校区'
                        }
                    ]
                },
                {
                    label: '所属社区',
                    searchLabelWidth: '110',
                    value: '行政办公',
                    valueid: '1',
                    prop: 'campus',
                    dicUrl: '/api/blade-system/dict-biz/dictionary?code=campus',
                    chouse: [
                        {
                            id: '1',
                            value: '行政办公'
                        },
                        {
                            id: '2',
                            value: '教学科研'
                        },
                        {
                            id: '3',
                            value: '社区场馆'
                        },
                        {
                            id: '4',
                            value: '学生宿舍'
                        },
                        {
                            id: '5',
                            value: '文化风景'
                        },
                        {
                            id: '6',
                            value: '家属住宅'
                        },
                        {
                            id: '7',
                            value: '主要楼宇'
                        }
                    ]
                },

        {
          label: "介绍",
          prop: "introduce",
          value: "",
          component: "AvueUeditor",
          options: {
            action: "/api/blade-resource/oss/endpoint/put-file",
            props: {
              res: "data",
              url: "link",
            },
          },
          hide: true,
          minRows: 5,
          span: 24,
        },
        {
          label: "地址",
          hide: true,
          prop: "address",
          value: "",
        },
        {
          label: "全景地址",
          prop: "panoramaurl",
          value: "",
        },
        {
          label: "监控地址",
          hide: true,
          prop: "videourl",
          value: "",
        },
        {
          label: "网站地址",
          prop: "websiteurl",
          value: "",
        },
        {
          label: "经度",
          prop: "jd",
          value: "",
          rules: [
            {
              required: true,
              message: "请输入经度",
              trigger: "blur",
            },
          ],
        },
        {
          label: "纬度",
          prop: "wd",
          value: "",
          rules: [
            {
              required: true,
              message: "请输入纬度",
              trigger: "blur",
            },
          ],
        },
        {
          label: "偏航角",
          addDisplay: false,
          hide: true,
          prop: "heading",
          value: 0,
        },
        {
          label: "俯仰角",
          addDisplay: false,
          hide: true,
          prop: "pitch",
          value: -90,
        },
        {
          label: "翻转角",
          addDisplay: false,
          hide: true,
          prop: "roll",
          value: 0,
        },
                {
                    label: '介绍',
                    prop: 'introduce',
                    value: '',
                    component: 'AvueUeditor',
                    options: {
                        action: '/api/blade-resource/oss/endpoint/put-file',
                        props: {
                            res: 'data',
                            url: 'link'
                        }
                    },
                    hide: true,
                    minRows: 5,
                    span: 24
                },
                {
                    label: '地址',
                    hide: true,
                    prop: 'address',
                    value: ''
                },
                {
                    label: '全景地址',
                    prop: 'panoramaurl',
                    value: ''
                },
                {
                    label: '监控地址',
                    hide: true,
                    prop: 'videourl',
                    value: ''
                },
                {
                    label: '网站地址',
                    prop: 'websiteurl',
                    value: ''
                },
                {
                    label: '经度',
                    prop: 'jd',
                    value: '',
                    rules: [
                        {
                            required: true,
                            message: '请输入经度',
                            trigger: 'blur'
                        }
                    ]
                },
                {
                    label: '纬度',
                    prop: 'wd',
                    value: '',
                    rules: [
                        {
                            required: true,
                            message: '请输入纬度',
                            trigger: 'blur'
                        }
                    ]
                },
                {
                    label: '偏航角',
                    addDisplay: false,
                    hide: true,
                    prop: 'heading',
                    value: 0
                },
                {
                    label: '俯仰角',
                    addDisplay: false,
                    hide: true,
                    prop: 'pitch',
                    value: -90
                },
                {
                    label: '翻转角',
                    addDisplay: false,
                    hide: true,
                    prop: 'roll',
                    value: 0
                },

        {
          label: "高度",
          hide: true,
          addDisplay: false,
          prop: "gd",
          value: 0,
        },
                {
                    label: '高度',
                    hide: true,
                    addDisplay: false,
                    prop: 'gd',
                    value: 0
                }

        // {
        //   label: "图片",
        //   prop: "tpurl",
        //   value: "",
        //   // dataType: 'string',
        //   type: "upload",
        //   propsHttp: {
        //     res: "data",
        //     url: "link",
        //   },
        //   span: 10,
        //   listType: "picture-card",
        //   tip: "只能上传jpg/png文件，且不超过500kb",
        //   action: "/api/blade-resource/oss/endpoint/put-file",
        // },
        // {
        //   label: "二维码",
        //   prop: "codeurl",
        //   value: "",
        //   type: "upload",
        //   listType: "picture-card",
        //   //dataType: 'string',
        //   action: "/api/blade-resource/oss/endpoint/put-file",
        //   propsHttp: {
        //     res: "data",
        //     url: "link",
        //   },
        //   span: 10,
        // },
      ],
    };
  },
  computed: {
    ...mapGetters([
      "viewer",
      "popupBgUrl",
      "pupupQRUrl",
      // 终点
      "terminus",
      // 起点
      "startingPoint",
      // 点信息
      "pointPosition",
      // 点名称
      "stateName",
      // 地址
      "siteName",
      // 电话
      "telephone",
      // 介绍
      "introduceText",
      // 详情弹框显示关闭
      "detailsPopup",
      // 全景地址
      "panoramaUrl",
      // 全景弹框显示关闭
      "panoramaPopup",
      // 监控地址
      "monitorUrl",
      // 监控弹框显示关闭
      "monitorPopup",

      "popupImgAtlas",
      // 教学
      "teachList",
      // 科研
      "liveList",
      // 校区内导航的显示关闭
      "campusNavFlag",
      "addTagPopup",
      "addTagPosition",
      //自定义标签弹窗
      "labelLayerDataShow",
      "nowlabelLayerData",
      "addIconsLayerIconPopup", //自定义标签编辑窗口
      "addIconsLayerIconPosition", //自定义标签坐标
    ]),
  },
  created() {
    this.DC = global.DC;

    this.audioSynth = window.speechSynthesis;
    this.audioMsg = new window.SpeechSynthesisUtterance();

    this.audioMsg.onend = function () {
      this.audioSynth.cancel();
      this.audioFlag = false;
      this.audioCourse = false;
    };
  },
  mounted() {},
  watch: {
    addIconsLayerIconPopup() {
      if (this.addIconsLayerIconPopup) {
        this.addIconFromcolumn[9].value = this.addIconsLayerIconPosition[0];
        this.addIconFromcolumn[10].value = this.addIconsLayerIconPosition[1];
      } else {
        for (let k in this.addIconFromcolumn) {
          if (k == 2) {
            this.addIconFromcolumn[k].value = "红旗校区";
            this.addIconFromcolumn[k].valueid = "1";
            continue;
          }
          if (k == 3) {
            this.addIconFromcolumn[k].value = "行政办公";
            this.addIconFromcolumn[k].valueid = "1";
            continue;
          }
          this.addIconFromcolumn[k].value = "";
                // {
                //   label: "图片",
                //   prop: "tpurl",
                //   value: "",
                //   // dataType: 'string',
                //   type: "upload",
                //   propsHttp: {
                //     res: "data",
                //     url: "link",
                //   },
                //   span: 10,
                //   listType: "picture-card",
                //   tip: "只能上传jpg/png文件，且不超过500kb",
                //   action: "/api/blade-resource/oss/endpoint/put-file",
                // },
                // {
                //   label: "二维码",
                //   prop: "codeurl",
                //   value: "",
                //   type: "upload",
                //   listType: "picture-card",
                //   //dataType: 'string',
                //   action: "/api/blade-resource/oss/endpoint/put-file",
                //   propsHttp: {
                //     res: "data",
                //     url: "link",
                //   },
                //   span: 10,
                // },
            ]
        }
        this.ourImages = [];
        this.$store.commit("set_closeMapClick", false); //开启其他操作
      }
    },
    addTagPopup() {
      if (!this.addTagPopup) {
        // console.log("取消", "see");
        this.$store.commit("set_closeMapClick", false);
      }
    computed: {
        ...mapGetters([
            'viewer',
            'popupBgUrl',
            'pupupQRUrl',
            // 终点
            'terminus',
            // 起点
            'startingPoint',
            // 点信息
            'pointPosition',
            // 点名称
            'stateName',
            // 地址
            'siteName',
            // 电话
            'telephone',
            // 介绍
            'introduceText',
            // 详情弹框显示关闭
            'detailsPopup',
            // 全景地址
            'panoramaUrl',
            // 全景弹框显示关闭
            'panoramaPopup',
            // 监控地址
            'monitorUrl',
            // 监控弹框显示关闭
            'monitorPopup',

            'popupImgAtlas',
            // 教学
            'teachList',
            // 科研
            'liveList',
            // 校区内导航的显示关闭
            'campusNavFlag',
            'addTagPopup',
            'addTagPosition',
            // 自定义标签弹窗
            'labelLayerDataShow',
            'nowlabelLayerData',
            'addIconsLayerIconPopup', // 自定义标签编辑窗口
            'addIconsLayerIconPosition' // 自定义标签坐标
        ])
    },
    introduceText: {
      immediate: true,
      handler(newQuestion, oldQuestion) {
        this.audioSource = newQuestion;
        if (this.audioFlag == true) {
          this.audioSynth.cancel();
          this.audioFlag = false;
          this.audioCourse = false;
    created () {
        this.apiUrls = window.$apiUrls
        this.DC = global.DC

        this.audioSynth = window.speechSynthesis
        this.audioMsg = new window.SpeechSynthesisUtterance()

        this.audioMsg.onend = function () {
            this.audioSynth.cancel()
            this.audioFlag = false
            this.audioCourse = false
        }
      },
    },
    teachList: {
      immediate: true,
      handler(newCode, oldCode) {
        if (newCode.length > 0) {
          this.tabBtnFlag = "教学科研行政";
        }
      },
    },
    liveList: {
      immediate: true,
      handler(newCode, oldCode) {
        if (newCode.length > 0 && this.teachList.length == 0) {
          this.tabBtnFlag = "生活服务";
        }
      },
    },
    detailsPopup: {
      immediate: true,
      handler(newCode, oldCode) {
        if (newCode == false) {
          this.audioSynth.cancel();
          this.audioFlag = false;
          this.audioCourse = false;
        } else {
          if (this.audioFlag == true) {
            this.audioSynth.cancel();
            this.audioFlag = false;
            this.audioCourse = false;
          }
        }
      },
    },
  },
  methods: {
    onsuccess(response, file, fileList) {
      this.ourImages = fileList;
    },
    handleRemove(file, fileList) {
      this.ourImages = fileList;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    chouseAddicon(item) {
      this.addIconFromcolumn[item.index].value =
        this.addIconFromcolumn[item.index].chouse[item.indexc].value;
      this.addIconFromcolumn[item.index].valueid =
        this.addIconFromcolumn[item.index].chouse[item.indexc].id;
    },
    closeaddIconsLayerIconPopup() {
      this.$store.commit("SET_addIconsLayerIconPopup", false);
    },
    saveIconsLayer() {
      var imgs = [];
      // console.log("see", this.ourImages);
      // return;
      for (var k in this.ourImages) {
        imgs.push(this.ourImages[k].response);
      }
      let d = {
        tpurl: imgs.join(","),
        mechanismname: this.addIconFromcolumn[0].value,
        telephone: this.addIconFromcolumn[1].value,
        type: this.addIconFromcolumn[2].valueid,
        campus: this.addIconFromcolumn[3].valueid,
        introduce: this.addIconFromcolumn[4].value,
        address: this.addIconFromcolumn[5].value,
        panoramaurl: this.addIconFromcolumn[6].value,
        videourl: this.addIconFromcolumn[7].value,
        websiteurl: this.addIconFromcolumn[8].value,
        jd: this.addIconFromcolumn[9].value,
        wd: this.addIconFromcolumn[10].value,
        heading: this.addIconFromcolumn[11].value,
        pitch: this.addIconFromcolumn[12].value,
        roll: this.addIconFromcolumn[13].value,
        gd: this.addIconFromcolumn[14].value,
      };
      // console.log(d, "see3");
      // return;
      // this.$store.commit("set_closeMapClick", false); //开启其他操作
      add(d).then(
        () => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.closeaddIconsLayerIconPopup();
    mounted () { },
    watch: {
        addIconsLayerIconPopup () {
            if (this.addIconsLayerIconPopup) {
                this.addIconFromcolumn[9].value = this.addIconsLayerIconPosition[0]
                this.addIconFromcolumn[10].value = this.addIconsLayerIconPosition[1]
            } else {
                for (const k in this.addIconFromcolumn) {
                    if (k == 2) {
                        this.addIconFromcolumn[k].value = '红旗校区'
                        this.addIconFromcolumn[k].valueid = '1'
                        continue
                    }
                    if (k == 3) {
                        this.addIconFromcolumn[k].value = '行政办公'
                        this.addIconFromcolumn[k].valueid = '1'
                        continue
                    }
                    this.addIconFromcolumn[k].value = ''
                }
                this.ourImages = []
                this.$store.commit('set_closeMapClick', false) // 开启其他操作
            }
        },
        (error) => {
          window.console.log(error);
        addTagPopup () {
            if (!this.addTagPopup) {
                // console.log("取消", "see");
                this.$store.commit('set_closeMapClick', false)
            }
        },
        introduceText: {
            immediate: true,
            handler (newQuestion, oldQuestion) {
                this.audioSource = newQuestion
                if (this.audioFlag == true) {
                    this.audioSynth.cancel()
                    this.audioFlag = false
                    this.audioCourse = false
                }
            }
        },
        teachList: {
            immediate: true,
            handler (newCode, oldCode) {
                if (newCode.length > 0) {
                    this.tabBtnFlag = '教学科研行政'
                }
            }
        },
        liveList: {
            immediate: true,
            handler (newCode, oldCode) {
                if (newCode.length > 0 && this.teachList.length == 0) {
                    this.tabBtnFlag = '生活服务'
                }
            }
        },
        detailsPopup: {
            immediate: true,
            handler (newCode, oldCode) {
                if (newCode == false) {
                    this.audioSynth.cancel()
                    this.audioFlag = false
                    this.audioCourse = false
                } else {
                    if (this.audioFlag == true) {
                        this.audioSynth.cancel()
                        this.audioFlag = false
                        this.audioCourse = false
                    }
                }
            }
        }
      );
    },
    screen() {
      if (this.fullscreen) {
        this.fullScreenUrl = "/img/icon/bigScreen.png";
        this.fullscreen = !this.fullscreen;
    methods: {
        onsuccess (response, file, fileList) {
            this.ourImages = fileList
        },
        handleRemove (file, fileList) {
            this.ourImages = fileList
        },
        handlePictureCardPreview (file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },
        chouseAddicon (item) {
            this.addIconFromcolumn[item.index].value =
                this.addIconFromcolumn[item.index].chouse[item.indexc].value
            this.addIconFromcolumn[item.index].valueid =
                this.addIconFromcolumn[item.index].chouse[item.indexc].id
        },
        closeaddIconsLayerIconPopup () {
            this.$store.commit('SET_addIconsLayerIconPopup', false)
        },
        saveIconsLayer () {
            var imgs = []
            // console.log("see", this.ourImages);
            // return;
            for (var k in this.ourImages) {
                imgs.push(this.ourImages[k].response)
            }
            const d = {
                tpurl: imgs.join(','),
                mechanismname: this.addIconFromcolumn[0].value,
                telephone: this.addIconFromcolumn[1].value,
                type: this.addIconFromcolumn[2].valueid,
                campus: this.addIconFromcolumn[3].valueid,
                introduce: this.addIconFromcolumn[4].value,
                address: this.addIconFromcolumn[5].value,
                panoramaurl: this.addIconFromcolumn[6].value,
                videourl: this.addIconFromcolumn[7].value,
                websiteurl: this.addIconFromcolumn[8].value,
                jd: this.addIconFromcolumn[9].value,
                wd: this.addIconFromcolumn[10].value,
                heading: this.addIconFromcolumn[11].value,
                pitch: this.addIconFromcolumn[12].value,
                roll: this.addIconFromcolumn[13].value,
                gd: this.addIconFromcolumn[14].value
            }
            // console.log(d, "see3");
            // return;
            // this.$store.commit("set_closeMapClick", false); //开启其他操作
            add(d).then(
                () => {
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    })
                    this.closeaddIconsLayerIconPopup()
                },
                (error) => {
                    window.console.log(error)
                }
            )
        },
        screen () {
            if (this.fullscreen) {
                this.fullScreenUrl = '/img/icon/bigScreen.png'
                this.fullscreen = !this.fullscreen

        document.getElementById("pcElHeader").style.zIndex = 9999;
      } else {
        this.fullScreenUrl = "/img/icon/smallScreen.png";
        this.fullscreen = !this.fullscreen;
                document.getElementById('pcElHeader').style.zIndex = 9999
            } else {
                this.fullScreenUrl = '/img/icon/smallScreen.png'
                this.fullscreen = !this.fullscreen

        document.getElementById("pcElHeader").style.zIndex = 9;
      }
    },
                document.getElementById('pcElHeader').style.zIndex = 9
            }
        },

    tabBtnClick(param) {
      this.tabBtnFlag = param;
    },
        tabBtnClick (param) {
            this.tabBtnFlag = param
        },

    comeHereClick() {
      this.$store.commit("SET_COMENAME", this.stateName);
      this.$store.commit("SET_TERMINUS", this.pointPosition);
      if (this.campusNavFlag == false) {
        this.$store.commit("SET_CAMPUSNAVFLAG", true);
      }
    },
        comeHereClick () {
            this.$store.commit('SET_COMENAME', this.stateName)
            this.$store.commit('SET_TERMINUS', this.pointPosition)
            if (this.campusNavFlag == false) {
                this.$store.commit('SET_CAMPUSNAVFLAG', true)
            }
        },

    getToHereClick() {
      this.$store.commit("SET_GETTONAME", this.stateName);
      this.$store.commit("SET_STARTINGPOINT", this.pointPosition);
      if (this.campusNavFlag == false) {
        this.$store.commit("SET_CAMPUSNAVFLAG", true);
      }
    },
        getToHereClick () {
            this.$store.commit('SET_GETTONAME', this.stateName)
            this.$store.commit('SET_STARTINGPOINT', this.pointPosition)
            if (this.campusNavFlag == false) {
                this.$store.commit('SET_CAMPUSNAVFLAG', true)
            }
        },

    qrCodeClick() {
      this.QRCodeFlag = true;
    },
        qrCodeClick () {
            this.QRCodeFlag = true
        },

    imgsClick() {
      this.$refs.popupImgs.clickHandler();
    },
        imgsClick () {
            this.$refs.popupImgs.clickHandler()
        },

    panoramaClick() {
      if (this.audioFlag == true) {
        this.audioSynth.cancel();
        this.audioFlag = false;
        this.audioCourse = false;
      }
        panoramaClick () {
            if (this.audioFlag == true) {
                this.audioSynth.cancel()
                this.audioFlag = false
                this.audioCourse = false
            }

      // eslint-disable-next-line new-cap
      var positions = this.DC.Transform.transformWGS84ToCartesian(
        // eslint-disable-next-line new-cap
        new this.DC.Position.fromArray(this.pointPosition)
      );
      this.viewer.scene.globe.depthTestAgainstTerrain = false;
      // eslint-disable-next-line no-unused-vars
      var panorama = new this.DC.PanoramaBox(this.viewer, {
        domId: "PanoramaBox",
        position: [positions],
      });
            // eslint-disable-next-line new-cap
            var positions = this.DC.Transform.transformWGS84ToCartesian(
                // eslint-disable-next-line new-cap
                new this.DC.Position.fromArray(this.pointPosition)
            )
            this.viewer.scene.globe.depthTestAgainstTerrain = false
            // eslint-disable-next-line no-unused-vars
            var panorama = new this.DC.PanoramaBox(this.viewer, {
                domId: 'PanoramaBox',
                position: [positions]
            })

      this.$store.commit("SET_DETAILSPOPUP", false);
      this.$store.commit("SET_MONITORPOPUP", false);
      this.$store.commit("SET_PANORAMAPOPUP", true);
    },
            this.$store.commit('SET_DETAILSPOPUP', false)
            this.$store.commit('SET_MONITORPOPUP', false)
            this.$store.commit('SET_PANORAMAPOPUP', true)
        },

    monitorClick() {
      if (this.audioFlag == true) {
        this.audioSynth.cancel();
        this.audioFlag = false;
        this.audioCourse = false;
      }
      // eslint-disable-next-line new-cap
      var positions = this.DC.Transform.transformWGS84ToCartesian(
        // eslint-disable-next-line new-cap
        new this.DC.Position.fromArray(this.pointPosition)
      );
      this.viewer.scene.globe.depthTestAgainstTerrain = false;
      // eslint-disable-next-line no-unused-vars
      var monitor = new this.DC.PanoramaBox(this.viewer, {
        domId: "MonitorBox",
        position: [positions],
      });
      this.$store.commit("SET_PANORAMAPOPUP", false);
      this.$store.commit("SET_DETAILSPOPUP", false);
      this.$store.commit("SET_MONITORPOPUP", true);
    },
        monitorClick () {
            if (this.audioFlag == true) {
                this.audioSynth.cancel()
                this.audioFlag = false
                this.audioCourse = false
            }
            // eslint-disable-next-line new-cap
            var positions = this.DC.Transform.transformWGS84ToCartesian(
                // eslint-disable-next-line new-cap
                new this.DC.Position.fromArray(this.pointPosition)
            )
            this.viewer.scene.globe.depthTestAgainstTerrain = false
            // eslint-disable-next-line no-unused-vars
            var monitor = new this.DC.PanoramaBox(this.viewer, {
                domId: 'MonitorBox',
                position: [positions]
            })
            this.$store.commit('SET_PANORAMAPOPUP', false)
            this.$store.commit('SET_DETAILSPOPUP', false)
            this.$store.commit('SET_MONITORPOPUP', true)
        },

    closeMapPopupBox() {
      if (this.audioFlag == true) {
        this.audioSynth.cancel();
        this.audioFlag = false;
        this.audioCourse = false;
      }
      this.$store.commit("SET_DETAILSPOPUP", false);
    },
        closeMapPopupBox () {
            if (this.audioFlag == true) {
                this.audioSynth.cancel()
                this.audioFlag = false
                this.audioCourse = false
            }
            this.$store.commit('SET_DETAILSPOPUP', false)
        },

    // 新增标记相关事件
    closeAddTagBox() {
      this.$store.commit("SET_ADDTAGPOPUP", false);
    },
    closelabelLayerid() {
      this.$store.commit("openLabelLayer", {
        show: false,
      });
    },
    createTag() {
      var that = this;
        // 新增标记相关事件
        closeAddTagBox () {
            this.$store.commit('SET_ADDTAGPOPUP', false)
        },
        closelabelLayerid () {
            this.$store.commit('openLabelLayer', {
                show: false
            })
        },
        createTag () {
            var that = this

      //   console.log(this.RemoveTheBlank(this.addTagName));
            //   console.log(this.RemoveTheBlank(this.addTagName));

      if (this.RemoveTheBlank(this.addTagName) == "") {
        this.$message("请输入标签名称");
        return;
      }
            if (this.RemoveTheBlank(this.addTagName) == '') {
                this.$message('请输入标签名称')
                return
            }

      this.$store.commit("SET_ADDTAGPOPUP", false);
            this.$store.commit('SET_ADDTAGPOPUP', false)

      //   if (this.addTagLayer == null) {
      //     this.addTagLayer = new this.DC.HtmlLayer("addTagLayer");
      //     this.viewer.addLayer(this.addTagLayer);
      //   }
            //   if (this.addTagLayer == null) {
            //     this.addTagLayer = new this.DC.HtmlLayer("addTagLayer");
            //     this.viewer.addLayer(this.addTagLayer);
            //   }

      // 2022.3.2对接接口
      // 新增标签
      const data = {
        name: this.RemoveTheBlank(this.addTagName),
        jd: this.addTagPosition.lng,
        wd: this.addTagPosition.lat,
      };
      //   console.log(data);
      setlabel(data).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          doit();
          that.$message({
            message: "新增标签成功",
            type: "success",
          });
        } else {
          that.$message({
            message: "新增标签失败",
            type: "warning",
          });
            // 2022.3.2对接接口
            // 新增标签
            const data = {
                name: this.RemoveTheBlank(this.addTagName),
                jd: this.addTagPosition.lng,
                wd: this.addTagPosition.lat
            }
            //   console.log(data);
            setlabel(data).then((res) => {
                if (res.data.code == 200) {
                    doit()
                    that.$message({
                        message: '新增标签成功',
                        type: 'success'
                    })
                } else {
                    that.$message({
                        message: '新增标签失败',
                        type: 'warning'
                    })
                }
                that.addTagName = ''
            })
            const doit = () => {
                that.$store.dispatch('addLabelLayerIcon', {
                    // list: [data],
                    add: true
                })
                // const divIcon = new this.DC.DivIcon(
                //   new that.DC.Position(
                //     Number(that.addTagPosition.lng),
                //     Number(that.addTagPosition.lat),
                //     0
                //   ),
                //   `
                //                 <div class="tag-entitys-box">
                //                     <div class="tag-content">
                //                         ${that.addTagName}
                //                     </div>
                //                     <div class="tag-angle-content">
                //                         <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
                //                     </div>
                //                 </div>
                //             `
                // );
                // this.addTagLayer.addOverlay(divIcon);
            }
        },

        closePanoramaPopupBox () {
            this.$store.commit('SET_PANORAMAURL', '')
            this.$store.commit('SET_PANORAMAPOPUP', false)
        },

        closeMonitorPopupBox () {
            this.$store.commit('SET_MONITORURL', '')
            this.$store.commit('SET_MONITORPOPUP', false)
        },

        audioPlay () {
            if (this.audioFlag == false) {
                this.audioMsg.text = this.audioSource
                this.audioSynth.speak(this.audioMsg)
                this.audioFlag = true
                this.audioCourse = true
            } else {
                if (this.audioCourse == true) {
                    this.audioSynth.pause()
                    this.audioCourse = false
                } else {
                    this.audioSynth.resume()
                    this.audioCourse = true
                }
            }
        },

        mechanismDetailPopup (num, param) {
            getMechanismDetail({ num: num, mechanismName: param }).then((res) => {
                var result = res.data.data
                this.$store.commit('CLEAR_ALL', null)

                var imgArr = result.tpurl.split(',')

                this.$store.commit('SET_POPUPBGURL', imgArr[0])
                this.$store.commit('SET_POPUPQRURL', result.codeurl)
                this.$store.commit('SET_POINTPOSITION', [
                    Number(result.jd),
                    Number(result.wd),
                    Number(result.gd),
                    Number(result.heading),
                    Number(result.pitch),
                    Number(result.roll)
                ])
                this.$store.commit('SET_STATENAME', result.mechanismname)
                this.$store.commit('SET_SITENAME', result.address)
                this.$store.commit('SET_TELEPHONE', result.telephone)
                this.$store.commit('SET_INTRODUCETEXT', result.introduce)
                this.$store.commit('SET_POPUPIMGATLAS', imgArr)

                if (result.videourl && result.videourl != '') {
                    this.$store.commit('SET_MONITORURL', result.videourl)
                }

                this.newPopup(result)
                this.viewer.flyToPosition(
                    new this.DC.Position(
                        Number(result.jd),
                        Number(result.wd),
                        300,
                        Number(result.heading),
                        Number(result.pitch),
                        Number(result.roll)
                    ),
                    function () { },
                    3
                )
            })
        },

        newPopup (item) {
            const position = this.DC.Transform.transformWGS84ToCartesian(
                new this.DC.Position(Number(item.jd), Number(item.wd), Number(item.gd))
            )
            // eslint-disable-next-line no-unused-vars
            var popup = new this.DC.DivForms(this.viewer, {
                domId: 'divFormsDomBox',
                position: [position]
            })

            this.$store.commit('SET_PANORAMAPOPUP', false)
            this.$store.commit('SET_MONITORPOPUP', false)
            this.$store.commit('SET_DETAILSPOPUP', true)
        },

        /**
         * 删除左右两端的空格
         */
        RemoveTheBlank (str) {
            return str.replace(/(^\s*)|(\s*$)/g, '')
        }
        that.addTagName = "";
      });
      const doit = () => {
        that.$store.dispatch("addLabelLayerIcon", {
          // list: [data],
          add: true,
        });
        // const divIcon = new this.DC.DivIcon(
        //   new that.DC.Position(
        //     Number(that.addTagPosition.lng),
        //     Number(that.addTagPosition.lat),
        //     0
        //   ),
        //   `
        //                 <div class="tag-entitys-box">
        //                     <div class="tag-content">
        //                         ${that.addTagName}
        //                     </div>
        //                     <div class="tag-angle-content">
        //                         <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
        //                     </div>
        //                 </div>
        //             `
        // );
        // this.addTagLayer.addOverlay(divIcon);
      };
    },

    closePanoramaPopupBox() {
      this.$store.commit("SET_PANORAMAURL", "");
      this.$store.commit("SET_PANORAMAPOPUP", false);
    },

    closeMonitorPopupBox() {
      this.$store.commit("SET_MONITORURL", "");
      this.$store.commit("SET_MONITORPOPUP", false);
    },

    audioPlay() {
      if (this.audioFlag == false) {
        this.audioMsg.text = this.audioSource;
        this.audioSynth.speak(this.audioMsg);
        this.audioFlag = true;
        this.audioCourse = true;
      } else {
        if (this.audioCourse == true) {
          this.audioSynth.pause();
          this.audioCourse = false;
        } else {
          this.audioSynth.resume();
          this.audioCourse = true;
        }
      }
    },

    mechanismDetailPopup(num, param) {
      getMechanismDetail({ num: num, mechanismName: param }).then((res) => {
        var result = res.data.data;
        this.$store.commit("CLEAR_ALL", null);

        var imgArr = result.tpurl.split(",");

        this.$store.commit("SET_POPUPBGURL", imgArr[0]);
        this.$store.commit("SET_POPUPQRURL", result.codeurl);
        this.$store.commit("SET_POINTPOSITION", [
          Number(result.jd),
          Number(result.wd),
          Number(result.gd),
          Number(result.heading),
          Number(result.pitch),
          Number(result.roll),
        ]);
        this.$store.commit("SET_STATENAME", result.mechanismname);
        this.$store.commit("SET_SITENAME", result.address);
        this.$store.commit("SET_TELEPHONE", result.telephone);
        this.$store.commit("SET_INTRODUCETEXT", result.introduce);
        this.$store.commit("SET_POPUPIMGATLAS", imgArr);

        if (result.videourl && result.videourl != "") {
          this.$store.commit("SET_MONITORURL", result.videourl);
        }

        this.newPopup(result);
        this.viewer.flyToPosition(
          new this.DC.Position(
            Number(result.jd),
            Number(result.wd),
            300,
            Number(result.heading),
            Number(result.pitch),
            Number(result.roll)
          ),
          function () {},
          3
        );
      });
    },

    newPopup(item) {
      const position = this.DC.Transform.transformWGS84ToCartesian(
        new this.DC.Position(Number(item.jd), Number(item.wd), Number(item.gd))
      );
      // eslint-disable-next-line no-unused-vars
      var popup = new this.DC.DivForms(this.viewer, {
        domId: "divFormsDomBox",
        position: [position],
      });

      this.$store.commit("SET_PANORAMAPOPUP", false);
      this.$store.commit("SET_MONITORPOPUP", false);
      this.$store.commit("SET_DETAILSPOPUP", true);
    },

    /**
     * 删除左右两端的空格
     */
    RemoveTheBlank(str) {
      return str.replace(/(^\s*)|(\s*$)/g, "");
    },
  },
};
    }
}
</script>

<style>
.labelLayeridewm {
  width: 250px !important;
  height: 250px !important;
    width: 250px !important;
    height: 250px !important;
}
</style>

 src/components/map/index.vue

@@ -305,7 +305,6 @@

            var synceagleViewer = function () {
                if (isRightTrigger) {
                    console.log(eagleViewer.camera.heading)
                    viewer.camera.flyTo({

                        destination: eagleViewer.camera.position,

 src/components/mobileActivity/index.vue

@@ -1,509 +1,511 @@
<template>
  <div
    id="mobileActivity"
    :style="{ height: height + 'px' }"
    :class="[openValue ? 'isOpens' : 'notOpens']"
    v-if="showActivity"
  >
    <div class="mobileActivity_heard">
      <div class="mobileActivity_title">活动标题：{{ hdTitle }}</div>
      <div class="mobileActivity_close" @click="closeActivity">
        <i class="el-icon-close"></i>
      </div>
    </div>
    <div class="mobileActivity_in">
      <!-- <el-button type="primary" @click="init">open</el-button>
      <el-button type="success" @click="closeInit">close</el-button> -->
      <div class="mobileActivity_insmall">
        <!-- <img :src="imgs" alt="" class="mobileActivity_insmallimg" /> -->
        <el-image
          class="mobileActivity_insmallimg"
          :src="useData.url"
          :preview-src-list="useData.srcList"
        ></el-image>
        <div class="mobileActivity_insmallxiangqing">
          <div
            class="mobileActivity_insmallxiangqingIn"
            v-for="(item, index) in useData.smallData"
            :key="index"
          >
            <span class="mobileActivity_insmallxiangqingIn_s">{{
              item.lable
            }}</span
            >: {{ item.value }}
          </div>
    <div
        id="mobileActivity"
        :style="{ height: height + 'px' }"
        :class="[openValue ? 'isOpens' : 'notOpens']"
        v-if="showActivity"
    >
        <div class="mobileActivity_heard">
            <div class="mobileActivity_title">活动标题：{{ hdTitle }}</div>
            <div class="mobileActivity_close" @click="closeActivity">
                <i class="el-icon-close"></i>
            </div>
        </div>
      </div>
      <div class="mobileActivity_detailed">
        <div
          class="mobileActivity_detailedIn"
          v-for="(item, index) in useData.detailedData"
          :key="index"
        >
          <span class="mobileActivity_insmallxiangqingIn_s">{{
            item.lable
          }}</span
          >: {{ item.value }}
        <div class="mobileActivity_in">
            <!-- <el-button type="primary" @click="init">open</el-button>
            <el-button type="success" @click="closeInit">close</el-button>-->
            <div class="mobileActivity_insmall">
                <!-- <img :src="imgs" alt="" class="mobileActivity_insmallimg" /> -->
                <el-image
                    class="mobileActivity_insmallimg"
                    :src="useData.url"
                    :preview-src-list="useData.srcList"
                ></el-image>
                <div class="mobileActivity_insmallxiangqing">
                    <div
                        class="mobileActivity_insmallxiangqingIn"
                        v-for="(item, index) in useData.smallData"
                        :key="index"
                    >
                        <span class="mobileActivity_insmallxiangqingIn_s">
                            {{
                            item.lable
                            }}
                        </span>
                        : {{ item.value }}
                    </div>
                </div>
            </div>
            <div class="mobileActivity_detailed">
                <div
                    class="mobileActivity_detailedIn"
                    v-for="(item, index) in useData.detailedData"
                    :key="index"
                >
                    <span class="mobileActivity_insmallxiangqingIn_s">
                        {{
                        item.lable
                        }}
                    </span>
                    : {{ item.value }}
                </div>
            </div>
        </div>
      </div>
        <div class="mobileActivity_coutrol" :style="{ bottom: bottom + 'px' }">
            <ul>
                <li
                    v-for="(item, index) in leftNavData"
                    :key="index"
                    @click="mobileActivityCoutrolClick(item)"
                    v-show="!item.notShow"
                >
                    <img :src="item.img" alt />
                    <span>{{ item.label }}</span>
                </li>
            </ul>
        </div>
    </div>
    <div class="mobileActivity_coutrol" :style="{ bottom: bottom + 'px' }">
      <ul>
        <li
          v-for="(item, index) in leftNavData"
          :key="index"
          @click="mobileActivityCoutrolClick(item)"
          v-show="!item.notShow"
        >
          <img :src="item.img" alt="" />
          <span>{{ item.label }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import moveWindow from "./move";
import { mapGetters } from 'vuex'
import moveWindow from './move'
export default {
  name: "mobileActivity",
  computed: {
    ...mapGetters([
      "showActivity",
      "showActivityData",
      "drawALineLayerMany",
      "drawAPointLayerMany",
    ]),
  },
  data() {
    let heig = 135;
    let bottom = 150;
    return {
      useHeight: heig,
      height: heig,
      useBottom: bottom,
      bottom: bottom,
      openValue: false,
      domMove: null,
      start: 0,
      end: 0,
      hdTitle: "",
      // url: "",
      // srcList: [],
      useData: {},
      leftNavData: [
        {
          flag: true,
          label: "线路",
          // img: "/img/leftnav/tag.png",
          img: "/img/leftnav/tag-checked.png",
          normal: "/img/leftnav/tag.png",
          checked: "/img/leftnav/tag-checked.png",
          layer: "tagLayer",
          imgSrc: "https://map.hit.edu.cn/images/tarrow_xq.png",
          // imgSrc: "img/mobile/pink.png",
          layer: "drawALineLayerMany",
        },
        {
          flag: true,
          label: "标点",
          img: "/img/leftnav/way-checked.png",
          normal: "/img/leftnav/way.png",
          checked: "/img/leftnav/way-checked.png",
          layer: "wayLayer",
          imgSrc: "img/mobile/green.png",
          layer: "drawAPointLayerMany",
        },
        // {
        //   flag: false,
        //   label: "实景",
        //   img: "/img/leftnav/scene.png",
        //   normal: "/img/leftnav/scene.png",
        //   checked: "/img/leftnav/scene-checked.png",
        //   layer: "sceneLayer",
        //   imgSrc: "img/leftnav/map-panorama.png",
        //   // imgSrc: "img/mobile/blue.png",
        // },
      ],
    };
  },
  watch: {
    //   openValue() {
    //     if (this.openValue) {
    //       let windowHeight = document.body.clientHeight;
    //       this.height = windowHeight / 2;
    //     } else {
    //       this.height = this.useHeight;
    //     }
    //   },
    showActivity() {
      if (this.showActivity) {
        this.inToInit(); //初始化
        this.hdTitle = this.showActivityData.name;

        console.log(this.showActivityData);
        //new窗口对象
        let that = this;
        let windowHeight = document.body.clientHeight;
        this.doData(this.showActivityData); //使用数据
        // 获取最大高度避免数据过少，空格多
        // let heard = document.querySelector(".mobileActivity_heard");
        // let ins = document.querySelector(".mobileActivity_in");
        // console.log(heard, ins, 77777);
        this.checkDom("querySelector", ".mobileActivity_heard", (head) => {
          this.checkDom("querySelector", ".mobileActivity_in", (ins) => {
            console.log((head.offsetHeight + ins.offsetHeight) / 4);
            doit(head.offsetHeight + ins.offsetHeight);
          });
        });
        // return;
        let doit = (maxheights) => {
          this.domMove = new moveWindow({
            id: "mobileActivity",
            minHeight: that.useHeight,
            maxHeight: maxheights || windowHeight / 2,
            critical: maxheights / 4,
            fn: function (res) {
              that.height = +res.height;
              that.bottom = +res.height + 15;
              // console.log(+res.height, "=======");
              if (res.state != "on") {
                that.openValue = res.state;
              }
            },
          });
          this.domMove.init();
          // console.log(this.domMove);
          //转移···添加点和线
          let addressOur = this.changeData(
            this.useData.query,
            "addressname",
            "address"
          );
          let lxOur = this.changeData(this.useData.query, "lxname", "lx");
          // console.log(addressOur, lxOur);
          that.$store.dispatch("MSET_DRAWALINELAYERMANY", [
            lxOur,
            addressOur,
            this.useData.query,
            function () {
              that.domMove.opens(false, true);
            },
          ]);
        };
      }
    name: 'mobileActivity',
    computed: {
        ...mapGetters([
            'showActivity',
            'showActivityData',
            'drawALineLayerMany',
            'drawAPointLayerMany'
        ])
    },
  },
  mounted() {},
  methods: {
    inToInit() {
      //初始化
      this.openValue = false;
      this.height = this.useHeight;
      this.bottom = this.useBottom;
      for (let k in this.leftNavData) {
        this.leftNavData[k].flag = true;
        this.leftNavData[k].img = this.leftNavData[k].checked;
      }
    },
    //处理主数据
    doData(val) {
      let srcList = val.opendata.tpurl.split(",");
      this.useData = {
        data: val,
        url: srcList[0],
        srcList: srcList,
        smallData: [
          {
            lable: "主办方",
            value: val.opendata.sponsor,
          },
          {
            lable: "承办方",
            value: val.opendata.undertake,
          },
        ],
        detailedData: [
          {
            lable: "活动时间",
            value: val.opendata.time,
          },
          {
            lable: "活动详情",
            value: val.opendata.context,
          },
        ],
        query: {
          name: val.opendata.hdname,
          bgImg: val.opendata.tpurl,
          from: "活动",
          websiteUrl: val.opendata.websiteurl,
          telePhone: val.opendata.telephone,
          introduce: val.opendata.context,
          video: val.opendata.videourl,
          // buts: ["定位"],
          //活动添加的字段
          addressname: val.opendata.addressname.split(";"),
          address: val.opendata.address.split(";"),
          lxname: val.opendata.lxname.split(";"),
          lx: val.opendata.lx.split(";"),
          lntLat: [
            val.opendata.address.split(";")[0].split(",")[0],
            val.opendata.address.split(";")[0].split(",")[1],
          ],
          panoramaurl: val.opendata.panoramaurl, //全景
        },
      };
    },
    //启动监听事件
    init() {
      this.domMove.init();
    },
    //关闭监听事件
    closeInit() {
      this.domMove.closeInit();
    },
    //控制线路和点的显影
    mobileActivityCoutrolClick(item) {
      item.flag = !item.flag;
      if (item.flag == true) {
        item.img = item.checked;
      } else {
        item.img = item.normal;
      }
      this.$store.commit("showLineOrPoint", {
        layer: item.layer,
        flag: item.flag,
      });
    },
    changeData(data, name, value) {
      let arr = [];
      for (let k in data[name]) {
        arr.push({
          name: data[name][k],
          value:
            name == "lxname"
              ? data[value][k]
                  .split("(")[1]
                  .split(")")[0]
                  .split(",")
                  .join(";")
                  .split(" ")
                  .join(",")
              : [+data[value][k].split(",")[0], +data[value][k].split(",")[1]],
        });
      }
      return arr;
    },
    closeActivity() {
      this.$store.commit("set_showActivity", { state: false });
      if (this.domMove) {
        this.closeInit();
      }
      //关闭路线和点的图层
      this.$store.commit("removePolylineMany");
      //关闭随地图弹窗
      this.$store.dispatch("closeMobileWindowsDom");
      //显示右侧栏
      this.$store.commit("SET_SeeAndNotSee", true);
    },
    checkDom(methods, name, fn) {
      //  声明定时器
      var timer = null;
      //  检查dom是否执行完成
      function checkDom() {
        // let dom = that.$refs[name];
        let dom = document[methods](name);
        if (dom) {
          //  执行dom加载完成后的操作
          //  清除定时器
          if (!timer) {
            clearTimeout(timer);
          }
          if (fn) {
            //回调函数
            fn(dom);
            return;
          } else {
            return dom;
          }
        } else {
          //  自我调用
          timer = setTimeout(checkDom, 100);
    data () {
        const heig = 135
        const bottom = 150
        return {
            useHeight: heig,
            height: heig,
            useBottom: bottom,
            bottom: bottom,
            openValue: false,
            domMove: null,
            start: 0,
            end: 0,
            hdTitle: '',
            // url: "",
            // srcList: [],
            useData: {},
            leftNavData: [
                {
                    flag: true,
                    label: '线路',
                    // img: "/img/leftnav/tag.png",
                    img: '/img/leftnav/tag-checked.png',
                    normal: '/img/leftnav/tag.png',
                    checked: '/img/leftnav/tag-checked.png',
                    layer: 'tagLayer',
                    imgSrc: 'https://map.hit.edu.cn/images/tarrow_xq.png',
                    // imgSrc: "img/mobile/pink.png",
                    layer: 'drawALineLayerMany'
                },
                {
                    flag: true,
                    label: '标点',
                    img: '/img/leftnav/way-checked.png',
                    normal: '/img/leftnav/way.png',
                    checked: '/img/leftnav/way-checked.png',
                    layer: 'wayLayer',
                    imgSrc: 'img/mobile/green.png',
                    layer: 'drawAPointLayerMany'
                }
                // {
                //   flag: false,
                //   label: "实景",
                //   img: "/img/leftnav/scene.png",
                //   normal: "/img/leftnav/scene.png",
                //   checked: "/img/leftnav/scene-checked.png",
                //   layer: "sceneLayer",
                //   imgSrc: "img/leftnav/map-panorama.png",
                //   // imgSrc: "img/mobile/blue.png",
                // },
            ]
        }
      }
      //  首次执行
      checkDom();
    },
  },
};
    watch: {
        //   openValue() {
        //     if (this.openValue) {
        //       let windowHeight = document.body.clientHeight;
        //       this.height = windowHeight / 2;
        //     } else {
        //       this.height = this.useHeight;
        //     }
        //   },
        showActivity () {
            if (this.showActivity) {
                this.inToInit() // 初始化
                this.hdTitle = this.showActivityData.name

                // new窗口对象
                const that = this
                const windowHeight = document.body.clientHeight
                this.doData(this.showActivityData) // 使用数据
                // 获取最大高度避免数据过少，空格多
                // let heard = document.querySelector(".mobileActivity_heard");
                // let ins = document.querySelector(".mobileActivity_in");
                // console.log(heard, ins, 77777);
                this.checkDom('querySelector', '.mobileActivity_heard', (head) => {
                    this.checkDom('querySelector', '.mobileActivity_in', (ins) => {
                        console.log((head.offsetHeight + ins.offsetHeight) / 4)
                        doit(head.offsetHeight + ins.offsetHeight)
                    })
                })
                // return;
                const doit = (maxheights) => {
                    this.domMove = new moveWindow({
                        id: 'mobileActivity',
                        minHeight: that.useHeight,
                        maxHeight: maxheights || windowHeight / 2,
                        critical: maxheights / 4,
                        fn: function (res) {
                            that.height = +res.height
                            that.bottom = +res.height + 15
                            // console.log(+res.height, "=======");
                            if (res.state != 'on') {
                                that.openValue = res.state
                            }
                        }
                    })
                    this.domMove.init()
                    // console.log(this.domMove);
                    // 转移···添加点和线
                    const addressOur = this.changeData(
                        this.useData.query,
                        'addressname',
                        'address'
                    )
                    const lxOur = this.changeData(this.useData.query, 'lxname', 'lx')
                    // console.log(addressOur, lxOur);
                    that.$store.dispatch('MSET_DRAWALINELAYERMANY', [
                        lxOur,
                        addressOur,
                        this.useData.query,
                        function () {
                            that.domMove.opens(false, true)
                        }
                    ])
                }
            }
        }
    },
    mounted () { },
    methods: {
        inToInit () {
            // 初始化
            this.openValue = false
            this.height = this.useHeight
            this.bottom = this.useBottom
            for (const k in this.leftNavData) {
                this.leftNavData[k].flag = true
                this.leftNavData[k].img = this.leftNavData[k].checked
            }
        },
        // 处理主数据
        doData (val) {
            const srcList = val.opendata.tpurl.split(',')
            this.useData = {
                data: val,
                url: srcList[0],
                srcList: srcList,
                smallData: [
                    {
                        lable: '主办方',
                        value: val.opendata.sponsor
                    },
                    {
                        lable: '承办方',
                        value: val.opendata.undertake
                    }
                ],
                detailedData: [
                    {
                        lable: '活动时间',
                        value: val.opendata.time
                    },
                    {
                        lable: '活动详情',
                        value: val.opendata.context
                    }
                ],
                query: {
                    name: val.opendata.hdname,
                    bgImg: val.opendata.tpurl,
                    from: '活动',
                    websiteUrl: val.opendata.websiteurl,
                    telePhone: val.opendata.telephone,
                    introduce: val.opendata.context,
                    video: val.opendata.videourl,
                    // buts: ["定位"],
                    // 活动添加的字段
                    addressname: val.opendata.addressname.split(';'),
                    address: val.opendata.address.split(';'),
                    lxname: val.opendata.lxname.split(';'),
                    lx: val.opendata.lx.split(';'),
                    lntLat: [
                        val.opendata.address.split(';')[0].split(',')[0],
                        val.opendata.address.split(';')[0].split(',')[1]
                    ],
                    panoramaurl: val.opendata.panoramaurl // 全景
                }
            }
        },
        // 启动监听事件
        init () {
            this.domMove.init()
        },
        // 关闭监听事件
        closeInit () {
            this.domMove.closeInit()
        },
        // 控制线路和点的显影
        mobileActivityCoutrolClick (item) {
            item.flag = !item.flag
            if (item.flag == true) {
                item.img = item.checked
            } else {
                item.img = item.normal
            }
            this.$store.commit('showLineOrPoint', {
                layer: item.layer,
                flag: item.flag
            })
        },
        changeData (data, name, value) {
            const arr = []
            for (const k in data[name]) {
                arr.push({
                    name: data[name][k],
                    value:
                        name == 'lxname'
                            ? data[value][k]
                                .split('(')[1]
                                .split(')')[0]
                                .split(',')
                                .join(';')
                                .split(' ')
                                .join(',')
                            : [+data[value][k].split(',')[0], +data[value][k].split(',')[1]]
                })
            }
            return arr
        },
        closeActivity () {
            this.$store.commit('set_showActivity', { state: false })
            if (this.domMove) {
                this.closeInit()
            }
            // 关闭路线和点的图层
            this.$store.commit('removePolylineMany')
            // 关闭随地图弹窗
            this.$store.dispatch('closeMobileWindowsDom')
            // 显示右侧栏
            this.$store.commit('SET_SeeAndNotSee', true)
        },
        checkDom (methods, name, fn) {
            //  声明定时器
            var timer = null
            //  检查dom是否执行完成
            function checkDom () {
                // let dom = that.$refs[name];
                const dom = document[methods](name)
                if (dom) {
                    //  执行dom加载完成后的操作
                    //  清除定时器
                    if (!timer) {
                        clearTimeout(timer)
                    }
                    if (fn) {
                        // 回调函数
                        fn(dom)
                    } else {
                        return dom
                    }
                } else {
                    //  自我调用
                    timer = setTimeout(checkDom, 100)
                }
            }
            //  首次执行
            checkDom()
        }
    }
}
</script>

<style lang="scss">
#mobileActivity {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  // height: 50px;
  background-color: #fff;
  z-index: 999;
  transition: height 0.1s;
  border-radius: 15px 15px 0 0;
  .mobileActivity_heard {
    height: 35px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    // height: 50px;
    background-color: #fff;
    z-index: 999;
    transition: height 0.1s;
    border-radius: 15px 15px 0 0;
    width: 100%;
    background-color: #409eff;
    color: #fff;
    border-bottom: 1px solid rgba($color: #acacac, $alpha: 0.5);
    box-shadow: 0 0px 10px -3px rgba($color: #acacac, $alpha: 0.5);
    .mobileActivity_title {
      width: 100%;
      height: 100%;
      line-height: 35px;
      text-indent: 1rem;
    }
    .mobileActivity_close {
      position: absolute;
      right: 5px;
      top: 5px;
      font-size: 25px;
    }
  }
  .mobileActivity_in {
    width: 100%;
    height: auto;
    overflow: hidden;
    padding-bottom: 5px;
    .mobileActivity_insmall {
      background-color: #fff;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .mobileActivity_insmallimg {
        width: 90px;
        height: 90px;
      }
      .mobileActivity_insmallxiangqing {
        width: calc(100% - 110px);
        height: 94px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
        .mobileActivity_insmallxiangqingIn {
          width: 100%;
        }
      }
    }
    .mobileActivity_detailed {
      background-color: rgba(202, 202, 202, 0.2);
      padding: 3px 0 0 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      .mobileActivity_detailedIn {
        background-color: #fff;
        box-sizing: border-box;
    .mobileActivity_heard {
        height: 35px;
        border-radius: 15px 15px 0 0;
        width: 100%;
        padding: 5px;
        margin: 0 0 3px 0;
      }
        background-color: #409eff;
        color: #fff;
        border-bottom: 1px solid rgba($color: #acacac, $alpha: 0.5);
        box-shadow: 0 0px 10px -3px rgba($color: #acacac, $alpha: 0.5);
        .mobileActivity_title {
            width: 100%;
            height: 100%;
            line-height: 35px;
            text-indent: 1rem;
        }
        .mobileActivity_close {
            position: absolute;
            right: 5px;
            top: 5px;
            font-size: 25px;
        }
    }
    .mobileActivity_insmallxiangqingIn_s {
      font-weight: 600;
    .mobileActivity_in {
        width: 100%;
        height: auto;
        overflow: hidden;
        padding-bottom: 5px;
        .mobileActivity_insmall {
            background-color: #fff;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            .mobileActivity_insmallimg {
                width: 90px;
                height: 90px;
            }
            .mobileActivity_insmallxiangqing {
                width: calc(100% - 110px);
                height: 94px;
                display: flex;
                align-items: center;
                justify-content: space-around;
                flex-direction: column;
                .mobileActivity_insmallxiangqingIn {
                    width: 100%;
                }
            }
        }
        .mobileActivity_detailed {
            background-color: rgba(202, 202, 202, 0.2);
            padding: 3px 0 0 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            .mobileActivity_detailedIn {
                background-color: #fff;
                box-sizing: border-box;
                width: 100%;
                padding: 5px;
                margin: 0 0 3px 0;
            }
        }
        .mobileActivity_insmallxiangqingIn_s {
            font-weight: 600;
        }
    }
  }
}

.notOpens {
  &::after {
    content: "";
    display: block;
    width: 20px;
    height: 4px;
    background-color: rgba(202, 202, 202, 1);
    position: absolute;
    top: -9px;
    left: calc(50% - 10px);
    border-radius: 5px;
  }
    &::after {
        content: '';
        display: block;
        width: 20px;
        height: 4px;
        background-color: rgba(202, 202, 202, 1);
        position: absolute;
        top: -9px;
        left: calc(50% - 10px);
        border-radius: 5px;
    }
}

.isOpens {
  &::after {
    content: "";
    display: block;
    width: 13px;
    height: 4px;
    background-color: rgba(202, 202, 202, 1);
    position: absolute;
    top: -9px;
    left: calc(50% - 12px);
    border-radius: 5px;
    transform: rotate(30deg);
  }
  &::before {
    content: "";
    display: block;
    width: 13px;
    height: 4px;
    background-color: rgba(202, 202, 202, 1);
    position: absolute;
    top: -9px;
    left: calc(50% - 4px);
    border-radius: 5px;
    transform: rotate(-30deg);
  }
    &::after {
        content: '';
        display: block;
        width: 13px;
        height: 4px;
        background-color: rgba(202, 202, 202, 1);
        position: absolute;
        top: -9px;
        left: calc(50% - 12px);
        border-radius: 5px;
        transform: rotate(30deg);
    }
    &::before {
        content: '';
        display: block;
        width: 13px;
        height: 4px;
        background-color: rgba(202, 202, 202, 1);
        position: absolute;
        top: -9px;
        left: calc(50% - 4px);
        border-radius: 5px;
        transform: rotate(-30deg);
    }
}
.mobileActivity_coutrol {
  position: fixed;
  bottom: 150px;
  left: 0px;
  z-index: 200;
  background-color: #fff;
  border-radius: 0 17px 17px 0;
  transition: all 0.18s;
  ul {
    position: relative;
    top: 3px;
  }
  li {
    margin-bottom: 6px;
    font-weight: 400;
    display: block;
    width: 80px;
    height: 30px;
    line-height: 30px;
    position: fixed;
    bottom: 150px;
    left: 0px;
    z-index: 200;
    background-color: #fff;
    border-radius: 15px;
    text-align: center;
    font-size: 0;
    cursor: pointer;

    img {
      position: relative;
      transition: all 0.5s;
      width: 24px;
      height: 24px;
      vertical-align: middle;
      margin-right: 10px;
      image-rendering: -moz-crisp-edges;
      image-rendering: -o-crisp-edges;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
      -ms-interpolation-mode: nearest-neighbor;
    border-radius: 0 17px 17px 0;
    transition: all 0.18s;
    ul {
        position: relative;
        top: 3px;
    }
    li {
        margin-bottom: 6px;
        font-weight: 400;
        display: block;
        width: 80px;
        height: 30px;
        line-height: 30px;
        background-color: #fff;
        border-radius: 15px;
        text-align: center;
        font-size: 0;
        cursor: pointer;

    span {
      display: inline-block;
      vertical-align: middle;
      font-size: 14px;
      color: #2f2f2f;
        img {
            position: relative;
            transition: all 0.5s;
            width: 24px;
            height: 24px;
            vertical-align: middle;
            margin-right: 10px;
            image-rendering: -moz-crisp-edges;
            image-rendering: -o-crisp-edges;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            -ms-interpolation-mode: nearest-neighbor;
        }

        span {
            display: inline-block;
            vertical-align: middle;
            font-size: 14px;
            color: #2f2f2f;
        }
    }
  }
}
</style>

 src/pcviews/tool/sign.vue

@@ -1,200 +1,192 @@
<template>
  <public-box class="tool-sign">
    <template slot="public-box-header">
      <div class="title">
        <img class="icon deblurring" src="/img/icon/tool-sign.png" alt />
        <span>地图标记</span>
      </div>
      <img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
    </template>
    <template slot="public-box-content">
      <div class="list-box">
        <ul v-show="signList.length > 0">
          <li
            v-for="(item, index) in signList"
            :key="index"
            @click="dingw(item)"
          >
            <img src="/img/icon/sign-list.png" alt />
            {{ item.name }}
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              circle
              @click.stop="deleteIcon(item.id)"
            ></el-button>
          </li>
        </ul>
        <div v-show="signList.length == 0" class="no-data">
          <img src="/img/icon/no-data.png" alt />
          <div>暂无数据</div>
        </div>
      </div>
      <div class="btn-box">
        <el-button type="primary" size="mini" @click.stop="addSign"
          >新增</el-button
        >
      </div>
      <div>
        <img
          src='"/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAFeAV4DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6er…sf2r7P5P76OTdt8zd9xjjG5evrXsFFFABXj/x08E+IvGP9g/2Bp/2z7L9o8799HHt3eXt++wzna3T0r2CigD5A/wCFJfEP/oXv/J23/wDjlfR/xS0TUfEfw41bSdJt/tF9P5Plxb1TdtmRjyxAHAJ5NdhRQB4/8C/BPiLwd/b39v6f9j+1fZ/J/fRybtvmbvuMcY3L19a5D4pfC3xl4j+I+ratpOjfaLGfyfLl+1Qpu2wop4ZwRyCORX0fRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFAH//2Q=="'
          alt=""
        />
      </div>
    </template>
  </public-box>
    <public-box class="tool-sign">
        <template slot="public-box-header">
            <div class="title">
                <img class="icon deblurring" src="/img/icon/tool-sign.png" alt />
                <span>地图标记</span>
            </div>
            <img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
        </template>
        <template slot="public-box-content">
            <div class="list-box">
                <ul v-show="signList.length > 0">
                    <li v-for="(item, index) in signList" :key="index" @click="dingw(item)">
                        <img src="/img/icon/sign-list.png" alt />
                        {{ item.name }}
                        <el-button
                            type="danger"
                            size="mini"
                            icon="el-icon-delete"
                            circle
                            @click.stop="deleteIcon(item.id)"
                        ></el-button>
                    </li>
                </ul>
                <div v-show="signList.length == 0" class="no-data">
                    <img src="/img/icon/no-data.png" alt />
                    <div>暂无数据</div>
                </div>
            </div>
            <div class="btn-box">
                <el-button type="primary" size="mini" @click.stop="addSign">新增</el-button>
            </div>
            <div>
                <img
                src=""/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAFeAV4DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6er…sf2r7P5P76OTdt8zd9xjjG5evrXsFFFABXj/x08E+IvGP9g/2Bp/2z7L9o8799HHt3eXt++wzna3T0r2CigD5A/wCFJfEP/oXv/J23/wDjlfR/xS0TUfEfw41bSdJt/tF9P5Plxb1TdtmRjyxAHAJ5NdhRQB4/8C/BPiLwd/b39v6f9j+1fZ/J/fRybtvmbvuMcY3L19a5D4pfC3xl4j+I+ratpOjfaLGfyfLl+1Qpu2wop4ZwRyCORX0fRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFAH//2Q==""
                alt
                />
            </div>
        </template>
    </public-box>
</template>

<script>
import { mapGetters } from "vuex";
import { getlabel, deletelabel } from "@/api/pc/label";
import { mapGetters } from 'vuex'
import { getlabel, deletelabel } from '@/api/pc/label'

export default {
  data() {
    return {
      DC: null,
      signList: [],
      destroyedFlag: true,
    };
  },
  computed: {
    ...mapGetters(["viewer", "addSignList"]),
  },
  mounted() {
    this.$store.commit("initLabelLayer", this.viewer);
    this.getData();
  },
  watch: {
    addSignList() {
      this.getData();
    },
  },
  methods: {
    dingw(item) {
      let that = this;
      // console.log(item);
      // this.$store.dispatch("mapFlyTo", {
      //   lntLat: [item.jd, item.wd, 120], //114.04020791, 27.62934732
      //   heading: 0,
      //   pitch: -90,
      //   roll: 0,
      //   noOpen: true,
      //   mviewer: that.viewer,
      // });
      that.viewer.camera.setView({
        // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
        // fromDegrees()方法，将经纬度和高程转换为世界坐标
        destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
          item.jd,
          item.wd,
          400.0
        ),
        orientation: {
          // 指向
          heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
          // 视角
          pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
          roll: 0.0,
        },
      });
    },
    deleteIcon(id) {
      let that = this;
      deletelabel(id).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          that.$message({
            message: "删除标签成功",
            type: "success",
          });
        } else {
          that.$message({
            message: "删除标签失败",
            type: "warning",
          });
    data () {
        return {
            DC: null,
            signList: [],
            destroyedFlag: true
        }
        that.getData();
      });
    },
    getData() {
      let that = this;
      getlabel().then((res) => {
        console.log(res);
        const data = res.data.data.records;
        that.signList = data;
        // that.$store.commit("clearLabelLayerIcon");
        that.$store.dispatch("addLabelLayerIcon", {
          list: data,
          clear: true,
        });
      });
    computed: {
        ...mapGetters(['viewer', 'addSignList'])
    },
    moveMessage(e, b) {
      if (b == "") {
        this.viewer.tooltip.enable = false;
      } else {
        this.viewer.tooltip.enable = true;
        this.viewer.tooltip.showAt(e.windowPosition, b);
      }
    mounted () {
        this.$store.commit('initLabelLayer', this.viewer)
        this.getData()
    },

    addSign() {
      var that = this;
      that.DC = global.DC;
      this.$store.commit("set_closeMapClick", true);
      // console.log("开始", "see");
      that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) =>
        that.moveMessage(e, "点击确认标注位置")
      );

      that.viewer.once(that.DC.MouseEventType.CLICK, (e) => {
        if (that.destroyedFlag == false) return;

        that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) =>
          that.moveMessage(e, "")
        );

        // eslint-disable-next-line no-unused-vars
        const popup = new this.DC.DivForms(this.viewer, {
          domId: "AddTagBox",
          position: [
            that.DC.Transform.transformWGS84ToCartesian(
              new that.DC.Position(
                Number(e.wgs84SurfacePosition.lng),
                Number(e.wgs84SurfacePosition.lat),
                Number(e.wgs84SurfacePosition.alt)
              )
            ),
          ],
        });

        that.$store.commit("SET_ADDTAGPOSITION", e.wgs84SurfacePosition);
        that.$store.commit("SET_ADDTAGPOPUP", true);
      });
    watch: {
        addSignList () {
            this.getData()
        }
    },
    methods: {
        dingw (item) {
            const that = this
            // console.log(item);
            // this.$store.dispatch("mapFlyTo", {
            //   lntLat: [item.jd, item.wd, 120], //114.04020791, 27.62934732
            //   heading: 0,
            //   pitch: -90,
            //   roll: 0,
            //   noOpen: true,
            //   mviewer: that.viewer,
            // });
            that.viewer.camera.setView({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                    item.jd,
                    item.wd,
                    400.0
                ),
                orientation: {
                    // 指向
                    heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    // 视角
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                    roll: 0.0
                }
            })
        },
        deleteIcon (id) {
            const that = this
            deletelabel(id).then((res) => {
                if (res.data.code == 200) {
                    that.$message({
                        message: '删除标签成功',
                        type: 'success'
                    })
                } else {
                    that.$message({
                        message: '删除标签失败',
                        type: 'warning'
                    })
                }
                that.getData()
            })
        },
        getData () {
            const that = this
            getlabel().then((res) => {
                const data = res.data.data.records
                that.signList = data
                // that.$store.commit("clearLabelLayerIcon");
                that.$store.dispatch('addLabelLayerIcon', {
                    list: data,
                    clear: true
                })
            })
        },
        moveMessage (e, b) {
            if (b == '') {
                this.viewer.tooltip.enable = false
            } else {
                this.viewer.tooltip.enable = true
                this.viewer.tooltip.showAt(e.windowPosition, b)
            }
        },

    closeModel() {
      this.$store.dispatch("delVisitedViews", this.$route);
      this.$router.push("/pcLayout/default");
      this.$store.commit("clearLabelLayerIcon");
        addSign () {
            var that = this
            that.DC = global.DC
            this.$store.commit('set_closeMapClick', true)
            // console.log("开始", "see");
            that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) =>
                that.moveMessage(e, '点击确认标注位置')
            )

            that.viewer.once(that.DC.MouseEventType.CLICK, (e) => {
                if (that.destroyedFlag == false) return

                that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) =>
                    that.moveMessage(e, '')
                )

                // eslint-disable-next-line no-unused-vars
                const popup = new this.DC.DivForms(this.viewer, {
                    domId: 'AddTagBox',
                    position: [
                        that.DC.Transform.transformWGS84ToCartesian(
                            new that.DC.Position(
                                Number(e.wgs84SurfacePosition.lng),
                                Number(e.wgs84SurfacePosition.lat),
                                Number(e.wgs84SurfacePosition.alt)
                            )
                        )
                    ]
                })

                that.$store.commit('SET_ADDTAGPOSITION', e.wgs84SurfacePosition)
                that.$store.commit('SET_ADDTAGPOPUP', true)
            })
        },

        closeModel () {
            this.$store.dispatch('delVisitedViews', this.$route)
            this.$router.push('/pcLayout/default')
            this.$store.commit('clearLabelLayerIcon')
        }
    },
  },
  destroyed() {
    var that = this;
    that.destroyedFlag = false;
    if (that.DC) {
      that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) =>
        that.moveMessage(e, "")
      );
    destroyed () {
        var that = this
        that.destroyedFlag = false
        if (that.DC) {
            that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) =>
                that.moveMessage(e, '')
            )
        }
        this.$store.commit('clearLabelLayerIcon')
    }
    this.$store.commit("clearLabelLayerIcon");
  },
};
}
</script>

<style lang="scss" scoped>
.move {
  cursor: move;
    cursor: move;
}
</style>

 src/store/modules/mobile.js

@@ -1,1089 +1,1085 @@
import $store from "../index";
import axios from "axios";
import $store from '../index'
import axios from 'axios'

import urlParameter from './mobiles/urlParameter'
const mobile = {
  state: {
    ...urlParameter.state, //url参数
    mviewer: null, // 地图实体类
    mBigPopup: false, // 全屏弹窗
    popupOurOpenData: [], // 全屏弹窗中下拉菜单数据
    popupTableName: [], // 全屏弹窗标签页数据
    mBigPopupAfter: false, /// /全屏弹窗之前的弹窗
    ips: "", // 获取的ip
    iconHide: false, // 右侧伸缩状态
    // DC: '',//DC全局保存
    MobileWindowsHide: true, // 改变点击窗口的显示状态
    MobileWindowChangeData: false, // 改变点击窗口的数据
    popupsDom: "", // mobileDivForms的实体类
    query: {}, // 传输数据
    openmobileGoTo: false, // 测试
    ccDataState: false, // 测试
    openmobilePanorama: false, // 实景显影
    MobileWindowsHideFixed: true, // 改变点击窗口的显示状态--固定窗口
    MobileWindowChangeDataFixed: false, // 改变点击窗口的数据--固定窗口
    // 在每次飞行弹窗中  加入自己的点
    pointLayer: null,
    pointLayerData: {
      flag: false,
      label: "选择点",
      img: "/img/leftnav/way.png",
      normal: "/img/leftnav/way.png",
      checked: "/img/leftnav/way-checked.png",
      layer: "pointLayer",
    },
    // 默认起始点函数
    startPointFn: "",
    dimension: "2.5D", // 维度
    dimensionData: {
      // 维度镜头数据
      heading: 0,
      pitch: -90,
      roll: 0,
    },
    zoomRange: [80, 200], //缩放程度
    frislayertHeight: 160, //默认弹窗高度
    perspectiveControl: "", //视角控制：高度、角度  ()=>{}
    perspectiveControls: "", //视角控制：高度、角度  ()=>{}

    tilesetLayer: null, //3d模型
    tileset: null, //3d模型
    tilesetLayer: null, //2.5d模型
    usetowpointfive: null,
    tilesetLayer: null, //瀑布流
    areaLayer: null, //2.5d事件--绿色图层
    select: {
      //绿色图层控制显示
      overlay: undefined,
      color: undefined,
    },

    vecLayer: null, //3D底图
    cvaLayer: null, //3D底图

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

    navigationStartLngLat: "", //导航起点
    navigationEndLngLat: "", //导航终点
    drawALineLayer: null, //导航路径图层
    drawALineLayerIcon: null, //导航路径图层图标
    isOpenDrawALine: false, //是否开启路径
    endPosition: "", //传送终点经纬度--
    isendPosition: false, //传送终点经纬度--感应数据
    routerS: [], //所有路径
    choiceRouterS: 0, //当前选择路径

    showActivity: false, //是否显示活动弹窗
    showActivityData: {}, //活动内容

    drawALineLayerMany: null, //活动路线图层
    drawAPointLayerMany: null, //活动点图层
    isOpenDrawALineMany: null, //是否开启活动
    seeRight: true, //右侧控制栏显影
  },
  mutations: {
    ...urlParameter.mutations, //url参数
    MSET_VIEWER(state, viewer) {
      state.mviewer = viewer;
    },
    MSET_BIGPOPUP(state, viewer) {
      state.mBigPopup = viewer;
      $store.dispatch("closeMobileWindowsDom"); // 关闭弹窗
    },
    MSET_BIGPOPUPAFTER(state, viewer) {
      state.mBigPopupAfter = viewer;
      $store.dispatch("closeMobileWindowsDom"); // 关闭弹窗
    },
    MSET_POPUPOUROPENDATA(state, viewer) {
      state.popupOurOpenData = viewer;
    },
    MSET_ICONHIDE(state, viewer) {
      state.iconHide = viewer;
    },
    MSET_POPUPTABLENAME(state, viewer) {
      state.popupTableName = viewer;
    },
    MSET_MOBILEWINDOWSHIDE(state, viewer) {
      // 随地图移动窗口
      state.MobileWindowChangeData = !state.MobileWindowChangeData;
      state.MobileWindowsHide = viewer;
    },
    MSETCC_SETCC(state, viewer) {
      state.ccDataState = !state.ccDataState; // 专门测试
      state.query = viewer;
    },
    MSET_POPUPDOM(state, viewer) {
      state.popupsDom = viewer;
    },
    MSET_QUERY(state, viewer) {
      state.query = viewer;
    },
    MSET_OPENMOBILEGOTO(state, viewer) {
      state.openmobileGoTo = viewer;
    },
    MSET_OPENMOBILEPANORAMA(state, viewer) {
      state.openmobilePanorama = viewer;
    },
    MSET_MOBILEWINDOWSHIDEFIXED(state, viewer) {
      // 固定窗口
      state.MobileWindowChangeDataFixed = !state.MobileWindowChangeDataFixed;
      state.MobileWindowsHideFixed = viewer;
      console.log(state.MobileWindowChangeDataFixed);
    },
    // 默认位置
    MSET_MORENWEIZHI(state, data) {
      state.startPointFn = data;
    },
    // // 开关飞入点图标
    // MSET_OPENPOINTEL(state, val) {
    //     if (val) {
    //         state.pointLayerData.img = state.pointLayerData.checked
    //         state[state.pointLayerData.layer].show = true
    //     } else {
    //         state.pointLayerData.img = state.pointLayerData.normal
    //         state[state.pointLayerData.layer].show = false
    //     }
    // },
    //送入移动端缩放范围
    set_zoomRange(state, data) {
      state.zoomRange = data;
    },
    //送入默认弹窗高度
    set_frislayertHeight(state, data) {
      state.frislayertHeight = data;
    },
    //切换2D和2.5D
    MSET_DIMENSION(state, data) {
      //关闭弹窗
      //3d，2.5d转换事件
      state.dimension = data;
      if (data == "3D") {
        // 改数据为3d数据
        state.dimensionData = {
          // 维度镜头数据
          heading: 0,
          pitch: -45,
          roll: 0,
        };
        //加载底图
        state.vecLayer = state.mviewer.imageryLayers.addImageryProvider(
          new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
            url: " http://t1.tianditu.gov.cn/vec_w/wmts?tk=9ae78c51a0a28f06444d541148496e36",
            type: "wmts",
            layer: "vec",
            style: "default",
            format: "tiles",
            tileMatrixSetID: "w",
            show: true,
            maximumLevel: 18,
          })
        );
        state.cvaLayer = state.mviewer.imageryLayers.addImageryProvider(
          new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
            url: " http://t1.tianditu.gov.cn/cva_w/wmts?tk=9ae78c51a0a28f06444d541148496e36",
            type: "wmts",
            layer: "cva",
            style: "default",
            format: "tiles",
            tileMatrixSetID: "w",
            show: true,
            maximumLevel: 18,
          })
        );
        // console.log(1321)
        state.wallLayer.show = false; //关闭瀑布   以及2.5d图形贴片
        state.mviewer.imageryLayers.remove(state.newLayer);
        state.newLayer = null;
        // state.silhouetteBlue.selected = []
        // state.tilesetLayer.changesilhouetteBlue(); //清空silhouetteBlue.selected = [];
        // console.log(state.tileset)
        state.tilesetLayer.show = true; //显示3d图形
        state.startPointFn(); //移动默认视角
        // state.mviewer.flyTo(state.tileset);
        state.areaLayer.show = false; //绿布

        //3D视角不限制
        state.mviewer.scene.screenSpaceCameraController.minimumZoomDistance = 80;
        // 最大
        state.mviewer.scene.screenSpaceCameraController.maximumZoomDistance = 4000000;
        // 设置相机缩小时的速率
        state.mviewer.scene.screenSpaceCameraController._minimumZoomRate = 10000;
        // 设置相机放大时的速率
        state.mviewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000;
        // 视角平移
        state.mviewer.scene.screenSpaceCameraController.enableRotate = true;
        // 视角缩放
        state.mviewer.scene.screenSpaceCameraController.enableZoom = true;
        // 视角旋转
        state.mviewer.scene.screenSpaceCameraController.enableTilt = true;
      } else if (data == "2.5D") {
        console.log("2.5");
        state.dimensionData = {
          // 维度镜头数据
          heading: 0,
          pitch: -90,
          roll: 0,
          // heading: global.DC.Namespace.Cesium.Math.toRadians(-9),
          // pitch: global.DC.Namespace.Cesium.Math.toRadians(-34.54),
          // roll: 0,
        };
        //取消3D底图
        // state.mviewer.imageryLayers.remove(state.vecLayer);
        // state.vecLayer = null;
        // state.mviewer.imageryLayers.remove(state.cvaLayer);
        // state.cvaLayer = null;
        //加载底图
        state.vecLayer = state.mviewer.imageryLayers.addImageryProvider(
          new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
            url: " http://t1.tianditu.gov.cn/vec_w/wmts?tk=9ae78c51a0a28f06444d541148496e36",
            type: "wmts",
            layer: "vec",
            style: "default",
            format: "tiles",
            tileMatrixSetID: "w",
            show: true,
            maximumLevel: 18,
          })
        );
        state.cvaLayer = state.mviewer.imageryLayers.addImageryProvider(
          new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
            url: " http://t1.tianditu.gov.cn/cva_w/wmts?tk=9ae78c51a0a28f06444d541148496e36",
            type: "wmts",
            layer: "cva",
            style: "default",
            format: "tiles",
            tileMatrixSetID: "w",
            show: true,
            maximumLevel: 18,
          })
        );
        state.tilesetLayer.show = false; //隐藏3d图形
        state.newLayer = state.usetowpointfive(); //添加2.5d图形贴片
        state.wallLayer.show = false; //打开瀑布
        state.startPointFn(); //移动默认视角
        state.areaLayer.show = true; //绿布
        //2.5D视角限制
        state.mviewer.scene.screenSpaceCameraController.minimumZoomDistance = state.zoomRange[0];
        // 最大
        state.mviewer.scene.screenSpaceCameraController.maximumZoomDistance = state.zoomRange[1];
        // 设置相机缩小时的速率
        state.mviewer.scene.screenSpaceCameraController._minimumZoomRate = 2000;
        // 设置相机放大时的速率
        state.mviewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000;
        // 视角平移
        state.mviewer.scene.screenSpaceCameraController.enableRotate = true;
        // 视角缩放
        state.mviewer.scene.screenSpaceCameraController.enableZoom = true;
        // 视角旋转
        state.mviewer.scene.screenSpaceCameraController.enableTilt = false;
      }
    },
    //绿布
    MSET_areaLayer(state, data) {
      state.areaLayer = data;
    },
    //切换控制
    MSET_PERSPECTIVECONTROL(state, data) {
      state.perspectiveControl = data;
      state.perspectiveControls = !state.perspectiveControls;
    },
    MSET_MODEOLS(state, data) {
      state.tilesetLayer = data.tilesetLayer;
      state.newLayer = data.newLayer;
      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,
    state: {
        ...urlParameter.state, // url参数
        mviewer: null, // 地图实体类
        mBigPopup: false, // 全屏弹窗
        popupOurOpenData: [], // 全屏弹窗中下拉菜单数据
        popupTableName: [], // 全屏弹窗标签页数据
        mBigPopupAfter: false, /// /全屏弹窗之前的弹窗
        ips: '', // 获取的ip
        iconHide: false, // 右侧伸缩状态
        // DC: '',//DC全局保存
        MobileWindowsHide: true, // 改变点击窗口的显示状态
        MobileWindowChangeData: false, // 改变点击窗口的数据
        popupsDom: '', // mobileDivForms的实体类
        query: {}, // 传输数据
        openmobileGoTo: false, // 测试
        ccDataState: false, // 测试
        openmobilePanorama: false, // 实景显影
        MobileWindowsHideFixed: true, // 改变点击窗口的显示状态--固定窗口
        MobileWindowChangeDataFixed: false, // 改变点击窗口的数据--固定窗口
        // 在每次飞行弹窗中  加入自己的点
        pointLayer: null,
        pointLayerData: {
            flag: false,
            label: '选择点',
            img: '/img/leftnav/way.png',
            normal: '/img/leftnav/way.png',
            checked: '/img/leftnav/way-checked.png',
            layer: 'pointLayer'
        },
      });
    },
    //删除路线
    removePolyline(state) {
      if (state.drawALineLayer) {
        state.drawALineLayer.remove();
        state.drawALineLayer = null;
        state.isOpenDrawALine = false;
      }
    },
    removerPolyLineIcon(state) {
      if (state.drawALineLayerIcon) {
        state.drawALineLayerIcon.remove();
        state.drawALineLayerIcon = null;
      }
    },
    removePolylineMany(state) {
      if (state.drawALineLayerMany) {
        state.drawALineLayerMany.remove();
        state.drawALineLayerMany = null;
        state.isOpenDrawALineMany = false;
      }
      if (state.drawAPointLayerMany) {
        state.drawAPointLayerMany.remove();
        state.drawAPointLayerMany = null;
        state.isOpenDrawALineMany = false;
      }
    },
    //显影线路或者点
    showLineOrPoint(state, val) {
      state[val.layer].show = val.flag;
    },
    //传送终点数据
    set_endPosition(state, data) {
      state.isendPosition = !state.isendPosition;
      state.endPosition = data;
    },
    //传送当前选择的路径
    set_choiceRouterS(state, data) {
      state.choiceRouterS = data;
    },
    //活动窗口是否显示
    set_showActivity(state, data) {
      state.showActivity = data;
      if (data.state) {
        state.showActivityData = data.value;
        state.showActivity = data.state;
      } else {
        state.showActivityData = {};
        state.showActivity = data.state;
      }
    },
    mset_changeSelect(state, data) {
      state.select.overlay = data[0];
      state.select.color = data[1];
    },
    SET_SeeAndNotSee(state, data) {
      state.seeRight = data;
    },
  },
  actions: {
    ...urlParameter.actions, //url参数
    MSET_CREADE({
      state,
      commit,
      dispatch
    }) {
      state.pointLayer = new global.DC.VectorLayer("pointLayer"); // 创建图标实体类
      state.mviewer.addLayer(state.pointLayer); // 添加到地图
    },
    setMobileWindows({
      state,
      commit,
      dispatch
    }, data) {
      // 打开随地图移动窗口
      let clas, Flys;
      const nowHeight = Math.ceil(
        state.mviewer.camera.positionCartographic.height
      );
      // 传递响应数据
      commit("MSET_QUERY", data);
      // console.log(data);
      if (state.dimension == "3D") {
        Flys = [
          +data.lntLat[0] + 0.01197,
          // +data.lntLat[1] - 0.0001,
          +data.lntLat[1] - 0.0027,
          330,
        ];
        clas = [
          data.from == "PopupOurOnce" ? +data.lntLat[0] : +data.lntLat[0],
          // data.from == 'PopupOurOnce' ? +data.lntLat[1] - 0.00108 : +data.lntLat[1],
          data.from == "PopupOurOnce" ?
          +data.lntLat[1] - 0.00108 :
          +data.lntLat[1] - 0.00048,
          data.from == "PopupOurOnce" ? 0 : 30.648862227,
        ];
      } else if (state.dimension == "2.5D") {
        Flys = [
          +data.lntLat[0] + 0.01197,
          +data.lntLat[1] + 0.00048,
          // +data.lntLat[1] - 0.0022,
          // nowHeight,
          state.frislayertHeight,
        ];
        // console.log(nowHeight);
        clas = [
          data.from == "PopupOurOnce" ? +data.lntLat[0] : +data.lntLat[0],
          data.from == "PopupOurOnce" ? +data.lntLat[1] : +data.lntLat[1],
          // data.from == 'PopupOurOnce' ? +data.lntLat[1] - 0.00108 : +data.lntLat[1] - 0.00048,
          // data.from == 'PopupOurOnce' ? 0 : 90.648862227
          data.from == "PopupOurOnce" ? 0 : 0,
        ];
      }
        // 默认起始点函数
        startPointFn: '',
        dimension: '2.5D', // 维度
        dimensionData: {
            // 维度镜头数据
            heading: 0,
            pitch: -90,
            roll: 0
        },
        zoomRange: [80, 200], // 缩放程度
        frislayertHeight: 160, // 默认弹窗高度
        perspectiveControl: '', // 视角控制：高度、角度  ()=>{}
        perspectiveControls: '', // 视角控制：高度、角度  ()=>{}

      if (data.useJWD) {
        var ellipsoid = state.mviewer.scene.globe.ellipsoid;
        var cartographic = global.DC.Namespace.Cesium.Cartographic.fromDegrees(
          // data.lntLat[0],
          // data.lntLat[1] - 0.00048,//数值增大是下
          // "90.648862227"
          // clnt, clat, calt
          ...clas
        );
        data.position = ellipsoid.cartographicToCartesian(cartographic);
      }
        tilesetLayer: null, // 3d模型
        tileset: null, // 3d模型
        tilesetLayer: null, // 2.5d模型
        usetowpointfive: null,
        tilesetLayer: null, // 瀑布流
        areaLayer: null, // 2.5d事件--绿色图层
        select: {
            // 绿色图层控制显示
            overlay: undefined,
            color: undefined
        },

      // 定制化窗体
      const popupsDom = new global.DC.mobileDivForms(state.mviewer, {
        domId: "mobilePopup",
        title: data.query.name || "成教楼  ",
        className: "mobilePopup",
        content: document.getElementById("mobile-map_content_content"),
        position: [data.position],
      });
      // commit("MSET_MOBILEWINDOWSHIDE", false)//显示弹窗
      // dispatch("CHANGETOC3", { // 转换坐标
      //     lnt: data.lntLat[0],
      //     lat: data.lntLat[1]
      // }).then(res => {
      // console.log(res)
        vecLayer: null, // 3D底图
        cvaLayer: null, // 3D底图

      // 基于高度基础设置
      // h：1530
      // lnt： + 0.01187 x轴 大是向左
      // Lat: - 0.0108 y轴 减是上
      // h：4000
      // lnt： + 0.01187 x轴
      // Lat: - 0.0308 y轴
      // h：330
      // lnt： + 0.01197 x轴
      // Lat: - 0.0021 y轴
      // console.log(data.query.from, 78)
      // let Flys = [
      //     data.query.from == "地图点击" ? +data.lntLat[0] + 0.01197 : +data.lntLat[0] + 0.01197,
      //     data.query.from == "地图点击" ? +data.lntLat[1] - 0.0021 : +data.lntLat[1] - 0.0021,
      //     data.query.from == "地图点击" ? 330 : 330,
      // ]
        audioData: null, // 语音
        audioState: false, // 语音状态

      const Position = new global.DC.Position( // 转坐标
        // +data.lntLat[0] + 0.01197,
        // +data.lntLat[1] - 0.0021,
        // 330,
        ...Flys,
        0,
        state.dimensionData.pitch
      );
      if (!state.MobileWindowsHide) {
        //关闭弹窗
        commit("MSET_MOBILEWINDOWSHIDE", true);
      }
      if (
        state.select.overlay != undefined &&
        data.query.fromTo != "mapClick"
      ) {
        //关闭绿色边框
        state.select.overlay.setStyle({
          material: state.select.color,
          outline: false,
        });
        commit("mset_changeSelect", [undefined, undefined]);
      }
      // console.log(state.dimension);
      if (state.dimension != "2.5D") {
        // if (true) {
        // if (true) {
        dispatch("mapFlyTo", {
          //飞入
          lntLat: [Position.lng, Position.lat, Position.alt],
          heading: Position.heading,
          pitch: Position.pitch,
          roll: Position.roll,
        });
      } else {
        dispatch("mapFlyTo", {
          //飞入
          lntLat: [Position.lng, +Position.lat - 0.0003, Position.alt],
          heading: Position.heading,
          pitch: Position.pitch,
          roll: Position.roll,
        });
        // state.mviewer.camera.setView({
        //   // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
        //   // fromDegrees()方法，将经纬度和高程转换为世界坐标
        //   destination: new global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
        //     // 114.0351,
        //     // 27.6314,
        //     // 200.0
        //     Position.lng - 0.012,
        //     Position.lat - 0.0003,
        //     Position.alt || 15000.0
        //   ),
        //   orientation: {
        //     heading: global.DC.Namespace.Cesium.Math.toRadians(
        //       Position.heading
        //     ),
        //     pitch: global.DC.Namespace.Cesium.Math.toRadians(Position.pitch),
        //     // heading: data.heading,
        //     // pitch: data.pitch,
        //     roll: Position.roll,
        //   },
        // });
        // commit("MSET_MOBILEWINDOWSHIDE", false); // 显示弹窗
      }
      // })
      commit("MSET_POPUPDOM", popupsDom);
        navigationStartLngLat: '', // 导航起点
        navigationEndLngLat: '', // 导航终点
        drawALineLayer: null, // 导航路径图层
        drawALineLayerIcon: null, // 导航路径图层图标
        isOpenDrawALine: false, // 是否开启路径
        endPosition: '', // 传送终点经纬度--
        isendPosition: false, // 传送终点经纬度--感应数据
        routerS: [], // 所有路径
        choiceRouterS: 0, // 当前选择路径

        showActivity: false, // 是否显示活动弹窗
        showActivityData: {}, // 活动内容

        drawALineLayerMany: null, // 活动路线图层
        drawAPointLayerMany: null, // 活动点图层
        isOpenDrawALineMany: null, // 是否开启活动
        seeRight: true // 右侧控制栏显影
    },
    closeMobileWindowsDom({
      state,
      commit,
      dispatch
    }) {
      commit("CLOSE_NOWPOSITION"); //中断定位获取
      if (!state.MobileWindowsHide && state.popupsDom) {
        state.popupsDom.closeOur();
        commit("MSET_MOBILEWINDOWSHIDE", true);
        if (state.audioData) {
          dispatch("MSET_GETAUDIOBEGIN", "notOpen");
    mutations: {
        ...urlParameter.mutations, // url参数
        MSET_VIEWER (state, viewer) {
            state.mviewer = viewer
        },
        MSET_BIGPOPUP (state, viewer) {
            state.mBigPopup = viewer
            $store.dispatch('closeMobileWindowsDom') // 关闭弹窗
        },
        MSET_BIGPOPUPAFTER (state, viewer) {
            state.mBigPopupAfter = viewer
            $store.dispatch('closeMobileWindowsDom') // 关闭弹窗
        },
        MSET_POPUPOUROPENDATA (state, viewer) {
            state.popupOurOpenData = viewer
        },
        MSET_ICONHIDE (state, viewer) {
            state.iconHide = viewer
        },
        MSET_POPUPTABLENAME (state, viewer) {
            state.popupTableName = viewer
        },
        MSET_MOBILEWINDOWSHIDE (state, viewer) {
            // 随地图移动窗口
            state.MobileWindowChangeData = !state.MobileWindowChangeData
            state.MobileWindowsHide = viewer
        },
        MSETCC_SETCC (state, viewer) {
            state.ccDataState = !state.ccDataState // 专门测试
            state.query = viewer
        },
        MSET_POPUPDOM (state, viewer) {
            state.popupsDom = viewer
        },
        MSET_QUERY (state, viewer) {
            state.query = viewer
        },
        MSET_OPENMOBILEGOTO (state, viewer) {
            state.openmobileGoTo = viewer
        },
        MSET_OPENMOBILEPANORAMA (state, viewer) {
            state.openmobilePanorama = viewer
        },
        MSET_MOBILEWINDOWSHIDEFIXED (state, viewer) {
            // 固定窗口
            state.MobileWindowChangeDataFixed = !state.MobileWindowChangeDataFixed
            state.MobileWindowsHideFixed = viewer
        },
        // 默认位置
        MSET_MORENWEIZHI (state, data) {
            state.startPointFn = data
        },
        // // 开关飞入点图标
        // MSET_OPENPOINTEL(state, val) {
        //     if (val) {
        //         state.pointLayerData.img = state.pointLayerData.checked
        //         state[state.pointLayerData.layer].show = true
        //     } else {
        //         state.pointLayerData.img = state.pointLayerData.normal
        //         state[state.pointLayerData.layer].show = false
        //     }
        // },
        // 送入移动端缩放范围
        set_zoomRange (state, data) {
            state.zoomRange = data
        },
        // 送入默认弹窗高度
        set_frislayertHeight (state, data) {
            state.frislayertHeight = data
        },
        // 切换2D和2.5D
        MSET_DIMENSION (state, data) {
            // 关闭弹窗
            // 3d，2.5d转换事件
            state.dimension = data
            if (data == '3D') {
                // 改数据为3d数据
                state.dimensionData = {
                    // 维度镜头数据
                    heading: 0,
                    pitch: -45,
                    roll: 0
                }
                // 加载底图
                state.vecLayer = state.mviewer.imageryLayers.addImageryProvider(
                    new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                        url: ' http://t1.tianditu.gov.cn/vec_w/wmts?tk=9ae78c51a0a28f06444d541148496e36',
                        type: 'wmts',
                        layer: 'vec',
                        style: 'default',
                        format: 'tiles',
                        tileMatrixSetID: 'w',
                        show: true,
                        maximumLevel: 18
                    })
                )
                state.cvaLayer = state.mviewer.imageryLayers.addImageryProvider(
                    new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                        url: ' http://t1.tianditu.gov.cn/cva_w/wmts?tk=9ae78c51a0a28f06444d541148496e36',
                        type: 'wmts',
                        layer: 'cva',
                        style: 'default',
                        format: 'tiles',
                        tileMatrixSetID: 'w',
                        show: true,
                        maximumLevel: 18
                    })
                )
                // console.log(1321)
                state.wallLayer.show = false // 关闭瀑布   以及2.5d图形贴片
                state.mviewer.imageryLayers.remove(state.newLayer)
                state.newLayer = null
                // state.silhouetteBlue.selected = []
                // state.tilesetLayer.changesilhouetteBlue(); //清空silhouetteBlue.selected = [];
                // console.log(state.tileset)
                state.tilesetLayer.show = true // 显示3d图形
                state.startPointFn() // 移动默认视角
                // state.mviewer.flyTo(state.tileset);
                state.areaLayer.show = false // 绿布

                // 3D视角不限制
                state.mviewer.scene.screenSpaceCameraController.minimumZoomDistance = 80
                // 最大
                state.mviewer.scene.screenSpaceCameraController.maximumZoomDistance = 4000000
                // 设置相机缩小时的速率
                state.mviewer.scene.screenSpaceCameraController._minimumZoomRate = 10000
                // 设置相机放大时的速率
                state.mviewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000
                // 视角平移
                state.mviewer.scene.screenSpaceCameraController.enableRotate = true
                // 视角缩放
                state.mviewer.scene.screenSpaceCameraController.enableZoom = true
                // 视角旋转
                state.mviewer.scene.screenSpaceCameraController.enableTilt = true
            } else if (data == '2.5D') {
                state.dimensionData = {
                    // 维度镜头数据
                    heading: 0,
                    pitch: -90,
                    roll: 0
                    // heading: global.DC.Namespace.Cesium.Math.toRadians(-9),
                    // pitch: global.DC.Namespace.Cesium.Math.toRadians(-34.54),
                    // roll: 0,
                }
                // 取消3D底图
                // state.mviewer.imageryLayers.remove(state.vecLayer);
                // state.vecLayer = null;
                // state.mviewer.imageryLayers.remove(state.cvaLayer);
                // state.cvaLayer = null;
                // 加载底图
                state.vecLayer = state.mviewer.imageryLayers.addImageryProvider(
                    new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                        url: ' http://t1.tianditu.gov.cn/vec_w/wmts?tk=9ae78c51a0a28f06444d541148496e36',
                        type: 'wmts',
                        layer: 'vec',
                        style: 'default',
                        format: 'tiles',
                        tileMatrixSetID: 'w',
                        show: true,
                        maximumLevel: 18
                    })
                )
                state.cvaLayer = state.mviewer.imageryLayers.addImageryProvider(
                    new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                        url: ' http://t1.tianditu.gov.cn/cva_w/wmts?tk=9ae78c51a0a28f06444d541148496e36',
                        type: 'wmts',
                        layer: 'cva',
                        style: 'default',
                        format: 'tiles',
                        tileMatrixSetID: 'w',
                        show: true,
                        maximumLevel: 18
                    })
                )
                state.tilesetLayer.show = false // 隐藏3d图形
                state.newLayer = state.usetowpointfive() // 添加2.5d图形贴片
                state.wallLayer.show = false // 打开瀑布
                state.startPointFn() // 移动默认视角
                state.areaLayer.show = true // 绿布
                // 2.5D视角限制
                state.mviewer.scene.screenSpaceCameraController.minimumZoomDistance = state.zoomRange[0]
                // 最大
                state.mviewer.scene.screenSpaceCameraController.maximumZoomDistance = state.zoomRange[1]
                // 设置相机缩小时的速率
                state.mviewer.scene.screenSpaceCameraController._minimumZoomRate = 2000
                // 设置相机放大时的速率
                state.mviewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000
                // 视角平移
                state.mviewer.scene.screenSpaceCameraController.enableRotate = true
                // 视角缩放
                state.mviewer.scene.screenSpaceCameraController.enableZoom = true
                // 视角旋转
                state.mviewer.scene.screenSpaceCameraController.enableTilt = false
            }
        },
        // 绿布
        MSET_areaLayer (state, data) {
            state.areaLayer = data
        },
        // 切换控制
        MSET_PERSPECTIVECONTROL (state, data) {
            state.perspectiveControl = data
            state.perspectiveControls = !state.perspectiveControls
        },
        MSET_MODEOLS (state, data) {
            state.tilesetLayer = data.tilesetLayer
            state.newLayer = data.newLayer
            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
            }
        },
        removerPolyLineIcon (state) {
            if (state.drawALineLayerIcon) {
                state.drawALineLayerIcon.remove()
                state.drawALineLayerIcon = null
            }
        },
        removePolylineMany (state) {
            if (state.drawALineLayerMany) {
                state.drawALineLayerMany.remove()
                state.drawALineLayerMany = null
                state.isOpenDrawALineMany = false
            }
            if (state.drawAPointLayerMany) {
                state.drawAPointLayerMany.remove()
                state.drawAPointLayerMany = null
                state.isOpenDrawALineMany = false
            }
        },
        // 显影线路或者点
        showLineOrPoint (state, val) {
            state[val.layer].show = val.flag
        },
        // 传送终点数据
        set_endPosition (state, data) {
            state.isendPosition = !state.isendPosition
            state.endPosition = data
        },
        // 传送当前选择的路径
        set_choiceRouterS (state, data) {
            state.choiceRouterS = data
        },
        // 活动窗口是否显示
        set_showActivity (state, data) {
            state.showActivity = data
            if (data.state) {
                state.showActivityData = data.value
                state.showActivity = data.state
            } else {
                state.showActivityData = {}
                state.showActivity = data.state
            }
        },
        mset_changeSelect (state, data) {
            state.select.overlay = data[0]
            state.select.color = data[1]
        },
        SET_SeeAndNotSee (state, data) {
            state.seeRight = data
        }
      } //cancel
    },
    CHANGETOC3({
      state,
      commit
    }, data) {
      // //转换经纬度坐标 成世界坐标cartesian3
      var ellipsoid = state.mviewer.scene.globe.ellipsoid;
      var cartographic = global.DC.Namespace.Cesium.Cartographic.fromDegrees(
        data.lnt,
        data.lat - 0.00006,
        data.alt || "90.648862227"
      );
      var position = ellipsoid.cartographicToCartesian(cartographic);
      return position;
    },
    SET_OPENWIDOWFIXED({
      state,
      commit
    }, data) {
      // 传递响应数据
      commit("MSET_QUERY", data);
      // 显示窗口
      commit("MSET_MOBILEWINDOWSHIDEFIXED", false);
      // 移动地图位置
      state.mviewer.zoomToPosition(
        new global.DC.Position(
          data.lntLat[0],
          data.lntLat[1] - 0.012,
          1530,
          0,
          -45
        )
      );
    },
    CLOSE_WIDOWFIXED({
      state,
      commit
    }) {
      // 隐藏窗口
      if (!state.MobileWindowsHideFixed) {
        console.log(state.MobileWindowsHideFixed);
        commit("MSET_MOBILEWINDOWSHIDEFIXED", true);
      }
    },
    // 加入当时的选点
    JOIN_POINT({
      state,
      commit
    }, data) {},
    // flyTo
    mapFlyTo({
      state,
      commit,
      dispatch
    }, data) {
      state.mviewer.camera.flyTo({
        destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
          data.lntLat[0] - 0.012,
          data.lntLat[1],
          data.lntLat[2] || 15000.0
        ),
        // destination: data.res,
        orientation: {
          heading: global.DC.Namespace.Cesium.Math.toRadians(data.heading),
          pitch: global.DC.Namespace.Cesium.Math.toRadians(data.pitch),
          // heading: data.heading,
          // pitch: data.pitch,
          roll: data.roll,
    actions: {
        ...urlParameter.actions, // url参数
        MSET_CREADE ({
            state,
            commit,
            dispatch
        }) {
            state.pointLayer = new global.DC.VectorLayer('pointLayer') // 创建图标实体类
            state.mviewer.addLayer(state.pointLayer) // 添加到地图
        },
        duration: 1, // 定位的时间间隔
        complete: () => {
          // 完成后的回调
          if (data.fn) {
            // 自定义回调
            setTimeout(() => {
              data.fn();
            }, 200);
          }
          if (!data.noOpen) {
            setTimeout(() => {
              // dispatch("MSET_POINTDATA", data.lntLat);//传入标记点
              !state.MobileWindowsHide ||
                commit("MSET_MOBILEWINDOWSHIDE", false); // 显示弹窗
            }, 100);
          }
        setMobileWindows ({
            state,
            commit,
            dispatch
        }, data) {
            // 打开随地图移动窗口
            let clas, Flys
            const nowHeight = Math.ceil(
                state.mviewer.camera.positionCartographic.height
            )
            // 传递响应数据
            commit('MSET_QUERY', data)
            // console.log(data);
            if (state.dimension == '3D') {
                Flys = [
                    +data.lntLat[0] + 0.01197,
                    // +data.lntLat[1] - 0.0001,
                    +data.lntLat[1] - 0.0027,
                    330
                ]
                clas = [
                    data.from == 'PopupOurOnce' ? +data.lntLat[0] : +data.lntLat[0],
                    // data.from == 'PopupOurOnce' ? +data.lntLat[1] - 0.00108 : +data.lntLat[1],
                    data.from == 'PopupOurOnce'
                        ? +data.lntLat[1] - 0.00108
                        : +data.lntLat[1] - 0.00048,
                    data.from == 'PopupOurOnce' ? 0 : 30.648862227
                ]
            } else if (state.dimension == '2.5D') {
                Flys = [
                    +data.lntLat[0] + 0.01197,
                    +data.lntLat[1] + 0.00048,
                    // +data.lntLat[1] - 0.0022,
                    // nowHeight,
                    state.frislayertHeight
                ]
                // console.log(nowHeight);
                clas = [
                    data.from == 'PopupOurOnce' ? +data.lntLat[0] : +data.lntLat[0],
                    data.from == 'PopupOurOnce' ? +data.lntLat[1] : +data.lntLat[1],
                    // data.from == 'PopupOurOnce' ? +data.lntLat[1] - 0.00108 : +data.lntLat[1] - 0.00048,
                    // data.from == 'PopupOurOnce' ? 0 : 90.648862227
                    data.from == 'PopupOurOnce' ? 0 : 0
                ]
            }

            if (data.useJWD) {
                var ellipsoid = state.mviewer.scene.globe.ellipsoid
                var cartographic = global.DC.Namespace.Cesium.Cartographic.fromDegrees(
                    // data.lntLat[0],
                    // data.lntLat[1] - 0.00048,//数值增大是下
                    // "90.648862227"
                    // clnt, clat, calt
                    ...clas
                )
                data.position = ellipsoid.cartographicToCartesian(cartographic)
            }

            // 定制化窗体
            const popupsDom = new global.DC.mobileDivForms(state.mviewer, {
                domId: 'mobilePopup',
                title: data.query.name || '成教楼  ',
                className: 'mobilePopup',
                content: document.getElementById('mobile-map_content_content'),
                position: [data.position]
            })
            // commit("MSET_MOBILEWINDOWSHIDE", false)//显示弹窗
            // dispatch("CHANGETOC3", { // 转换坐标
            //     lnt: data.lntLat[0],
            //     lat: data.lntLat[1]
            // }).then(res => {
            // console.log(res)

            // 基于高度基础设置
            // h：1530
            // lnt： + 0.01187 x轴 大是向左
            // Lat: - 0.0108 y轴 减是上
            // h：4000
            // lnt： + 0.01187 x轴
            // Lat: - 0.0308 y轴
            // h：330
            // lnt： + 0.01197 x轴
            // Lat: - 0.0021 y轴
            // console.log(data.query.from, 78)
            // let Flys = [
            //     data.query.from == "地图点击" ? +data.lntLat[0] + 0.01197 : +data.lntLat[0] + 0.01197,
            //     data.query.from == "地图点击" ? +data.lntLat[1] - 0.0021 : +data.lntLat[1] - 0.0021,
            //     data.query.from == "地图点击" ? 330 : 330,
            // ]

            const Position = new global.DC.Position( // 转坐标
                // +data.lntLat[0] + 0.01197,
                // +data.lntLat[1] - 0.0021,
                // 330,
                ...Flys,
                0,
                state.dimensionData.pitch
            )
            if (!state.MobileWindowsHide) {
                // 关闭弹窗
                commit('MSET_MOBILEWINDOWSHIDE', true)
            }
            if (
                state.select.overlay != undefined &&
                data.query.fromTo != 'mapClick'
            ) {
                // 关闭绿色边框
                state.select.overlay.setStyle({
                    material: state.select.color,
                    outline: false
                })
                commit('mset_changeSelect', [undefined, undefined])
            }
            // console.log(state.dimension);
            if (state.dimension != '2.5D') {
                // if (true) {
                // if (true) {
                dispatch('mapFlyTo', {
                    // 飞入
                    lntLat: [Position.lng, Position.lat, Position.alt],
                    heading: Position.heading,
                    pitch: Position.pitch,
                    roll: Position.roll
                })
            } else {
                dispatch('mapFlyTo', {
                    // 飞入
                    lntLat: [Position.lng, +Position.lat - 0.0003, Position.alt],
                    heading: Position.heading,
                    pitch: Position.pitch,
                    roll: Position.roll
                })
                // state.mviewer.camera.setView({
                //   // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                //   // fromDegrees()方法，将经纬度和高程转换为世界坐标
                //   destination: new global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                //     // 114.0351,
                //     // 27.6314,
                //     // 200.0
                //     Position.lng - 0.012,
                //     Position.lat - 0.0003,
                //     Position.alt || 15000.0
                //   ),
                //   orientation: {
                //     heading: global.DC.Namespace.Cesium.Math.toRadians(
                //       Position.heading
                //     ),
                //     pitch: global.DC.Namespace.Cesium.Math.toRadians(Position.pitch),
                //     // heading: data.heading,
                //     // pitch: data.pitch,
                //     roll: Position.roll,
                //   },
                // });
                // commit("MSET_MOBILEWINDOWSHIDE", false); // 显示弹窗
            }
            // })
            commit('MSET_POPUPDOM', popupsDom)
        },
      });
      // 官网flyto使用方法
      // 1. Fly to a position with a top-down view
      // viewer.camera.flyTo({
      //     destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
      // });

      // // 2. Fly to a Rectangle with a top-down view
      // viewer.camera.flyTo({
      //     destination : Cesium.Rectangle.fromDegrees(west, south, east, north)
      // });

      // // 3. Fly to a position with an orientation using unit vectors.
      // viewer.camera.flyTo({
      //     destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
      //     orientation : {
      //         direction : new Cesium.Cartesian3(-0.04231243104240401, -0.20123236049443421, -0.97862924300734),
      //         up : new Cesium.Cartesian3(-0.47934589305293746, -0.8553216253114552, 0.1966022179118339)
      //     }
      // });

      // // 4. Fly to a position with an orientation using heading, pitch and roll.
      // viewer.camera.flyTo({
      //     destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
      //     orientation : {
      //         heading : Cesium.Math.toRadians(175.0),
      //         pitch : Cesium.Math.toRadians(-35.0),
      //         roll : 0.0
      //     }
      // });
    },
    // 飞入点加入位置
    MSET_POINTDATA({
      state,
      commit,
      dispatch
    }, data) {
      // 加入坐标
      const positions = new global.DC.Position(
        data[0] - 0.0119,
        data[1] + 0.0111,
        0
      );
      const billboard = new global.DC.Billboard(
        positions,
        "/img/leftnav/map-panorama.png"
      );
      billboard.size = [16, 16];
      // 订阅事件3
      billboard.on(DC.MouseEventType.CLICK, (e) => {
        // 定制化窗体
        console.log(e);
        const query = {
          name: "选择点"
        };
        const intLat = [e.wgs84Position.lng, e.wgs84Position.lat];
        const d = {
          position: null,
          lntLat: intLat,
          query: {
            ...(query || {}),
            introduce: null,
            address: intLat
          },
          useJWD: true, // 仅使用经纬度
        };
        dispatch("setMobileWindows", d);
      });
      state.pointLayer.addOverlay(billboard); // 实景
      // commit("MSET_OPENPOINTEL", true);
    },
    MSET_LOCKPERSPECTIVEL({
      state,
      commit,
      dispatch
    }, val) {
      // 锁定
      state.mviewer.camera.lookAtTransform(
        global.DC.Namespace.Cesium.Matrix4.IDENTITY
      );
      // console.log(global.DC.Namespace.Cesium.Matrix4.IDENTITY)
    },
    MSET_DIMENSIONS({
      state,
      commit,
      dispatch
    }, val) {
      //关闭弹窗
      dispatch("closeMobileWindowsDom");
      //3d，2.5d转换事件
      commit("MSET_DIMENSION", val);
      //控制高度
      const height = Math.ceil(
        state.mviewer.camera.positionCartographic.height
      );
      state.mviewer.camera.setView({
        destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians(
          state.mviewer.camera.positionCartographic.longitude,
          state.mviewer.camera.positionCartographic.latitude,
          height
        ),
        orientation: {
          heading: global.DC.Namespace.Cesium.Math.toRadians(
            state.dimensionData.heading
          ), // 方向
          pitch: global.DC.Namespace.Cesium.Math.toRadians(
            state.dimensionData.pitch
          ), // 倾斜角度
          roll: state.dimensionData.roll,
        closeMobileWindowsDom ({
            state,
            commit,
            dispatch
        }) {
            commit('CLOSE_NOWPOSITION') // 中断定位获取
            if (!state.MobileWindowsHide && state.popupsDom) {
                state.popupsDom.closeOur()
                commit('MSET_MOBILEWINDOWSHIDE', true)
                if (state.audioData) {
                    dispatch('MSET_GETAUDIOBEGIN', 'notOpen')
                }
            } // cancel
        },
      });
    },
    MSET_GOTOCC({
      state,
      commit,
      dispatch
    }, val) {
      //测试移动位置
      // commit("MSET_DIMENSION", val);
      //控制高度
      // const height = Math.ceil(state.mviewer.camera.positionCartographic.height);
      state.mviewer.camera.setView({
        destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians(
          state.mviewer.camera.positionCartographic.longitude,
          state.mviewer.camera.positionCartographic.latitude,
          val.height
        ),
        orientation: {
          heading: global.DC.Namespace.Cesium.Math.toRadians(val.heading), // 方向
          pitch: global.DC.Namespace.Cesium.Math.toRadians(val.pitch), // 倾斜角度
          roll: val.roll,
        CHANGETOC3 ({
            state,
            commit
        }, data) {
            // //转换经纬度坐标 成世界坐标cartesian3
            var ellipsoid = state.mviewer.scene.globe.ellipsoid
            var cartographic = global.DC.Namespace.Cesium.Cartographic.fromDegrees(
                data.lnt,
                data.lat - 0.00006,
                data.alt || '90.648862227'
            )
            var position = ellipsoid.cartographicToCartesian(cartographic)
            return position
        },
      });
    },
    //文字转语音控制↓
    MSET_GETAUDIO({
      state,
      commit,
      dispatch
    }, val) {
      state.audioData = new window.SpeechSynthesisUtterance();
      state.audioData.text = val;
      state.audioData.onstart = function (e) {
        state.audioState = true;
      };
      state.audioData.onend = function (event) {
        state.audioState = false;
      };
    },
    MSET_GETAUDIOBEGIN({
      state,
      commit,
      dispatch
    }, val) {
      if (state.audioState) {
        window.speechSynthesis.cancel();
        state.audioState = false;
      } else {
        if (val != "notOpen") {
          window.speechSynthesis.speak(state.audioData);
        }
      }
    },
    //文字转语音控制↑
    //导航系统↓
    MSET_GOTOWHERE({
      state,
      commit,
      dispatch
    }, val) {
      state.routerS = []; //清空存着的路径
      //单条步行
      //本地图使用的是WGS84坐标，而高德使用的是火星坐标GCJ02，所以需要转换参数过去
      // 返回值需要转换为WGS84坐标
      state.navigationStartLngLat = [+val.start[0], +val.start[1]]; //导航起点
      state.navigationEndLngLat = [+val.end[0], +val.end[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

      let url = "https://restapi.amap.com/v3/direction/walking"; //默认api步行
      let data = {
        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",
      };
      let strategyType = [0];
      if (val.type) {
        //切换驾车模式
        url = "https://restapi.amap.com/v3/direction/driving";
        data["strategy"] = 10;
        strategyType = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
      }
      // for (let index = 0; index < strategyType.length; index++) {
      // data["strategy"] = strategyType[index];
      axios
        .get(url, {
          params: {
            ...data
          },
        })
        .then((res) => {
          //回调
          const paths = res.data.route.paths;
          for (let i = 0; i < paths.length; i++) {
            //多条路线
            drawALine(paths[i]);
          }
          // const paths = res.data.route.paths[0].steps;
          // drawALine(paths, res.data.route.paths[0].strategy);
        });
      // }
      let drawALine = (pathsour) => {
        let paths = pathsour.steps;
        let titles = pathsour.strategy;
        //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(","); //加入终点
        if (val.fn) {
          let dataS = {
            //返回数据
            titles: titles,
            Str: Str,
          };
          // console.log(Str);
          state.routerS.push(dataS);
          return val.fn(dataS);
        } else {
          dispatch("MSET_DRAWALINELAYER", Str); //绘画线路
        }
      };
    },
    //导航系统↑
    //绘画线路
    MSET_DRAWALINELAYER({
      state,
      commit,
      dispatch
    }, value) {
      let Str = value[0];
      //检查是否存在路线
      commit("removePolyline");
      commit("removePolylineMany");
      let color =
        global.DC.Namespace.Cesium.Color.fromCssColorString("#409EFF");
      let material = new global.DC.PolylineTrailMaterialProperty({
        color: color,
        speed: 10,
      });
      state.drawALineLayer = new global.DC.VectorLayer("lineLayer");
      state.mviewer.addLayer(state.drawALineLayer);

      //如果是添加  给第一个点加入图标 和事件
      if (value[1]) {
        commit("removerPolyLineIcon");
        state.drawALineLayerIcon = new global.DC.VectorLayer("pointLayer");
        state.mviewer.addLayer(state.drawALineLayerIcon);
        let useStr = Str.split(";");
        let post = useStr[useStr.length - 1].split(",");
        let position = new global.DC.Position(post[0], post[1]);
        let billboard = new global.DC.Billboard(
          position,
          "img/dingwei/dingwei1.png"
        ); //加入绘画点
        billboard.setStyle({
          pixelOffset: {
            x: 0,
            y: -17
          }, //偏移像素
        });
        //订阅事件
        billboard.on(global.DC.MouseEventType.CLICK, (e) => {
          // console.log(e);
          // return;
          // 定制化窗体
          let position = e.position,
            lntLat = [e.overlay._position._lng, e.overlay._position._lat];
          let windowData = {
            position,
            lntLat,
            query: {
              ...(value[1] || {}),
              position,
              lntLat,
              notAddGoOn: "notAddGoOn",
            },
            useJWD: true, //仅使用经纬度
          };
          dispatch("setMobileWindows", windowData);
        });
        state.drawALineLayerIcon.addOverlay(billboard);
      }
      let polyline = new global.DC.Polyline(Str); //加入线
      polyline.setStyle({
        width: 3,
        material: material,
        clampToGround: true,
      });
      state.drawALineLayer.addOverlay(polyline);

      state.isOpenDrawALine = true;
      // commit("cameraSetView", state.navigationStartLngLat); //移动
    },
    //绘画线路活动多条
    MSET_DRAWALINELAYERMANY({
      state,
      commit,
      dispatch
    }, value) {
      //检查是否存在路线
      commit("removePolylineMany");
      commit("removePolyline");
      commit("removerPolyLineIcon");
      let Strs = value[0];
      let red = global.DC.Namespace.Cesium.Color.fromCssColorString("#FF0000");
      let white = global.DC.Namespace.Cesium.Color.fromCssColorString("#fff");
      let blue = global.DC.Namespace.Cesium.Color.fromCssColorString("#2196F3");
      let material = new global.DC.PolylineTrailMaterialProperty({
        color: red,
        speed: 10,
      });
      let material1 = new global.DC.PolylineImageTrailMaterialProperty({
        color: red,
        speed: 60,
        image: "img/icon/right.png",
        repeat: {
          x: 320,
          y: 1
        SET_OPENWIDOWFIXED ({
            state,
            commit
        }, data) {
            // 传递响应数据
            commit('MSET_QUERY', data)
            // 显示窗口
            commit('MSET_MOBILEWINDOWSHIDEFIXED', false)
            // 移动地图位置
            state.mviewer.zoomToPosition(
                new global.DC.Position(
                    data.lntLat[0],
                    data.lntLat[1] - 0.012,
                    1530,
                    0,
                    -45
                )
            )
        },
      });
      let drawALineLayerMany = new global.DC.VectorLayer("manyLinePointLayer");
      state.mviewer.addLayer(drawALineLayerMany);
      let drawAPointLayerMany = new global.DC.HtmlLayer("manyPointPointLayer");
      state.mviewer.addLayer(drawAPointLayerMany);
      //多条线
      for (let k in Strs) {
        let polyline = new global.DC.Polyline(Strs[k].value); //加入绘画点
        polyline.setStyle({
          width: 6,
          material: material1,
          clampToGround: true,
        });
        drawALineLayerMany.addOverlay(polyline);
        // let post = Strs[k].value.split(";")[0].split(",");
        // let position = new global.DC.Position(post[0], post[1]);
        // let Label = new global.DC.Label(position, Strs[k].name);
        // Label.setStyle({
        //   font: "16px sans-serif", // CSS 字体设置
        //   scale: 1, //比例
        //   fillColor: white, //文字颜色
        //   showBackground: true, //是否显示背景
        //   backgroundColor: blue, //背景颜色
        //   // outlineColor: white, //边框颜色
        //   // outlineWidth: 10, //边框大小，
        // });
        // drawALineLayerMany.addOverlay(Label);
      }
      //多个点
      let point = value[1];
      for (let k in point) {
        let post = point[k].value;
        let position = new global.DC.Position(post[0], post[1]);
        CLOSE_WIDOWFIXED ({
            state,
            commit
        }) {
            // 隐藏窗口
            if (!state.MobileWindowsHideFixed) {
                commit('MSET_MOBILEWINDOWSHIDEFIXED', true)
            }
        },
        // 加入当时的选点
        JOIN_POINT ({
            state,
            commit
        }, data) { },
        // flyTo
        mapFlyTo ({
            state,
            commit,
            dispatch
        }, data) {
            state.mviewer.camera.flyTo({
                destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                    data.lntLat[0] - 0.012,
                    data.lntLat[1],
                    data.lntLat[2] || 15000.0
                ),
                // destination: data.res,
                orientation: {
                    heading: global.DC.Namespace.Cesium.Math.toRadians(data.heading),
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(data.pitch),
                    // heading: data.heading,
                    // pitch: data.pitch,
                    roll: data.roll
                },
                duration: 1, // 定位的时间间隔
                complete: () => {
                    // 完成后的回调
                    if (data.fn) {
                        // 自定义回调
                        setTimeout(() => {
                            data.fn()
                        }, 200)
                    }
                    if (!data.noOpen) {
                        setTimeout(() => {
                            // dispatch("MSET_POINTDATA", data.lntLat);//传入标记点
                            !state.MobileWindowsHide ||
                                commit('MSET_MOBILEWINDOWSHIDE', false) // 显示弹窗
                        }, 100)
                    }
                }
            })
            // 官网flyto使用方法
            // 1. Fly to a position with a top-down view
            // viewer.camera.flyTo({
            //     destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
            // });

        // let billboard = new global.DC.Billboard(
        //   position,
        //   // "img/dingwei/dingwei1.png"
        //   "img/icon/activity.png"
        // ); //加入绘画点
        // billboard.setStyle({
        //   pixelOffset: { x: 0, y: -17 }, //偏移像素
        // });
        // //订阅事件
        // billboard.on(global.DC.MouseEventType.CLICK, (e) => {
        //   // console.log(e);
        //   // return;
        //   // 定制化窗体
        //   let position = e.position,
        //     lntLat = [e.overlay._position._lng, e.overlay._position._lat];
        //   let windowData = {
        //     position,
        //     lntLat,
        //     query: {
        //       ...(value[2] || {}),
        //       position,
        //       lntLat,
        //       notAddGoOn: "notAddGoOn",
        //     },
        //     useJWD: true, //仅使用经纬度
        //   };
        //   dispatch("setMobileWindows", windowData);
        // });
        // drawALineLayerMany.addOverlay(billboard);
        // let Labels = new global.DC.Label(position, point[k].name);
        // Labels.setStyle({
        //   font: "16px sans-serif", // CSS 字体设置
        //   scale: 1, //比例
        //   fillColor: white, //文字颜色
        //   showBackground: true, //是否显示背景
        //   backgroundColor: blue, //背景颜色
        //   // outlineColor: white, //边框颜色
        //   // outlineWidth: 1, //边框大小，
        //   pixelOffset: { x: 0, y: -47 }, //偏移像素
        // });
        let Labels = new global.DC.DivIcon(
          // new this.DC.Position(Number(item[0]), Number(item[1]), 0),
          position,
          `
            // // 2. Fly to a Rectangle with a top-down view
            // viewer.camera.flyTo({
            //     destination : Cesium.Rectangle.fromDegrees(west, south, east, north)
            // });

            // // 3. Fly to a position with an orientation using unit vectors.
            // viewer.camera.flyTo({
            //     destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
            //     orientation : {
            //         direction : new Cesium.Cartesian3(-0.04231243104240401, -0.20123236049443421, -0.97862924300734),
            //         up : new Cesium.Cartesian3(-0.47934589305293746, -0.8553216253114552, 0.1966022179118339)
            //     }
            // });

            // // 4. Fly to a position with an orientation using heading, pitch and roll.
            // viewer.camera.flyTo({
            //     destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
            //     orientation : {
            //         heading : Cesium.Math.toRadians(175.0),
            //         pitch : Cesium.Math.toRadians(-35.0),
            //         roll : 0.0
            //     }
            // });
        },
        // 飞入点加入位置
        MSET_POINTDATA ({
            state,
            commit,
            dispatch
        }, data) {
            // 加入坐标
            const positions = new global.DC.Position(
                data[0] - 0.0119,
                data[1] + 0.0111,
                0
            )
            const billboard = new global.DC.Billboard(
                positions,
                '/img/leftnav/map-panorama.png'
            )
            billboard.size = [16, 16]
            // 订阅事件3
            billboard.on(DC.MouseEventType.CLICK, (e) => {
                // 定制化窗体
                const query = {
                    name: '选择点'
                }
                const intLat = [e.wgs84Position.lng, e.wgs84Position.lat]
                const d = {
                    position: null,
                    lntLat: intLat,
                    query: {
                        ...(query || {}),
                        introduce: null,
                        address: intLat
                    },
                    useJWD: true // 仅使用经纬度
                }
                dispatch('setMobileWindows', d)
            })
            state.pointLayer.addOverlay(billboard) // 实景
            // commit("MSET_OPENPOINTEL", true);
        },
        MSET_LOCKPERSPECTIVEL ({
            state,
            commit,
            dispatch
        }, val) {
            // 锁定
            state.mviewer.camera.lookAtTransform(
                global.DC.Namespace.Cesium.Matrix4.IDENTITY
            )
            // console.log(global.DC.Namespace.Cesium.Matrix4.IDENTITY)
        },
        MSET_DIMENSIONS ({
            state,
            commit,
            dispatch
        }, val) {
            // 关闭弹窗
            dispatch('closeMobileWindowsDom')
            // 3d，2.5d转换事件
            commit('MSET_DIMENSION', val)
            // 控制高度
            const height = Math.ceil(
                state.mviewer.camera.positionCartographic.height
            )
            state.mviewer.camera.setView({
                destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians(
                    state.mviewer.camera.positionCartographic.longitude,
                    state.mviewer.camera.positionCartographic.latitude,
                    height
                ),
                orientation: {
                    heading: global.DC.Namespace.Cesium.Math.toRadians(
                        state.dimensionData.heading
                    ), // 方向
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(
                        state.dimensionData.pitch
                    ), // 倾斜角度
                    roll: state.dimensionData.roll
                }
            })
        },
        MSET_GOTOCC ({
            state,
            commit,
            dispatch
        }, val) {
            // 测试移动位置
            // commit("MSET_DIMENSION", val);
            // 控制高度
            // const height = Math.ceil(state.mviewer.camera.positionCartographic.height);
            state.mviewer.camera.setView({
                destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians(
                    state.mviewer.camera.positionCartographic.longitude,
                    state.mviewer.camera.positionCartographic.latitude,
                    val.height
                ),
                orientation: {
                    heading: global.DC.Namespace.Cesium.Math.toRadians(val.heading), // 方向
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(val.pitch), // 倾斜角度
                    roll: val.roll
                }
            })
        },
        // 文字转语音控制↓
        MSET_GETAUDIO ({
            state,
            commit,
            dispatch
        }, val) {
            state.audioData = new window.SpeechSynthesisUtterance()
            state.audioData.text = val
            state.audioData.onstart = function (e) {
                state.audioState = true
            }
            state.audioData.onend = function (event) {
                state.audioState = false
            }
        },
        MSET_GETAUDIOBEGIN ({
            state,
            commit,
            dispatch
        }, val) {
            if (state.audioState) {
                window.speechSynthesis.cancel()
                state.audioState = false
            } else {
                if (val != 'notOpen') {
                    window.speechSynthesis.speak(state.audioData)
                }
            }
        },
        // 文字转语音控制↑
        // 导航系统↓
        MSET_GOTOWHERE ({
            state,
            commit,
            dispatch
        }, val) {
            state.routerS = [] // 清空存着的路径
            // 单条步行
            // 本地图使用的是WGS84坐标，而高德使用的是火星坐标GCJ02，所以需要转换参数过去
            // 返回值需要转换为WGS84坐标
            state.navigationStartLngLat = [+val.start[0], +val.start[1]] // 导航起点
            state.navigationEndLngLat = [+val.end[0], +val.end[1]] // 导航终点
            // 转换WGS84坐标为GCJ02
            const GCJ02StartLngLat = global.DC.CoordTransform.WGS84ToGCJ02(
                Number(state.navigationStartLngLat[0]),
                Number(state.navigationStartLngLat[1])
            )
            const GCJ02EndLngLat = global.DC.CoordTransform.WGS84ToGCJ02(
                Number(state.navigationEndLngLat[0]),
                Number(state.navigationEndLngLat[1])
            )
            // 获取路径，使用的是高德API

            let url = 'https://restapi.amap.com/v3/direction/walking' // 默认api步行
            const data = {
                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'
            }
            let strategyType = [0]
            if (val.type) {
                // 切换驾车模式
                url = 'https://restapi.amap.com/v3/direction/driving'
                data.strategy = 10
                strategyType = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
            }
            // for (let index = 0; index < strategyType.length; index++) {
            // data["strategy"] = strategyType[index];
            axios
                .get(url, {
                    params: {
                        ...data
                    }
                })
                .then((res) => {
                    // 回调
                    const paths = res.data.route.paths
                    for (let i = 0; i < paths.length; i++) {
                        // 多条路线
                        drawALine(paths[i])
                    }
                    // const paths = res.data.route.paths[0].steps;
                    // drawALine(paths, res.data.route.paths[0].strategy);
                })
            // }
            const drawALine = (pathsour) => {
                const paths = pathsour.steps
                const titles = pathsour.strategy
                // 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类型的经纬度
                    const polylineArr = polyline.split(';') // 转为数组
                    const polylineArrLength = polylineArr.length // 获取长度，避免多次重复读取polylineArr.length
                    for (let k = 0; k < polylineArrLength; k++) {
                        const inPolylineArr = polylineArr[k].split(',') // 转经纬度为单独的数组
                        const 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(',') // 加入终点
                if (val.fn) {
                    const dataS = {
                        // 返回数据
                        titles: titles,
                        Str: Str
                    }
                    // console.log(Str);
                    state.routerS.push(dataS)
                    return val.fn(dataS)
                } else {
                    dispatch('MSET_DRAWALINELAYER', Str) // 绘画线路
                }
            }
        },
        // 导航系统↑
        // 绘画线路
        MSET_DRAWALINELAYER ({
            state,
            commit,
            dispatch
        }, value) {
            const Str = value[0]
            // 检查是否存在路线
            commit('removePolyline')
            commit('removePolylineMany')
            const color =
                global.DC.Namespace.Cesium.Color.fromCssColorString('#409EFF')
            const material = new global.DC.PolylineTrailMaterialProperty({
                color: color,
                speed: 10
            })
            state.drawALineLayer = new global.DC.VectorLayer('lineLayer')
            state.mviewer.addLayer(state.drawALineLayer)

            // 如果是添加  给第一个点加入图标 和事件
            if (value[1]) {
                commit('removerPolyLineIcon')
                state.drawALineLayerIcon = new global.DC.VectorLayer('pointLayer')
                state.mviewer.addLayer(state.drawALineLayerIcon)
                const useStr = Str.split(';')
                const post = useStr[useStr.length - 1].split(',')
                const position = new global.DC.Position(post[0], post[1])
                const billboard = new global.DC.Billboard(
                    position,
                    'img/dingwei/dingwei1.png'
                ) // 加入绘画点
                billboard.setStyle({
                    pixelOffset: {
                        x: 0,
                        y: -17
                    } // 偏移像素
                })
                // 订阅事件
                billboard.on(global.DC.MouseEventType.CLICK, (e) => {
                    // console.log(e);
                    // return;
                    // 定制化窗体
                    const position = e.position
                    const lntLat = [e.overlay._position._lng, e.overlay._position._lat]
                    const windowData = {
                        position,
                        lntLat,
                        query: {
                            ...(value[1] || {}),
                            position,
                            lntLat,
                            notAddGoOn: 'notAddGoOn'
                        },
                        useJWD: true // 仅使用经纬度
                    }
                    dispatch('setMobileWindows', windowData)
                })
                state.drawALineLayerIcon.addOverlay(billboard)
            }
            const polyline = new global.DC.Polyline(Str) // 加入线
            polyline.setStyle({
                width: 3,
                material: material,
                clampToGround: true
            })
            state.drawALineLayer.addOverlay(polyline)

            state.isOpenDrawALine = true
            // commit("cameraSetView", state.navigationStartLngLat); //移动
        },
        // 绘画线路活动多条
        MSET_DRAWALINELAYERMANY ({
            state,
            commit,
            dispatch
        }, value) {
            // 检查是否存在路线
            commit('removePolylineMany')
            commit('removePolyline')
            commit('removerPolyLineIcon')
            const Strs = value[0]
            const red = global.DC.Namespace.Cesium.Color.fromCssColorString('#FF0000')
            const white = global.DC.Namespace.Cesium.Color.fromCssColorString('#fff')
            const blue = global.DC.Namespace.Cesium.Color.fromCssColorString('#2196F3')
            const material = new global.DC.PolylineTrailMaterialProperty({
                color: red,
                speed: 10
            })
            const material1 = new global.DC.PolylineImageTrailMaterialProperty({
                color: red,
                speed: 60,
                image: 'img/icon/right.png',
                repeat: {
                    x: 320,
                    y: 1
                }
            })
            const drawALineLayerMany = new global.DC.VectorLayer('manyLinePointLayer')
            state.mviewer.addLayer(drawALineLayerMany)
            const drawAPointLayerMany = new global.DC.HtmlLayer('manyPointPointLayer')
            state.mviewer.addLayer(drawAPointLayerMany)
            // 多条线
            for (const k in Strs) {
                const polyline = new global.DC.Polyline(Strs[k].value) // 加入绘画点
                polyline.setStyle({
                    width: 6,
                    material: material1,
                    clampToGround: true
                })
                drawALineLayerMany.addOverlay(polyline)
                // let post = Strs[k].value.split(";")[0].split(",");
                // let position = new global.DC.Position(post[0], post[1]);
                // let Label = new global.DC.Label(position, Strs[k].name);
                // Label.setStyle({
                //   font: "16px sans-serif", // CSS 字体设置
                //   scale: 1, //比例
                //   fillColor: white, //文字颜色
                //   showBackground: true, //是否显示背景
                //   backgroundColor: blue, //背景颜色
                //   // outlineColor: white, //边框颜色
                //   // outlineWidth: 10, //边框大小，
                // });
                // drawALineLayerMany.addOverlay(Label);
            }
            // 多个点
            const point = value[1]
            for (const k in point) {
                const post = point[k].value
                const position = new global.DC.Position(post[0], post[1])

                // let billboard = new global.DC.Billboard(
                //   position,
                //   // "img/dingwei/dingwei1.png"
                //   "img/icon/activity.png"
                // ); //加入绘画点
                // billboard.setStyle({
                //   pixelOffset: { x: 0, y: -17 }, //偏移像素
                // });
                // //订阅事件
                // billboard.on(global.DC.MouseEventType.CLICK, (e) => {
                //   // console.log(e);
                //   // return;
                //   // 定制化窗体
                //   let position = e.position,
                //     lntLat = [e.overlay._position._lng, e.overlay._position._lat];
                //   let windowData = {
                //     position,
                //     lntLat,
                //     query: {
                //       ...(value[2] || {}),
                //       position,
                //       lntLat,
                //       notAddGoOn: "notAddGoOn",
                //     },
                //     useJWD: true, //仅使用经纬度
                //   };
                //   dispatch("setMobileWindows", windowData);
                // });
                // drawALineLayerMany.addOverlay(billboard);
                // let Labels = new global.DC.Label(position, point[k].name);
                // Labels.setStyle({
                //   font: "16px sans-serif", // CSS 字体设置
                //   scale: 1, //比例
                //   fillColor: white, //文字颜色
                //   showBackground: true, //是否显示背景
                //   backgroundColor: blue, //背景颜色
                //   // outlineColor: white, //边框颜色
                //   // outlineWidth: 1, //边框大小，
                //   pixelOffset: { x: 0, y: -47 }, //偏移像素
                // });
                const Labels = new global.DC.DivIcon(
                    // new this.DC.Position(Number(item[0]), Number(item[1]), 0),
                    position,
                    `
              <div class="point-entitys-box">
                  <div class="point-logo">
                      <img src="/img/icon/activity.png">
@@ -1093,38 +1089,38 @@
                  </div>
              </div>
          `
        );
        //订阅事件
        Labels.on(global.DC.MouseEventType.CLICK, (e) => {
          // console.log(e);
          // return;
          if (value[3]) {
            value[3]();
          }
          // 定制化窗体
          let position = e.position,
            lntLat = [e.overlay._position._lng, e.overlay._position._lat];
          let windowData = {
            position,
            lntLat,
            query: {
              ...(value[2] || {}),
              position,
              lntLat
            },
            useJWD: true, //仅使用经纬度
          };
          dispatch("setMobileWindows", windowData);
        });
        drawAPointLayerMany.addOverlay(Labels);
        // console.log(point[k]);
      }
      state.drawALineLayerMany = drawALineLayerMany;
      state.drawAPointLayerMany = drawAPointLayerMany;
      // state.isOpenDrawALineMany = value[2].name ? value[2].name : true;
      // commit("cameraSetView", state.navigationStartLngLat); //移动
    },
  },
};
                )
                // 订阅事件
                Labels.on(global.DC.MouseEventType.CLICK, (e) => {
                    // console.log(e);
                    // return;
                    if (value[3]) {
                        value[3]()
                    }
                    // 定制化窗体
                    const position = e.position
                    const lntLat = [e.overlay._position._lng, e.overlay._position._lat]
                    const windowData = {
                        position,
                        lntLat,
                        query: {
                            ...(value[2] || {}),
                            position,
                            lntLat
                        },
                        useJWD: true // 仅使用经纬度
                    }
                    dispatch('setMobileWindows', windowData)
                })
                drawAPointLayerMany.addOverlay(Labels)
                // console.log(point[k]);
            }
            state.drawALineLayerMany = drawALineLayerMany
            state.drawAPointLayerMany = drawAPointLayerMany
            // state.isOpenDrawALineMany = value[2].name ? value[2].name : true;
            // commit("cameraSetView", state.navigationStartLngLat); //移动
        }
    }
}

export default mobile;
export default mobile

 src/store/modules/pc/leftNavsData.js

@@ -1,58 +1,57 @@
let leftNavsData = {
const leftNavsData = {
    state: {
        addIconsLayerIconstate: false,
        addIconsLayerIconLayer: null,
        addIconsLayerIconPopup: false, //控制编辑窗口显影
        addIconsLayerIconPosition: [], //发送坐标
        addIconsLayerIconPopup: false, // 控制编辑窗口显影
        addIconsLayerIconPosition: [] // 发送坐标
    },
    actions: {
        chouseAddIconsLayerIcon({
        chouseAddIconsLayerIcon ({
            state,
            commit,
            dispatch
        }, val) {
            //加载图层
            commit("createAddIconsLayerIconLayer", {
            // 加载图层
            commit('createAddIconsLayerIconLayer', {
                viewer: val.viewer
            })
            //重置事件
            state.addIconsLayerIconstate = false;
            commit("set_closeMapClick", true); //关闭其他操作
            //监听鼠标移动
            // 重置事件
            state.addIconsLayerIconstate = false
            commit('set_closeMapClick', true) // 关闭其他操作
            // 监听鼠标移动
            val.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, (e) => {
                if (state.addIconsLayerIconstate) { //事件完成
                    return;
                if (state.addIconsLayerIconstate) { // 事件完成
                    return
                }
                commit("addIconsLayerIconmoveMessage", {
                commit('addIconsLayerIconmoveMessage', {
                    e: e,
                    b: "点击确认标注位置",
                    b: '点击确认标注位置',
                    viewer: val.viewer
                })
            });
            })
            val.viewer.once(global.DC.MouseEventType.CLICK, (e) => {
                commit("addIconsLayerIconmoveMessage", { //取消tip
                commit('addIconsLayerIconmoveMessage', { // 取消tip
                    e: e,
                    b: "",
                    b: '',
                    viewer: val.viewer
                })
                dispatch("pcFlyView", { //飞入位置
                dispatch('pcFlyView', { // 飞入位置
                    jd: e.wgs84SurfacePosition.lng,
                    wd: +e.wgs84SurfacePosition.lat + 0.0002,
                    viewer: val.viewer,
                });
                //完成选点操作
                state.addIconsLayerIconstate = true;
                    viewer: val.viewer
                })
                // 完成选点操作
                state.addIconsLayerIconstate = true
                // commit("set_closeMapClick", false); //开启其他操作
                if (val.fn) {
                    let lnglat = [e.wgs84SurfacePosition.lng,
                        e.wgs84SurfacePosition.lat
                    const lnglat = [e.wgs84SurfacePosition.lng,
                    e.wgs84SurfacePosition.lat
                    ]
                    val.fn(lnglat)
                }
            });

            })
        },
        addIconsLayerIcon({
        addIconsLayerIcon ({
            state,
            commit,
            dispatch
@@ -66,18 +65,18 @@
                `
                          <div class="tag-entitys-box">
                              <div class="tag-content">
                                  ${val.name || "我的标签"}
                                  ${val.name || '我的标签'}
                              </div>
                              <div class="tag-angle-content">
                                  <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
                              </div>
                          </div>
                      `
            );
            state.addIconsLayerIconLayer.addOverlay(divIcon);
            //打开编辑窗口弹窗
            )
            state.addIconsLayerIconLayer.addOverlay(divIcon)
            // 打开编辑窗口弹窗
            new global.DC.DivForms(val.viewer, {
                domId: "leftNavsAdd",
                domId: 'leftNavsAdd',
                position: [
                    global.DC.Transform.transformWGS84ToCartesian(
                        new global.DC.Position(
@@ -85,47 +84,45 @@
                            Number(val.lnglat[1]),
                            Number(0)
                        )
                    ),
                ],
            });
            commit("SET_addIconsLayerIconPosition", val.lnglat)
            commit("SET_addIconsLayerIconPopup", true);
                    )
                ]
            })
            commit('SET_addIconsLayerIconPosition', val.lnglat)
            commit('SET_addIconsLayerIconPopup', true)
        }
    },
    mutations: {
        createAddIconsLayerIconLayer(state, val) {
        createAddIconsLayerIconLayer (state, val) {
            if (state.addIconsLayerIconLayer == null) {
                state.addIconsLayerIconLayer = new global.DC.HtmlLayer("addIconsLayerIconLayer");
                val.viewer.addLayer(state.addIconsLayerIconLayer);
                state.addIconsLayerIconLayer = new global.DC.HtmlLayer('addIconsLayerIconLayer')
                val.viewer.addLayer(state.addIconsLayerIconLayer)
            }
            if (val.clear) {
                state.addIconsLayerIconLayer.clear();
                state.addIconsLayerIconLayer.clear()
            }
            console.log(state.addIconsLayerIconLayer, "see")
        },
        addIconsLayerIconmoveMessage(state, val) {
            console.log(val)
            if (val.b == "") {
                val.viewer.tooltip.enable = false;
        addIconsLayerIconmoveMessage (state, val) {
            if (val.b == '') {
                val.viewer.tooltip.enable = false
            } else {
                val.viewer.tooltip.enable = true;
                val.viewer.tooltip.showAt(val.e.windowPosition, val.b);
                val.viewer.tooltip.enable = true
                val.viewer.tooltip.showAt(val.e.windowPosition, val.b)
            }
        },
        SET_addIconsLayerIconPopup(state, addIconsLayerIconPopup) {
        SET_addIconsLayerIconPopup (state, addIconsLayerIconPopup) {
            state.addIconsLayerIconPopup = addIconsLayerIconPopup
            if (!state.addIconsLayerIconPopup) { //关闭即关闭图层 并刷新标签
            if (!state.addIconsLayerIconPopup) { // 关闭即关闭图层 并刷新标签
                if (state.addIconsLayerIconLayer) {
                    state.addIconsLayerIconLayer.clear();
                    state.addIconsLayerIconLayer.remove();
                    state.addIconsLayerIconLayer = null;
                    state.addIconsLayerIconLayer.clear()
                    state.addIconsLayerIconLayer.remove()
                    state.addIconsLayerIconLayer = null
                }
            }
        },
        SET_addIconsLayerIconPosition(state, addIconsLayerIconPosition) {
        SET_addIconsLayerIconPosition (state, addIconsLayerIconPosition) {
            state.addIconsLayerIconPosition = addIconsLayerIconPosition
        },
        }
    }
}

export default leftNavsData
export default leftNavsData

 src/store/modules/popupParams.js

@@ -23,103 +23,103 @@
        addTagPopup: false,
        addTagPosition: null,

        labelLayer: null, //自定义标签图层
        labelLayer: null, // 自定义标签图层
        addSignList: true,
        myviewer: null,
        nowlabelLayerData: {},
        labelLayerDataShow: false,

        closeMapClick: false, //关闭地图点击，防止新增标签误触
        closeMapClick: false // 关闭地图点击，防止新增标签误触
    },
    mutations: {
        ...leftNavsData.mutations,
        SET_POPUPBGURL(state, popupBgUrl) {
        SET_POPUPBGURL (state, popupBgUrl) {
            // console.log(popupBgUrl, "see33333")
            if (!popupBgUrl) {
                return;
                return
            }
            state.popupBgUrl = popupBgUrl;
            state.popupBgUrl = popupBgUrl
        },
        SET_POPUPQRURL(state, pupupQRUrl) {
        SET_POPUPQRURL (state, pupupQRUrl) {
            state.pupupQRUrl = pupupQRUrl
        },
        SET_TERMINUS(state, terminus) {
        SET_TERMINUS (state, terminus) {
            state.terminus = terminus
        },
        SET_STARTINGPOINT(state, startingPoint) {
        SET_STARTINGPOINT (state, startingPoint) {
            state.startingPoint = startingPoint
        },
        SET_POINTPOSITION(state, pointPosition) {
        SET_POINTPOSITION (state, pointPosition) {
            state.pointPosition = pointPosition
        },
        SET_STATENAME(state, stateName) {
        SET_STATENAME (state, stateName) {
            state.stateName = stateName
        },
        SET_SITENAME(state, siteName) {
        SET_SITENAME (state, siteName) {
            state.siteName = siteName
        },
        SET_TELEPHONE(state, telephone) {
        SET_TELEPHONE (state, telephone) {
            state.telephone = telephone
        },
        SET_INTRODUCETEXT(state, introduceText) {
        SET_INTRODUCETEXT (state, introduceText) {
            state.introduceText = introduceText
        },
        SET_PANORAMAURL(state, panoramaUrl) {
        SET_PANORAMAURL (state, panoramaUrl) {
            state.panoramaUrl = panoramaUrl
        },
        SET_PANORAMAPOPUP(state, panoramaPopup) {
        SET_PANORAMAPOPUP (state, panoramaPopup) {
            state.panoramaPopup = panoramaPopup
        },
        SET_MONITORURL(state, monitorUrl) {
        SET_MONITORURL (state, monitorUrl) {
            state.monitorUrl = monitorUrl
        },
        SET_MONITORPOPUP(state, monitorPopup) {
        SET_MONITORPOPUP (state, monitorPopup) {
            state.monitorPopup = monitorPopup
        },
        SET_DETAILSPOPUP(state, detailsPopup) {
        SET_DETAILSPOPUP (state, detailsPopup) {
            state.detailsPopup = detailsPopup
        },
        SET_POPUPIMGATLAS(state, popupImgAtlas) {
        SET_POPUPIMGATLAS (state, popupImgAtlas) {
            state.popupImgAtlas = popupImgAtlas
        },
        SET_TEACHLIST(state, teachList) {
        SET_TEACHLIST (state, teachList) {
            state.teachList = teachList
        },
        SET_LIVELIST(state, liveList) {
        SET_LIVELIST (state, liveList) {
            state.liveList = liveList
        },

        SET_ADDTAGPOPUP(state, addTagPopup) {
        SET_ADDTAGPOPUP (state, addTagPopup) {
            state.addTagPopup = addTagPopup
        },

        SET_ADDTAGPOSITION(state, addTagPosition) {
        SET_ADDTAGPOSITION (state, addTagPosition) {
            state.addTagPosition = addTagPosition
        },
        initLabelLayer(state, val) {
        initLabelLayer (state, val) {
            if (!state.labelLayer) {
                state.labelLayer = new global.DC.HtmlLayer("labelLayer");
                val.addLayer(state.labelLayer);
                state.labelLayer = new global.DC.HtmlLayer('labelLayer')
                val.addLayer(state.labelLayer)
            }
            state.myviewer = val;
            state.myviewer = val
        },

        clearLabelLayerIcon(state, val) {
        clearLabelLayerIcon (state, val) {
            if (state.labelLayer) {
                state.labelLayer.clear();
                state.labelLayer.clear()
            }
        },
        openLabelLayer(state, val) {
        openLabelLayer (state, val) {
            // console.log(val, "see")
            if (val.show) {
                state.nowlabelLayerData = val.data;
                state.labelLayerDataShow = true;
                state.nowlabelLayerData = val.data
                state.labelLayerDataShow = true
            } else {
                state.nowlabelLayerData = {};
                state.labelLayerDataShow = false;
                state.nowlabelLayerData = {}
                state.labelLayerDataShow = false
            }
        },
        CLEAR_ALL(state, param) {
        CLEAR_ALL (state, param) {
            state.siteName = param
            state.introduceText = param
            state.telephone = param
@@ -129,13 +129,13 @@
            state.teachList = []
            state.liveList = []
        },
        set_closeMapClick(state, val) {
            state.closeMapClick = val;
        set_closeMapClick (state, val) {
            state.closeMapClick = val
        }
    },
    actions: {
        ...leftNavsData.actions,
        openPopups({
        openPopups ({
            state,
            commit,
            dispatch
@@ -150,7 +150,7 @@
            //     });
            //   });
            var popup = new global.DC.DivForms(state.viewer, {
                domId: "divFormsDomBox",
                domId: 'divFormsDomBox',
                position: [
                    global.DC.Transform.transformWGS84ToCartesian(
                        new global.DC.Position(
@@ -158,52 +158,50 @@
                            Number(value.lat),
                            Number(value.alt || 0)
                        )
                    ),
                ],
            });
            dispatch("setOurDataInPoput", value);
            dispatch("pcFlyView", {
                    )
                ]
            })
            dispatch('setOurDataInPoput', value)
            dispatch('pcFlyView', {
                jd: value.lng,
                wd: value.lat,
                viewer: this.viewer,
            });
                viewer: this.viewer
            })
        },
        setOurDataInPoput({
        setOurDataInPoput ({
            state,
            commit,
            dispatch
        }, value) {
            //弹窗使用方法
            // 弹窗使用方法

            commit("CLEAR_ALL", null);
            commit('CLEAR_ALL', null)


            commit("SET_STATENAME", value.item.mechanismname);
            commit("SET_PANORAMAURL", value.item.panoramaurl);
            commit("SET_INTRODUCETEXT", value.item.introduce);
            var imgArr = [];
            commit('SET_STATENAME', value.item.mechanismname)
            commit('SET_PANORAMAURL', value.item.panoramaurl)
            commit('SET_INTRODUCETEXT', value.item.introduce)
            var imgArr = []
            if (value.item.tpurl) {
                imgArr = value.item.tpurl.split(",");
                imgArr = value.item.tpurl.split(',')
            }
            commit("SET_POPUPBGURL", imgArr[0]);
            commit('SET_POPUPBGURL', imgArr[0])
            commit('SET_POPUPIMGATLAS', imgArr)
            commit("SET_POPUPQRURL", value.item.codeurl);
            commit("SET_POINTPOSITION", [
            commit('SET_POPUPQRURL', value.item.codeurl)
            commit('SET_POINTPOSITION', [
                Number(value.lng),
                Number(value.lat),
                Number(0),
                Number(0),
                Number(-90),
                Number(0),
            ]);
            commit("SET_DETAILSPOPUP", true);
                Number(0)
            ])
            commit('SET_DETAILSPOPUP', true)
        },
        pcMoveView({
        pcMoveView ({
            state,
            commit,
            dispatch
        }, val) {
            console.log(val, "see1")
            val.viewer.camera.setView({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
@@ -217,36 +215,36 @@
                    heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    // 视角
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                    roll: 0.0,
                },
            });
                    roll: 0.0
                }
            })
        },
        pcFlyView({
        pcFlyView ({
            state,
            commit,
            dispatch
        }, val) {
            val.viewer.flyToPosition(
                new global.DC.Position(Number(val.jd), Number(val.wd), Number(300), Number(0), Number(-90), Number(0)),
                function () {},
                function () { },
                2
            )
        },
        addLabelLayerIcon({
        addLabelLayerIcon ({
            state,
            commit,
            dispatch
        }, val) {
            let list = val.list;
            const list = val.list
            if (val.clear) {
                //     state.labelLayer.remove();
                state.labelLayer.clear();
                state.labelLayer.clear()
            }
            if (val.add) { //刷新列表
                state.addSignList = !state.addSignList;
                return;
            if (val.add) { // 刷新列表
                state.addSignList = !state.addSignList
                return
            }
            for (let i in list) {
            for (const i in list) {
                const divIcon = new global.DC.DivIcon(
                    new global.DC.Position(
                        Number(list[i].jd),
@@ -263,17 +261,17 @@
                                  </div>
                              </div>
                          `
                );
                //订阅事件
                )
                // 订阅事件
                divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
                    // console.log(e);
                    // return;
                    // 定制化窗体
                    let position = e.position,
                        lntLat = [e.overlay._position._lng, e.overlay._position._lat];
                    const position = e.position
                    const lntLat = [e.overlay._position._lng, e.overlay._position._lat]
                    // console.log(position, lntLat, list[i], state.myviewer, "see")
                    new global.DC.DivForms(state.myviewer, {
                        domId: "labelLayerid",
                        domId: 'labelLayerid',
                        position: [
                            global.DC.Transform.transformWGS84ToCartesian(
                                new global.DC.Position(
@@ -281,9 +279,9 @@
                                    Number(lntLat[1]),
                                    Number(0)
                                )
                            ),
                        ],
                    });
                            )
                        ]
                    })
                    state.myviewer.camera.setView({
                        // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                        // fromDegrees()方法，将经纬度和高程转换为世界坐标
@@ -297,18 +295,18 @@
                            heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                            // 视角
                            pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                            roll: 0.0,
                        },
                    });
                    commit("openLabelLayer", {
                            roll: 0.0
                        }
                    })
                    commit('openLabelLayer', {
                        show: true,
                        data: list[i]
                    })
                });
                state.labelLayer.addOverlay(divIcon);
                })
                state.labelLayer.addOverlay(divIcon)
            }
        },
        }
    }
}

export default popupParams
export default popupParams