定位、高亮重封装

徐旺旺

2021-05-17 3b79ee564d4c77189484711ece4dc80786f79080

定位、高亮重封装

 src/components/LayerController/service/LayerFactory.js

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

@@ -18,9 +17,6 @@
    this.minZoomLayers = {}
    this.wmsLayers = []
    this.wmsLayerService = null
    // todo 待优化，wmslayerservice调用，放这里不合适
    this.clickSwitch = true // 图层点击弹窗开关
    this.hightlightLayer = options.L.featureGroup({}).addTo(window.map)
  }

  init (layerConfig) {
@@ -164,146 +160,6 @@
          this.hide(config)
        }
      }
    }
  }

  /**
   *
   * 根据传的 feature对象定位，
   * @param code
   * @param feature
   */
  flyByFeature (feature, code) {
    this.clearHighlight()
    const type = feature.geometry.type
    var point = []
    switch (type) {
      case 'Point':
        point = feature.geometry.coordinates
        break
      case 'MultiLineString':
        var coordinates = feature.geometry.coordinates
        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
    }
    if (point.length > 2) {
      point.splice(2, 1)
    }
    this.highlight(feature)
    window.map.setView(clone(point).reverse(), 17)
    code && this.openPopup(code, feature.id)
  }

  clearHighlight () {
    this.hightlightLayer.clearLayers()
  }

  highlight (feature) {
    const type = feature.geometry.type
    if (type === 'MultiLineString') {
      this.L.geoJSON(feature, {
        style: function () {
          return {
            fillColor: 'red',
            color: 'red'
          }
        }
      }).addTo(this.hightlightLayer)
    } else if (type === 'Point') {
      let point = clone(feature.geometry.coordinates)
      if (point.length > 2) {
        point = [point[0], point[1]]
      }
      pulseEffect(point.reverse())
      /* var myIcon = this.L.divIcon({ className: 'my-div-icon' })
      this.L.marker(feature.geometry.coordinates.reverse(), {
        icon: myIcon
      }).addTo(this.hightlightLayer) */
    } else if (type === 'LineString') {
      this.L.polyline(this.reversePolyLine(feature), { color: 'red' }).addTo(this.hightlightLayer)
    }
  }

  reverseMultiLine (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
  }

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

  openPopup (layerId, id) {
    const layer = this.layers[layerId]

    if (layer) {
      layer.eachLayer(function (layer) {
        const layers = layer.getLayers()
        for (var i = 0; i < layers.length; i++) {
          const lay = layers[i]
          const feature = lay.feature
          lay.closePopup()
          if (feature.id === id) {
            lay.openPopup()
            break
          }
        }
      })
    }
    /* for (var k in this.layers) {
          var layerGroup = this.layers[k]
          layerGroup.eachLayer(function (layer) {
            console.log(layer)
            console.log(layer.getAttribution())
          })
          var layers = layerGroup.getLayers()
          if (layers) {
            for (var m = 0; m < layers.length; m++) {
              var layer = layers[m]
              console.log(layer)
              console.log(layer.getLayerId(val.id))
              /!* var feature = layer.feature
              if (feature.id === layerId) {
                this.map.flyToBounds(bound)
                return layer
              } *!/
            }
          }
        } */
    return null
  }

  findLayerById (layer, id) {
    const layers = layer.getLayers
    if (layers) {
      this.findLayerById(layer.getLayers(), id)
    } else {
      layer.eachLayer(function (layer) {
        // console.log(layer)
      })
    }
  }
}

 src/components/LayerController/service/WmsLayerService.js

@@ -2,6 +2,7 @@
import { WMS_URL } from '../../../conf/Constants'
import Popup from '@views/popup/Popup'
import WmsLayerList from '../dataset/WmsLayerList'
import { highlight } from '../../helpers/LocateHelper'

/**
 * todo 得考虑一个图层配置了多个 wmsLayers的情况
@@ -43,19 +44,16 @@
  }

  add (config) {
    console.log(config)
    this.wmsLayerList.addConfig(config)
    const layers = this.wmsLayerList.getLayers() || ''
    const filter = this.wmsLayerList.getFilters() || ''
    const params = {}
    params.cql_filter = filter
    params.layers = layers
    console.log(this.wmsLayerList)
    this.wmsLayer.setParams(params)
  }

  remove (config) {
    console.log(config)
    this.wmsLayerList.remove(config.typeName, config.filter)
    const layers = this.wmsLayerList.getLayers() || ''
    const filter = this.wmsLayerList.getFilters() || ''
@@ -84,7 +82,7 @@
  clickListener () {
    window.map.on('click', (e) => {
      // console.log(e)
      window.layerFactory.clearHighlight()
      window.mapManager.clearHighlight()
      this.featureGroup.clearLayers()
      var point = this.map.latLngToContainerPoint(e.latlng, this.map.getZoom())
      var size = this.map.getSize()
@@ -107,19 +105,19 @@
        AjaxUtils.get4JsonDataByUrl(WMS_URL, 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++) {
              const feature = features[i]
              const properties = feature.properties
              this.highlight(feature)
              highlight(feature)
              // const coordinates = feature.geometry.coordinates
              popupDatas.push({
                title: properties.wellname || properties.devicename || properties.name || properties.pipename,
@@ -164,45 +162,6 @@
        })
      }
    })
  }

  reverseMultiLine (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
  }

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

  highlight (feature) {
    const type = feature.geometry.type
    if (type === 'MultiLineString') {
      this.L.polyline(this.reverseMultiLine(feature), { color: 'red' }).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)
    } else if (type === 'LineString') {
      this.L.polyline(this.reversePolyLine(feature), { color: 'red' }).addTo(this.featureGroup)
    }
  }
}


 src/components/helpers/LocateHelper.js

New file
@@ -0,0 +1,94 @@
import { pulseEffect, reversePolyLine } from '../../utils/utils'

/**
 * 根据传的 feature对象定位，
 * @param code
 * @param feature
 */
