BJYSYBZ/WEB-VIEW/src/webViewMap.vue

<template>
  <div class="TsxzMap">
    <BigScreenMap
      :GZData="gzData"
      :fixed="1"
      :title="mapTitle"
      :defaultExpand="false"
      :overlayShow="true"
      :imgLayers="mapImgLayers"
      ref="arcMapRef"
      :visible-layer-ids="visibleLayerIds"
      @mapClick="mapClickHandle"
    ></BigScreenMap>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import BigScreenMap from '@/views/components/BigScreenMap';

export default {
  name: 'TsxzMap',
  components: { BigScreenMap },
  mounted() {
    this.$vm.$on('changeLayer', (payload) => {
      const { id, param, layerIdx1, layerIdx2 } = payload;
      let params = {
        layers: `show:${layerIdx1},${layerIdx2}`,
        layerDefs: {
          [layerIdx1]: param,
          [layerIdx2]: param,
        },
      };
      let layer = this.$refs.arcMapRef.getLayerById(id);
      layer.setVisible(true);
      const source = layer.getSource();
      source.updateParams(params);
    });
    this.$vm.$emit('setGdDetailType', 20);
    this.changeXzq();
    //监听图层改变事件
    this.$vm.$on('setVisibleLayerIdEvent', (visibleLayerId) => {
      this.visibleLayerIds[1] = visibleLayerId;
    });
    //监听图层改变事件
    this.$vm.$on('setVisibleMoreLayerIdEvent', (visibleLayerId) => {
      visibleLayerId.forEach((i, index) => {
        this.visibleLayerIds[index + 1] = i;
      });
    });
    this.$vm.$on('clearMoreLayerIdEvent', () => {
      this.visibleLayerIds[1] = '';
      if (this.this.visibleLayerIds[2]) {
        this.visibleLayerIds[2] = '';
      }
    });
    this.$vm.$emit('switchLayerShow', true);
    // this.initMapData()
    // this.showLayer('kfq');
  },
  computed: {
    ...mapState({
      xzqName: (state) => state.BaseData.xzqState,
    }),
    ...mapGetters({
      xzqdm: 'BaseData/xzqCodeGetter',
    }),
  },
  data() {
    return {
      gzData: [],
      areaType: 'city',
      oldGzData: [],
      mapTitle: '供地总面积',
      visibleLayerIds: ['bj-dkgl'],
      mapImgLayers: [],
      xzqdmArr: [],
      year: 2021,
      jd: '全年',
      xzqVal: '330108',
    };
  },
  methods: {
    async mapClickHandle (payload1, key) {
      this.$emit('mapClick', payload1);
      if (key == 'bj-dkgl') {
        this.$vm.$emit('setGdDetailType', 24);
      } else if (key == 'bj-kgdk') {
        this.$vm.$emit('setGdDetailType', 101);
      }
      this.$vm.$emit('getGdDetailData', payload1);
    },
    showLayer(layerId) {
      this.$vm.$emit('setVisibleLayerIdEvent', layerId);
      this.$vm.$emit('switchLayerShow', true);
      this.$vm.$emit('setGdDetailType', 12);
    },
    returnToUp() {
      this.$router.go(-1);
    },
    changeAreaHandle(val) {
      if (val[1] == '330110') {
        this.$router.push({
          path: 'qyfx',
          query: this.$route.query,
        });
      }
    },
    initMapData() {
      const urlApi = `/api/ybz/getYqXzqfz`;
      const params = {};
      this.$ajax.get(urlApi, params, this, false).then((result) => {
        const data = result['data'] || {};
        let mapData = [];
        data.forEach((item, index) => {
          let obj = {
            name: item['xzqmc'],
            typeIndex: 0,
            param: {
              value1: '园区数量',
              value2: item.num,
              unit1: '',
              unit2: '个',
              order: index + 1,
            },
          };
          mapData.push(obj);
        });
        this.gzData = mapData;
      });
    },
    changeXzq() {
      this.$vm.$emit('location-mask-self-where', {
        layerId: 'xzqh-x-search',
        where: `xzqdm = '${this.xzqVal}'`,
      });
      // if (this.xzqVal.length > 6) {
      //   this.$vm.$emit("location-mask-self-where", { layerId: 'xzqh-z-search', where: `xzqdm = '${this.xzqVal}'` });
      // } else {
      //   this.$vm.$emit("location-mask-self-where", { layerId: 'xzqh-x-search', where: `xzqdm = '${this.xzqVal}'` });
      // }
    },
  },
};
</script>

<style scoped lang="scss">
.TsxzMap {
  height: 100%;
  position: relative;

  .btn-close-wrapper {
    position: absolute;
    top: 7px;
    left: 10px;
    font-weight: bold;
    color: #ffffff;
    font-size: 18px;
    border: 1px solid #468ec0;
    background: linear-gradient(0deg, #102a54 0%, #3d5a93 100%);
    border-radius: 4px;
    padding: 1px 10px;
    z-index: 999;
    line-height: 32px;
    cursor: pointer;
    .close-icon {
      width: 20px;
      margin-right: 5px;
      vertical-align: middle;
    }
  }

  ::v-deep .vl-tool-bar {
    display: none;
  }

  .areaSelectBox {
    position: absolute;
    top: 2px;
    left: 10px;
    margin: auto;
    width: 160px;

    .prefix-icon {
      position: absolute;
      top: 12px;
      left: 6px;
    }

    ::v-deep {
      .el-input__inner {
        height: 34px;
        font-weight: bold;
        color: #fff;
        border: 1px solid #468ec0 !important;
        background: linear-gradient(0deg, #102a54 0%, #3f5d96 100%) !important;
        padding-left: 25px;
      }

      input::-webkit-input-placeholder {
        color: #fff;
      }

      .el-input__icon {
        color: #70d6ff;
        font-weight: bold;
      }
    }
  }

  .yearSelect {
    position: absolute;
    left: 180px;
    top: 5px;
    .prefix-icon {
      vertical-align: middle;
      margin-left: 5px;
    }
    ::v-deep {
      .el-input {
        line-height: 34px;
        input {
          color: #fff;
          font-weight: bold;
          width: 110px;
          height: 34px;
          border: 1px solid #468ec0;
          background: linear-gradient(0deg, #102a54 0%, #405f97 100%);
          border-radius: 4px;
        }
        .el-input__suffix {
          .el-input__suffix-inner {
            i {
              line-height: 34px;
              color: #70d6ff;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}
</style>