+新增标签，可编辑，可加图片

liuyg

2022-03-05 722dbde665a8e335bccaa9d984cd02eb22333e54

+新增标签，可编辑，可加图片

 src/App.vue

@@ -1,5 +1,5 @@
<template>
  <div id="app">
  <div id="app" :class="{ cantdoit: cantdoits }">
    <router-view></router-view>
  </div>
</template>
@@ -12,6 +12,7 @@
    return {
      //   consoles: 1,
      //   consoles1: 1,
      cantdoits: false,
    };
  },
  mounted() {
@@ -61,6 +62,7 @@
    //     JSON.stringify(d)
    // );
    if (this._isMobile()) {
      this.cantdoits = true;
      // 手机端
      this.$router.replace("/mobileLayout");

@@ -156,4 +158,12 @@
  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;
}
</style>

 src/api/pc/leftNav/index.js

@@ -46,3 +46,12 @@
        params: params
    })
}


export const add = (row) => {
    return request({
        url: '/blade-architecture/architecture/save',
        method: 'post',
        data: row
    })
}

 src/components/arcNavBar/index.vue

@@ -1,188 +1,212 @@
<template>
    <public-box class="public-org-nav-bar">
        <template slot="public-box-header">
            <div class="title">
                <img class="icon deblurring" src="/img/icon/xyjz.png" alt />
                <span>{{arcNavBarTitle}}</span>
            </div>
            <img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
        </template>
        <template slot="public-box-content">
            <div class="tab" v-show="false">
                <ul>
                    <li
                        :class="{'on': item.flag}"
                        v-for="(item, index) in titleList"
                        :key="index"
                        @click="topNavClick(item, index)"
                    >{{ item.title }}</li>
                </ul>
            </div>
            <ul>
                <li v-for="(item, index) in itemNavList" :key="index" @click="mapPopup(item)">
                    <img :src="item.icon" alt />
                    <span>{{item.navTitle}}</span>
                </li>
            </ul>
        </template>
    </public-box>
  <public-box class="public-org-nav-bar">
    <template slot="public-box-header">
      <div class="title">
        <img class="icon deblurring" src="/img/icon/xyjz.png" alt />
        <span>{{ arcNavBarTitle }}</span>
      </div>
      <img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
    </template>
    <template slot="public-box-content">
      <div class="tab" v-show="false">
        <ul>
          <li
            :class="{ on: item.flag }"
            v-for="(item, index) in titleList"
            :key="index"
            @click="topNavClick(item, index)"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>
      <ul>
        <li
          v-for="(item, index) in itemNavList"
          :key="index"
          @click="mapPopup(item)"
        >
          <img :src="item.icon" alt />
          <span>{{ item.navTitle }}</span>
        </li>
      </ul>
    </template>
  </public-box>
</template>

<script>
import { mapGetters } from 'vuex'
import { getList, getChildNavList, getChildNavDetail } from '@/api/pc/public/arc'
import { mapGetters } from "vuex";
import {
  getList,
  getChildNavList,
  getChildNavDetail,
} from "@/api/pc/public/arc";