export const fitBounds = function (feature) {
  const type = feature.geometry.type
  switch (type) {
    case 'Point':
      var point = feature.geometry.coordinates
      point = [point[1], point[0]]
      window.map.setView(point, 17)
      break
    case 'MultiLineString':
      window.map.fitBounds(window.L.geoJSON(feature).getBounds())
      break
    case 'LineString':
      window.map.fitBounds(window.L.polyline(reversePolyLine(feature)).getBounds())
      break
  }
}

export const highlight = function (feature, config) {
  const L = window.L
  const type = feature.geometry.type
  const highlightLayer = window.mapManager.hightlightLayer
  if (type === 'MultiLineString') {
    L.geoJSON(feature, {
      style: function () {
        return {
          fillColor: 'red',
          color: 'red'
        }
      }
    }).addTo(highlightLayer)
  } else if (type === 'Point') {
    // 叠加一个大尺寸的图标
    let point = feature.geometry.coordinates
    point = [point[1], point[0]]

    if (config) {
      L.marker(point, {
        icon: L.icon({
          iconUrl: '/assets/images/map/' + config.icon,
          iconSize: [30, 30],
          iconAnchor: [15, 15]
        })
      }).addTo(highlightLayer)
    }
    pulseEffect(point)
  } else if (type === 'LineString') {
    L.polyline(reversePolyLine(feature), { color: 'red' }).addTo(highlightLayer)
  }
}

export const openPopup = function (layerId, id) {
  const layer = this.layers[layerId]

  if (layer) {
    layer.eachLayer(function (layer) {
      const layers = layer.getLayers()
      for (var i = 0; i < layers.length; i++) {
        const lay = layers[i]
        const feature = lay.feature
        lay.closePopup()
        if (feature.id === id) {
          lay.openPopup()
          break
        }
      }
    })
  }
  return null
}

export const getLayer = function (layerId, id) {
  const layer = this.layers[layerId]

  if (layer) {
    layer.eachLayer(function (layer) {
      const layers = layer.getLayers()
      for (var i = 0; i < layers.length; i++) {
        const lay = layers[i]
        const feature = lay.feature
        if (feature.id === id) {
          return lay
        }
      }
    })
  }
  return null
}

 src/components/helpers/MapManager.js

New file
@@ -0,0 +1,23 @@
class MapManager {
  constructor () {
    this.hightlightLayer = window.L.featureGroup({}).addTo(window.map)
    this.clickDialogSwitch = true // 图层点击弹窗开关
    this.L = window.L
    this.map = window.map
  }

  mapClickListener () {
    window.map.on('click', (e) => {

    })
  }

  clearHighlight () {
    this.hightlightLayer.clearLayers()
  }

  iconPoint (latlng) {
  }
}

export default MapManager

 src/components/panel/topicSearch/SewersSearch.vue

@@ -83,6 +83,7 @@
// 引入组件内容
import SewersAnalysis from '@components/panel/topicSearch/SewersSelect/SewersAnalysis'
import SewersHistory from '@components/panel/topicSearch/SewersSelect/SewersHistory'
import { fitBounds, highlight } from '../../helpers/LocateHelper'

export default {
  name: 'SewersSearch',
@@ -161,11 +162,12 @@
      }
    },
    handleLocation (val, index) {
      console.log(val)
      console.log(this.form.dataType)
      // console.log(val)
      this.activeNum = index
      // layer && layer.openPopup()
      window.layerFactory.flyByFeature(val, this.form.dataType.code)
      fitBounds(val, this.form.dataType.code)
      highlight(val, this.form.dataType)
    },
    btnAffiliatedFacilities (val, index) {
      this.activeNum = index
@@ -176,7 +178,8 @@
      } else {
        this.fuShuSheShiShow = false
      }
      window.layerFactory.flyByFeature(val, this.form.dataType.code)
      fitBounds(val, this.form.dataType.code)
      highlight(val)
    }
  },
  mounted () {

 src/utils/utils.js

@@ -27,11 +27,11 @@
 * 脉冲效果
 */
export function pulseEffect (xy) {
  let times = 5
  const colors = ['#98FB98', '#ff0000']
  let times = 50
  const colors = ['#00f100', '#ff0000']
  // 插件 效果实现
  var pulsingIcon = window.L.icon.pulse({
    iconSize: [20, 20],
    iconSize: [30, 30],
    color: colors[0],
    fillColor: ''
  })
@@ -47,6 +47,31 @@
  }, 1000)
}

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

export function reverseMultiLine (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
}

/**
 * 设置弹窗平移位置
 * @param pos

 src/views/MapTemplate.vue

@@ -41,6 +41,7 @@
import EventHandler from '../components/LayerController/event/EventHandler'
// import ReportPopup from '../components/panel/topicSearch/SewersSelect/EnterpriseEmergency/ReportPopup'
import Emergency from '@components/emergency/index'
import MapManager from '../components/helpers/MapManager'

export default {
  name: 'MapTemplate',
@@ -113,6 +114,7 @@
      layerFactory.init(this.$store.state.map.serviceLayers.LayerSewersLine)
      layerFactory.initEvent(this.$store.state.map.serviceLayers.LayerSewersLine)
      window.layerFactory = layerFactory
      window.mapManager = new MapManager()
      this.saveMapStatus()
      // this.setMapObj(this.mapObj)
      // this.setBasemapHelper(this.basemapHelper)