修改图层控制

徐旺旺

2021-03-02 d1a750f93f111a6c1ef01a6ce7531d6738bb5b30

修改图层控制

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -4,7 +4,8 @@
            <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>
                                                                               class="btn-filter">过滤</span><span @click="loadWfs()"
                                                                                                                 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"
@@ -22,9 +23,9 @@
</template>

<script>
import WmsHelper from '../../helpers/WmsHelper'
import AjaxUtils from '@/utils/AjaxUtils'
import WfsHelper from '../../helpers/WfsHelper'
import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'
import AjaxUtils from '../../../utils/AjaxUtils'

export default {
  name: 'LcServiceLayer',
@@ -53,8 +54,12 @@
      this.updateWms()
    },
    loadWfs () {
      AjaxUtils.GetDataAsynByUrl('http://xearth.cn:6289/server/ogcserver/PipeLineTest/wfs?version=1.0.0&TYPENAME=pipeline&REQUEST=getfeature&OUTPUTFORMAT=json&maxFeatures=20000', {}, (res) => {
        window.L.geoJSON(res).addTo(window.map)
      var wfsHelper = new WfsHelper()
      wfsHelper.addTypeName('管线点')
      wfsHelper.appendEquals('pipename', '研究院01路YS000001')

      AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}, (res) => {
        console.log(res)
      })
    },
    swWmsLayer (url, itm) {
@@ -74,7 +79,7 @@
    },
    updateWms () {
      var mapConfig = this.mapConfig
      var wmsHelper = new WmsHelper()
      var wmsHelper = new WfsHelper()
      wmsHelper.initMapConfig(mapConfig)
      var wmsLayersMap = wmsHelper.getWmsLayersMap()
      for (var k in wmsLayersMap) {

 src/components/helpers/WfsHelper.js

New file
@@ -0,0 +1,63 @@
/**
 * 加载WMS,拼接FILTER,LAYERS参数等
 */
function WfsHelper () {
  this.filters = []
  this.typeNames = []
  this.url = 'http://xearth.cn:6289/server/ogcserver/PipeLine/wfs'
  this.params = {
    REQUEST: 'getfeature',
    OUTPUTFORMAT: 'JSON',
    maxFeatures: 20000,
    version: '1.0.0'
  }

  this.addTypeName = (typeName) => {
    this.typeNames.push(typeName)
  }

  this.appendEquals = (property, literal) => {
    var filter = '<PropertyIsEqualTo><PropertyName>' + property + '</PropertyName><Literal>' + literal + '</Literal></PropertyIsEqualTo>'
    this.filters.push(filter)
  }

  this.getFilterParams = () => {
    var head = '<Filter xmlns="http://www.opengis.net/ogc">'
    var end = '</Filter>'
    var filter = ''
    if (this.filters.length > 0) {
      for (var i = 0; i < this.filters.length; i++) {
        filter += this.filters[i]
      }
      return ('FILTER=' + head + filter + end)
    }
    return null
  }

  this.getUrlParams = () => {
    var params = ''
    for (var p in this.params) {
      params += (p + '=' + this.params[p] + '&')
    }
    // 拼接typename参数
    params += 'typename=' + this.typeNames.join(',')
    // 拼接filter参数
    var filterParam = this.getFilterParams()
    if (filterParam) {
      params += '&' + filterParam
    }
    return encodeURI(params)
  }

  this.getUrl = () => {
    var url = this.url
    if (url.indexOf('?') > 0) {
      url += '&'
    } else {
      url += '?'
    }
    return url + this.getUrlParams()
  }
}

export default WfsHelper

 src/components/helpers/WmsHelper.js

File was deleted