替换wms服务初步

徐旺旺

2021-04-29 150a37f948214be4bd183b30f3f2865a6f1c519f

替换wms服务初步

 src/components/LayerController/event/EventHandler.js

New file
@@ -0,0 +1,25 @@

class EventHandler {
  constructor () {
    this.map = window.map
    this.mapClickForLayers = {}

    window.map.on('click', (e) => {
      for (var k in this.mapClickForLayers) {
        const func = this.mapClickForLayers[k]
        console.log(func)
        func(e)
      }
    })
  }

  addLayerEvent (config, callback) {
    this.mapClickForLayers[config.code] = callback
  }

  removeEvent (config) {
    delete this.mapClickForLayers[config.code]
  }
}

export default EventHandler

 src/components/LayerController/logic/PipeLineAnimal.js

@@ -9,7 +9,7 @@
  this.init = () => {
  }

  this.create = () => {
  this.start = () => {
    const layers = LayerPipeLines.layers
    for (var i = 0; i < layers.length; i++) {
      const config = layers[i]

 src/components/LayerController/service/LayerFactory.js

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

/**
 *  init 只初始化一次
 *  start 每次调用图层显示show()时，都会调用
 *  destory 每次调用图层隐藏hide()时，都会调用
 *
 */
class LayerFactory {
  constructor (options) {
    this.L = options.L
@@ -9,9 +16,17 @@
    this.layers = {}
    this.layersLogic = {}
    this.minZoomLayers = {}
    this.wmsLayers = []
  }

  init (layerConfig) {
    this.initConfig(layerConfig)
    // wms服务只需要初始化一次
    this.wmsLayerService = new WmsLayerService(this.wmsLayers)
    this.wmsLayerService.init()
  }

  initConfig (layerConfig) {
    // 1. 遍历layer config
    if (layerConfig) {
      for (var i = 0; i < layerConfig.length; i++) {
@@ -19,6 +34,11 @@
        var layers = config.layers
        var childLayer = config.childLayer
        var checked = config.checked
        /* if (config.groupName) {
          const wmsGroupLayerService = new WmsGroupLayerService(config)
          wmsGroupLayerService.init()
          continue
        } */
        layers && this.init(config.layers)
        childLayer && this.init(config.childLayer)

@@ -45,7 +65,7 @@
  loadLogic (config) {
    var code = config.code
    var wfs = config.wfs
    var wms = config.wms
    var wmsLayers = config.wmsLayers

    const file = logicMapper[code]
    var logic = this.layersLogic[code]
@@ -55,14 +75,24 @@
        logic = new BusiLayer()
      } else if (wfs) {
        logic = new WfsLayerService(config)
      } else if (wms) {
        logic = new WmsLayerService(config)
      } else if (wmsLayers) {
        var layer = {}
        layer[config.code] = config
        this.wmsLayers.push(layer)
      }
    }
    this.layersLogic[code] = logic
    return logic
  }

  /**
   * 1. 先调用处理逻辑的 initLayer ，如果没有 就创建一个 featureGroup
   * 2. 如果存在事件逻辑的话，绑定tooltip,click事件
   * 3. 将layer添加到map
   * 4. 返回layer
   * @param config
   * @returns layer
   */
  addLayer (config) {
    var code = config.code
    var logic = this.loadLogic(config)
@@ -81,17 +111,26 @@
    return layer
  }

  /**
   * 如果 存在已经加载了的对象，就直接加到map
   * 如果 不存在则 调用 addLayer 及 逻辑类的init 进行初始化操作
   * 如果 存在start函数，则调用
   * @param config
   */
  show (config) {
    var index = config.index
    var layer = this.layers[config.code]
    var logic = this.loadLogic(config)
    if (layer) {
      if (!this.map.hasLayer(layer)) {
        index && layer.setZIndex(index)
        layer.addTo(this.map)
      }
    } else {
      logic && logic.init(this.addLayer(config), this.L)
    }
    logic && logic.create && logic.create()
    logic && logic.start && logic.start()
    this.wmsLayerService && this.wmsLayerService.add(config)
  }

  hide (config) {
@@ -100,6 +139,7 @@
    layer && this.map.removeLayer(layer)
    const logic = this.loadLogic(config)
    logic && logic.destory && logic.destory()
    this.wmsLayerService && this.wmsLayerService.remove(config)
  }

  /**
@@ -107,7 +147,7 @@
     * @param layerConfig
     */
  initEvent (layerConfig) {
    this.map.on('zoomend ', () => this.toggleByZoom())
    // this.map.on('zoomend ', () => this.toggleByZoom())
  }

  toggleByZoom () {

 src/components/LayerController/service/WfsLayerService.js

@@ -1,5 +1,5 @@
/**
 * 加载业务数据图层
 * 加载wfs服务图层
 */
import { STYLES } from '../../../conf/Constants'
import AjaxUtils from '../../../utils/AjaxUtils'

 src/components/LayerController/service/WmsGroupLayerService.js

New file
@@ -0,0 +1,117 @@
import AjaxUtils from '../../../utils/AjaxUtils'
import { PIPELINE_WMS } from '../../../conf/Constants'

/**
 * wms 图层组的管理
 */
class WmsGroupLayerService {
  constructor (config) {
    this.config = config
    this.L = window.L
    // 存放getfeatureinfo的图层组
    this.featureGroup = this.L.featureGroup({})
    this.map = window.map
    this.popupComp = window.popupComp
    // {groupName:{url:'.../wms',layers:[]}}
    this.groups = []
    this.map.on('click', (e) => this.click(e))
  }

  init () {
    this.layer = this.L.featureGroup({}).addTo(this.map)
    this.initGroup(this.config)
    this.load()
  }

  hide (config) {
    const layerName = config.layerName
    for (var i = 0; i < this.groups.length; i++) {
      const group = this.groups[i]
      for (var k in group) {
        const v = group[k]
        const index = v.layers.indexOf(layerName)
        if (index >= 0) {
          delete v.layers[index]
        }
      }
    }
  }

  initGroup (config) {
    const groupName = this.config.groupName
    const layers = config.layers
    layers && this.initGroup(layers)
    for (var i = 0; i < config.length; i++) {
      const layerConfig = config[i]
      const layerName = layerConfig.layerName
      const group = this.groups[groupName]
      if (group) {
        group.layers.push(layerName)
      } else {
        this.groups[groupName] = {
          url: '',
          layers: [layerName]
        }
      }
    }
  }

  load () {
    for (var k in this.groups) {
      console.log(k)
      this.L.tileLayer.wms(PIPELINE_WMS, {
        format: 'image/png', // 返回的数据格式
        transparent: true,
        layers: k // todo
      }).addTo(this.layer).bringToFront()
    }
  }

  click (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()
    const params = {
      VERSION: '1.1.1',
      SERVICE: 'WMS',
      REQUEST: 'GetFeatureInfo',
      // bbox: bbox,
      FORMAT: 'image/png',
      INFO_FORMAT: 'application/json',
      TRANSPARENT: true,
      LAYERS: 'sewer:pipeline_group',
      QUERY_LAYERS: 'sewer:pipeline_group', // todo
      FEATURE_COUNT: 50,
      SRS: 'EPSG:4326',
      WIDTH: size.x,
      HEIGHT: size.y,
      EXCEPTIONS: 'application/vnd.ogc.se_inimage',
      X: Math.round(point.x),
      Y: Math.round(point.y),
      BBOX: this.map.getBounds().toBBoxString()
    }

    AjaxUtils.get4JsonDataByUrl(PIPELINE_WMS, params, (res) => {
      let features = res.data.features
      features = features[0]
      var myIcon = this.L.divIcon({ className: 'my-div-icon' })
      this.L.marker(features.geometry.coordinates.reverse(), {
        icon: myIcon
      }).addTo(this.featureGroup)
        .bindPopup((layer) => {
          this.popupComp.setDatas({ feature: features })
          this.popupComp.setShow()
          return this.popupComp.$el
        }, {
          className: 's-map-popup',
          minWidth: 300,
          closeButton: false,
          autoClose: false
        })
        .openPopup()
    })
  }
}

export default WmsGroupLayerService

 src/components/LayerController/service/WmsLayerService.js

@@ -1,10 +1,165 @@
import AjaxUtils from '../../../utils/AjaxUtils'
import { PIPELINE_WMS } from '../../../conf/Constants'

/**
 * todo 得考虑一个图层配置了多个 wmsLayers的情况
 */
class WmsLayerService {
  constructor (config) {
    this.config = config
  constructor (layersConfig) {
    this.L = window.L
    this.map = window.map
    this.popupComp = window.popupComp
    // wms getfeatureinfo 默认参数
    this.params = {
      VERSION: '1.1.1',
      SERVICE: 'WMS',
      REQUEST: 'GetFeatureInfo',
      // bbox: bbox,
      FORMAT: 'image/png',
      INFO_FORMAT: 'application/json',
      TRANSPARENT: true,
      FEATURE_COUNT: 50,
      SRS: 'EPSG:4326',
      EXCEPTIONS: 'application/vnd.ogc.se_inimage'
    }
    this.layersConfig = layersConfig
    // 存放getfeatureinfo的图层组
    this.featureGroup = this.L.featureGroup({}).addTo(this.map)

    this.layers = []
    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])
        }
      }
    }
  }

  init (layer) {
  init () {
    if (this.layers) {
      this.load(this.layers)
      this.clickListener()
    }
  }

  add (config) {
    const code = config.code
    for (var k in this.layersConfig) {
      if (code === k) {
        return false
      }
    }
    this.layers.push(config.wmsLayers)
    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)
      }
    }
    this.wmsLayer.setParams({ layers: this.layers.join(',') })
  }

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

  clickListener () {
    window.map.on('click', (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()

      const params = Object.assign({
        LAYERS: this.layers.join(','),
        QUERY_LAYERS: this.layers.join(','),
        WIDTH: size.x,
        HEIGHT: size.y,
        X: Math.round(point.x),
        Y: Math.round(point.y),
        BBOX: this.map.getBounds().toBBoxString()
      }, this.params)
      AjaxUtils.get4JsonDataByUrl(PIPELINE_WMS, params, (res) => {
        const features = res.data.features
        /**
         * {
         *     title: 'New Tab',
         *     name: newTabName,
         *     content: 'New Tab content'
         * }
         * @type {*[]}
         */
        const popupDatas = []
        if (features) {
          for (var i = 0; i < features.length; i++) {
            const feature = features[i]
            const properties = feature.properties
            this.highlight(feature)
            // const coordinates = feature.geometry.coordinates
            popupDatas.push({
              title: properties.wellname || properties.devicename || properties.name,
              name: feature.id,
              content: properties
            })
          }
        }
        if (popupDatas.length > 0) {
          var myIcon = this.L.divIcon({ className: 'my-div-icon' })
          this.L.marker(e.latlng, {
            icon: myIcon
          }).addTo(this.featureGroup)
            .bindPopup((layer) => {
              this.popupComp.setDatas(popupDatas)
              this.popupComp.setShow()
              return this.popupComp.$el
            }, {
              className: 's-map-popup',
              minWidth: 300,
              closeButton: false,
              autoClose: false
            })
            .openPopup()
        }
      })
    })
  }

  reverse (feature) {
    const coordinates = feature.geometry.coordinates
    var latlng = []
    for (var j = 0; j < coordinates.length; j++) {
      const coordinate = coordinates[j]
      var xy = []
      for (var k = 0; k < coordinate.length; k++) {
        const coor = coordinate[k]
        xy.push(coor.reverse())
      }
      latlng.push(xy)
    }
    return latlng
  }

  highlight (feature) {
    const type = feature.geometry.type
    if (type === 'MultiLineString') {
      this.L.polyline(this.reverse(feature)).addTo(this.featureGroup)
    } else if (type === 'Point') {
      var myIcon = this.L.divIcon({ className: 'my-div-icon' })
      this.L.marker(feature.geometry.coordinates.reverse(), {
        icon: myIcon
      }).addTo(this.featureGroup)
    }
  }
}


 src/conf/Constants.js

