便利贴--10{Cesium+js随地图弹窗}

最新推荐文章于 2024-07-26 11:41:15 发布

轻动琴弦

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量301

点赞数

分类专栏： javascript Cesium 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/hacker12356/article/details/122478274

版权

javascript 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

Cesium

2 篇文章 0 订阅

订阅专栏

便利贴--10{Cesium+js随地图弹窗}

使用
构造函数主体
html展示页面--可查看上一篇--便利贴9有一部分
当然需要在map页面先把窗口添加一下
原理是调用实例化函数，把点数据给赋值进去，并在地图改变时候改变其状态，然后把主体append进mobile-map_popup_content里

使用

// 定制化窗体
      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],
      });

构造函数主体


import DC from '@dvgis/dc-sdk/dist/dc.base.min' // 基础包
import DcCore from '@dvgis/dc-sdk/dist/dc.core.min' // 核心包

var $ = window.$

DC.use(DcCore) // 安装DC核心库

class mobileDivForms {
    /**
     * @popup 存放 dom 相关
     *
     */
    constructor(viewer, popup) {
        this._viewer = viewer;
        this._popup = popup;
        this._position = popup.position;
        this._title = popup.title;
        this._content = popup.content;
        this.appendPopup();
        this.isOpen = true;
    }

    get viewer() {
        return this._viewer
    }

    get title() {
        return this._title
    }

    get content() {
        return this._content
    }

    get popup() {
        return this._popup
    }

    get position() {
        return this._position
    }

    appendPopup() {
        /**
         * @domId 存放 dom 的id, 多个数组，单个字符串
         */

        this.createVideoWindowAll(this._popup.domId, this._popup.className, this._position[0])
    }

    // 创建元素并追加
    createVideoWindowAll(id, className, position) {
        let dom = document.getElementById('mobile-map_popup_content');
        dom.style.display = 'block';

        var childs = document.getElementById('mobile-map_popup_content').getElementsByTagName('div')

        if (childs.length > 0) {
            for (var i = 0; i < childs.length; i++) {
                document.getElementById('mobile-map_popup_content').removeChild(childs[i])
            }
        }

        var self = this

        var el = $("<div class=''></div>")

        // var titleDiv = $("<div class='mobiletitle'></div>").text(this._title)
        // var labelContent = $("<div class='mobilelabel-content'></div>").append(this._content)

        // el.append(titleDiv)
        // el.append(labelContent)
        el.append(this._content)

        el.attr('id', id)

        el.addClass(className || '')

        $('#mobile-map_popup_content').append(el)
        // let time;
        // function cons(e) {
        //     time = setTimeout(() => {
        //         console.log(e)
        //         console.log(e.sun._drawingBufferHeight)
        //         console.log("roll: ", e.camera.roll)
        //         console.log("pitch: ", e.camera.pitch)
        //         console.log("heading: ", e.camera.heading)
        //         clearTimeout(time);
        //         time = "";
        //     }, 2000);
        // }

        this._viewer.scene.postRender.addEventListener(function (e) {
            if (!self.isOpen) {
                return;
            }
            const windowCoord = DC.Namespace.Cesium.SceneTransforms.wgs84ToWindowCoordinates(
                self._viewer.scene,
                position
            )
            // time || cons(e);
            self.positionPopUp(windowCoord, id)
        })
    }

    positionPopUp(windowCoord, id) {
        if (!windowCoord) {
            return;
        }
        // console.log(windowCoord)
        const wx = document.getElementById('app').clientWidth;
        const x = windowCoord.x - (wx / 100 * 35);
        const y = windowCoord.y - document.getElementById(id).offsetHeight - 15;
        // x = windowCoord.x - document.getElementById(id).offsetWidth

        // document.getElementById(id).style.cssText = `
        document.getElementById(id).style.cssText = `
        visibility:visible;
        z-index:98;
        transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
        `
    }
    closeOur() {
        this.isOpen = false;
        let dom = document.getElementById('mobile-map_popup_content');
        dom.style.display = 'none';
        // var childs = document.getElementById('mobile-map_popup_content').getElementsByTagName('div')

        // if (childs.length > 0) {
        //     for (var i = 0; i < childs.length; i++) {
        //         document.getElementById('mobile-map_popup_content').removeChild(childs[i])
        //     }
        // }
    }
}

export default mobileDivForms

html展示页面–可查看上一篇–便利贴9有一部分

