公益林行政区划各级通过服务进行高亮定位

<template>
  <div class="location1">
    <div class="locHn">
      <div class="box" :class="bgColor"><i class="el-icon-map-location" @click="getXzqhData"></i></div>
      <el-cascader ref="cascader" :show-all-levels="false" expandTrigger="click" :options="cityData" v-model="cityName"
        placeholder="行政区划" style="width: 100%" :props='defaultProps' @change="handleChange">
      </el-cascader>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex';
  import http from "@/service/interface.js";
  import XYZ from "ol/source/XYZ";
  export default {
    name: "location",
    components: {},
    props: {
      paramsTitle: {
        type: String,
        default () {
          return "";
        },
      },
    },
    data() {
      return {
        jsonData: '',
        cityData: [],
        cityName: '',
        defaultProps: {
          checkStrictly: true ,
          label:'fname',
          value:'fcode',
          children:'children'
        },
        layerhigtLight: null,
        layerToken: '?token=IOTE=='
      };
    },
    computed: {
      ...mapState('business', ['theme']),
      bgColor(){
        return this.theme == 'blue'? '':'bgColor'
      }
    },
    created() {
      this.getXzqhData().then(data => {
        this.handleChange()
      })
    },
    mounted() {
    },
    methods: {
    // 行政区划
    async getXzqhData() {
      this.cityData = []
      const userId = JSON.parse(localStorage.getItem("principal")).id
      const res = await http.processtreeNew2({
        fcode: localStorage.getItem('xzbmCode')
      })
      this.cityName = localStorage.getItem('xzbmCode')
      let arr = this.cityDataFilter([res.data],'ftype')
      let arr2= JSON.stringify(arr).replaceAll('"children":[],','')
      this.cityData = JSON.parse(arr2)
    },
    cityDataFilter(treeData, excludeKey){
      if (!treeData || !Array.isArray(treeData)) {
        return [];
      }
      return treeData.filter(node => {
        if (node.children && node.children.length > 0) {
          node.children = this.cityDataFilter(node.children, excludeKey);
        }
        if (!(node[excludeKey]=="villages")) {
          return true;
        }
        
        return false;
      });
    },
    async handleChange () {
      this.$refs.cascader.dropDownVisible = false
      let [fLnt,fLat,level] = ['','','']
      let nodesObj = this.$refs['cascader'].getCheckedNodes()
      if(!nodesObj.length){
        return this.$message.error('无相应权限')
      }
      let data = nodesObj[0]
      fLnt = data.data.flnt
      fLat = data.data.flat
      
      let ftype = data.data.ftype
      if(ftype == 'province'){
        level = 1
      } else if(ftype == 'city'){
        level = 2
      } else if(ftype == 'county'){
        level = 3
      } else if(ftype == 'towns'){
        level = 4
      } else if(ftype == 'villages'){
        level = 5
      }
      this.layerChangeDlfb(data.value,level)
    },
    layerChangeDlfb(code,level) {
      this.$eventBus.$emit('changeXzbm',code)
      let lcCode = localStorage.xzbmCode
      let ftype = lcCode.length
      if(ftype == 2){
        this.cityName = code.length == ftype?[code]:(code.length==ftype+2 ? [lcCode,code]: (code.length==ftype+4?[lcCode,code.slice(0,4),code]:[lcCode,code.slice(0,4),code.slice(0,6),code]))
      } else if(ftype == 4){
        this.cityName = code.length == ftype?[code]:(code.length==ftype+2 ? [lcCode,code]: [lcCode,code.slice(0,6),code])
      } else {
        this.cityName = code.length == ftype? [code]:[lcCode,code]
      }

      let [fLnt,fLat] = ['','']
      setTimeout(() => {
        let nodesObj = this.$refs['cascader'].getCheckedNodes()
        let data = nodesObj[0]
        fLnt = data.data.flnt
        fLat = data.data.flat
        gisMap.map.getView().animate({
          center: fLat?[fLnt,fLat] : [111.9, 27.5],
          // zoom: level>3?14:(level == 3? 12 : (level ==2?9.5:7.5)),
          zoom: level>3?12:(level == 3? 10.5 : (level ==2?9:7.5)),
          duration: 1000,
        })
      }, 0);
      let title=''
      let id=''
      let filterStr=''
      let url=''
      if(level==1 || level=='' || level == null){
       if(this.layerhigtLight){ return this.layerhigtLight.setVisible(false)} else {return false}
      } else if(level==2){
        title="xzbjShi1"
        id='2021湖南省市界'
        filterStr='Q_shi_S_EQ='
        url=this.mapserverHn+"/vmap/WMTS/1.0/2021湖南省市界/行政区定位/getTile/{z}/{y}/{x}"+this.layerToken+"&control="
      } else if(level==3){
        title="xzbjXian1"
        id='2021湖南省县界'
        filterStr='Q_xian_S_EQ='
        url=this.mapserverHn+"/vmap/WMTS/1.0/2021湖南省县界/行政区定位/getTile/{z}/{y}/{x}"+this.layerToken+"&control="
      } else if(level==4){
        title="xzbjXiang1"
        id='2021湖南省乡界'
        filterStr='Q_xiang_S_EQ='
        url=this.mapserverHn+"/vmap/WMTS/1.0/2021湖南省乡界/行政区定位/getTile/{z}/{y}/{x}"+this.layerToken+"&control="
      } else{
        title="xzbjCun1"
        id='2021湖南省村界'
        filterStr='Q_cun_S_EQ='
        url=this.mapserverHn+"/vmap/WMTS/1.0/2021湖南省村界/行政区定位/getTile/{z}/{y}/{x}"+this.layerToken+"&control="
      }
      if(this.layerhigtLight) {
        this.layerhigtLight.setVisible(false)
      }
      this.layerhigtLight = gisMap.map.getLayers().getArray().find((f)=>{
          return f.values_.title == title
          })
      let control = window.encodeURIComponent(JSON.stringify({
        otherDisplay:false,
        layers: [
          // 图层名和筛选条件
          {id:id ,filterStr:filterStr+code}
        ]
      }))
      let source = new XYZ({
          url:url+control,
          projection: "EPSG:4326",
        });
      this.layerhigtLight.setSource(source);
      this.layerhigtLight.setVisible(true)
    },
    },
  };
</script>
<style scoped lang="less">
  .location1 {
    width: 150px;
    height: 40px;
    position: relative;
    z-index: 99;
    color: #fff !important;

    /deep/ .el-cascader {
      left: 40%
    }

    .locHn {
      position: absolute;
      width: 100%;
      height: 100%;

      .box {
        width: 50px;
        height: 100%;
        background-color: var(--primary-color-tran);
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0px;
        // left: 200px;
        // left: 187px;
        left: 10px;
        color: #fff;
        font-size: 20px;
        border-radius: 4px;
        z-index: 2;
      }
      .bgColor{
        background: rgba(2, 149, 23, 1);
      }
    }
  }
</style>