@@ -5,6 +5,7 @@
}

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

export const logicMapper = {
  wasteGasPfk: 'WasteGas.js',

 src/conf/layers/LayerFsss.js

@@ -13,7 +13,8 @@
      name: '管段',
      sname: '管段',
      checked: false,
      wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipesegment&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=orgname=\'巴陵石化\''
      wmsLayers: 'sewer:pipesegment'
      // wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipesegment&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=orgname=\'巴陵石化\''
    },
    {
      code: 'fourlink',
@@ -21,7 +22,8 @@
      sname: '四通',
      checked: true,
      minZoom: 16,
      wfs: WFS_URL + '?TYPENAME=四通',
      wmsLayers: 'sewer:fourlink',
      // wfs: WFS_URL + '?TYPENAME=四通',
      icon: 'sewers/四通.png'
    },
    {
@@ -30,7 +32,8 @@
      sname: '三通',
      checked: false,
      minZoom: 16,
      wfs: WFS_URL + '?TYPENAME=三通',
      wmsLayers: 'sewer:tee',
      // wfs: WFS_URL + '?TYPENAME=三通',
      icon: 'sewers/三通.png'
    },
    {
@@ -61,7 +64,8 @@
      minZoom: 10,
      sname: '阀门',
      checked: false,
      wfs: WFS_URL + '?TYPENAME=阀门',
      wmsLayers: 'sewer:valve',
      // wfs: WFS_URL + '?TYPENAME=阀门',
      icon: 'sewers/阀门.png'
    },
    {
@@ -70,7 +74,8 @@
      sname: '弯头',
      minZoom: 16,
      checked: false,
      wfs: WFS_URL + '?TYPENAME=弯头',
      wmsLayers: 'sewer:elbow',
      // wfs: WFS_URL + '?TYPENAME=弯头',
      icon: 'sewers/弯头.png'
    }
  ]

 src/conf/layers/LayerHbss.js

