+抚州数据以及缩放调整，活动底图数据获取

liuyg

2022-03-28 0f6f73971c9c3db3d591018a8e6c2272ea07088a

 src/components/mobileActivity/index.vue

@@ -13,7 +13,7 @@
    </div>
    <div class="mobileActivity_in">
      <!-- <el-button type="primary" @click="init">open</el-button>
      <el-button type="success" @click="closeInit">close</el-button> -->
            <el-button type="success" @click="closeInit">close</el-button>-->
      <div class="mobileActivity_insmall">
        <!-- <img :src="imgs" alt="" class="mobileActivity_insmallimg" /> -->
        <el-image
@@ -27,10 +27,10 @@
            v-for="(item, index) in useData.smallData"
            :key="index"
          >
            <span class="mobileActivity_insmallxiangqingIn_s">{{
              item.lable
            }}</span
            >: {{ item.value }}
            <span class="mobileActivity_insmallxiangqingIn_s">
              {{ item.lable }}
            </span>
            : {{ item.value }}
          </div>
        </div>
      </div>
@@ -40,22 +40,22 @@
          v-for="(item, index) in useData.detailedData"
          :key="index"
        >
          <span class="mobileActivity_insmallxiangqingIn_s">{{
            item.lable
          }}</span
          >: {{ item.value }}
          <span class="mobileActivity_insmallxiangqingIn_s">
            {{ item.lable }}
          </span>
          : {{ item.value }}
        </div>
      </div>
    </div>
    <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"
        >
          <img :src="item.img" alt="" />
          <img :src="item.img" alt />
          <span>{{ item.label }}</span>
        </li>
      </ul>
@@ -66,19 +66,24 @@
<script>
import { mapGetters } from "vuex";
import moveWindow from "./move";
import { getdetail } from "@/api/mobile/hd/hd";
window.serviceMapSee = {};
export default {
  name: "mobileActivity",
  computed: {
    ...mapGetters([
      "showActivity",
      "showActivityData",
      "drawALineLayerMany",
      "drawAPointLayerMany",
      // 'drawALineLayerMany',
      // 'drawAPointLayerMany'
    ]),
    ourLeftData() {
      return [...this.serviceMap, ...this.leftNavData];
    },
  },
  data() {
    let heig = 135;
    let bottom = 150;
    const heig = 135;
    const bottom = 150;
    return {
      useHeight: heig,
      height: heig,
@@ -126,6 +131,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: {
@@ -139,14 +157,13 @@
    //   },
    showActivity() {
      if (this.showActivity) {
        this.inToInit(); //初始化
        this.inToInit(); // 初始化
        this.hdTitle = this.showActivityData.name;

        console.log(this.showActivityData);
        //new窗口对象
        let that = this;
        let windowHeight = document.body.clientHeight;
        this.doData(this.showActivityData); //使用数据
        // new窗口对象
        const that = this;
        const windowHeight = document.body.clientHeight;
        this.doData(this.showActivityData); // 使用数据
        // 获取最大高度避免数据过少，空格多
        // let heard = document.querySelector(".mobileActivity_heard");
        // let ins = document.querySelector(".mobileActivity_in");
@@ -158,7 +175,7 @@
          });
        });
        // return;
        let doit = (maxheights) => {
        const doit = (maxheights) => {
          this.domMove = new moveWindow({
            id: "mobileActivity",
            minHeight: that.useHeight,
@@ -167,7 +184,7 @@
            fn: function (res) {
              that.height = +res.height;
              that.bottom = +res.height + 15;
              console.log(+res.height, "=======");
              // console.log(+res.height, "=======");
              if (res.state != "on") {
                that.openValue = res.state;
              }
@@ -175,13 +192,13 @@
          });
          this.domMove.init();
          // console.log(this.domMove);
          //转移···添加点和线
          let addressOur = this.changeData(
          // 转移···添加点和线
          const addressOur = this.changeData(
            this.useData.query,
            "addressname",
            "address"
          );
          let lxOur = this.changeData(this.useData.query, "lxname", "lx");
          const lxOur = this.changeData(this.useData.query, "lxname", "lx");
          // console.log(addressOur, lxOur);
          that.$store.dispatch("MSET_DRAWALINELAYERMANY", [
            lxOur,
@@ -191,6 +208,51 @@
              that.domMove.opens(false, true);
            },
          ]);

          //绘画底图
          //获取详细信息，来获取底图
          // console.log(this.showActivityData, "see");
          that.serviceMap = [];
          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/way-checked.png",
                normal: "/img/leftnav/way.png",
                checked: "/img/leftnav/way-checked.png",
                layer: "wayLayer",
                imgSrc: "img/mobile/green.png",
                layer: "serviceMap" + that.serviceMap.length,
                url: url[k],
                to: "serviceMap",
              };
              // this.leftNavData.shift(d);
              // console.log(d, "see");
              // that.serviceMap.push(d);
              // window.serviceMapSee[d.layer] =
              //   global.DC.ImageryLayerFactory.createArcGisImageryLayer({
              //     url: url[k],
              //   });
              // global.viewer.addBaseLayer(window.serviceMapSee[d.layer], {
              //   iconUrl: "examples/images/icon/elec.png",
              //   name: d.layer,
              // });
            }
            // const baselayer_shaded =
            //   global.DC.ImageryLayerFactory.createArcGisImageryLayer({
            //     url: "https://services.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer",
            //   });
            // global.viewer.addBaseLayer(baselayer_shaded, {
            //   iconUrl: "examples/images/icon/elec.png",
            //   name: "电子",
            // });

            // console.log(window.serviceMapSee, "see");
            // }
          });
        };
      }
    },