<template>
  <div
    ref="mobile-mapContentContent"
    v-show="!MobileWindowsHide"
    id="mobile-map_content_content"
  >
    <div class="mobiletitle">
      {{ title }}
      <span
        class="mobile_audio"
        @click="openAudio"
        v-show="introduce && !video"
      >
        <i class="el-icon-video-play icon" v-show="!audioState"></i>
        <i class="el-icon-video-pause icon" v-show="audioState"></i>
        <!-- <div id="bdtts_div_id">
          <audio id="tts_autio_id" autoplay="autoplay">
            <source
              id="tts_source_id"
              src="http://tts.baidu.com/text2audio?lan=zh&amp;ie=UTF-8&amp;spd=5&amp;per=1&amp;text=请输入文字"
              type="audio/mpeg"
            />
            <embed id="tts_embed_id" height="0" width="0" src="" />
          </audio>
        </div> -->
      </span>
    </div>
    <div class="mobilelabel-content">
      <div class="mobile-popup-imgs-heard">
        <div class="mobile-popup-imgs-h-close">
          <i class="el-icon-close icon" @click="closeWindow"></i>
        </div>
        <video :src="video" controls="controls" autoplay v-if="video"></video>
        <img :src="url" alt="" v-show="url && !video" />
        <el-image
          style="width: 100px; height: 100px"
          :src="url"
          id="mobileBigImgs"
          v-show="false"
          :preview-src-list="srcList"
        >
        </el-image>
        <!-- <div>{{ query.query }}</div> -->
        <div class="mobileBig-center-our" v-show="!video">
          <div
            v-for="(item, index) in center"
            :key="index"
            class="mobileBig-center"
          >
            <div class="m-c-title">{{ item.name }}：</div>
            <span class="m-c-center">{{ item.value }}</span>
          </div>
          <div
            class="mobileBig-center-introduce"
            style="padding-top: 10px"
            v-show="introduce"
            v-html="introduce"
          ></div>
        </div>
      </div>
      <div class="mobile-popup-control">
        <div v-for="(item, index) in seebut" :key="index">
          <el-link
            :icon="
              item.name == '实景'
                ? 'el-icon-place'
                : item.name == '图集'
                ? 'el-icon-data-board'
                : item.name == '去这'
                ? 'el-icon-finished'
                : item.name == '视频' || item.name == '返回'
                ? 'el-icon-video-camera-solid'
                : ''
            "
            class="mobilePopupOurOnce_r_d_in"
            @click="openOnce(item.name)"
            >{{ item.name }}</el-link
          >
          <el-divider
            direction="vertical"
            class="mobilePopupOurOnce_r_d_in"
            v-if="index != seebut.length - 1"
          ></el-divider>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "mobileWindow",
  computed: {
    ...mapGetters([
      "MobileWindowsHide",
      "query",
      "MobileWindowChangeData",
      "audioState",
    ]),
  },
  watch: {
    MobileWindowChangeData() {
      this.$store.dispatch("MSET_GETAUDIOBEGIN", "notOpen");
      //数据更改
      //   this.fullscreenLoading = true;
      if (!this.MobileWindowsHide) {
        this.video = ""; //清除视频
        let queryData = this.query.query;
        console.log(queryData, 789);
        this.title = queryData.name;

        if (queryData.seebut) {
          this.seebut = queryData.seebut;
          if (queryData.from == "活动") {
            this.seebut = [];
            this.seebut.push({
              name: "图集",
            });
            this.seebut.push({
              name: "显示活动",
            });
          }
          for (let k in this.seebut) {
            if (this.seebut[k].name == "定位") {
              this.seebut.splice(k, k + 1);
            }
          }
          this.seebut.push({
            name: "去这",
          });
        } else {
          this.seebut = [
            {
              name: "实景",
            },
            {
              name: "图集",
            },
            {
              name: "去这",
            },
          ];
        }
        if (queryData.bgImg) {
          this.srcList = queryData.bgImg.split(",");
          this.url = this.srcList[0];
        } else {
          this.seebut = this.seebut.filter((res) => {
            return res.name != "图集";
          });
        }
        if (queryData.video) {
          if (queryData.from == "labels") {
            this.seebut = [];
            this.video = queryData.video;
          } else {
            this.seebut.push({ name: "视频" });
          }
        }
        this.center = [];
        for (let k in queryData) {
          for (let n in this.getCenter) {
            if (
              k == this.getCenter[n].name &&
              queryData[k] &&
              queryData.from != "活动" &&
              this.getCenter[n].value == "地址"
            ) {
              this.center.push({
                name: this.getCenter[n].value,
                value: queryData[k] ? queryData[k] : "暂无",
              });
            }
            if (k == "introduce") {
              this.introduce = queryData[k];
              if (this.introduce) {
                setTimeout(() => {
                  let Str = document.querySelector(
                    ".mobileBig-center-introduce"
                  ).innerText;
                  this.$store.dispatch("MSET_GETAUDIO", Str); //加入语音
                }, 20);
              }
            }
          }
        }
      }
    },
  },
  data() {
    return {
      getCenter: [
        {
          name: "websiteUrl",
          value: "网址",
        },
        {
          name: "telePhone",
          value: "电话",
        },
        {
          name: "address",
          value: "地址",
        },
        // {
        //   name: "introduce",
        //   value: "详情",
        // },
      ],
      introduce: "暂无详情数据",
      title: "",
      fullscreenLoading: false,
      url: "",
      video: "",
      positions: "",
      srcList: [],
      seebut: [],
      center: [],
    };
  },
  methods: {
    openOnce(val) {
      let that = this;
      that.routerS = [];
      let once = true;
      let query = this.query.query;
      if (val == "去这") {
        //定位
        // console.log(this.query.query);
        // that.$store.commit("set_endPosition", this.query.query.lntLat);
        let ints = {
          // start: [114.039946, 27.628475],
          // end: that.query.query.lntLat,
          start: [+that.query.query.lntLat[0], +that.query.query.lntLat[1]],
          end: [114.031946, 27.621475],
          type: "driving",
          fn: function (datas) {
            //获取回调路径
            that.routerS.push(datas);
            if (once) {
              once = false;
              //加载第一条线路
              that.$store.commit("set_choiceRouterS", 0);
              that.$store.dispatch("MSET_DRAWALINELAYER", [datas.Str, query]);
              that.$store.commit("cameraSetView", ints.start);
            }
          },
        };
        that.$store.dispatch("MSET_GOTOWHERE", ints);
      } else if (val == "实景") {
        this.$store.commit(
          "MSET_OPENMOBILEPANORAMA",
          "https://www.kuleiman.com/110487/index.html?m=1"
        );
      } else if (val == "图集") {
        let imgsDom = document.getElementById("mobileBigImgs");
        if (imgsDom) {
          imgsDom.click();
        }
      } else if (val == "视频") {
        this.seebut[this.seebut.length - 1].name = "返回";
        this.video = this.query.query.video;
      } else if (val == "返回") {
        this.seebut[this.seebut.length - 1].name = "视频";
        this.video = "";
      } else if (val == "显示活动") {
        let addressOur = this.changeData(query, "addressname", "address");
        let lxOur = this.changeData(query, "lxname", "lx");
        console.log(addressOur, lxOur);
        that.$store.dispatch("MSET_DRAWALINELAYERMANY", [
          lxOur,
          addressOur,
          query,
        ]);
      }
    },
    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;
    },
    closeWindow() {
      if (!this.MobileWindowsHide) {
        this.$store.dispatch("closeMobileWindowsDom"); //关闭随地图弹窗
      }
    },
    openAudio() {
      if (this.introduce) {
        this.$store.dispatch("MSET_GETAUDIOBEGIN");
      }
    },
  },
};
</script>