@@ -14,7 +14,7 @@
      sname: '窨井',
      checked: false,
      minZoom: 16,
      wfs: WFS_URL + '?TYPENAME=窨井',
      wmsLayers: 'sewer:manhole',
      icon: 'sewers/窨井.png'
    },
    {
@@ -23,7 +23,8 @@
      sname: '雨篦子',
      checked: false,
      minZoom: 16,
      wfs: WFS_URL + '?TYPENAME=雨篦子',
      wmsLayers: 'sewer:raingate',
      // wfs: WFS_URL + '?TYPENAME=雨篦子',
      icon: 'sewers/雨篦子.png'
    },
    {

 src/conf/layers/LayerPipeLines.js

@@ -20,8 +20,8 @@
      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>',
      wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=500&outputFormat=application%2Fjson&cql_filter=linenumtype=\'雨水管线\'',
      icon: 'sewers/雨水线.png',
      color: '#0070ff',
      minZoom: 13,
@@ -35,6 +35,7 @@
      name: '事故水线',
      sname: '事故水',
      checked: false,
      wmsLayers: 'sewer:pipeline_accident',
      type: 0,
      minZoom: 13,
      wfs: WFS_URL + '?TYPENAME=事故水'
@@ -47,7 +48,8 @@
      type: 0,
      minZoom: 13,
      color: '#ffaa00',
      wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=500&outputFormat=application%2Fjson&cql_filter=mediumtype=\'含油污水\'',
      wmsLayers: 'sewer:pipeline_sewer',
      // wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=500&outputFormat=application%2Fjson&cql_filter=mediumtype=\'含油污水\'',
      styles: {
        COLOR: '#ffaa00',
        FILL_COLOR: '#ffaa00'

 src/views/MapTemplate.vue

@@ -35,6 +35,7 @@
// // 公共展示数据
import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced'
import LayerFactory from '@components/LayerController/service/LayerFactory'
import EventHandler from '../components/LayerController/event/EventHandler'

export default {
  name: 'MapTemplate',
@@ -86,13 +87,6 @@
      this.$refs.toolBox.map = this.map

      window.popupComp = this.$refs.popup
      var layerFactory = new LayerFactory({
        L: window.L,
        map: this.map
      })
      layerFactory.init(this.$store.state.map.serviceLayers.LayerSewersLine)
      layerFactory.initEvent(this.$store.state.map.serviceLayers.LayerSewersLine)
      window.layerFactory = layerFactory

      this.basemapHelper = Sgis.initBasemapsHelper(this.map) // 初始化基础底图助手
      this.basemapHelper.initBasemap(this.config, false) // 第二个参数，表示是否内网底图
@@ -102,6 +96,16 @@
      // this.AddGasHelper()
      // this.ChangeWaterState()

      var eventHandler = new EventHandler()
      window.eventHandler = eventHandler

      var layerFactory = new LayerFactory({
        L: window.L,
        map: this.map
      })
      layerFactory.init(this.$store.state.map.serviceLayers.LayerSewersLine)
      layerFactory.initEvent(this.$store.state.map.serviceLayers.LayerSewersLine)
      window.layerFactory = layerFactory
      this.saveMapStatus()
      // this.setMapObj(this.mapObj)
      // this.setBasemapHelper(this.basemapHelper)

 src/views/popup/Popup.vue

@@ -7,9 +7,9 @@
              :label="item.title"
              :name="item.name"
      >
        <el-row v-for="(v,k) in filter" :key="k">
          <el-col :span="10"><B>{{k}}：</B></el-col>
          <el-col :span="14">{{v}}</el-col>
        <el-row v-for="(v,k) in filter(item.content)" :key="k">
          <el-col :span="12"><B>{{k}}：</B></el-col>
          <el-col :span="12">{{v}}</el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
@@ -24,7 +24,7 @@
  name: 'Popup',
  data () {
    return {
      tabsValue: '1',
      tabsValue: '',
      tabs: [],
      tabIndex: 2,
      isShow: false,
@@ -33,52 +33,21 @@
    }
  },
  computed: {
    filter () {
      var obj = {}
      for (const key in this.properties) {
        if (this.props[key]) {
          obj[this.props[key]] = this.properties[key]
        }
      }
      return obj
    }
  },
  methods: {
    handleTabsEdit (targetName, action) {
      if (action === 'add') {
        const newTabName = ++this.tabIndex + ''
        this.editableTabs.push({
          title: 'New Tab',
          name: newTabName,
          content: 'New Tab content'
        })
        this.editableTabsValue = newTabName
      }
      if (action === 'remove') {
        const tabs = this.editableTabs
        let activeName = this.editableTabsValue
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              const nextTab = tabs[index + 1] || tabs[index - 1]
              if (nextTab) {
                activeName = nextTab.name
              }
            }
          })
    filter (content) {
      var obj = {}
      for (const key in content) {
        if (this.props[key]) {
          obj[this.props[key]] = content[key]
        }

        this.editableTabsValue = activeName
        this.editableTabs = tabs.filter(tab => tab.name !== targetName)
      }
      console.log(obj)
      return obj
    },
    setDatas (layer) {
      console.log(layer)
      this.tabs = [{
        title: layer.feature.properties.name || layer.feature.id,
        name: '1'
      }]
      this.properties = layer.feature.properties
      this.tabs = layer
      this.tabsValue = layer[0].name
    },
    setShow () {
      // this.style.display='auto'