搜索更换为geoserver wfs,图层顺序，弹窗定位等

徐旺旺

2021-05-10 cb85033879c74f34925a303402c1ad3e4a8646f2

搜索更换为geoserver wfs,图层顺序，弹窗定位等

 src/components/LayerController/service/LayerFactory.js

@@ -1,6 +1,6 @@
import WfsLayerService from './WfsLayerService'
import { clone } from '../../../utils/utils'
import { logicMapper } from '../../../conf/Constants'
import { logicMapper, SERVICE_TYPE } from '../../../conf/Constants'
import WmsLayerService from './WmsLayerService'

/**
@@ -65,8 +65,7 @@

  loadLogic (config) {
    var code = config.code
    var wfs = config.wfs
    var wmsLayers = config.wmsLayers
    var type = config.type

    const file = logicMapper[code]
    var logic = this.layersLogic[code]
@@ -74,9 +73,9 @@
      if (file) {
        var BusiLayer = require('../logic/' + file)
        logic = new BusiLayer()
      } else if (wfs) {
      } else if (type === SERVICE_TYPE.WFS) {
        logic = new WfsLayerService(config)
      } else if (wmsLayers) {
      } else if (type === SERVICE_TYPE.WMS) {
        var layer = {}
        layer[config.code] = config
        this.wmsLayers.push(layer)
@@ -184,9 +183,17 @@
        break
      case 'MultiLineString':
        var coordinates = feature.geometry.coordinates
        point = coordinates[parseInt(coordinates.length / 2)][0]
        var coordinate = coordinates[parseInt(coordinates.length / 2)][0]
        if (coordinate.length > 2) {
          point = [coordinate[0], coordinate[1]]
        }
        break
      case 'LineString':
        var lineString = feature.geometry.coordinates
        point = lineString[parseInt(lineString.length / 2)][0]
        break
    }
    console.log(point)
    window.map.flyTo(point.reverse(), 17)
    code && this.openPopup(code, feature.id)
  }

 src/components/LayerController/service/WmsLayerService.js

@@ -1,6 +1,7 @@
import AjaxUtils from '../../../utils/AjaxUtils'
import { PIPELINE_WMS } from '../../../conf/Constants'
import Popup from '@views/popup/Popup'
import List from '../../../utils/List'

/**
 * todo 得考虑一个图层配置了多个 wmsLayers的情况
@@ -27,13 +28,12 @@
    // 存放getfeatureinfo的图层组
    this.featureGroup = this.L.featureGroup({}).addTo(this.map)

    this.layers = []
    this.layers = new List()
    for (var i = 0; i < layersConfig.length; i++) {
      const config = layersConfig[i]
      for (var k in config) {
        if (k === 'wmsLayers') {
          this.layers.push(config[k])
        }
      const typeName = config.typeName
      if (typeName) {
        this.layers.add(config.index, typeName)
      }
    }
  }
@@ -46,23 +46,18 @@
  }

  add (config) {
    const wmsLayers = config.wmsLayers
    if (wmsLayers) {
      if (this.layers.indexOf(wmsLayers) < 0) {
        this.layers.push(config.wmsLayers)
    const typeName = config.typeName
    if (typeName) {
      if (!this.layers.contains(typeName)) {
        this.layers.add(config.index, typeName)
        this.wmsLayer.setParams({ layers: this.layers.join(',') })
      }
    }
  }

  remove (config) {
    const wmsLayers = config.wmsLayers
    for (var i = 0; i < this.layers.length; i++) {
      const layerName = this.layers[i]
      if (wmsLayers === layerName) {
        this.layers.splice(i, 1)
      }
    }
    const typeName = config.typeName
    this.layers.remove(typeName)
    this.wmsLayer.setParams({ layers: this.layers.join(',') })
  }

@@ -70,18 +65,19 @@
    this.wmsLayer = this.L.tileLayer.wms(PIPELINE_WMS, {
      format: 'image/png', // 返回的数据格式
      transparent: true,
      layers: layers.join(',')
      layers: this.layers.join(',')
    }).addTo(this.map)
  }

  clickListener () {
    window.map.on('click', (e) => {
      console.log(e)
      this.featureGroup.clearLayers()
      var point = this.map.latLngToContainerPoint(e.latlng, this.map.getZoom())
      var size = this.map.getSize()
      // const bbox = this.L.latLngBounds(this.L.latLng(e.latlng.lng, e.latlng.lat)).toBBoxString()

      if (this.layers && this.layers.length > 0) {
      if (this.layers.length() > 0) {
        const params = Object.assign({
          LAYERS: this.layers.join(','),
          QUERY_LAYERS: this.layers.join(','),
@@ -94,13 +90,13 @@
        AjaxUtils.get4JsonDataByUrl(PIPELINE_WMS, params, (res) => {
          const features = res.data.features
          /**
             * {
             *     title: 'New Tab',
             *     name: newTabName,
             *     content: 'New Tab content'
             * }
             * @type {*[]}
             */
           * {
           *     title: 'New Tab',
           *     name: newTabName,
           *     content: 'New Tab content'
           * }
           * @type {*[]}
           */
          const popupDatas = []
          if (features) {
            for (var i = 0; i < features.length; i++) {
@@ -140,7 +136,9 @@
                    datas: popupDatas
                  }
                },
                title: '' // 标题
                title: '', // 标题
                left: e.originalEvent.clientX,
                top: e.originalEvent.clientY
              })
            }
            // this.popupComp.setDatas(popupDatas)

 src/components/helpers/WfsHelper.js

