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

liuyg

2022-03-04 a22aa1086eeef39a26cc161326ce09cd183185ea

 src/pcviews/specialmap/welcome.vue

@@ -1,215 +1,220 @@
/*
 * @Author: Morpheus
 * @Name: 社区迎新
 * @Date: 2021-11-15 17:14:47
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-01-26 10:51:24
 */
/* * @Author: Morpheus * @Name: 校区迎新 * @Date: 2021-11-15 17:14:47 * @Last
Modified by: Morpheus * @Last Modified time: 2022-01-26 10:51:24 */
<template>
    <div>
        <div class="welcome-container">
            <div class="header">
                <div class="title">
                    {{ title }}
                    <a href="javascript:void(0);"
                       title="全景浏览">
                        <img @click="panoramaPlay"
                             class="panorama-control"
                             src="/img/icon/panorama.png"
                             alt="">
                    </a>
                    <a href="javascript:void(0);"
                       title="语音介绍">
                        <img @click="audioPlay"
                             class="audio-control"
                             src="/img/navicon/audio.png"
                             alt="">
                    </a>
                    <a href="javascript:void(0);"
                       title="关闭">
                        <img @click="closeModel"
                             class="close-box"
                             src="/img/navicon/close.png"
                             alt="">
                    </a>
                </div>
            </div>
            <div class="content-box">
                <div class="img-exhibition">
                    <div class="content">
                        <el-carousel :interval="5000"
                                     arrow="always"
                                     height="300px">
                            <el-carousel-item v-for="item in list"
                                              :key="item">
                                <el-image :src="item"
                                          :preview-src-list="[item]">
                                </el-image>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>
                <div class="organizer">
                    主办：{{ sponsor }}
                </div>
                <div class="undertake">
                    承办：{{ undertake }}
                </div>
                <div class="time-box">
                    时间：{{ time }}
                </div>
                <div class="text-introduce">
                    <div class="title">
                        相关介绍：
                    </div>
                    <div class="content">
                        <p v-text="introduce">

                        </p>
                    </div>
                </div>
                <div class="panorama-box" v-show="panoramaShow">
                    <div class="title">
                        全景浏览
                        <a href="javascript:void(0);"
                           title="关闭">
                            <img @click="panoramaShow = false, panoramaUrl = ''"
                                 class="close-box"
                                 src="/img/navicon/close.png"
                                 alt="">
                        </a>
                    </div>
                    <div class="content">
                        <iframe style="width: 100%; height: 100%" :src="panoramaUrl" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
  <div>
    <div class="welcome-container">
      <div class="header">
        <div class="title">
          {{ title }}
          <a href="javascript:void(0);" title="全景浏览">
            <img
              @click="panoramaPlay"
              class="panorama-control"
              src="/img/icon/panorama.png"
              alt=""
            />
          </a>
          <a href="javascript:void(0);" title="语音介绍">
            <img
              @click="audioPlay"
              class="audio-control"
              src="/img/navicon/audio.png"
              alt=""
            />
          </a>
          <a href="javascript:void(0);" title="关闭">
            <img
              @click="closeModel"
              class="close-box"
              src="/img/navicon/close.png"
              alt=""
            />
          </a>
        </div>
      </div>
      <div class="content-box">
        <div class="img-exhibition">
          <div class="content">
            <el-carousel :interval="5000" arrow="always" height="300px">
              <el-carousel-item v-for="item in list" :key="item">
                <el-image :src="item" :preview-src-list="[item]"> </el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="organizer">主办：{{ sponsor }}</div>
        <div class="undertake">承办：{{ undertake }}</div>
        <div class="time-box">时间：{{ time }}</div>
        <div class="text-introduce">
          <div class="title">相关介绍：</div>
          <div class="content">
            <p v-text="introduce"></p>
          </div>
        </div>
        <div class="panorama-box" v-show="panoramaShow">
          <div class="title">
            全景浏览
            <a href="javascript:void(0);" title="关闭">
              <img
                @click="(panoramaShow = false), (panoramaUrl = '')"
                class="close-box"
                src="/img/navicon/close.png"
                alt=""
              />
            </a>
          </div>
          <div class="content">
            <iframe
              style="width: 100%; height: 100%"
              :src="panoramaUrl"
              frameborder="0"
            ></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { getWelcome } from '@/api/pc/public/specialmap'
