| | |
| | | <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><span @click="loadWfs()" |
| | | class="btn-filter">测试</span> |
| | | 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)"/>{{ |
| | | @change="swWmsLayer(itm)"/>{{ |
| | | itm.name }} |
| | | </div> |
| | | </div> |
| | |
| | | loadWfs () { |
| | | var wfsHelper = new WfsHelper() |
| | | wfsHelper.addTypeName('管线点') |
| | | wfsHelper.appendEquals('pipename', '研究院01路YS000001') |
| | | wfsHelper.addEquals('pipename', '研究院01路YS000001') |
| | | |
| | | AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}, (res) => { |
| | | console.log(res) |
| | | }) |
| | | }, |
| | | swWmsLayer (url, itm) { |
| | | swWmsLayer (itm) { |
| | | itm.checked = !itm.checked |
| | | if (itm.checked) { |
| | | window.serviceLayerHelper.loadGeojsonLayer(url, itm) |
| | | window.layerFactory.show(itm.code) |
| | | } else { |
| | | window.serviceLayerHelper.removeLayer(itm) |
| | | window.layerFactory.hide(itm.code) |
| | | } |
| | | // this.updateWms() |
| | | }, |
| | |
| | | |
| | | <style scoped lang="less"> |
| | | .inner-panel { |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | |
| | | .title{ |
| | | color: #ffffff; |
| | | font-size: 16px; |
| | | font-weight: 600; |
| | | margin: 10px; |
| | | text-align: center; |
| | | } |
| | | .btn-filter { |
| | | cursor: pointer; |
| | | color: #ffffff; |
| | | } |
| | | |
| | | .wms-panel { |
| | | display: flex; |
| | | flex-flow: column; |
| | | width: 250px; |
| | | |
| | | .layerbox { |
| | | width: 100%; |
| | | display: flex; |
| | | flex-flow: column; |
| | | |
| | | .layerbox-item { |
| | | display: flex; |