修改图层控制

徐旺旺

2021-02-22 a6da1ff6d9b294f46955da5d5cff30919467fa8b

 src/components/LayerController/modules/LcServiceLayerFilter.vue

@@ -1,136 +1,134 @@
<template>
  <div class="inner-panel">
      <div class="filter-group">
          <div v-for="item in filterConfig" :key="item.code" class="filter-item">
              <div class="title"><input type="checkbox" :value="item.code" :checked="item.checked" @change="swAllSubFilter(item)">{{item.name}}</div>
              <div class="content">
                  <div v-for="filter in item.filters" :key="filter.code">
                    <input type="checkbox" :value="filter.code" :checked="filter.checked"><label :title="filter.name">{{filter.sname}}</label>
                  </div>
              </div>
          </div>
      </div>
  </div>
    <div class="inner-panel">
        <div class="filter-group">
            <div v-for="item in pointLayers" :key="item.code" class="filter-item">
                <div class="title"><input type="checkbox" :value="item.code" :checked="item.checked"
                                          @change="swAllSubFilter(item)">{{item.name}}
                </div>
                <div class="content">
                    <div v-for="filter in item.filters" :key="filter.code">
                        <input type="checkbox" :value="filter.code" :checked="filter.checked"><label
                            :title="filter.name">{{filter.sname}}</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import WmsHelper from "../../helpers/WmsHelper";
import { mapMutations } from 'vuex'
import WmsHelper from '../../helpers/WmsHelper'

export default {
  name: "LcServiceLayerFilter",
  name: 'LcServiceLayerFilter',
  components: {},
  data() {
  data () {
    return {
      filterConfig: [], // 附属要素
    };
      visible: {},
      filterConfig: [] // 附属要素
    }
  },
  computed: {
    ...mapState({
      serviceLayerHelper: (state) => {
        return state.serviceLayerHelper
      },
      selectedServiceLayer: (state) => {
        return state.selectedServiceLayer
      },
      serviceLayerFilters: (state) => {
        return state.serviceLayerFilters
      },
      mapConfig: (state) => {
        return state.mapConfig
      }
    }),
    mapConfig () {
      return this.$store.state.map.mapConfig.mapConfig
    },
    pointLayers () {
      // 根据线图层选中情况，显示或隐藏点图层面板
      var config = this.mapConfig
      var checkedLayers = window.serviceLayerHelper.getCheckedLayers(config)
      var pointLayers = config.PointLayers
      return pointLayers.filter(function (layer) {
        var code = layer.code
        for (var i = 0; i < checkedLayers.length; i++) {
          var checkedLayer = checkedLayers[i]
          if (checkedLayer.childLayer.indexOf(code) >= 0) {
            return checkedLayer
          }
        }
      })
    }
  },
  mounted() {

  mounted () {
    // this.filterConfig = window.serviceLayerHelper.getWMSConfig().filtersGroup
  },
  methods: {
    ...mapMutations([]),
    getFilterConfig(){
        return this.filterConfig
    },
    swAllSubFilter(item){
        item.checked = !item.checked
        for(let i = 0, len = item.filters.length; i < len; ++i){
            item.filters[i].checked = item.checked
        }

        console.log('------')
        var mapConfig = this.mapConfig
        var wmsHelper = new WmsHelper()
        wmsHelper.initMapConfig(mapConfig)
        var wmsLayersMap = wmsHelper.getWmsLayersMap()
        //var filterURL = wmsHelper.getFilterURL()
        console.log(wmsLayersMap)
        for (var k in wmsLayersMap) {
            var layers = wmsLayersMap[k]
            var tileLayer = this.serviceLayerHelper.getTileLayer(k)
            if (tileLayer) {
                tileLayer.setParams({layers: layers.join(',')}, true)
                tileLayer.setUrl(tileLayer.config.url,false)
            }
        }
    }
  },
  watch: {
      selectedServiceLayer(newVal){
          this.filterConfig = this.serviceLayerHelper.getWMSConfig(newVal).filtersGroup
    swAllSubFilter (item) {
      item.checked = !item.checked
      for (let i = 0, len = item.filters.length; i < len; ++i) {
        item.filters[i].checked = item.checked
      }
      var mapConfig = this.mapConfig
      var wmsHelper = new WmsHelper()
      wmsHelper.initMapConfig(mapConfig)
      var wmsLayersMap = wmsHelper.getWmsLayersMap()
      for (var k in wmsLayersMap) {
        var layers = wmsLayersMap[k]
        var tileLayer = this.serviceLayerHelper.getTileLayer(k)
        if (tileLayer) {
          tileLayer.setParams({ layers: layers.join(',') }, true)
          tileLayer.setUrl(tileLayer.config.url, false)
        }
      }
    }
  }
};
}
</script>

<style scoped lang="less">
.inner-panel {
    color:#90c8e0;
    font-size: 13px;
    .inner-panel {
        color: #90c8e0;
        font-size: 13px;

    position: absolute;
    left: 250px;
    bottom: 10px;
    z-index: 1000;
    height: 220px;
    width: 500px;
        position: absolute;
        left: 250px;
        bottom: 10px;
        z-index: 1000;
        height: 220px;

    .filter-group{
        display: flex;
        flex-flow: row;
        .filter-group {
            display: flex;
            flex-flow: row;

        .filter-item{
            width: 120px;
            height: 100%;
            margin-right: 5px;
            .filter-item {
                width: 120px;
                height: 100%;
                margin-right: 5px;

            .title{
                height: '25px';
                background-color: #091331;
                border: 1px solid #10488c;
            }
            .content{
                background-color: rgba(44,62,80, 0.6);
                border: 1px solid #10488c;
                max-height: 200px;
                overflow-y: auto;
            }
                .title {
                    height: '25px';
                    background-color: #091331;
                    border: 1px solid #10488c;
                }

            ::-webkit-scrollbar{
                width: 7px;
                height: 5px !important;
            }
            ::-webkit-scrollbar-thumb {
                /*滚动条里面小方块*/
                border-radius: 10px;
                box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
                background   : #0661AE;
                border: 1px solid transparent;
            }
            ::-webkit-scrollbar-track {
                /*滚动条里面轨道*/
                // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
                border-radius: 0px;
                background   : #0E3565;
                .content {
                    background-color: rgba(44, 62, 80, 0.6);
                    border: 1px solid #10488c;
                    max-height: 200px;
                    overflow-y: auto;
                }

                ::-webkit-scrollbar {
                    width: 7px;
                    height: 5px !important;
                }

                ::-webkit-scrollbar-thumb {
                    /*滚动条里面小方块*/
                    border-radius: 10px;
                    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                    background: #0661AE;
                    border: 1px solid transparent;
                }

                ::-webkit-scrollbar-track {
                    /*滚动条里面轨道*/
                    // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
                    border-radius: 0px;
                    background: #0E3565;
                }
            }
        }
    }
}
</style>