增加mapbox插接件和功能

YANGDL

2021-01-15 48d575a147ecf5b5ea042dc38d99ed58df68ddfd

 src/components/LayerController/modules/LcServiceLayerFilter.vue

@@ -2,10 +2,10 @@
  <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">{{item.name}}</div>
              <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"><label :title="filter.name">{{filter.sname}}</label>
                    <input type="checkbox" :value="filter.code" :checked="filter.checked"><label :title="filter.name">{{filter.sname}}</label>
                  </div>
              </div>
          </div>
@@ -14,14 +14,16 @@
</template>

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

export default {
  name: "LcServiceLayerFilter",
  name: 'LcServiceLayerFilter',
  components: {},
  data() {
  data () {
    return {
      filterConfig: [], // 附属要素
    };
      filterConfig: [] // 附属要素
    }
  },
  computed: {
    ...mapState({
@@ -31,23 +33,51 @@
      selectedServiceLayer: (state) => {
        return state.selectedServiceLayer
      },
    }),
      serviceLayerFilters: (state) => {
        return state.serviceLayerFilters
      },
      mapConfig: (state) => {
        return state.mapConfig
      }
    })
  },
  mounted() {
    
  mounted () {

  },
  methods: {
    ...mapMutations([]),
    getFilterConfig(){
        return this.filterConfig
    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
      }
    selectedServiceLayer (newVal) {
      this.filterConfig = this.serviceLayerHelper.getWMSConfig(newVal).filtersGroup
    }
  }
};
}
</script>

<style scoped lang="less">