修改图层控制配置

徐旺旺

2021-04-06 28b3be6343168d07d5bd3783fd01388a18e90b8c

 src/components/LayerController/modules/LcServiceLayerFilter.vue

@@ -5,12 +5,14 @@
                <div class="title"><input type="checkbox" :value="item.code" :checked="item.checked"
                                          @change="swAllSubFilter(item)">{{item.name}}
                </div>
              <el-scrollbar style="height:100%">
                <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 v-for="filter in item.layers" :key="filter.code">
                        <input type="checkbox" :value="filter.code" :checked="filter.checked" @change="swSubFilter(item.url,filter)"><label
                            :title="filter.name">{{filter.name}}</label>
                    </div>
                </div>
              </el-scrollbar>
            </div>
        </div>
    </div>
@@ -18,7 +20,6 @@

<script>
import { mapMutations } from 'vuex'
import WmsHelper from '../../helpers/WmsHelper'

export default {
  name: 'LcServiceLayerFilter',
@@ -30,14 +31,14 @@
    }
  },
  computed: {
    mapConfig () {
      return this.$store.state.map.mapConfig.mapConfig
    config () {
      return this.$store.state.map.config
    },
    pointLayers () {
      // 根据线图层选中情况，显示或隐藏点图层面板
      var config = this.mapConfig
      var checkedLayers = window.serviceLayerHelper.getCheckedLayers(config)
      var pointLayers = config.PointLayers
      var serviceLayers = this.config.mapConfig.Layers.LayerSewersLine // 一级图层
      var checkedLayers = window.serviceLayerHelper.getCheckedLayers(serviceLayers)
      var pointLayers = this.config.mapConfig.Layers.layerSewersPoint // 二级图层
      return pointLayers.filter(function (layer) {
        var code = layer.code
        for (var i = 0; i < checkedLayers.length; i++) {
@@ -56,21 +57,17 @@
    ...mapMutations([]),
    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(item)
      // window.serviceLayerHelper.loadLayers()
    },
    swSubFilter (url, item) {
      item.checked = !item.checked
      if (item.checked) {
        window.serviceLayerHelper.loadGeojsonLayer(url, item)
      } else {
        window.serviceLayerHelper.removeLayer(item)
      }
      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)
        }
      }
      // window.serviceLayerHelper.loadLayers()
    }
  }
}
@@ -78,14 +75,15 @@

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

        position: absolute;
        left: 250px;
        bottom: 10px;
        left: 260px;
        z-index: 1000;
        height: 220px;
        top: 0;

        .filter-group {
            display: flex;
@@ -97,7 +95,7 @@
                margin-right: 5px;

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

                ::-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;
                }
                //
                //::-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;
                //}
            }
        }
    }