定位 高亮

徐旺旺

2021-05-13 223558670632644a19aa4fb0238100708fca3ab7

定位 高亮

 src/components/LayerController/service/LayerFactory.js

@@ -2,6 +2,7 @@
import { clone } from '../../../utils/utils'
import { logicMapper, SERVICE_TYPE } from '../../../conf/Constants'
import WmsLayerService from './WmsLayerService'
import AnimalService from './AnimalService'

/**
 *  init 只初始化一次
@@ -18,6 +19,8 @@
    this.minZoomLayers = {}
    this.wmsLayers = []
    this.clickSwitch = true // 图层点击弹窗开关
    this.animalService = new AnimalService({ L: this.L })
    this.hightlightLayer = options.L.featureGroup({}).addTo(window.map)
  }

  init (layerConfig) {
@@ -175,11 +178,12 @@
   * @param feature
   */
  flyByFeature (feature, code) {
    this.clearHighlight()
    const type = feature.geometry.type
    var point = []
    switch (type) {
      case 'Point':
        point = clone(feature.geometry.coordinates)
        point = feature.geometry.coordinates
        break
      case 'MultiLineString':
        var coordinates = feature.geometry.coordinates
@@ -196,14 +200,70 @@
    if (point.length > 2) {
      point.splice(2, 1)
    }
    window.map.setView(point.reverse(), 17)
    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]]
      }
      this.animalService.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.eachLayer) {
    if (layer) {
      layer.eachLayer(function (layer) {
        const layers = layer.getLayers()
        for (var i = 0; i < layers.length; i++) {

 src/components/LayerController/service/WmsLayerService.js

@@ -86,6 +86,7 @@
  clickListener () {
    window.map.on('click', (e) => {
      // console.log(e)
      window.layerFactory.clearHighlight()
      this.featureGroup.clearLayers()
      var point = this.map.latLngToContainerPoint(e.latlng, this.map.getZoom())
      var size = this.map.getSize()

 src/components/panel/topicSearch/SewersSearch.vue

@@ -51,7 +51,6 @@
              :page-size=pageSize
              layout="prev, pager, next"
              :total=total
              :current-page=current
              class="warnPagination"
          >
          </el-pagination>

 src/conf/Constants.js

@@ -1,3 +1,7 @@
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'

export const GEOM_TYPE = {
  POINT: 'point',
  LINE: 'line',
@@ -8,10 +12,6 @@
  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'

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