@@ -198,18 +260,18 @@
  mounted() {},
  methods: {
    inToInit() {
      //初始化
      // 初始化
      this.openValue = false;
      this.height = this.useHeight;
      this.bottom = this.useBottom;
      for (let k in this.leftNavData) {
      for (const k in this.leftNavData) {
        this.leftNavData[k].flag = true;
        this.leftNavData[k].img = this.leftNavData[k].checked;
      }
    },
    //处理主数据
    // 处理主数据
    doData(val) {
      let srcList = val.opendata.tpurl.split(",");
      const srcList = val.opendata.tpurl.split(",");
      this.useData = {
        data: val,
        url: srcList[0],
@@ -243,7 +305,7 @@
          introduce: val.opendata.context,
          video: val.opendata.videourl,
          // buts: ["定位"],
          //活动添加的字段
          // 活动添加的字段
          addressname: val.opendata.addressname.split(";"),
          address: val.opendata.address.split(";"),
          lxname: val.opendata.lxname.split(";"),
@@ -252,19 +314,19 @@
            val.opendata.address.split(";")[0].split(",")[0],
            val.opendata.address.split(";")[0].split(",")[1],
          ],
          panoramaurl: val.opendata.panoramaurl, //全景
          panoramaurl: val.opendata.panoramaurl, // 全景
        },
      };
    },
    //启动监听事件
    // 启动监听事件
    init() {
      this.domMove.init();
    },
    //关闭监听事件
    // 关闭监听事件
    closeInit() {
      this.domMove.closeInit();
    },
    //控制线路和点的显影
    // 控制线路和点的显影
    mobileActivityCoutrolClick(item) {
      item.flag = !item.flag;
      if (item.flag == true) {
@@ -272,14 +334,18 @@
      } else {
        item.img = item.normal;
      }
      if (item.to == "serviceMap") {
        console.log(item);
        return;
      }
      this.$store.commit("showLineOrPoint", {
        layer: item.layer,
        flag: item.flag,
      });
    },
    changeData(data, name, value) {
      let arr = [];
      for (let k in data[name]) {
      const arr = [];
      for (const k in data[name]) {
        arr.push({
          name: data[name][k],
          value:
@@ -301,11 +367,11 @@
      if (this.domMove) {
        this.closeInit();
      }
      //关闭路线和点的图层
      // 关闭路线和点的图层
      this.$store.commit("removePolylineMany");
      //关闭随地图弹窗
      // 关闭随地图弹窗
      this.$store.dispatch("closeMobileWindowsDom");
      //显示右侧栏
      // 显示右侧栏
      this.$store.commit("SET_SeeAndNotSee", true);
    },
    checkDom(methods, name, fn) {
@@ -314,7 +380,7 @@
      //  检查dom是否执行完成
      function checkDom() {
        // let dom = that.$refs[name];
        let dom = document[methods](name);
        const dom = document[methods](name);
        if (dom) {
          //  执行dom加载完成后的操作
          //  清除定时器
@@ -322,9 +388,8 @@
            clearTimeout(timer);
          }
          if (fn) {
            //回调函数
            // 回调函数
            fn(dom);
            return;
          } else {
            return dom;
          }
@@ -475,13 +540,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 {