<style lang="scss">
.mobile_audio {
  margin-left: 3px;
  .icon {
    font-size: 20px;
  }
}
#bdtts_div_id {
  width: 100px;
  height: 100px;
  display: inline-block;
  position: absolute;
  top: -50px;
  background-color: #fff;
}
</style>

当然需要在map页面先把窗口添加一下

<template>
  <div id="mobile-viewer-container">
    <!-- 随地图改变图标弹窗↓ -->
    <div id="mobile-map_popup_content"></div>
    <mobileWindow></mobileWindow>
  </div>
</template>

原理是调用实例化函数，把点数据给赋值进去，并在地图改变时候改变其状态，然后把主体append进mobile-map_popup_content里

//随地图移动弹窗
#mobile-map_popup_content {
  //弹窗
  width: 100%;
  position: fixed;
  z-index: 100;
  left: -1000px;
  box-sizing: border-box;

  #mobilePopup {
    width: 70%;
    left: 1000px;
    position: absolute;
    height: auto;
    // background-color: #fff;
    background-image: linear-gradient(
        // 135deg,
        // rgba(40,187,240, 0.5) 50%,
        // transparent 50%
        rgba(40, 187, 240, 0.5) 35px,
        rgba(40, 187, 240, 0.5) 35px,
        rgba(40, 187, 240, 0.5) calc(100% - 34px),
        transparent calc(100% - 34px)
      ),
      linear-gradient(
        // -45deg,
        // rgba(40,187,240, 0.5) 50.1%,
        // transparent 50%
        transparent 35px,
        rgba(40, 187, 240, 0.5) 35px,
        rgba(40, 187, 240, 0.5) calc(100% - 0px),
        transparent calc(100% - 0px)
      );
    // background-image: linear-gradient(135deg, transparent 30px, rgba(40,187,240, 0.5) 30px, rgba(40,187,240, 0.5) 50%, transparent 50%),
    //     linear-gradient(-45deg, transparent 30px, rgba(40,187,240, 0.5) 30px, rgba(40,187,240, 0.5) 50.1%, transparent 50%);
    border-radius: 10px;
    position: relative;

    .mobiletitle {
      // width: calc(90% - 1px);
      color: #fff;
      width: 100%;
      height: 35px;
      // background-image: linear-gradient(135deg, transparent 25px, #29baf1 25px);
      background-image: linear-gradient(
        rgba(41, 186, 241, 0.5),
        rgba(41, 186, 241, 0.5)
      );

      // background-image: linear-gradient(#29baf1, #28bbf0);
      // background-color: #f7f7f7;
      border-bottom: 1px solid #ebebeb;
      font-size: 16px;
      border-radius: 10px 10px 0 0;
      padding: 8px 14px;
      padding-right: 27px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      line-height: 20px;
      box-sizing: border-box;
    }

    .mobilelabel-content {
      width: 100%;
      height: auto;

      // 内容样式
      .mobile-popup-imgs-heard {
        .mobile-popup-imgs-h-close {
          width: 35px;
          height: 34px;
          // background-image: linear-gradient(rgba(41,186,241, 0.5), rgba(41,186,241, 0.5));
          // background-image: linear-gradient(#29baf1, #28bbf0);
          // background-color: #f7f7f7;
          background-color: transparent;
          position: absolute;
          @extend .centersFlex;
          border-radius: 100px;
          right: 0;
          top: 0;

          .icon {
            color: #fff;
            font-size: 25px;
          }
        }

        width: 100%;
        padding: 10px;
        text-align: justify;
        letter-spacing: 1px;
        box-sizing: border-box;
        video {
          width: 100%;
          height: 100%;
        }
        img {
          margin-left: calc(50% - 35px);
          width: 70px;
          height: 70px;
        }

        //内容显示
        $centerFontSize: 13px;

        .mobileBig-center-our {
          width: 100%;
          height: auto;
          font-size: $centerFontSize;

          .mobileBig-center {
            width: 100%;
            min-height: 30px;
            border-bottom: 1px solid #f7f7f7;
            @extend .centersFlex;

            .m-c-title {
              color: #fff;
              width: 21%;
            }

            .m-c-center {
              width: 79%;
              // text-indent: 2em;
              word-wrap: break-word;
              color: #fff;
              line-height: 25px;
            }
          }

          .mobileBig-center-introduce {
            width: 100%;
            height: auto;
            // border: 1px solid red;
            word-wrap: break-word;
            text-indent: 2em;
            color: #fff;
          }
        }
      }

      .mobile-popup-control {
        width: 100%;
        height: 20px;
        // background-color: #f7f7f7;
        border-top: 1px solid #ebebeb;
        padding: 5px 0 8px 0;
        border-radius: 0 0 10px 10px;
        display: flex;
        align-items: center;
        background-image: linear-gradient(
          rgba(41, 186, 241, 0.5),
          rgba(41, 186, 241, 0.5)
        );
        // background-image: linear-gradient(#29baf1, #28bbf0);
        justify-content: center;
        position: relative;

        &::before {
          content: "";
          width: 0px;
          height: 0px;
          // background-image: linear-gradient(rgba(41,186,241, 0.5), rgba(41,186,241, 0.5));
          border-top: 8px solid transparent;
          border-bottom: 8px solid rgba(25, 179, 240, 0.5);
          border-left: 8px solid transparent;
          border-right: 8px solid rgba(25, 179, 240, 0.5);
          position: absolute;
          bottom: -8px;
          left: calc(50% - 8px);
          transform: rotate(45deg);
        }

        .mobilePopupOurOnce_r_d_in {
          color: #fff;
        }
      }
    }
  }
}