import { mapGetters } from 'vuex'
import { getWelcome } from "@/api/pc/public/specialmap";
import { mapGetters } from "vuex";

export default {
    data () {
        return {
            time: '',
            sponsor: '',
            undertake: '',
            title: '',
            introduce: '',
            list: [],
            pathList: [],
            pointNameList: [],
            pointList: [],
            DC: null,
            pathLayer: null,
            pointLayer: null,
            panoramaUrlOne: '',
            panoramaUrl: '',
            audioSource: '',
            audioFlag: false,
            audioCourse: false,
            audioSynth: null,
            audioMsg: null,
            panoramaShow: false
  data() {
    return {
      time: "",
      sponsor: "",
      undertake: "",
      title: "",
      introduce: "",
      list: [],
      pathList: [],
      pointNameList: [],
      pointList: [],
      DC: null,
      pathLayer: null,
      pointLayer: null,
      panoramaUrlOne: "",
      panoramaUrl: "",
      audioSource: "",
      audioFlag: false,
      audioCourse: false,
      audioSynth: null,
      audioMsg: null,
      panoramaShow: false,
    };
  },
  created() {},
  mounted() {
    // console.log("显示", "see1");

    this.DC = global.DC;

    this.audioSynth = window.speechSynthesis;

    this.audioMsg = new window.SpeechSynthesisUtterance();

    this.audioMsg.onend = function () {
      // this.audioSynth.cancel();
      this.audioFlag = false;
      this.audioCourse = false;
    };
    this.getData();
  },
  computed: {
    ...mapGetters([
      "viewer",
      // 校区内导航的显示关闭
      "campusNavFlag",
      "orgNavBarFlag",
      "arcNavBarFlag",
    ]),
  },
  methods: {
    getData() {
      getWelcome({ hdname: "校区迎新" }).then((res) => {
        var result = res.data.data;
        this.title = result.hdname;
        this.time = result.time;
        this.sponsor = result.sponsor;
        this.undertake = result.undertake;
        this.panoramaUrl = result.panoramaurl;
        this.panoramaUrlOne = result.panoramaurl;
        this.introduce = result.context;
        this.audioSource = result.context;

        this.audioPlay();

        this.list = result.tpurl.split(",");
        this.pointNameList = result.addressname.split(",");
        this.pointList = result.address.split(";");

        var a = result.lx.split(";");

        a.forEach((item) => {
          var b = item.split("(");
          var c = b[1].substr(0, b[1].length - 1);
          var d = c.split(",");
          var j = [];
          d.forEach((it) => {
            var e = it.split(" ");
            var f = e.join(",");
            j.push(f);
          });
          var k = j.join(";");
          this.pathList.push(k);
        });

        this.pathLayer = new this.DC.VectorLayer("pathLayer");
        this.viewer.addLayer(this.pathLayer);

        this.pointLayer = new this.DC.HtmlLayer("pointLayer");
        this.viewer.addLayer(this.pointLayer);

        this.pathList.forEach((item) => {
          this.drawPolyline(item);
        });

        this.pointList.forEach((item, index) => {
          this.drawPoint(item.split(","), this.pointNameList[index]);
        });
        if (this.pointList.length > 0) {
          this.$store.dispatch("pcMoveView", {
            viewer: this.viewer,
            jd: +this.pointList[0].split(",")[0] - 0.0005,
            wd: this.pointList[0].split(",")[1],
          });
        } else {
          this.$store.dispatch("pcMoveView", {
            viewer: this.viewer,
            jd: +this.pathList[0].split(";")[0].split(",")[0] - 0.0005,
            wd: this.pathList[0].split(";")[0].split(",")[1],
          });
        }
      });
    },
    created () {
    drawPolyline(item) {
      const polyline = new this.DC.Polyline(item);

      polyline.setStyle({
        width: 6,
        arcType: true,
        material: new this.DC.PolylineImageTrailMaterialProperty({
          color: new this.DC.Color(255, 0, 0),
          speed: 60,
          image: "/img/icon/right.png",
          repeat: { x: 320, y: 1 },
        }),
        clampToGround: true,
      });

      this.pathLayer.addOverlay(polyline);
    },
    mounted () {
        this.DC = global.DC

        this.audioSynth = window.speechSynthesis

        this.audioMsg = new window.SpeechSynthesisUtterance()

        this.audioMsg.onend = function () {
            this.audioSynth.cancel()
            this.audioFlag = false
            this.audioCourse = false
        }

        getWelcome({ hdname: '社区迎新' }).then((res) => {
            var result = res.data.data
            this.title = result.hdname
            this.time = result.time
            this.sponsor = result.sponsor
            this.undertake = result.undertake
            this.panoramaUrl = result.panoramaurl
            this.panoramaUrlOne = result.panoramaurl
            this.introduce = result.context
            this.audioSource = result.context
            this.list = result.tpurl.split(',')
            this.pointNameList = result.addressname.split(',')
            this.pointList = result.address.split(';')

            var a = result.lx.split(';')

            a.forEach(item => {
                var b = item.split('(')
                var c = b[1].substr(0, b[1].length - 1)
                var d = c.split(',')
                var j = []
                d.forEach(it => {
                    var e = it.split(' ')
                    var f = e.join(',')
                    j.push(f)
                })
                var k = j.join(';')
                this.pathList.push(k)
            })

            this.pathLayer = new this.DC.VectorLayer('pathLayer')
            this.viewer.addLayer(this.pathLayer)

            this.pointLayer = new this.DC.HtmlLayer('pointLayer')
            this.viewer.addLayer(this.pointLayer)

            this.pathList.forEach(item => {
                this.drawPolyline(item)
            })

            this.pointList.forEach((item, index) => {
                this.drawPoint(item.split(','), this.pointNameList[index])
            })
        })
    },
    computed: {
        ...mapGetters([
            'viewer',
            // 社区内导航的显示关闭
            'campusNavFlag',
            'orgNavBarFlag',
            'arcNavBarFlag'
        ])
    },
    methods: {
        drawPolyline (item) {
            const polyline = new this.DC.Polyline(item)

            polyline.setStyle({
                width: 6,
                arcType: true,
                material: new this.DC.PolylineImageTrailMaterialProperty({
                    color: new this.DC.Color(255, 0, 0),
                    speed: 60,
                    image: '/img/icon/right.png',
                    repeat: { x: 320, y: 1 }
                }),
                clampToGround: true
            })

            this.pathLayer.addOverlay(polyline)
        },
        drawPoint (item, name) {
            const divIcon = new this.DC.DivIcon(
                new this.DC.Position(Number(item[0]), Number(item[1]), 0),
                `
    drawPoint(item, name) {
      const divIcon = new this.DC.DivIcon(
        new this.DC.Position(Number(item[0]), Number(item[1]), 0),
        `
                    <div class="point-entitys-box">
                        <div class="point-logo">
                            <img src="/img/icon/activity.png">
@@ -219,60 +224,199 @@
                        </div>
                    </div>
                `
            )
            this.pointLayer.addOverlay(divIcon)
        },
        audioPlay () {
            if (this.audioFlag == false) {
                this.audioMsg.text = this.audioSource
                this.audioSynth.speak(this.audioMsg)
                this.audioFlag = true
                this.audioCourse = true
            } else {
                if (this.audioCourse == true) {
                    this.audioSynth.pause()
                    this.audioCourse = false
                } else {
                    this.audioSynth.resume()
                    this.audioCourse = true
                }
            }
        },
        closeModel () {
            this.viewer.removeLayer(this.pathLayer)
            this.viewer.removeLayer(this.pointLayer)

            this.audioSynth.cancel()
            this.audioFlag = false
            this.audioCourse = false

            this.$store.dispatch('delVisitedViews', this.$route)
            this.$router.push('/pcLayout/default')
        },
        panoramaPlay () {
            this.panoramaShow = true
            this.panoramaUrl = this.panoramaUrlOne
      );
      this.pointLayer.addOverlay(divIcon);
    },
    audioPlay() {
      if (this.audioFlag == false) {
        this.audioMsg.text = this.audioSource;
        this.audioSynth.speak(this.audioMsg);
        this.audioFlag = true;
        this.audioCourse = true;
      } else {
        if (this.audioCourse == true) {
          this.audioSynth.pause();
          this.audioCourse = false;
        } else {
          this.audioSynth.resume();
          this.audioCourse = true;
        }
    }
      }
    },
    closeModel() {
      this.viewer.removeLayer(this.pathLayer);
      this.viewer.removeLayer(this.pointLayer);

}
      this.audioSynth.cancel();
      this.audioFlag = false;
      this.audioCourse = false;

      this.$store.dispatch("delVisitedViews", this.$route);
      this.$router.push("/pcLayout/default");
    },
    panoramaPlay() {
      this.panoramaShow = true;
      this.panoramaUrl = this.panoramaUrlOne;
    },
  },
  destroyed() {
    // this.audioPlay();
    // console.log("关闭", "see1");
  },
};
</script>

<style lang='scss' scope>
<style lang="scss" scope>
.welcome-container {
    padding: 10px;
    position: fixed;
    top: 132px;
    left: 132px;
    width: 480px;
    height: 720px;
    background: rgba(40, 187, 240, 0.7);
    border-radius: 10px;
    color: #fff;
    border: 1px solid #29baf1;
    box-shadow: 0 0 10px 2px #29baf1;
  padding: 10px;
  position: fixed;
  top: 132px;
  left: 132px;
  width: 480px;
  height: 720px;
  background: rgba(40, 187, 240, 0.7);
  border-radius: 10px;
  color: #fff;
  border: 1px solid #29baf1;
  box-shadow: 0 0 10px 2px #29baf1;

    .header {
  .header {
    margin-bottom: 10px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    position: relative;
    background: #29baf1;

    .title {
      .panorama-control {
        position: absolute;
        top: 0;
        right: 56px;
        bottom: 0;
        left: auto;
        margin: auto;
        width: 16px;
        height: 16px;
        cursor: pointer;
      }

      .audio-control {
        position: absolute;
        top: 0;
        right: 32px;
        bottom: 0;
        left: auto;
        margin: auto;
        width: 16px;
        height: 16px;
        cursor: pointer;
      }

      .close-box {
        position: absolute;
        top: 0;
        right: 8px;
        bottom: 0;
        left: auto;
        margin: auto;
        width: 16px;
        height: 16px;
        cursor: pointer;
      }
    }
  }

  .content-box {
    padding: 0 16px;
    height: calc(100% - 36px);

    & > div {
      margin-bottom: 10px;
    }

    & > div:last-child {
      margin-bottom: 0px;
    }

    .text-introduce {
      height: calc(100% - 458px);

      .title {
        position: relative;
        padding-left: 24px;
        height: 36px;
        line-height: 36px;

        &::before {
          position: absolute;
          top: 12px;
          left: 0;
          width: 0;
          height: 6px;
          border: 6px solid #fff;
          box-sizing: border-box;
          box-shadow: 0px 0px 4px 1px #fff;
          border-radius: 50%;
          content: "";
        }
      }

      .content {
        height: calc(100% - 36px);

        p {
          height: 100%;
          text-indent: 2em;
          font-size: 16px;
          letter-spacing: 2px;
          line-height: 24px;
          overflow-y: auto;
        }
      }
    }

    .organizer,
    .undertake,
    .time-box {
      padding-left: 24px;
      position: relative;

      height: 36px;
      line-height: 36px;

      &::before {
        position: absolute;
        top: 12px;
        left: 0px;
        width: 0;
        height: 6px;
        border: 6px solid #fff;
        box-sizing: border-box;
        box-shadow: 0px 0px 4px 1px #fff;
        border-radius: 50%;
        content: "";
      }
    }

    .panorama-box {
      padding: 10px;
      margin: auto !important;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10;
      width: 560px;
      height: 406px;
      background: rgba(40, 187, 240, 0.7);
      border-radius: 10px;
      color: #fff;
      border: 1px solid #29baf1;
      box-shadow: 0 0 10px 2px #29baf1;

      .title {
        margin-bottom: 10px;
        height: 36px;
        line-height: 36px;
@@ -280,217 +424,81 @@
        position: relative;
        background: #29baf1;

        .title {
            .panorama-control {
                position: absolute;
                top: 0;
                right: 56px;
                bottom: 0;
                left: auto;
                margin: auto;
                width: 16px;
                height: 16px;
                cursor: pointer;
            }

            .audio-control {
                position: absolute;
                top: 0;
                right: 32px;
                bottom: 0;
                left: auto;
                margin: auto;
                width: 16px;
                height: 16px;
                cursor: pointer;
            }

            .close-box {
                position: absolute;
                top: 0;
                right: 8px;
                bottom: 0;
                left: auto;
                margin: auto;
                width: 16px;
                height: 16px;
                cursor: pointer;
            }
        .panorama-control {
          position: absolute;
          top: 0;
          right: 56px;
          bottom: 0;
          left: auto;
          margin: auto;
          width: 16px;
          height: 16px;
          cursor: pointer;
        }

        .audio-control {
          position: absolute;
          top: 0;
          right: 32px;
          bottom: 0;
          left: auto;
          margin: auto;
          width: 16px;
          height: 16px;
          cursor: pointer;
        }

        .close-box {
          position: absolute;
          top: 0;
          right: 8px;
          bottom: 0;
          left: auto;
          margin: auto;
          width: 16px;
          height: 16px;
          cursor: pointer;
        }
      }

      .content {
        padding: 0 10px;
        height: calc(100% - 46px);

        .iframe {
          width: 100%;
          height: 100%;
        }
      }
    }

    .content-box {
        padding: 0 16px;
        height: calc(100% - 36px);
    .img-exhibition {
      height: 300px;

        & > div {
            margin-bottom: 10px;
        }
      .content {
        .el-image {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          // width: 100%;
          height: 100%;

        & > div:last-child {
            margin-bottom: 0px;
        }

        .text-introduce {
            height: calc(100% - 458px);

            .title {
                position: relative;
                padding-left: 24px;
                height: 36px;
                line-height: 36px;

                &::before {
                    position: absolute;
                    top: 12px;
                    left: 0;
                    width: 0;
                    height: 6px;
                    border: 6px solid #fff;
                    box-sizing: border-box;
                    box-shadow: 0px 0px 4px 1px #fff;
                    border-radius: 50%;
                    content: '';
                }
            }

            .content {
                height: calc(100% - 36px);

                p {
                    height: 100%;
                    text-indent: 2em;
                    font-size: 16px;
                    letter-spacing: 2px;
                    line-height: 24px;
                    overflow-y: auto;
                }
            }
        }

        .organizer,
        .undertake,
        .time-box {
            padding-left: 24px;
            position: relative;

            height: 36px;
            line-height: 36px;

            &::before {
                position: absolute;
                top: 12px;
                left: 0px;
                width: 0;
                height: 6px;
                border: 6px solid #fff;
                box-sizing: border-box;
                box-shadow: 0px 0px 4px 1px #fff;
                border-radius: 50%;
                content: '';
            }
        }

        .panorama-box {
            padding: 10px;
            margin: auto !important;
            position: fixed;
          img {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10;
            width: 560px;
            height: 406px;
            background: rgba(40, 187, 240, 0.7);
            border-radius: 10px;
            color: #fff;
            border: 1px solid #29baf1;
            box-shadow: 0 0 10px 2px #29baf1;

            .title {
                margin-bottom: 10px;
                height: 36px;
                line-height: 36px;
                text-align: center;
                position: relative;
                background: #29baf1;

                    .panorama-control {
                        position: absolute;
                        top: 0;
                        right: 56px;
                        bottom: 0;
                        left: auto;
                        margin: auto;
                        width: 16px;
                        height: 16px;
                        cursor: pointer;
                    }

                    .audio-control {
                        position: absolute;
                        top: 0;
                        right: 32px;
                        bottom: 0;
                        left: auto;
                        margin: auto;
                        width: 16px;
                        height: 16px;
                        cursor: pointer;
                    }

                    .close-box {
                        position: absolute;
                        top: 0;
                        right: 8px;
                        bottom: 0;
                        left: auto;
                        margin: auto;
                        width: 16px;
                        height: 16px;
                        cursor: pointer;
                    }
            }

            .content {
                padding: 0 10px;
                height: calc(100% - 46px);

                .iframe {
                    width: 100%;
                    height: 100%;
                }
            }
            margin: auto;
            width: 100%;
            height: 100%;
          }
        }

        .img-exhibition {
            height: 300px;

            .content {
                .el-image {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                    // width: 100%;
                    height: 100%;

                    img {
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        margin: auto;
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
      }
    }
  }
}
</style>