1

mayisheng

2022-08-15 81f54040c2cb65537c6c6e1db8358a39a57dea0d

 src/components/mobileActivity/index.vue

@@ -1,4 +1,7 @@
<template>
  <!-- 活动弹窗
mobileActivity
 -->
  <div
    id="mobileActivity"
    :style="{ height: height + 'px' }"
@@ -50,7 +53,7 @@
    <div class="mobileActivity_coutrol" :style="{ bottom: bottom + 'px' }">
      <ul>
        <li
          v-for="(item, index) in leftNavData"
          v-for="(item, index) in ourLeftData"
          :key="index"
          @click="mobileActivityCoutrolClick(item)"
          v-show="!item.notShow"
@@ -66,6 +69,9 @@
<script>
import { mapGetters } from "vuex";
import moveWindow from "./move";
import { getdetail } from "@/api/mobile/hd/hd";
window.serviceMapSee = {};
window.onceServiceMap = null;
export default {
  name: "mobileActivity",
  computed: {
@@ -75,6 +81,9 @@
      // 'drawALineLayerMany',
      // 'drawAPointLayerMany'
    ]),
    ourLeftData() {
      return [...this.serviceMap, ...this.leftNavData];
    },
  },
  data() {
    const heig = 135;
@@ -126,6 +135,19 @@
        //   // imgSrc: "img/mobile/blue.png",
        // },
      ],
      //底图
      serviceMap: [
        // {
        //   flag: true,
        //   label: "底图1",
        //   img: "/img/leftnav/way-checked.png",
        //   normal: "/img/leftnav/way.png",
        //   checked: "/img/leftnav/way-checked.png",
        //   layer: "wayLayer",
        //   imgSrc: "img/mobile/green.png",
        //   layer: null,
        // },
      ],
    };
  },
  watch: {
@@ -137,6 +159,7 @@
    //       this.height = this.useHeight;
    //     }
    //   },
    //当弹窗显示时，开始操作数据
    showActivity() {
      if (this.showActivity) {
        this.inToInit(); // 初始化
@@ -190,7 +213,66 @@
              that.domMove.opens(false, true);
            },
          ]);

          //绘画底图
          //获取详细信息，来获取底图
          // console.log(this.showActivityData, "see");
          that.serviceMap = [];
          // if (that.serviceMap.length > 0) {
          //   for (let k in window.serviceMapSee) {
          //     if (window.serviceMapSee[k].flag) {
          //       global.viewer.imageryLayers.remove(
          //         window.serviceMapSee[k].layer
          //       );
          //     }
          //   }
          // }
          //处理底图
          window.serviceMapSee = {};
          getdetail(this.showActivityData.opendata.id).then((res) => {
            let name = res.data.data.mapname.split(",");
            let url = res.data.data.url.split(",");
            for (let k in name) {
              let d = {
                flag: true,
                label: name[k],
                img: "/img/leftnav/monitor-checked.png",
                normal: "/img/leftnav/monitor.png",
                checked: "/img/leftnav/monitor-checked.png",
                imgSrc: "/img/leftnav/map-monitor.png",
                layer: "serviceMap" + that.serviceMap.length,
                url: url[k],
                to: "serviceMap",
              };
              this.serviceMap.push(d); //数据层
              // console.log(d, "see");

              window.onceServiceMap =
                new global.DC.Namespace.Cesium.ArcGisMapServerImageryProvider({
                  url: url[k],
                });
              window.serviceMapSee[d.layer] = {
                flag: true,
                layer: global.viewer.imageryLayers.addImageryProvider(
                  window.onceServiceMap
                ), //渲染层
                source: window.onceServiceMap, //渲染源
              };
              window.onceServiceMap = null;
            }
          });
        };
      } else {
        // console.log(this.showActivity, "see");
        if (window.serviceMapSee != {}) {
          for (let k in window.serviceMapSee) {
            if (window.serviceMapSee[k].flag) {
              //如果是显示状态 就让他关闭
              global.viewer.imageryLayers.remove(window.serviceMapSee[k].layer);
            }
          }
          window.serviceMapSee = {};
        }
      }
    },
  },
@@ -270,6 +352,26 @@
        item.img = item.checked;
      } else {
        item.img = item.normal;
      }
      if (item.to == "serviceMap") {
        //再次判断是否是底图的加载
        console.log(window.serviceMapSee[item.layer]);
        //清除
        if (!item.flag && window.serviceMapSee[item.layer].flag) {
          window.serviceMapSee[item.layer].flag = false;
          global.viewer.imageryLayers.remove(
            window.serviceMapSee[item.layer].layer
          );
        }
        // 显示
        if (item.flag && !window.serviceMapSee[item.layer].flag) {
          window.serviceMapSee[item.layer].flag = true;
          window.serviceMapSee[item.layer].layer =
            global.viewer.imageryLayers.addImageryProvider(
              window.serviceMapSee[item.layer].source
            );
        }
        return;
      }
      this.$store.commit("showLineOrPoint", {
        layer: item.layer,
@@ -473,13 +575,14 @@
    margin-bottom: 6px;
    font-weight: 400;
    display: block;
    width: 80px;
    // width: 80px;
    height: 30px;
    line-height: 30px;
    background-color: #fff;
    border-radius: 15px;
    text-align: center;
    font-size: 0;
    padding: 0 6px;
    cursor: pointer;

    img {