@@ -1,14 +1,14 @@
/**
 * 加载WMS,拼接FILTER,LAYERS参数等
 */
import { PIPELINE_WFS } from '../../conf/Constants'
import { WFS_URL } from '../../conf/Constants'
function WfsHelper () {
  this.filters = []
  this.typeNames = []
  this.url = PIPELINE_WFS
  this.url = WFS_URL
  this.params = {
    REQUEST: 'getfeature',
    OUTPUTFORMAT: 'JSON',
    OUTPUTFORMAT: 'application/json',
    maxFeatures: 20000,
    version: '1.0.0'
  }
@@ -17,16 +17,19 @@
    this.typeNames.push(typeName)
  }

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

  this.addLike = (property, literal) => {
    if (property && literal) {
      var filter = '<PropertyIsLike><PropertyName>' + property + '</PropertyName><Literal>*' + literal + '*</Literal></PropertyIsLike>'
      this.filters.push(filter)
    }
    // if (property && literal) {
    // var filter = '<PropertyIsLike><PropertyName>' + property + '</PropertyName><Literal>*' + literal + '*</Literal></PropertyIsLike>'
    // this.filters.push(filter)
    // }
    var filter = property + ' like \'%' + literal + '%\''
    this.filters.push(filter)
  }

  /**
@@ -34,7 +37,7 @@
   * @returns {string|null}
   */
  this.getFilterParams = () => {
    var head = '<Filter xmlns="http://www.opengis.net/ogc">'
    /* var head = '<Filter xmlns="http://www.opengis.net/ogc">'
    var end = '</Filter>'
    var filter = ''
    if (this.filters.length > 0) {
@@ -46,8 +49,19 @@
        return ('FILTER=' + head + '<And>' + filter + '</And>' + end)
      }
      return ('FILTER=' + head + filter + end)
    } */
    var filter = ''
    if (this.filters.length > 0) {
      filter = 'CQL_FILTER='
      for (var i = 0; i < this.filters.length; i++) {
        filter += this.filters[i]
        if (i !== this.filters.length - 1) {
          filter += ' AND '
        }
      }
      return filter
    }
    return null
    return filter
  }

  this.getUrlParams = () => {
@@ -62,7 +76,8 @@
    if (filterParam) {
      params += '&' + filterParam
    }
    return encodeURI(params)
    // return encodeURI(params)
    return params
  }

  this.getUrl = () => {

 src/components/layer/src/layer.js

@@ -20,6 +20,7 @@
   * @return {[type]}         [description]
   */
  self.open = function (opt) {
    console.log(opt)
    self.closeAll()
    var options = mergeJson(opt, defOptions)
    const id = `notification_${new Date().getTime()}_${seed++}`

 src/components/layer/src/layer.vue

@@ -28,6 +28,18 @@
  },
  computed: {},
  mounted () {
    let left = this.left
    let top = this.top
    if (left > 0) {
      left = left + 'px'
    }
    if (top > 0) {
      top = top + 'px'
    }
    this.style = {
      left: left || '25%',
      top: top || '35%'
    }
  },
  methods: {
    close () {
@@ -72,8 +84,6 @@
.public-bounced {
  z-index: 2000;
  position: absolute;
  top: 35%;
  left: 20%;

  .public-bounced-title {
    cursor: move;

 src/components/panel/topicSearch/SewersSearch.vue

@@ -144,11 +144,12 @@
      this.list = []
      var wfsHelper = new WfsHelper()
      // todo 现在管网还没区分开类型，后面改
      wfsHelper.addTypeName(this.form.dataType.sname)
      wfsHelper.addLike('name', this.form.keyword)
      wfsHelper.addTypeName(this.form.dataType.typeName)
      if (this.form.keyword) {
        wfsHelper.addLike('name', this.form.keyword)
      }
      // const _this = this
      const res = await AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {})
      console.log(res)
      if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
        this.list = res.features
      }

 src/conf/Constants.js

@@ -4,6 +4,12 @@
  POLYGON: 'polygon'
}

export const SERVICE_TYPE = {
  WFS: 'wfs',
  WMS: 'wms'
}

export const WFS_URL = 'http://xearth.cn:6240/geoserver/sewer/ows?service=WFS'
export const PIPELINE_WFS = 'http://xearth.cn:8088/server/ogcserver/PipeLine2/wfs'
export const PIPELINE_WMS = 'http://xearth.cn:6240/geoserver/sewer/wms'


 src/conf/layers/LayerFsss.js

@@ -1,30 +1,32 @@
/**
 * 区域
 */
import { PIPELINE_WFS } from '../Constants'
import { PIPELINE_WFS, SERVICE_TYPE } from '../Constants'
const WFS_URL = PIPELINE_WFS
export const LayerFsss = {
  code: 'sewersFsss',
  name: '附属设施',
  checked: false, // 默认选中状态
  layers: [
    {
    /* {
      code: 'pipeSection',
      name: '管段',
      sname: '管段',
      checked: false,
      wmsLayers: 'sewer:pipesegment'
      // wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipesegment&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=orgname=\'巴陵石化\''
    },
    }, */
    {
      code: 'fourlink',
      name: '四通',
      sname: '四通',
      checked: true,
      minZoom: 16,
      wmsLayers: 'sewer:fourlink',
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:fourlink',
      // wfs: WFS_URL + '?TYPENAME=四通',
      icon: 'sewers/四通.png'
      icon: 'sewers/四通.png',
      index: 3
    },
    {
      code: 'tee',
@@ -32,16 +34,19 @@
      sname: '三通',
      checked: false,
      minZoom: 16,
      wmsLayers: 'sewer:tee',
      typeName: 'sewer:tee',
      type: SERVICE_TYPE.WMS,
      // wfs: WFS_URL + '?TYPENAME=三通',
      icon: 'sewers/三通.png'
      icon: 'sewers/三通.png',
      index: 3
    },
    {
      code: 'piperack',
      name: '管架(墩)',
      sname: 'PipeRack',
      minZoom: 16,
      wfs: WFS_URL + '?TYPENAME=管架',
      type: SERVICE_TYPE.WMS,
      typeName: WFS_URL + '?TYPENAME=管架',
      checked: false
    },
    {
@@ -49,13 +54,15 @@
      name: '管廊(带)',
      sname: 'PipeGallery',
      minZoom: 16,
      wfs: WFS_URL + '?TYPENAME=管廊',
      type: SERVICE_TYPE.WMS,
      typeName: '?TYPENAME=管廊',
      checked: false
    },
    {
      code: 'pipesegment',
      name: '流向',
      sname: 'ywslx',
      type: SERVICE_TYPE.WMS,
      checked: false
    },
    {
@@ -64,7 +71,8 @@
      minZoom: 10,
      sname: '阀门',
      checked: false,
      wmsLayers: 'sewer:valve',
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:valve',
      // wfs: WFS_URL + '?TYPENAME=阀门',
      icon: 'sewers/阀门.png'
    },
@@ -74,7 +82,8 @@
      sname: '弯头',
      minZoom: 16,
      checked: false,
      wmsLayers: 'sewer:elbow',
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:elbow',
      // wfs: WFS_URL + '?TYPENAME=弯头',
      icon: 'sewers/弯头.png'
    }

 src/conf/layers/LayerHbss.js

@@ -1,7 +1,7 @@
/**
 * 区域
 */
import { PIPELINE_WFS } from '../Constants'
import { PIPELINE_WFS, SERVICE_TYPE } from '../Constants'
const WFS_URL = PIPELINE_WFS
export const LayerHbss = {
  code: 'sewersHbss',
@@ -14,6 +14,7 @@
      sname: '窨井',
      checked: false,
      minZoom: 16,
      type: SERVICE_TYPE.WMS,
      wmsLayers: 'sewer:manhole',
      icon: 'sewers/窨井.png'
    },
@@ -23,7 +24,8 @@
      sname: '雨篦子',
      checked: false,
      minZoom: 16,
      wmsLayers: 'sewer:raingate',
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:raingate',
      // wfs: WFS_URL + '?TYPENAME=雨篦子',
      icon: 'sewers/雨篦子.png'
    },
@@ -32,6 +34,7 @@
      name: '防火堤',
      sname: '防火堤',
      minZoom: 16,
      type: SERVICE_TYPE.WMS,
      wfs: WFS_URL + '?TYPENAME=防火堤',
      checked: false
    },
@@ -42,12 +45,14 @@
      minZoom: 16,
      wfs: WFS_URL + '?TYPENAME=集水池',
      checked: false,
      type: SERVICE_TYPE.WMS,
      icon: 'sewers/集水池.png'
    },
    {
      code: 'jlz',
      name: '截流闸',
      sname: '截流闸',
      type: SERVICE_TYPE.WMS,
      wfs: WFS_URL + '?TYPENAME=截流闸',
      checked: false
    },
@@ -56,6 +61,7 @@
      name: '溢流堰',
      sname: '溢流堰',
      minZoom: 16,
      type: SERVICE_TYPE.WMS,
      wfs: WFS_URL + '?TYPENAME=溢流堰',
      checked: false
    },
