| | |
| | | <template> |
| | | <div class="inner-panel"> |
| | | <!-- <div class="title">--> |
| | | <!-- 图层控制--> |
| | | <!-- </div>--> |
| | | <!-- <div class="wms-panel">--> |
| | | <!-- <div v-for="item in serviceLayers" :key="item.code" class="layerbox">--> |
| | | <!-- <div><input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code"--> |
| | | <!-- @change="swAllLayers(item)"/>{{ item.name }} <span @click="swFilter(item)"--> |
| | | <!-- class="btn-filter">过滤</span>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="layerbox-item">--> |
| | | <!-- <div class="basemap-layer-item" v-for="itm in item.layers" :key="itm.code"><input type="checkbox"--> |
| | | <!-- :name="'wmsSublayers_'+item.code+'_'+itm.code"--> |
| | | <!-- :checked="itm.checked"--> |
| | | <!-- :value="itm.code"--> |
| | | <!-- @change="swWmsLayer(item.url,itm)"/>{{--> |
| | | <!-- itm.name }}--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- <lc-service-layer-filter v-if="layerFilterVisible" ref="serviceLayerFilter"></lc-service-layer-filter>--> |
| | | <div class="panel-title"> 图层控制 </div> |
| | | <div class="wms-panel"> |
| | | <el-scrollbar class="wms-panel-scrollbar"> |
| | | <div v-for="item in serviceLayers" :key="item.code" class="layerbox"> |
| | | <i class="downUp el-icon-caret-bottom" @click="item.isShow=!item.isShow" :class="item.isShow?'':'active'" ></i><!-- el-icon-arrow-down --> |
| | | <!-- 一级图层遍历 --> |
| | | <div style="padding-left:25px;padding-top:10px;color:#fff"> |
| | | <input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" @change="swAllLayers(item)"/>{{ item.name }} |
| | | </div> |
| | | <div class="layerbox-item" v-show="item.isShow"> |
| | | <!-- 二级图层遍历 --> |
| | | <div class="basemap-layer-item" v-for="itm in item.layers" :key="itm.code"> |
| | | <input type="checkbox" |
| | | :name="'wmsSublayers_'+item.code+'_'+itm.code" |
| | | :checked="itm.checked" |
| | | :value="itm.code" |
| | | @change="swAllLayers(itm)"/>{{ itm.name }} |
| | | <!-- 三级图层遍历 --> |
| | | <div class="layerbox-item-3"> |
| | | <div class="basemap-layer-item" v-for="layer in itm.layers" :key="layer.code"> |
| | | <input type="checkbox" |
| | | :name="'wmsSublayers_'+item.code+'_'+layer.code" |
| | | :checked="layer.checked" |
| | | :value="layer.code" |
| | | @change="swAllLayers(layer)"/> |
| | | <span :style="'color:'+layer.color">{{ layer.name }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-scrollbar> |
| | | </div> |
| | | <lc-service-layer-filter ref="serviceLayerFilter"></lc-service-layer-filter> |
| | | </div> |
| | | </template> |
| | | |
| | | <!--<script>--> |
| | | <!--import WfsHelper from '../../helpers/WfsHelper'--> |
| | | <!--import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'--> |
| | | <!--import AjaxUtils from '../../../utils/AjaxUtils'--> |
| | | <script> |
| | | import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter' |
| | | |
| | | <!--export default {--> |
| | | <!-- name: 'LcServiceLayer',--> |
| | | <!-- components: { LcServiceLayerFilter },--> |
| | | <!-- data () {--> |
| | | <!-- return {--> |
| | | <!-- layerFilterVisible: false--> |
| | | <!-- }--> |
| | | <!-- },--> |
| | | <!-- computed: {--> |
| | | <!-- serviceLayers () {--> |
| | | <!-- return this.$store.state.map.serviceLayers.LayerSewersLine--> |
| | | <!-- }--> |
| | | <!-- },--> |
| | | <!-- mounted () {--> |
| | | <!-- // console.log('03步骤:', this.helper)--> |
| | | <!-- this.updateServiceLayerList()--> |
| | | <!-- },--> |
| | | <!-- methods: {--> |
| | | <!-- swAllLayers (item) {--> |
| | | <!-- // eslint-disable-next-line no-debugger--> |
| | | <!-- item.checked = !item.checked--> |
| | | <!-- for (let i = 0, len = item.layers.length; i < len; ++i) {--> |
| | | <!-- item.layers[i].checked = item.checked--> |
| | | <!-- }--> |
| | | <!-- this.updateWms()--> |
| | | <!-- },--> |
| | | <!-- loadWfs () {--> |
| | | <!-- var wfsHelper = new WfsHelper()--> |
| | | <!-- wfsHelper.addTypeName('管线点')--> |
| | | <!-- wfsHelper.addEquals('pipename', '研究院01路YS000001')--> |
| | | export default { |
| | | name: 'LcServiceLayer', |
| | | components: { LcServiceLayerFilter }, |
| | | computed: { |
| | | serviceLayers () { |
| | | return this.$store.state.map.serviceLayers.LayerSewersLine |
| | | } |
| | | }, |
| | | mounted () { |
| | | }, |
| | | methods: { |
| | | swAllLayers (item) { |
| | | // eslint-disable-next-line no-debugger |
| | | item.checked = !item.checked |
| | | this.toggleLayer(item) |
| | | this.swLayers(item.layers, item.checked) |
| | | }, |
| | | swLayers (layers, checked) { |
| | | if (layers) { |
| | | for (let i = 0, len = layers.length; i < len; ++i) { |
| | | var layer = layers[i] |
| | | layer.checked = checked |
| | | this.toggleLayer(layer) |
| | | if (layer.layers) { |
| | | this.swLayers(layer.layers, checked) |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | toggleLayer (itm) { |
| | | if (itm.checked) { |
| | | window.layerFactory.show(itm) |
| | | } else { |
| | | window.layerFactory.hide(itm) |
| | | } |
| | | // this.updateWms() |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <!-- AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}, (res) => {--> |
| | | <!-- console.log(res)--> |
| | | <!-- })--> |
| | | <!-- },--> |
| | | <!-- swWmsLayer (url, itm) {--> |
| | | <!-- itm.checked = !itm.checked--> |
| | | <!-- if (itm.checked) {--> |
| | | <!-- window.serviceLayerHelper.loadGeojsonLayer(url, itm)--> |
| | | <!-- } else {--> |
| | | <!-- window.serviceLayerHelper.removeLayer(itm)--> |
| | | <!-- }--> |
| | | <!-- // this.updateWms()--> |
| | | <!-- },--> |
| | | <!-- swFilter (item) {--> |
| | | <!-- this.layerFilterVisible = !this.layerFilterVisible--> |
| | | <!-- },--> |
| | | <!-- updateServiceLayerList () {--> |
| | | <style scoped lang="less"> |
| | | .inner-panel { |
| | | .btn-filter { |
| | | cursor: pointer; |
| | | color: #ffffff; |
| | | } |
| | | |
| | | <!-- },--> |
| | | <!-- updateWms () {--> |
| | | <!-- var mapConfig = this.mapConfig--> |
| | | <!-- var wmsHelper = new WfsHelper()--> |
| | | <!-- wmsHelper.initMapConfig(mapConfig)--> |
| | | <!-- var wmsLayersMap = wmsHelper.getWmsLayersMap()--> |
| | | <!-- for (var k in wmsLayersMap) {--> |
| | | <!-- var layers = wmsLayersMap[k]--> |
| | | <!-- var tileLayer = window.serviceLayerHelper.getTileLayer(k)--> |
| | | <!-- if (tileLayer) {--> |
| | | <!-- tileLayer.setParams({ layers: layers.join(',') }, false)--> |
| | | <!-- tileLayer.setUrl(tileLayer.config.url, false)--> |
| | | <!-- }--> |
| | | <!-- }--> |
| | | <!-- }--> |
| | | <!-- }--> |
| | | <!--}--> |
| | | <!--</script>--> |
| | | .wms-panel { |
| | | |
| | | <!--<style scoped lang="less">--> |
| | | <!-- .inner-panel {--> |
| | | <!-- .title{--> |
| | | <!-- color: #ffffff;--> |
| | | <!-- font-size: 16px;--> |
| | | <!-- font-weight: 600;--> |
| | | <!-- margin: 10px;--> |
| | | <!-- text-align: center;--> |
| | | <!-- }--> |
| | | <!-- .btn-filter {--> |
| | | <!-- cursor: pointer;--> |
| | | <!-- color: #ffffff;--> |
| | | <!-- }--> |
| | | .wms-panel-scrollbar{ |
| | | height: 457px; |
| | | width: 100%; |
| | | font-size: 14px; |
| | | } |
| | | .layerbox { |
| | | width: 100%; |
| | | position: relative; |
| | | .downUp{ |
| | | position: absolute; |
| | | top:3px; |
| | | left: -2px; |
| | | height: 30px; |
| | | width: 30px; |
| | | text-align: center; |
| | | line-height: 30px; |
| | | cursor: pointer; |
| | | font-size: 20px; |
| | | transition: all 1.5s; |
| | | } |
| | | .downUp.active{ |
| | | transform: rotate(-90deg); |
| | | } |
| | | .downUp:hover{font-size: 26px;font-weight: 900} |
| | | .layerbox-item { |
| | | padding-left: 30px; |
| | | padding-top: 5px; |
| | | .basemap-layer-item { |
| | | margin-bottom: 5px; |
| | | } |
| | | } |
| | | .layerbox-item-3{ |
| | | padding-left: 20px; |
| | | padding-top: 5px; |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | .basemap-layer-item{width: 50%} |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | <!-- .wms-panel {--> |
| | | <!-- width: 250px;--> |
| | | |
| | | <!-- .layerbox {--> |
| | | <!-- width: 100%;--> |
| | | |
| | | <!-- .layerbox-item {--> |
| | | <!-- display: flex;--> |
| | | <!-- flex-flow: row wrap;--> |
| | | <!-- margin-left: 15px;--> |
| | | <!-- margin-top: 5px;--> |
| | | |
| | | <!-- .basemap-layer-item {--> |
| | | <!-- width: 50%;--> |
| | | <!-- }--> |
| | | <!-- }--> |
| | | <!-- }--> |
| | | <!-- }--> |
| | | <!-- }--> |
| | | |
| | | <!--</style>--> |
| | | </style> |