export default {
    name: 'ArcNavBar',
    data () {
        return {
            itemNavList: [],
            titleList: [],
            DC: null
  name: "ArcNavBar",
  data() {
    return {
      itemNavList: [],
      titleList: [],
      DC: null,
    };
  },
  props: {},
  computed: {
    ...mapGetters([
      "viewer",
      "popupBgUrl",
      "pupupQRUrl",
      // 点信息
      "pointPosition",
      // 点名称
      "stateName",
      // 地址
      "siteName",
      // 介绍
      "introduceText",
      // 全景地址
      "panoramaUrl",
      "arcNavBarTitle",
      "arcNavBarCode",
    ]),
  },
  created() {
    this.DC = global.DC;
  },
  mounted() {},
  watch: {
    arcNavBarCode: {
      immediate: true,
      handler(newCode, oldCode) {
        this.titleList = [];
        getList().then((res) => {
          res.data.data.forEach((item) => {
            this.titleList.push({
              title: item.dictValue,
              flag: false,
              key: item.dictKey,
            });
          });

          this.titleList[0].flag = true;

          this.getChilsNavs(this.titleList[0].key);
        });
      },
    },
  },
  methods: {
    topNavClick(item, index) {
      this.titleList.forEach((item) => {
        item.flag = false;
      });

      this.titleList[index].flag = true;

      this.getChilsNavs(item.key);
    },

    getChilsNavs(campus) {
      this.itemNavList = [];

      getChildNavList({ campus: campus, type: this.arcNavBarCode }).then(
        (res) => {
          res.data.data.forEach((item) => {
            this.itemNavList.push({
              navTitle: item.mechanismname,
              icon: "/img/navicon/tag.png",
              id: item.id,
            });
          });
        }
      );
    },
    props: {

    },
    computed: {
        ...mapGetters([
            'viewer',
            'popupBgUrl',
            'pupupQRUrl',
            // 点信息
            'pointPosition',
            // 点名称
            'stateName',
            // 地址
            'siteName',
            // 介绍
            'introduceText',
            // 全景地址
            'panoramaUrl',
            'arcNavBarTitle',
            'arcNavBarCode'
        ])
    },
    created () {
        this.DC = global.DC
    },
    mounted () {
    mapPopup(param) {
      getChildNavDetail({ id: param.id }).then((res) => {
        var result = res.data.data[0].list;
        this.$store.commit("CLEAR_ALL", null);

    },
    watch: {
        arcNavBarCode: {
            immediate: true,
            handler (newCode, oldCode) {
                this.titleList = []
                getList().then(res => {
                    res.data.data.forEach(item => {
                        this.titleList.push({ title: item.dictValue, flag: false, key: item.dictKey })
                    })
        var imgArr = result.tpurl.split(",");

                    this.titleList[0].flag = true

                    this.getChilsNavs(this.titleList[0].key)
                })
            }
        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_PANORAMAURL", result.panoramaurl);
        this.$store.commit("SET_POPUPIMGATLAS", imgArr);
        if (result.videourl && result.videourl != "") {
          this.$store.commit("SET_MONITORURL", result.videourl);
        }
    },
    methods: {
        topNavClick (item, index) {
            this.titleList.forEach(item => {
                item.flag = false
            })

            this.titleList[index].flag = true

            this.getChilsNavs(item.key)
        },

        getChilsNavs (campus) {
            this.itemNavList = []

            getChildNavList({ campus: campus, type: this.arcNavBarCode }).then(res => {
                res.data.data.forEach(item => {
                    this.itemNavList.push({
                        navTitle: item.mechanismname,
                        icon: '/img/navicon/tag.png',
                        id: item.id
                    })
                })
            })
        },

        mapPopup (param) {
            getChildNavDetail({ id: param.id }).then(res => {
                var result = res.data.data[0].list
                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_PANORAMAURL', result.panoramaurl)
                this.$store.commit('SET_POPUPIMGATLAS', imgArr)
                if (result.videourl && result.videourl != '') {
                    this.$store.commit('SET_MONITORURL', result.videourl)
                }
                if (res.data.data[0].jx != undefined && res.data.data[0].jx != '') {
                    var tabOne = res.data.data[0].jx.split(',')
                    this.$store.commit('SET_TEACHLIST', tabOne)
                } else {
                    this.$store.commit('SET_TEACHLIST', [])
                }

                if (res.data.data[0].sh != undefined && res.data.data[0].sh != '') {
                    var tabTwo = res.data.data[0].sh.split(',')
                    this.$store.commit('SET_LIVELIST', tabTwo)
                } else {
                    this.$store.commit('SET_LIVELIST', [])
                }

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

        closeModel () {
            var path = this.$route.path
            if (path.indexOf('/arc') != -1) {
                this.$store.dispatch('delVisitedViews', this.$route)
                this.$router.push('/pcLayout/default')
            }

            this.$store.commit('SET_ARCNAVBARTITLE', '')
            this.$store.commit('SET_ARCNAVBARCODE', '')
            this.$store.commit('SET_ARCNAVBARFLAG', false)
        if (res.data.data[0].jx != undefined && res.data.data[0].jx != "") {
          var tabOne = res.data.data[0].jx.split(",");
          this.$store.commit("SET_TEACHLIST", tabOne);
        } else {
          this.$store.commit("SET_TEACHLIST", []);
        }
    }
}

        if (res.data.data[0].sh != undefined && res.data.data[0].sh != "") {
          var tabTwo = res.data.data[0].sh.split(",");
          this.$store.commit("SET_LIVELIST", tabTwo);
        } else {
          this.$store.commit("SET_LIVELIST", []);
        }

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

    closeModel() {
      var path = this.$route.path;
      if (path.indexOf("/arc") != -1) {
        this.$store.dispatch("delVisitedViews", this.$route);
        this.$router.push("/pcLayout/default");
      }

      this.$store.commit("SET_ARCNAVBARTITLE", "");
      this.$store.commit("SET_ARCNAVBARCODE", "");
      this.$store.commit("SET_ARCNAVBARFLAG", false);
    },
  },
};
</script>

<style scoped lang='scss'>
</style>
<style scoped lang="scss"></style>

 src/components/leftNav/index.vue

@@ -9,6 +9,10 @@
        <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>
@@ -21,10 +25,16 @@
  getWayList,
  getTagList,
} from "@/api/pc/leftNav/index";

import { mapGetters } from "vuex";
export default {
  name: "leftNav",
  computed: {},
  computed: {
    ...mapGetters([
      "viewer",
      "closeMapClick", // 关闭地图点击，防止新增标签误触
      "addIconsLayerIconPopup", //传送关闭编辑窗口，刷新标签数据
    ]),
  },
  data() {
    return {
      leftNavData: [
@@ -108,8 +118,77 @@
  created() {
    this.DC = global.DC;
  },
  mounted() {},
  mounted() {
    //初始化新增标签图层
    // this.$store.commit("createAddIconsLayerIconLayer", { viewer: this.viewer });
  },
  watch: {
    addIconsLayerIconPopup() {
      if (!this.addIconsLayerIconPopup) {
        this.reself();
      }
    },
  },
  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),
            `
                        <div class="tag-entitys-box">
                            <div class="tag-content">
                                ${item.mechanismname}
                            </div>
                            <div class="tag-angle-content">
                                <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
                            </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,
          });
        },
      });
    },
    generatePosition(num) {
      const list = [];
      for (let i = 0; i < num; i++) {
@@ -165,7 +244,10 @@
          );
          //订阅事件
          divIcon.on(global.DC.MouseEventType.CLICK, (e) => {
            console.log(item);
            if (that.closeMapClick) {
              return;
            }
            // console.log(item, "see11111");
            that.openPopups({
              lng: e.overlay.position.lng,
              lat: e.overlay.position.lat,
@@ -388,6 +470,7 @@
          ),
        ],
      });
      // console.log(value, "see");
      this.$store.dispatch("setOurDataInPoput", value);
      this.$store.dispatch("pcFlyView", {
        jd: value.lng,
@@ -444,4 +527,12 @@
    }
  }
}
.addIcons {
  span {
    font-size: 25px !important;
  }
}
.avtiveAddIcons {
  background-color: aqua;
}
</style>

 src/components/map/components/dimension.vue

@@ -178,7 +178,7 @@
              }).then((res) => {
                if (res && JSON.stringify(res.data.data) != "{}") {
                  var result = res.data.data;

                  console.log("see9994");
                  var imgArr = result.tpurl.split(",");
                  this.$store.commit("SET_POPUPBGURL", imgArr[0]);
                  this.$store.commit("SET_POPUPQRURL", result.codeurl);

 src/components/map/components/mapPopup.vue

@@ -301,6 +301,116 @@
          </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>
                  <div class="add-tag-content">
                    <div class="addIconsLayer">
                      <div
                        :class="[
                          'addIconsLayerinimgs',
                          ourImages.length > 3 ? 'isOverImgs' : '',
                        ]"
                      >
                        <!-- 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>

                        <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 class="arrow"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 二维码弹框相关 -->
@@ -353,11 +463,22 @@
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 leftNavsAdd from "./mapPopupOther/leftNavsAdd.vue";

export default {
  name: "mapPopup",
  components: {
    leftNavsAdd,
  },
  data() {
    let apiUrls = window.$apiUrls;
    return {
      ourImages: [],
      dialogImageUrl: "",
      dialogVisible: false,
      apiUrls: $apiUrls,
      DC: null,
      tabBtnFlag: "教学科研行政",
      QRCodeFlag: false,
@@ -370,6 +491,212 @@
      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: "高度",
          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: {
@@ -414,6 +741,8 @@
      //自定义标签弹窗
      "labelLayerDataShow",
      "nowlabelLayerData",
      "addIconsLayerIconPopup", //自定义标签编辑窗口
      "addIconsLayerIconPosition", //自定义标签坐标
    ]),
  },
  created() {
@@ -430,6 +759,28 @@
  },
  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 = "";
        }
        this.ourImages = [];
        this.$store.commit("set_closeMapClick", false); //开启其他操作
      }
    },
    addTagPopup() {
      if (!this.addTagPopup) {
        // console.log("取消", "see");
@@ -481,6 +832,66 @@
    },
  },
  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();
        },
        (error) => {
          window.console.log(error);
        }
      );
    },
    screen() {
      if (this.fullscreen) {
        this.fullScreenUrl = "/img/icon/bigScreen.png";

 src/components/map/components/mapPopupOther/leftNavsAdd.vue

New file
@@ -0,0 +1,25 @@
<template>
  <div style="width: 100%; height: 100%">
    <div class="monitor-container">
      <div class="monitor-wrap">
        <div class="content-wrap">
          <div class="title">
            <!-- {{ stateName }} -->
            <!-- @click="closeMonitorPopupBox" -->
            <img class="close-box" src="/img/navicon/close.png" alt />
          </div>
          <div class="content">123</div>
        </div>
      </div>
      <div class="arrow"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "leftNavsAdd",
};
</script>

<style></style>

 src/components/mobileCortrolButtom/index.vue

@@ -63,7 +63,7 @@
  },
  created() {
    this.DC = global.DC;
    this.getStreet();
    // this.getStreet();
  },
  mounted() {},
  methods: {

 src/components/mobilemap/index.vue

@@ -93,7 +93,14 @@
      towlayerNum: 120,
      threelayerNum: 160,
      forlayerNum: 200,
      intervallayerNum: 20,
      frislayertHeight: 160, //默认高度
      // onelayerNum: 80,
      // towlayerNum: 200,
      // threelayerNum: 320,
      // forlayerNum: 440,
      // intervallayerNum: 60,
      // frislayertHeight: 320, //默认高度
    };
  },
  computed: {
@@ -333,7 +340,7 @@
          },
          duration: 0.5, // 定位的时间间隔
        });
        overii();
        // overii();
      };
      that.butbut = function () {
        //放大
@@ -356,18 +363,18 @@
              // if (height > 100) {
              //   butSetViews(80);
              // }
              if (height > 180) {
                butSetViews(160);
              if (height > that.forlayerNum - that.intervallayerNum) {
                butSetViews(that.threelayerNum);
                return;
              }

              if (height > 140) {
                butSetViews(120);
              if (height > that.threelayerNum - that.intervallayerNum) {
                butSetViews(that.towlayerNum);
                return;
              }

              if (height > 100) {
                butSetViews(80);
              if (height > that.towlayerNum - that.intervallayerNum) {
                butSetViews(that.onelayerNum);
              }
            }
          };
@@ -380,16 +387,34 @@
              );
              console.log(height);

              if (height <= 100) {
                butSetViews(120);
              // if (height <= 100) {
              //   butSetViews(120);
              // }

              // if (height > 100 && height <= 140) {
              //   butSetViews(160);
              // }

              // if (height > 140 && height < 180) {
              //   butSetViews(200);
              // }

              if (height <= that.towlayerNum - that.intervallayerNum) {
                butSetViews(that.towlayerNum);
              }

              if (height > 100 && height <= 140) {
                butSetViews(160);
              if (
                height > that.towlayerNum - that.intervallayerNum &&
                height <= that.threelayerNum - that.intervallayerNum
              ) {
                butSetViews(that.threelayerNum);
              }

              if (height > 140 && height < 180) {
                butSetViews(200);
              if (
                height > that.threelayerNum - that.intervallayerNum &&
                height < that.forlayerNum - that.intervallayerNum
              ) {
                butSetViews(that.forlayerNum);
              }
            }
          };
@@ -432,7 +457,7 @@
            ii++;
            cutHeight = height - startHeight;
            // console.log(cutHeight);
            // console.log(height);
            console.log(height, "see");
            that.heights = height;
            that.heights1 = cutHeight;
            // return;
@@ -451,29 +476,66 @@
            let takes = () => {
              if (ii != 1) {
                if (cutHeight >= 0) {
                  if (cutHeight > 3) {
                    if (height >= 83 && height < 120) {
                      setViews(120);
                  if (cutHeight > 2) {
                    // if (height >= 83 && height < 120) {
                    //   setViews(120);
                    // }
                    // if (height >= 123 && height < 160) {
                    //   setViews(160);
                    // }
                    // if (height >= 163 && height < 200) {
                    //   setViews(200);
                    // }
                    if (
                      height >= that.onelayerNum + 2 &&
                      height < that.towlayerNum
                    ) {
                      setViews(that.towlayerNum);
                    }
                    if (height >= 123 && height < 160) {
                      setViews(160);
                    if (
                      height >= that.towlayerNum + 2 &&
                      height < that.threelayerNum
                    ) {
                      setViews(that.threelayerNum);
                    }
                    if (height >= 163 && height < 200) {
                      setViews(200);
                    if (
                      height >= that.threelayerNum + 2 &&
                      height < that.forlayerNum
                    ) {
                      setViews(that.forlayerNum);
                    }
                  }
                  //放大
                } else {
                  //缩小
                  if (cutHeight < -3) {
                    if (height <= 200 && height > 157) {
                      setViews(160);
                  // if (cutHeight < -3) {
                  //   if (height <= 200 && height > 157) {
                  //     setViews(160);
                  //   }
                  //   if (height <= 157 && height > 117) {
                  //     setViews(120);
                  //   }
                  //   if (height <= 117 && height > 80) {
                  //     setViews(80);
                  //   }
                  if (cutHeight < -2) {
                    if (
                      height <= that.forlayerNum &&
                      height > that.threelayerNum - 2
                    ) {
                      setViews(that.threelayerNum);
                    }
                    if (height <= 157 && height > 117) {
                      setViews(120);
                    if (
                      height <= that.threelayerNum - 2 &&
                      height > that.towlayerNum - 2
                    ) {
                      setViews(that.towlayerNum);
                    }
                    if (height <= 117 && height > 80) {
                      setViews(80);
                    if (
                      height <= that.towlayerNum - 2 &&
                      height > that.onelayerNum
                    ) {
                      setViews(that.onelayerNum);
                    }
                  }
                }
@@ -969,6 +1031,11 @@
      //判断默认维度
      //原本默认是2.5d  改为3d默认时做出改变
      if (that.dimension == "2.5D") {
        that.$store.commit("set_frislayertHeight", that.frislayertHeight); //送入默认弹窗高度
        that.$store.commit("set_zoomRange", [
          that.onelayerNum,
          that.forlayerNum,
        ]); //送入移动端缩放范围
        that.$store.commit("MSET_DIMENSION", "2.5D"); //切换2.5D设置
      } else if (that.dimension == "3D") {
        // setTimeout((res) => {
@@ -1082,8 +1149,9 @@
      that.$store.dispatch("setMobileWindows", d);
    },
    flytos(jd, wd) {
      let height = this.frislayertHeight;
      this.$store.dispatch("mapFlyTo", {
        lntLat: [jd, wd, 120], //114.04020791, 27.62934732
        lntLat: [jd, wd, height], //114.04020791, 27.62934732
        heading: 0,
        pitch: -90,
        roll: 0,

 src/components/orgNavBar/index.vue

@@ -1,113 +1,133 @@
<template>
    <public-box class="public-org-nav-bar">
        <template slot="public-box-header">
            <div class="title">
                <img class="icon deblurring" src="/img/icon/jg.png" alt />
                <span>{{orgNavBarTitle}}</span>
            </div>
            <img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
        </template>
        <template slot="public-box-content">
            <ul>
                <li v-for="(item, index) in orgNavBarList" :key="index" @click="mapPopup(item)">
                    <img :src="item.icon" alt />
                    <span>{{item.navTitle}}</span>
                </li>
            </ul>
        </template>
    </public-box>
  <public-box class="public-org-nav-bar">
    <template slot="public-box-header">
      <div class="title">
        <img class="icon deblurring" src="/img/icon/jg.png" alt />
        <span>{{ orgNavBarTitle }}</span>
      </div>
      <img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
    </template>
    <template slot="public-box-content">
      <ul>
        <li
          v-for="(item, index) in orgNavBarList"
          :key="index"
          @click="mapPopup(item)"
        >
          <img :src="item.icon" alt />
          <span>{{ item.navTitle }}</span>
        </li>
      </ul>
    </template>
  </public-box>
</template>

<script>
import { mapGetters } from 'vuex'
import { mapGetters } from "vuex";

export default {
    name: 'OrgNavBar',
    data () {
        return {
            DC: null
        }
  name: "OrgNavBar",
  data() {
    return {
      DC: null,
    };
  },
  created() {
    this.DC = global.DC;
  },
  computed: {
    ...mapGetters([
      "viewer",
      "popupBgUrl",
      "pupupQRUrl",
      // 点信息
      "pointPosition",
      // 点名称
      "stateName",
      // 地址
      "siteName",
      // 介绍
      "introduceText",
      // 全景地址
      "panoramaUrl",
      "orgNavBarList",
      "orgNavBarTitle",
    ]),
  },
  methods: {
    mapPopup(item) {
      this.$store.commit("CLEAR_ALL", null);

      var imgArr = item.bgImg.split(",");

      this.$store.commit("SET_POPUPBGURL", imgArr[0]);
      this.$store.commit("SET_POPUPQRURL", item.QRImg);
      this.$store.commit("SET_POINTPOSITION", [
        Number(item.longitude),
        Number(item.latitude),
        Number(item.alt),
        Number(item.heading),
        Number(item.pitch),
        Number(item.roll),
      ]);
      this.$store.commit("SET_STATENAME", item.navTitle);
      this.$store.commit("SET_SITENAME", item.address);
      this.$store.commit("SET_TELEPHONE", item.telephone);
      this.$store.commit("SET_INTRODUCETEXT", item.introduce);
      this.$store.commit("SET_POPUPIMGATLAS", imgArr);
      if (item.videourl && item.videourl != "") {
        this.$store.commit("SET_MONITORURL", item.videourl);
      }

      this.newPopup(item);
      this.viewer.flyToPosition(
        new this.DC.Position(
          Number(item.longitude),
          Number(item.latitude),
          300,
          Number(item.heading),
          Number(item.pitch),
          Number(item.roll)
        ),
        function () {},
        3
      );
    },
    created () {
        this.DC = global.DC

    newPopup(item) {
      const position = this.DC.Transform.transformWGS84ToCartesian(
        new this.DC.Position(
          Number(item.longitude),
          Number(item.latitude),
          Number(item.alt)
        )
      );
      // 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);
    },
    computed: {
        ...mapGetters([
            'viewer',
            'popupBgUrl',
            'pupupQRUrl',
            // 点信息
            'pointPosition',
            // 点名称
            'stateName',
            // 地址
            'siteName',
            // 介绍
            'introduceText',
            // 全景地址
            'panoramaUrl',
            'orgNavBarList',
            'orgNavBarTitle'
        ])

    closeModel() {
      var path = this.$route.path;
      if (path.indexOf("/orgnav") != -1) {
        this.$store.dispatch("delVisitedViews", this.$route);
        this.$router.push("/pcLayout/default");
      }

      this.$store.commit("SET_ORGNAVBARTITLE", "");

      this.$store.commit("SET_ORGNAVBARFLAG", false);

      this.$store.commit("SET_ORGNAVBARLIST", []);
    },
    methods: {
        mapPopup (item) {
            this.$store.commit('CLEAR_ALL', null)

            var imgArr = item.bgImg.split(',')

            this.$store.commit('SET_POPUPBGURL', imgArr[0])
            this.$store.commit('SET_POPUPQRURL', item.QRImg)
            this.$store.commit('SET_POINTPOSITION', [Number(item.longitude), Number(item.latitude), Number(item.alt), Number(item.heading), Number(item.pitch), Number(item.roll)])
            this.$store.commit('SET_STATENAME', item.navTitle)
            this.$store.commit('SET_SITENAME', item.address)
            this.$store.commit('SET_TELEPHONE', item.telephone)
            this.$store.commit('SET_INTRODUCETEXT', item.introduce)
            this.$store.commit('SET_POPUPIMGATLAS', imgArr)
            if (item.videourl && item.videourl != '') {
                this.$store.commit('SET_MONITORURL', item.videourl)
            }

            this.newPopup(item)
            this.viewer.flyToPosition(
                new this.DC.Position(Number(item.longitude), Number(item.latitude), 300, Number(item.heading), Number(item.pitch), Number(item.roll)),
                function () {
                },
                3
            )
        },

        newPopup (item) {
            const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(Number(item.longitude), Number(item.latitude), Number(item.alt)))
            // 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)
        },

        closeModel () {
            var path = this.$route.path
            if (path.indexOf('/orgnav') != -1) {
                this.$store.dispatch('delVisitedViews', this.$route)
                this.$router.push('/pcLayout/default')
            }

            this.$store.commit('SET_ORGNAVBARTITLE', '')

            this.$store.commit('SET_ORGNAVBARFLAG', false)

            this.$store.commit('SET_ORGNAVBARLIST', [])
        }
    }
}
  },
};
</script>

<style scoped lang='scss'>
</style>
<style scoped lang="scss"></style>

 src/components/searchDetails/index.vue

@@ -1,292 +1,317 @@
<template>
    <div class="search-nav-bar" ref="searchNavBar">
        <div class="container">
            <div class="header" @mousedown="move" :class="{'move': moveFlag}">
                <div class="title">
                    <img class="icon deblurring" src="/img/icon/search.png" alt />
                    <span>查询结果</span>
                </div>
                <img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
            </div>
            <div class="content">
                <ul>
                    <li
                        v-for="(item, index) in searchPopupList"
                        :key="index"
                        @click="mapPopup(item)"
                    >
                        <img src="/img/navicon/tag.png" alt />
                        <span>{{item.mechanismname}}</span>
                    </li>
                </ul>
            </div>
  <div class="search-nav-bar" ref="searchNavBar">
    <div class="container">
      <div class="header" @mousedown="move" :class="{ move: moveFlag }">
        <div class="title">
          <img class="icon deblurring" src="/img/icon/search.png" alt />
          <span>查询结果</span>
        </div>
        <img
          class="close"
          src="/img/navicon/close.png"
          alt
          @click="closeModel"
        />
      </div>
      <div class="content">
        <ul>
          <li
            v-for="(item, index) in searchPopupList"
            :key="index"
            @click="mapPopup(item)"
          >
            <img src="/img/navicon/tag.png" alt />
            <span>{{ item.mechanismname }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { mapGetters } from "vuex";

export default {
    name: 'searchDetails',
    data () {
        return {
            moveFlag: false,
            DC: null
  name: "searchDetails",
  data() {
    return {
      moveFlag: false,
      DC: null,
    };
  },
  created() {
    this.DC = global.DC;
  },
  computed: {
    ...mapGetters([
      "viewer",
      "popupBgUrl",
      "pupupQRUrl",
      // 点信息
      "pointPosition",
      // 点名称
      "stateName",
      // 地址
      "siteName",
      // 介绍
      "introduceText",
      // 全景地址
      "panoramaUrl",
      "searchPopupList",
    ]),
  },
  methods: {
    move(e) {
      const that = this;
      const odiv = this.$refs.searchNavBar; // 获取目标元素
      // 算出鼠标相对元素的位置
      const disX = e.clientX - odiv.offsetLeft;
      const disY = e.clientY - odiv.offsetTop;

      const disH = odiv.offsetHeight;
      const disW = odiv.offsetWidth;

      document.onmousemove = (e) => {
        that.moveFlag = true;
        // 鼠标按下并移动的事件
        // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        let top = e.clientY - disY;

        // 绑定元素位置到positionX和positionY上面

        if (left >= window.innerWidth - disW) {
          left = window.innerWidth - disW;
        }
    },
    created () {
        this.DC = global.DC
    },
    computed: {
        ...mapGetters([
            'viewer',
            'popupBgUrl',
            'pupupQRUrl',
            // 点信息
            'pointPosition',
            // 点名称
            'stateName',
            // 地址
            'siteName',
            // 介绍
            'introduceText',
            // 全景地址
            'panoramaUrl',
            'searchPopupList'
        ])
    },
    methods: {
        move (e) {
            const that = this
            const odiv = this.$refs.searchNavBar // 获取目标元素
            // 算出鼠标相对元素的位置
            const disX = e.clientX - odiv.offsetLeft
            const disY = e.clientY - odiv.offsetTop

            const disH = odiv.offsetHeight
            const disW = odiv.offsetWidth

            document.onmousemove = (e) => {
                that.moveFlag = true
                // 鼠标按下并移动的事件
                // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                let left = e.clientX - disX
                let top = e.clientY - disY

                // 绑定元素位置到positionX和positionY上面

                if (left >= window.innerWidth - disW) {
                    left = window.innerWidth - disW
                }

                if (left <= 0) {
                    left = 0
                }

                if (top >= window.innerHeight - disH) {
                    top = window.innerHeight - disH
                }

                if (top <= 60) {
                    top = 60
                }

                // 移动当前元素
                odiv.style.left = (left) + 'px'
                odiv.style.top = (top) + 'px'
                odiv.style.bottom = 'auto'
            }
            document.onmouseup = (e) => {
                that.moveFlag = false
                document.onmousemove = null
                document.onmouseup = null
            }
        },

        mapPopup (item) {
            this.$store.commit('CLEAR_ALL', null)

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

            this.$store.commit('SET_POPUPBGURL', imgArr[0])
            this.$store.commit('SET_POPUPQRURL', item.codeurl)
            this.$store.commit('SET_POINTPOSITION', [Number(item.jd), Number(item.wd), Number(item.gd), Number(item.heading), Number(item.pitch), Number(item.roll)])
            this.$store.commit('SET_STATENAME', item.mechanismname)
            this.$store.commit('SET_SITENAME', item.address)
            this.$store.commit('SET_TELEPHONE', item.telephone)
            this.$store.commit('SET_INTRODUCETEXT', item.introduce)
            this.$store.commit('SET_PANORAMAURL', item.panoramaurl)
            this.$store.commit('SET_POPUPIMGATLAS', imgArr)
            if (item.videourl && item.videourl != '') {
                this.$store.commit('SET_MONITORURL', item.videourl)
            }
            if (item.jx != undefined && item.jx != '') {
                var tabOne = item.jx.split(',')
                this.$store.commit('SET_TEACHLIST', tabOne)
            } else {
                this.$store.commit('SET_TEACHLIST', [])
            }

            if (item.sh != undefined && item.sh != '') {
                var tabTwo = item.sh.split(',')
                this.$store.commit('SET_LIVELIST', tabTwo)
            } else {
                this.$store.commit('SET_LIVELIST', [])
            }

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

        newPopup (item) {
            const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(Number(item.jd), Number(item.wd), Number(item.gd), Number(item.heading), Number(item.pitch), Number(item.roll)))
            // 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)
        },

        closeModel () {
            this.$store.commit('SET_SEARCHPOPUPFLAG', false)

            this.$store.commit('SET_SEARCHPOPUPLIST', [])
        if (left <= 0) {
          left = 0;
        }
    }
}

        if (top >= window.innerHeight - disH) {
          top = window.innerHeight - disH;
        }

        if (top <= 60) {
          top = 60;
        }

        // 移动当前元素
        odiv.style.left = left + "px";
        odiv.style.top = top + "px";
        odiv.style.bottom = "auto";
      };
      document.onmouseup = (e) => {
        that.moveFlag = false;
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },

    mapPopup(item) {
      this.$store.commit("CLEAR_ALL", null);

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

      this.$store.commit("SET_POPUPBGURL", imgArr[0]);
      this.$store.commit("SET_POPUPQRURL", item.codeurl);
      this.$store.commit("SET_POINTPOSITION", [
        Number(item.jd),
        Number(item.wd),
        Number(item.gd),
        Number(item.heading),
        Number(item.pitch),
        Number(item.roll),
      ]);
      this.$store.commit("SET_STATENAME", item.mechanismname);
      this.$store.commit("SET_SITENAME", item.address);
      this.$store.commit("SET_TELEPHONE", item.telephone);
      this.$store.commit("SET_INTRODUCETEXT", item.introduce);
      this.$store.commit("SET_PANORAMAURL", item.panoramaurl);
      this.$store.commit("SET_POPUPIMGATLAS", imgArr);
      if (item.videourl && item.videourl != "") {
        this.$store.commit("SET_MONITORURL", item.videourl);
      }
      if (item.jx != undefined && item.jx != "") {
        var tabOne = item.jx.split(",");
        this.$store.commit("SET_TEACHLIST", tabOne);
      } else {
        this.$store.commit("SET_TEACHLIST", []);
      }

      if (item.sh != undefined && item.sh != "") {
        var tabTwo = item.sh.split(",");
        this.$store.commit("SET_LIVELIST", tabTwo);
      } else {
        this.$store.commit("SET_LIVELIST", []);
      }

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

    newPopup(item) {
      const position = this.DC.Transform.transformWGS84ToCartesian(
        new this.DC.Position(
          Number(item.jd),
          Number(item.wd),
          Number(item.gd),
          Number(item.heading),
          Number(item.pitch),
          Number(item.roll)
        )
      );
      // 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);
    },

    closeModel() {
      this.$store.commit("SET_SEARCHPOPUPFLAG", false);

      this.$store.commit("SET_SEARCHPOPUPLIST", []);
    },
  },
};
</script>

<style scoped lang='scss'>
<style scoped lang="scss">
.search-nav-bar {
    position: fixed;
    width: 322px;
    height: auto;
    border-radius: 8px;
    top: 140px;
    left: 140px;
    background-color: transparent;
    z-index: 999;
    font-size: 14px;
  position: fixed;
  width: 322px;
  height: auto;
  border-radius: 8px;
  top: 140px;
  left: 140px;
  background-color: transparent;
  z-index: 999;
  font-size: 14px;

    .container {
        .header {
            position: relative;
            border-radius: 8px 8px 0 0;
            width: 100%;
            height: 36px;
            line-height: 36px;
            background: rgba(0, 131, 176, 0.7); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  .container {
    .header {
      position: relative;
      border-radius: 8px 8px 0 0;
      width: 100%;
      height: 36px;
      line-height: 36px;
      background: rgba(0, 131, 176, 0.7); /* fallback for old browsers */
      background: -webkit-linear-gradient(
        to left,
        rgba(0, 180, 219, 0.7),
        rgba(0, 131, 176, 0.7)
      ); /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(
        to left,
        rgba(0, 180, 219, 0.7),
        rgba(0, 131, 176, 0.7)
      ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

            .title {
                padding-left: 10px;
      .title {
        padding-left: 10px;

                img {
                    width: 20px;
                    height: 20px;
                    vertical-align: middle;
                }

                span {
                    margin-left: 6px;
                    display: inline-block;
                    vertical-align: middle;
                    color: #fff;
                }
            }

            .close {
                position: absolute;
                right: 6px;
                top: 0;
                left: auto;
                bottom: 0;
                margin: auto;
                width: 14px;
                height: 14px;
                cursor: pointer;
            }
        img {
          width: 20px;
          height: 20px;
          vertical-align: middle;
        }

        .move {
            cursor: move;
        span {
          margin-left: 6px;
          display: inline-block;
          vertical-align: middle;
          color: #fff;
        }
      }

        .content {
            clear: both;
            width: 100%;
            height: 440px;
            margin-top: 0px;
            text-align: center;
            overflow-y: auto;
            background: rgba(0, 131, 176, 0.7); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            border-radius: 0 0 8px 8px;

            ul {
                padding: 15px;
                padding-top: 4px;

                li {
                    padding-left: 24px;
                    position: relative;
                    height: 40px;
                    line-height: 40px;
                    list-style: none;
                    border-bottom: 1px dashed #ccc;
                    text-align: left;

                    img {
                        position: absolute;
                        left: 0;
                        right: auto;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        width: 14px;
                    }

                    span {
                        color: #fff;
                        cursor: pointer;
                    }

                    span:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
      .close {
        position: absolute;
        right: 6px;
        top: 0;
        left: auto;
        bottom: 0;
        margin: auto;
        width: 14px;
        height: 14px;
        cursor: pointer;
      }
    }

    .move {
      cursor: move;
    }

    .content {
      clear: both;
      width: 100%;
      height: 440px;
      margin-top: 0px;
      text-align: center;
      overflow-y: auto;
      background: rgba(0, 131, 176, 0.7); /* fallback for old browsers */
      background: -webkit-linear-gradient(
        to left,
        rgba(0, 180, 219, 0.7),
        rgba(0, 131, 176, 0.7)
      ); /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(
        to left,
        rgba(0, 180, 219, 0.7),
        rgba(0, 131, 176, 0.7)
      ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      border-radius: 0 0 8px 8px;

      ul {
        padding: 15px;
        padding-top: 4px;

        li {
          padding-left: 24px;
          position: relative;
          height: 40px;
          line-height: 40px;
          list-style: none;
          border-bottom: 1px dashed #ccc;
          text-align: left;

          img {
            position: absolute;
            left: 0;
            right: auto;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 14px;
          }

          span {
            color: #fff;
            cursor: pointer;
          }

          span:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}
</style>

 src/router/axios.js

@@ -12,14 +12,18 @@
//   console.log(window.location);
//   console.log(url);
// }, 3000);
// window.$apiUrls = "http://171.34.197.243:782";
window.$apiUrls = "http://192.168.0.110:82";
const service = axios.create({
  //   baseURL: 'http://192.168.0.107:83',

  // baseURL: "http://localhost:82",
  // baseURL: "http://192.168.0.107:82",
  // baseURL: "http://192.168.0.107:80",
  baseURL: "http://192.168.0.110:82", //唐
  // baseURL: "http://192.168.0.110:82", //唐
  // baseURL: "http://171.34.197.243:790", //正常接口
  baseURL: window.$apiUrls, //2
  // baseURL: "http://171.34.197.243:82", //3
  // baseURL: "http://171.34.197.243:82/api", //验收
  // baseURL: "https://6e78efa6.cpolar.io/apis", //https接口
  // baseURL: url, //https接口

 src/store/getters.js

@@ -89,5 +89,8 @@
    labelLayerDataShow: (state) => state.popupParams.labelLayerDataShow, // 自定义标签弹窗显示
    closeMapClick: (state) => state.popupParams.closeMapClick, // 关闭地图点击，防止新增标签误触


    addIconsLayerIconPopup: (state) => state.popupParams.addIconsLayerIconPopup, // 自定义标签编辑窗口
    addIconsLayerIconPosition: (state) => state.popupParams.addIconsLayerIconPosition, // 自定义标签编辑窗口
}
export default getters

 src/store/modules/mobile.js

@@ -41,6 +41,8 @@
      pitch: -90,
      roll: 0,
    },
    zoomRange: [80, 200], //缩放程度
    frislayertHeight: 160, //默认弹窗高度
    perspectiveControl: "", //视角控制：高度、角度  ()=>{}
    perspectiveControls: "", //视角控制：高度、角度  ()=>{}

@@ -143,6 +145,14 @@
    //         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) {
      //关闭弹窗
@@ -254,9 +264,9 @@
        state.startPointFn(); //移动默认视角
        state.areaLayer.show = true; //绿布
        //2.5D视角限制
        state.mviewer.scene.screenSpaceCameraController.minimumZoomDistance = 80;
        state.mviewer.scene.screenSpaceCameraController.minimumZoomDistance = state.zoomRange[0];
        // 最大
        state.mviewer.scene.screenSpaceCameraController.maximumZoomDistance = 200;
        state.mviewer.scene.screenSpaceCameraController.maximumZoomDistance = state.zoomRange[1];
        // 设置相机缩小时的速率
        state.mviewer.scene.screenSpaceCameraController._minimumZoomRate = 2000;
        // 设置相机放大时的速率
@@ -389,6 +399,8 @@
      const nowHeight = Math.ceil(
        state.mviewer.camera.positionCartographic.height
      );
      // 传递响应数据
      commit("MSET_QUERY", data);
      // console.log(data);
      if (state.dimension == "3D") {
        Flys = [
@@ -411,7 +423,7 @@
          +data.lntLat[1] + 0.00048,
          // +data.lntLat[1] - 0.0022,
          // nowHeight,
          360,
          state.frislayertHeight,
        ];
        // console.log(nowHeight);
        clas = [
@@ -434,8 +446,7 @@
        );
        data.position = ellipsoid.cartographicToCartesian(cartographic);
      }
      // 传递响应数据
      commit("MSET_QUERY", data);

      // 定制化窗体
      const popupsDom = new global.DC.mobileDivForms(state.mviewer, {
        domId: "mobilePopup",
@@ -505,7 +516,7 @@
      } else {
        dispatch("mapFlyTo", {
          //飞入
          lntLat: [Position.lng, +Position.lat - 0.0003, 160],
          lntLat: [Position.lng, +Position.lat - 0.0003, Position.alt],
          heading: Position.heading,
          pitch: Position.pitch,
          roll: Position.roll,
@@ -632,7 +643,7 @@
              // dispatch("MSET_POINTDATA", data.lntLat);//传入标记点
              !state.MobileWindowsHide ||
                commit("MSET_MOBILEWINDOWSHIDE", false); // 显示弹窗
            }, 0);
            }, 100);
          }
        },
      });

 src/store/modules/pc/leftNavsData.js

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

        },
        addIconsLayerIcon({
            state,
            commit,
            dispatch
        }, val) {
            const divIcon = new global.DC.DivIcon(
                new global.DC.Position(
                    Number(val.lnglat[0]),
                    Number(val.lnglat[1]),
                    0
                ),
                `
                          <div class="tag-entitys-box">
                              <div class="tag-content">
                                  ${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);
            //打开编辑窗口弹窗
            new global.DC.DivForms(val.viewer, {
                domId: "leftNavsAdd",
                position: [
                    global.DC.Transform.transformWGS84ToCartesian(
                        new global.DC.Position(
                            Number(val.lnglat[0]),
                            Number(val.lnglat[1]),
                            Number(0)
                        )
                    ),
                ],
            });
            commit("SET_addIconsLayerIconPosition", val.lnglat)
            commit("SET_addIconsLayerIconPopup", true);
        }
    },
    mutations: {
        createAddIconsLayerIconLayer(state, val) {
            if (state.addIconsLayerIconLayer == null) {
                state.addIconsLayerIconLayer = new global.DC.HtmlLayer("addIconsLayerIconLayer");
                val.viewer.addLayer(state.addIconsLayerIconLayer);
            }
            if (val.clear) {
                state.addIconsLayerIconLayer.clear();
            }
            console.log(state.addIconsLayerIconLayer, "see")
        },
        addIconsLayerIconmoveMessage(state, val) {
            console.log(val)
            if (val.b == "") {
                val.viewer.tooltip.enable = false;
            } else {
                val.viewer.tooltip.enable = true;
                val.viewer.tooltip.showAt(val.e.windowPosition, val.b);
            }
        },
        SET_addIconsLayerIconPopup(state, addIconsLayerIconPopup) {
            state.addIconsLayerIconPopup = addIconsLayerIconPopup
            if (!state.addIconsLayerIconPopup) { //关闭即关闭图层 并刷新标签
                if (state.addIconsLayerIconLayer) {
                    state.addIconsLayerIconLayer.clear();
                    state.addIconsLayerIconLayer.remove();
                    state.addIconsLayerIconLayer = null;
                }
            }
        },
        SET_addIconsLayerIconPosition(state, addIconsLayerIconPosition) {
            state.addIconsLayerIconPosition = addIconsLayerIconPosition
        },
    }
}

export default leftNavsData

 src/store/modules/popupParams.js

@@ -1,5 +1,7 @@
import leftNavsData from './pc/leftNavsData'
const popupParams = {
    state: {
        ...leftNavsData.state,
        popupBgUrl: null,
        pupupQRUrl: null,
        terminus: null,
@@ -30,8 +32,13 @@
        closeMapClick: false, //关闭地图点击，防止新增标签误触
    },
    mutations: {
        ...leftNavsData.mutations,
        SET_POPUPBGURL(state, popupBgUrl) {
            state.popupBgUrl = popupBgUrl
            // console.log(popupBgUrl, "see33333")
            if (!popupBgUrl) {
                return;
            }
            state.popupBgUrl = popupBgUrl;
        },
        SET_POPUPQRURL(state, pupupQRUrl) {
            state.pupupQRUrl = pupupQRUrl
@@ -127,6 +134,7 @@
        }
    },
    actions: {
        ...leftNavsData.actions,
        openPopups({
            state,
            commit,
@@ -173,8 +181,12 @@
            commit("SET_STATENAME", value.item.mechanismname);
            commit("SET_PANORAMAURL", value.item.panoramaurl);
            commit("SET_INTRODUCETEXT", value.item.introduce);
            var imgArr = value.item.tpurl.split(",");
            var imgArr = [];
            if (value.item.tpurl) {
                imgArr = value.item.tpurl.split(",");
            }
            commit("SET_POPUPBGURL", imgArr[0]);
            commit('SET_POPUPIMGATLAS', imgArr)
            commit("SET_POPUPQRURL", value.item.codeurl);
            commit("SET_POINTPOSITION", [
                Number(value.lng),
@@ -184,7 +196,6 @@
                Number(-90),
                Number(0),
            ]);
            commit('SET_POPUPIMGATLAS', imgArr)
            commit("SET_DETAILSPOPUP", true);
        },
        pcMoveView({

 src/styles/divforms/divForms.scss

@@ -15,7 +15,8 @@
}

.divForms-theme .area {
    background-image: linear-gradient(135deg, transparent 30px, #28bbf06c 30px, #28bbf06c 50%, transparent 50%), linear-gradient(-45deg, transparent 30px, #28bbf06c 30px, #28bbf06c 50.1%, transparent 50%);
    background-image: linear-gradient(135deg, transparent 30px, #28bbf06c 30px, #28bbf06c 50%, transparent 50%),
        linear-gradient(-45deg, transparent 30px, #28bbf06c 30px, #28bbf06c 50.1%, transparent 50%);
}

.divForms .area {
@@ -125,7 +126,7 @@
}

.divForms .title::before {
    content: '';
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
@@ -177,7 +178,7 @@
    background-color: #333;
    border-radius: 3px;
    opacity: 0;
    transition: all .3s ease-in;
    transition: all 0.3s ease-in;
}

.divForms .data-value-status-1 {
@@ -213,9 +214,87 @@
        height: 120px;
        text-align: center;

        &>div {
        & > div {
            line-height: 48px;
        }
    }
}

}
//编辑自定义标签样式
.addIconsLayer {
    margin-top: 5px;
    width: 100%;
    height: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
    .addIconsLayerin {
        margin: 5px 0;
        background-color: #29baf1;
        .el-icon--right {
            color: #fff !important;
        }
    }
}
.addIconsLayerBut {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0;
    .el-button--primary {
        background-color: #29baf1 !important;
        border: 1px solid #29baf1 !important;
    }
}
.addIconFromInput {
    width: 90%;
    background-color: transparent !important;
    color: #fff !important;
    input {
        background-color: transparent !important;
        color: #fff !important;
        border: 1px solid transparent !important;
        border-bottom: 2px solid #fff !important;
        &::-webkit-input-placeholder {
            color: #0378d6;
        }
    }
    .addIconFromInputicon {
        color: #fff !important;
    }
    .el-input-group__prepend {
        padding-left: 5px;
        width: 60px !important;
        background-color: transparent !important;
        color: #fff !important;
        border: 1px solid transparent !important;
        padding: 0 !important;
        cursor: default !important;
    }
}

.el-dropdown-menu.el-popper {
    background-color: #29baf1 !important;
    border: 1px solid #29baf1 !important;
    li {
        color: #fff !important;
        &:hover {
            color: #0378d6 !important;
            background-color: #fff !important;
        }
    }
}

.addIconsLayerinimgs {
    width: 100%;
    max-width: 625px;
    //     height: auto;
    display: flex;

    justify-content: center;
    flex-wrap: wrap;
}

.isOverImgs .el-upload--picture-card {
    display: none;
}