@@ -65,6 +71,7 @@
      sname: '隔油池',
      minZoom: 16,
      checked: false,
      type: SERVICE_TYPE.WMS,
      wfs: WFS_URL + '?TYPENAME=隔油池',
      icon: 'sewers/隔油池.png'
    }

 src/conf/layers/LayerPipeLines.js

@@ -4,8 +4,7 @@
import { LayerHbss } from './LayerHbss'
import { LayerFsss } from './LayerFsss'

import { PIPELINE_WFS } from '../Constants'
const WFS_URL = PIPELINE_WFS
import { SERVICE_TYPE } from '../Constants'

export const LayerPipeLines = {
  code: 'sewersPipeLines',
@@ -19,110 +18,126 @@
      name: '雨水线',
      sname: '管网',
      checked: false,
      type: 0,
      wmsLayers: 'sewer:pipeline_rain',
      // wfs: WFS_URL + '?TYPENAME=管网&FILTER=<Filter xmlns="http://www.opengis.net/ogc"><PropertyIsEqualTo><PropertyName>mediumtype</PropertyName><Literal>雨水管线</Literal></PropertyIsEqualTo></Filter>',
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      icon: 'sewers/雨水线.png',
      color: '#0070ff',
      minZoom: 13,
      styles: {
        COLOR: '#0070ff',
        FILL_COLOR: '#0070ff'
      }
      },
      filter: 'mediumtype = \'雨水\'',
      index: 1
    },
    {
      code: 'accidentline',
      name: '事故水',
      sname: '事故水',
      checked: false,
      // wmsLayers: 'sewer:pipeline_accident',
      type: 0,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      minZoom: 13,
      wfs: WFS_URL + '?TYPENAME=事故水'
      filter: 'mediumtype = \'事故水\'',
      index: 1
    },
    {
      code: 'oilline',
      name: '含油污水',
      sname: '含油污水',
      checked: false,
      type: 0,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      minZoom: 13,
      color: '#ffaa00',
      wmsLayers: 'sewer:pipeline_sewer',
      // wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=500&outputFormat=application%2Fjson&cql_filter=mediumtype=\'含油污水\'',
      filter: 'mediumtype = \'含油\'',
      styles: {
        COLOR: '#ffaa00',
        FILL_COLOR: '#ffaa00'
      }
      },
      index: 1
    },
    {
      code: 'saltline',
      name: '含盐污水',
      sname: '含盐污水',
      checked: false,
      type: 0,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      minZoom: 13,
      wfs: WFS_URL + '?TYPENAME=含盐污水'
      filter: 'mediumtype = \'含盐\'',
      index: 1
    },
    {
      code: 'alkaliline',
      name: '含碱污水',
      sname: '含碱污水',
      checked: false,
      type: 0,
      wfs: WFS_URL + '?TYPENAME=含碱污水',
      minZoom: 10
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      filter: 'mediumtype = \'含碱\'',
      minZoom: 10,
      index: 1
    },
    {
      code: 'sulfurline',
      name: '含硫污水',
      sname: '含硫污水',
      checked: false,
      type: 0,
      wmsLayers: 'sewer:pipeline_sulfur',
      // wfs: WFS_URL + '?TYPENAME=含碱污水',
      minZoom: 10
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      filter: 'mediumtype = \'含硫\'',
      minZoom: 10,
      index: 1
    },
    {
      code: 'lifeline',
      name: '生活污水',
      sname: '生活污水',
      checked: false,
      type: 0,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      filter: 'mediumtype = \'生活污水\'',
      minZoom: 13,
      wfs: WFS_URL + '?TYPENAME=生活污水'
      index: 1
    },
    {
      code: 'purifyline',
      name: '净化水',
      sname: '净化水',
      checked: false,
      type: 0,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      filter: 'mediumtype = \'净化水\'',
      minZoom: 13,
      wfs: WFS_URL + '?TYPENAME=净化水'
      index: 1
    },
    {
      code: 'loopline',
      name: '循环水',
      sname: '循环水',
      type: 0,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      filter: 'mediumtype = \'循环水\'',
      checked: false,
      minZoom: 13,
      wfs: WFS_URL + '?TYPENAME=循环水'
      index: 1
    },
    {
      code: 'buildline',
      name: '生产污水',
      sname: '生产污水',
      checked: false,
      type: 0,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipeline',
      filter: 'mediumtype = \'生产污水\'',
      minZoom: 13,
      color: '#a8a800',
      wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=500&outputFormat=application%2Fjson&cql_filter=mediumtype=\'生产污水\'',
      styles: {
        COLOR: '#a8a800',
        FILL_COLOR: '#a8a800'
      }
      },
      index: 1
    }
  ]
}

 src/utils/List.js

New file
@@ -0,0 +1,96 @@
class List {
  constructor () {
    this.dataSouce = []
  }

  add (index, element) {
    if (!index) {
      this.addEnd(element)
    } else if (index >= this.dataSouce.length) {
      this.addEnd(element)
    } else if (index === 1) {
      this.addFront(element)
    } else {
      this._add(index, element)
    }
  }

  /**
    * 在列表的末尾添加新元素
    * @param {*} element 要添加的元素
    */
  addEnd (element) {
    this.dataSouce[this.dataSouce.length] = element
  }

  /**
    * 在列表头部添加新元素
    * @param {*} element
    * @param {*} after
    */
  addFront (element) {
    this._add(0, element)
  }

  _add (index, element) {
    const newArr = []
    for (var i = this.dataSouce.length - 1; i > index - 1; i--) {
      newArr[i + 1] = this.dataSouce[i]
    }
    newArr[index] = element
    this.dataSouce = newArr
  }

  /**
     * 在列表中移除一个元素
     * @param {*} element 要删除的元素
     */
  remove (element) {
    // 查找当前元素的索引
    const index = this.dataSouce.indexOf(element)
    if (index >= 0) {
      this.dataSouce.splice(index, 1)
      return true
    }
    return false
  }

  /**
     * 判断给定的值是否在列表中
     */
  contains (element) {
    return this.dataSouce.indexOf(element) > -1
  }

  /**
     * 清楚列表中的元素
     */
  clear () {
    delete this.dataSouce
    this.dataSouce = []
  }

  /**
     * 列表的长度
     */
  length () {
    return this.dataSouce.length
  }

  join (comma) {
    this.removeBlank()
    return this.dataSouce.join(comma)
  }

  removeBlank () {
    const arr = this.dataSouce
    console.log(arr)
    for (const k in arr) {
      if (!arr[k]) {
        this.dataSouce.splice(k, 1)
      }
    }
  }
}

export default List

 src/views/popup/Popup.vue

@@ -1,6 +1,6 @@
<template>
  <div id="popup" class="s-map-popup-panel" style="min-width: 280px;max-width: 280px;padding: 0 10px">
    <el-tabs :value="0" type="card">
    <el-tabs value="0" type="card">
      <el-tab-pane
              :key="item.name"
              v-for="(item,index) in datas"