Merge remote-tracking branch 'origin/develop' into develop

chenyabin

2021-05-18 7f6291e80073c0c29f9d24bfdd3ac2602a059e70

Merge remote-tracking branch 'origin/develop' into develop

 public/assets/images/map/sewers/ʹÊË®.png

 public/assets/images/map/sewers/¹«Ë¾.png

 public/assets/images/map/sewers/¾»»¯Ë®.png

 public/assets/images/map/sewers/º¬ÓÍÎÛË®.png

 public/assets/images/map/sewers/º¬ÑÎÎÛË®.png

 public/assets/images/map/sewers/º¬ÁòÎÛË®.png

 public/assets/images/map/sewers/º¬¼îÎÛË®.png

 public/assets/images/map/sewers/Ñ­»·Ë®.png

 public/assets/images/map/sewers/½ØÁ÷Õ¢.png

 public/assets/images/map/sewers/Á÷Ïò.png

 public/assets/images/map/sewers/ÒçÁ÷Ñß.png

 public/assets/images/map/sewers/Éú²úÎÛË®.png

 public/assets/images/map/sewers/Éú»îÎÛË®.png

 public/assets/images/map/sewers/¹ÜÀÈ.png

 public/assets/images/map/sewers/¹Ü¼Ü.png

 public/assets/images/map/sewers/×°ÖÃÇø.png

 public/assets/images/map/sewers/·À»ðµÌ.png

 src/components/LayerController/event/EventHandler.js

File was deleted

 src/components/LayerController/logic/Company.js

@@ -1,6 +1,7 @@
/**
 * å›ºåºŸ
 * ä¼ä¸š
 */

// åŒºåˆ†ä¸åŒç±»åž‹ ä½¿ç”¨ä¸åŒimg
const companyImg = '/assets/images/map/company_refining.png'
const companyOil = '/assets/images/map/company_oil.png'
@@ -14,7 +15,6 @@
   * @param L leaflet对象
   */
  this.init = async (layer, L) => {
    // const SolidWasteIcon = this.SolidWasteIcon()
    this.animalService = new AnimalService({
      L: L,
      layer: layer
@@ -39,23 +39,10 @@
        className: 'company-bindTooltip',
        iconSize: 16
      })

      const marker = L.marker([positionX, positionY], {
        /* icon: L.icon({
          iconUrl: iconUrl,
          iconSize: [30, 30],
          iconAnchor: [15, 15]
        }), */
        icon: myIcon,
        test: data[i]
      })
      /* const htmls = '<ul><li>' + data[i].name + '</li></ul>'
      marker.bindTooltip(htmls, {
        permanent: true,
        offset: [0, 5],
        direction: 'bottom',
        className: 'company-bindTooltip'
      }) */
      layer.addLayer(marker)
    }
  }
@@ -63,23 +50,27 @@
  * ç‚¹ä½é¼ æ ‡ç§»å…¥å¼¹æ¡†
  * */
  this.bindTooltip = (layer) => {
  //  console.log(layer)
    //  console.log(layer)
    return '<div class="company-bindTooltip-hover"><h3>污染物产生统计</h3><ul>' +
                '<li>生产设施：30（个）</li>' +
                '<li>治理设施：30（个）</li>' +
            '</ul></div>'// layer.options.test.name
      '<li>生产设施：30（个）</li>' +
      '<li>治理设施：30（个）</li>' +
      '</ul></div>'// layer.options.test.name
  }
  /*
  * ç‚¹ä½ç‚¹å‡»äº‹ä»¶
  *
  * */
  this.clickListener = (e) => {
    // this.animalService.pulseEffect(e.latlng)
    const dataValue = {
      StoragePlaceId: e.layer.options.test.name
    }
    debugger
    console.log(dataValue)
    // return this.PublicBounced.$el
    // console.log(e)
    window.map.setView(e.latlng, 15)
    // if (window.map.getZoom() >= 10) {
    //   window.map.removeLayer(e.layer)
    //   e.layer.remove()
    // } else if (window.map.getZoom() < 10) {
    //   window.map.addLayer(e.layer)
    // }
    // const dataValue = {
    //   StoragePlaceId: e.layer.options.test.name
    // }
  }
}

 src/components/LayerController/logic/SourcesPollution.js

@@ -14,9 +14,23 @@
      layer: layer
    })
    const result = await mapApi.getSourcesPoll()
    console.log(result)
    // console.log(result)
    const resultData = result.Result.DataInfo || []
    const polygon = L.polygon(resultData, { color: 'yellow' })
    polygon.addTo(layer)
  }
  this.bindTooltip = (layer) => {
    return 'layer'
  }
  this.click = () => {
    window.$layer.open({
      content: {
        content: 'Popup', // ç»„件
        data: { // ä¼ é€’的参数
          datas: 'popupDatas'
        }
      },
      title: ''
    })
  }
}

 src/components/LayerController/logic/WasteGas.js

@@ -3,7 +3,8 @@
 */
const AnimalService = require('../service/AnimalService').default
// const AjaxUtils = require('../../../utils/AjaxUtils').default

// å…¬å…±æ–¹æ³• panTo() å¼•ç”¨
const { setPanTo } = require('../../../utils/utils')
// åŒºåˆ†ä¸åŒç±»åž‹ ä½¿ç”¨ä¸åŒimg
// const ImgBlue = '/assets/images/map/exhaust/fq_blue.png'
// const ImgGray = '/assets/images/map/exhaust/fq_gray.png'
@@ -60,8 +61,9 @@
  }

  this.clickListener = async (e) => {
    console.log(e)
    // console.log(e)
    this.animalService.pulseEffect(e.latlng)
    setPanTo(e.latlng, 200)
    const title = e.layer.options.test.Name
    const res = e.layer.options.test
    window.$layer.open({
@@ -74,7 +76,6 @@
      },
      title: '天津石化' + title // æ ‡é¢˜
    })
    this.animalService.setPanTo(e.latlng, 150)
  }
  // ä¸åŒç±»åž‹å›¾ç‰‡åŠ è½½
  this.differentTypes = (ContrLevel) => {

 src/components/LayerController/logic/WasteSolid.js

@@ -5,7 +5,8 @@
// åŒºåˆ†ä¸åŒç±»åž‹ ä½¿ç”¨ä¸åŒimg
const defaultImg = '/assets/images/map/solidwaste/voc.png'
const setting = '/assets/images/map/solidwaste/gf_green2.png'

// å…¬å…±æ–¹æ³• panTo() å¼•ç”¨
const { setPanTo } = require('../../../utils/utils')
// è¯·æ±‚接口数据
const mapApi = require('../../../api/mapApi').default
// ä½¿ç”¨å°è£…方法
@@ -53,6 +54,8 @@
  this.clickListener = (e) => {
    // ç‚¹å‡»marker的pulse()光波
    this.animalService.pulseEffect(e.latlng)
    /* flyTo()弹出框平移事件 */
    setPanTo(e.latlng, 200)
    // å¼¹æ¡†æ ‡é¢˜
    const title = e.layer.options.totransferData.Name
    window.$layer.open({
@@ -65,8 +68,6 @@
      },
      title: title // æ ‡é¢˜
    })
    /* flyTo()弹出框平移事件 */
    this.animalService.setPanTo(e.latlng, 300)
  }

  // ä¸åŒç±»åž‹å›¾ç‰‡å°è£…

 src/components/LayerController/logic/WasteWater.js

@@ -1,13 +1,14 @@
/**
 * åºŸæ°´
 */
// import WasteWater from "../../table/components/WasteWater";

// å…¬å…±æ–¹æ³• panTo() å¼•ç”¨
const { setPanTo } = require('../../../utils/utils')

const AnimalService = require('../service/AnimalService').default
const mapApi = require('../../../api/mapApi').default
// å¼¹çª—数据引进
const WasteWaterIndex = require('@components/BaseNav/WasteWater/WasteWaterIndex').default
// const publicBounced = require('../../BaseNav/PublicBounced/PublicBounced').default

const NormalImg = '/assets/images/map/wastewater/fs_bright_green.png' // æ­£å¸¸
const OffImg = '/assets/images/map/wastewater/fs_gray.png' // åœè¿
@@ -48,14 +49,13 @@
    }
  }

  // åˆ†å‰²çº¿-------------------------------------------------------------------------------
  this.bindTooltip = (layer) => {
    return '<div class="company-bindTooltip-hover"><h3>天津石化</h3></div>' + layer.options.totransferData.Name
  }

  this.clickListener = (e) => {
    // ç‚¹å‡»marker的pulse()光波
    this.animalService.pulseEffect(e.latlng)
    setPanTo(e.latlng, 200)
    // å¼¹æ¡†æ ‡é¢˜
    const title = e.layer.options.totransferData.Name
    const res = e.layer.options.totransferData
@@ -70,36 +70,6 @@
      },
      title: '天津石化' + title // æ ‡é¢˜
    })
    this.animalService.setPanTo(e.latlng, 150)
  }
  this.requestWasteWaterData = async (e) => {
    // åŸºæœ¬ä¿¡æ¯ å’Œ è¯¦ç»†ä¿¡æ¯ å±•ç¤ºæ•°æ®æ‰€éœ€å‚æ•°
    // const dataValue = {
    //   StoragePlaceId: e.layer.options.test.StoragePlaceId
    // }
    // å¼¹æ¡†æ ‡é¢˜
    // const title = e.layer.options.totransferData.Name
    // console.log(e.layer.options)
    // åŸºæœ¬ä¿¡æ¯ tabs
    // const resultBasic = await mapApi.getWasteWater(dataValue)
    // å›¾è¡¨ä¿¡æ¯å±•ç¤º echarts
    // å®žæ—¶æ•°æ®
    // const resultReal = await mapApi.getDataItems(Value)
    // å°æ—¶æ•°æ® åŠ æ˜Žç»†è¡¨æ•°æ®
    // const result = await mapApi.getQueryOnlineMonData(dataValue)
    // æ—¥æ•°æ® åŠ æ˜Žç»†è¡¨æ•°æ®
    // const result = await mapApi.getQueryOnlineMonData(dataValue)
    // äººå·¥æ•°æ®
    // const resultEchart = await mapApi.getQueryLabMonData(dataValue)

    // // ç»‘定弹框实例
    // const PublicBounced = window.Vue.extend(publicBounced)
    // const instance = new PublicBounced().$mount()
    // document.body.appendChild(instance.$el)
    // // document.body.removeChild(instance.$el)
    // // é€šè¿‡æ–¹æ³• å‘绑定弹框传递数据
    // instance.setData(title, resultBasic.Result.DataInfo, resultDetailed.Result.DataInfo, 'gufei')
    /* flyTo()弹出框平移事件 */
  }

  // æ ¹æ®è¿”回值的不同标记不同图片

 src/components/LayerController/service/AnimalService.js

@@ -33,19 +33,6 @@
      }
    }, 1000)
  }

  /**
   * è®¾ç½®å¼¹çª—平移位置
   * @param pos
   * @param value
   */
  setPanTo = (pos, value) => {
    var position = pos
    position = this.layer.latLngToLayerPoint(position)
    position.y += value
    position = this.layer.layerPointToLatLng(position)
    this.layer.flyTo(position)
  }
}

export default AnimalService

 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'

@@ -17,16 +16,14 @@
    this.layersLogic = {}
    this.minZoomLayers = {}
    this.wmsLayers = []
    // todo å¾…优化，wmslayerservice调用，放这里不合适
    this.clickSwitch = true // å›¾å±‚点击弹窗开关
    this.hightlightLayer = options.L.featureGroup({}).addTo(window.map)
    this.wmsLayerService = null
  }

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

  initConfig (layerConfig) {
@@ -42,8 +39,8 @@
          wmsGroupLayerService.init()
          continue
        } */
        layers && this.init(config.layers)
        childLayer && this.init(config.childLayer)
        layers && this.initConfig(config.layers)
        childLayer && this.initConfig(config.childLayer)

        this.initMinZoom(config)
        this.loadLogic(config)
@@ -77,10 +74,6 @@
        logic = new BusiLayer()
      } else if (type === SERVICE_TYPE.WFS) {
        logic = new WfsLayerService(config)
      } else if (type === SERVICE_TYPE.WMS) {
        var layer = {}
        layer[config.code] = config
        this.wmsLayers.push(layer)
      }
    }
    this.layersLogic[code] = logic
@@ -167,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/WmsLayerGroupService.js

@@ -22,6 +22,7 @@
      this.L.tileLayer.wms(PIPELINE_WMS, {
        format: 'image/png', // è¿”回的数据格式
        transparent: true,
        maxZoom: 21,
        layers: k // todo
      }).addTo(this.layer).bringToFront()
    }

 src/components/LayerController/service/WmsLayerService.js

@@ -1,6 +1,4 @@
import AjaxUtils from '../../../utils/AjaxUtils'
import { WMS_URL } from '../../../conf/Constants'
import Popup from '@views/popup/Popup'
import WmsLayerList from '../dataset/WmsLayerList'

/**
@@ -21,6 +19,7 @@
      INFO_FORMAT: 'application/json',
      TRANSPARENT: true,
      FEATURE_COUNT: 50,
      maxZoom: 21,
      SRS: 'EPSG:4326',
      EXCEPTIONS: 'application/vnd.ogc.se_inimage'
    }
@@ -29,40 +28,34 @@
    this.featureGroup = this.L.featureGroup({}).addTo(this.map)

    this.wmsLayerList = new WmsLayerList()
    for (var i = 0; i < layersConfig.length; i++) {
      const config = layersConfig[i]
      this.wmsLayerList.addConfig(config)
    if (layersConfig) {
      for (var i = 0; i < layersConfig.length; i++) {
        const config = layersConfig[i]
        this.wmsLayerList.addConfig(config)
      }
    }
    this.load()
  }

  init () {
    this.clickListener()
  }

  add (config) {
    this.wmsLayerList.addConfig(config)
    const layers = this.wmsLayerList.getLayers()
    const filter = this.wmsLayerList.getFilters()
    const layers = this.wmsLayerList.getLayers() || ''
    const filter = this.wmsLayerList.getFilters() || ''
    const params = {}
    if (filter) {
      params.cql_filter = filter
    }
    if (layers) {
      params.layers = layers
    }
    params.cql_filter = filter
    params.layers = layers
    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()
    const layers = this.wmsLayerList.getLayers() || ''
    const filter = this.wmsLayerList.getFilters() || ''
    const params = { layers: layers }
    if (filter) {
      params.cql_filter = filter
    }
    params.cql_filter = filter
    this.wmsLayer.setParams(params)
  }

@@ -81,130 +74,6 @@
      params.cql_filter = filter
    }
    this.wmsLayer = this.L.tileLayer.wms(WMS_URL, params).addTo(this.map)
  }

  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()
      // const bbox = this.L.latLngBounds(this.L.latLng(e.latlng.lng, e.latlng.lat)).toBBoxString()
      const layers = this.wmsLayerList.getLayers()
      const filter = this.wmsLayerList.getFilters()
      if (layers.length > 0) {
        const params = Object.assign({
          LAYERS: layers,
          QUERY_LAYERS: layers,
          WIDTH: size.x,
          HEIGHT: size.y,
          X: Math.round(point.x),
          Y: Math.round(point.y),
          BBOX: this.map.getBounds().toBBoxString()
        }, this.params)
        if (filter.length > 0) {
          params.cql_filter = filter
        }
        AjaxUtils.get4JsonDataByUrl(WMS_URL, 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 || properties.pipename,
                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() */

            if (window.layerFactory.clickSwitch) {
              window.$layer.open({
                content: {
                  content: Popup, // ç»„件
                  data: { // ä¼ é€’的参数
                    datas: popupDatas
                  }
                },
                title: '', // æ ‡é¢˜
                left: e.originalEvent.clientX,
                top: e.originalEvent.clientY
              })
            }
            // this.popupComp.setDatas(popupDatas)
            // this.popupComp.setShow()
          }
        })
      }
    })
  }

  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,123 @@
import { pulseEffect, reversePolyLine } from '../../utils/utils'
import Popup from '@views/popup/Popup'
import { LAYERPROPS, LAYERS } from '../../conf/Constants'
/**
 * æ ¹æ®ä¼ çš„ 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
  window.mapManager.clearHighlight()
  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)
    const features = window.mapManager.loadWfsDatas(point)
    openPopup(point, features)
  } else if (type === 'LineString') {
    L.polyline(reversePolyLine(feature), { color: 'red' }).addTo(highlightLayer)
  }
}

export const openPopup = function (xy, features) {
  const lt = window.map.latLngToContainerPoint(xy)
  const datas = popupDatas(features)
  if (datas.length > 0) {
    window.$layer.open({
      content: {
        comp: Popup, // ç»„件
        data: { // ä¼ é€’的参数
          datas: datas
        }
      },
      title: '', // æ ‡é¢˜
      left: lt.x,
      top: lt.y
    })
  }
}

const popupDatas = function (features) {
  const datas = []
  if (features) {
    for (var i = 0; i < features.length; i++) {
      const feature = features[i]
      const id = feature.id
      const properties = feature.properties
      const ids = id.split('.')

      const propValues = LAYERPROPS[ids[0]]
      const contents = {}
      for (const k in properties) {
        if (propValues[k]) {
          contents[propValues[k]] = properties[k]
        }
      }
      datas.push({
        title: LAYERS[ids[0]],
        name: feature.id,
        content: contents
      })
      console.log(properties)
    }
  }
  return datas
}

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,59 @@
import AjaxUtils from '../../utils/AjaxUtils'
import { WMS_URL } from '../../conf/Constants'
import { openPopup } from './LocateHelper'

class MapManager {
  constructor () {
    this.hightlightLayer = window.L.featureGroup({}).addTo(window.map)
    this.clickDialogSwitch = true // å›¾å±‚点击弹窗开关
    this.L = window.L
    this.map = window.map
    // wms getfeatureinfo é»˜è®¤å‚æ•°
    this.defaultWmsParams = {
      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'
    }
  }

  mapClickListener () {
    this.map.on('click', (e) => {
      // console.log(e)
      this.clearHighlight()
      this.loadWfsDatas(e.latlng)
    })
  }

  loadWfsDatas (latlng) {
    const size = this.map.getSize()
    var point = this.map.latLngToContainerPoint(latlng, this.map.getZoom())
    const wmsLayerService = window.layerFactory.wmsLayerService
    const layers = wmsLayerService.wmsLayerList.getLayers()
    // const filters = wmsLayerService.wmsLayerList.getFilters()
    const params = Object.assign({
      LAYERS: layers,
      QUERY_LAYERS: layers,
      WIDTH: size.x,
      HEIGHT: size.y,
      X: Math.round(point.x),
      Y: Math.round(point.y),
      BBOX: this.map.getBounds().toBBoxString()
    }, this.defaultWmsParams)
    AjaxUtils.get4JsonDataByUrl(WMS_URL, params, (res) => {
      openPopup(latlng, res.data.features)
    })
  }

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

export default MapManager

 src/components/layer/src/layer.js

@@ -23,10 +23,12 @@
    console.log(opt)
    self.closeAll()
    var options = mergeJson(opt, defOptions)
    console.log('11111' + options)
    const id = `notification_${new Date().getTime()}_${seed++}`
    options.id = id
    options.layer = self
    options.content.content = Vue.extend(options.content.content)
    options.content.comp = Vue.extend(options.content.comp)
    console.log(options)
    const instance = new LayerVueExtend({
      data: options
    })

 src/components/layer/src/layer.vue

@@ -47,10 +47,8 @@
    },
    init () {
      const propsData = helper.deepClone(this.content.data) || {}
      propsData.layerid = this.id
      propsData.lydata = this.content.data
      propsData.lyoption = this.options
      const instance = new this.content.content({
      console.log(propsData)
      const instance = new this.content.comp({
        // parent: this.content.parent,
        propsData: propsData
      })

 src/components/panel/topicSearch/DischargeSearch.vue

@@ -170,7 +170,7 @@
  methods: {
    flyto () {
      const pos = [39.90751504898071, 116.38927817344666]
      window.map.flyTo(pos, 15)
      window.map.setView(pos, 15)
    },
    // åŒºåŸŸç­›é€‰
    areaType (val) {

 src/components/panel/topicSearch/EnterpriseEmergency/EventQuery.vue

@@ -26,7 +26,8 @@
                </el-form-item>
                <el-form-item label="事件类型：">
                    <el-radio-group v-model="form.transferData" class="levelOfRisk">
                        <el-radio v-for="(item,index) in form.levelOfRisk" :label="item.value" :key="index">
                        <el-radio v-for="(item,index) in form.levelOfRisk" :label="item.value" :key="index"
                                  @change="redioChange(item.name)">
                            <span class="levelOfRisk-type">{{ item.name }}</span>
                        </el-radio>
                    </el-radio-group>
@@ -38,12 +39,28 @@
            </el-form>
        </el-form>
        <el-scrollbar style="height:286.22px">
            <div class="environmental-risk-list" v-for="(item,index) in list" :key="index"
                 :class="activeNum===index?'hover':''">
            <!--            <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" :class="activeNum===index?'hover':''" @click="accordPopup(item)">-->
            <!--                &lt;!&ndash;                <i class="state"></i>&ndash;&gt;-->
            <!--                <img class="state" :src="getImgSrc(item.properties.type)" style="background: none"/>-->
            <!--                <div>-->
            <!--                    <h3 @click="handleLocation(item,index)">事件名称:XXX事件</h3>-->
            <!--                    <h5>-->
            <!--                        äº‹ä»¶äº‹ä»¶:2021å¹´3月21日-->
            <!--                        <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;">删除</el-button>-->
            <!--                    </h5>-->
            <!--                    <p>-->
            <!--                        äº‹ä»¶çŠ¶æ€ï¼š<span>审批阶段</span>-->
            <!--                    </p>-->
            <!--                    <p>事件类型：<span>{{ item.properties.pipecode }}</span>-->
            <!--                        <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;">事件管理-->
            <!--                        </el-button>-->
            <!--                    </p>-->
            <!--                </div>-->
            <!--            </div>-->
            <div class="environmental-risk-list">
                <!--                <i class="state"></i>-->
                <img class="state" :src="getImgSrc()" style="background: none"/>
                <div>
                    <h3 @click="handleLocation(item,index)">事件名称:XXX事件</h3>
                    <h3>事件名称:XXX事件</h3>
                    <h5>
                        äº‹ä»¶äº‹ä»¶:2021å¹´3月21日
                        <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;">删除</el-button>
@@ -51,8 +68,10 @@
                    <p>
                        äº‹ä»¶çŠ¶æ€ï¼š<span>审批阶段</span>
                    </p>
                    <p>事件类型：<span>{{ item.properties.pipecode }}</span>
                        <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;">事件管理
                    <p>事件类型：<span>模拟管线事件</span>
                        <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;"
                                   @click="accordPopup()">
                            <span>事件管理</span>
                        </el-button>
                    </p>
                </div>
@@ -106,13 +125,34 @@
    this.wfsHelper = new WfsHelper()
  },
  methods: {
    // ç‚¹å‡»äº‹ä»¶ç®¡ç†
    accordPopup () {
      console.log('item')
      window.$layer.open({
        content: {
          content: ReportPopup, // ç»„件
          parent: this, // çˆ¶ç»„件
          data: { // ä¼ é€’的参数
            // storagePlaceId: e.layer.options.totransferData.StoragePlaceId
          }
        }
        // title: 'title' // æ ‡é¢˜
      })
    },
    // radio数据选择
    redioChange (item) {
      console.log(item)
    },
    // æ ¹æ®æ•°æ®è¿”回展示不同的图片
    getImgSrc () {
      const icon = this.form.dataType.icon
      return icon ? 'assets/images/map/' + icon : ''
    },
    // form 2 è¡¨å•æ•°æ®é€‰æ‹©äº‹ä»¶
    handleDataType () {
      this.list = []
    },
    // form è¡¨å•æ•°æ®é€‰æ‹©
    handlePipelineType (val) {
      this.list = []
      for (let i = 0; i < this.items.length; i++) {
@@ -123,6 +163,7 @@
        }
      }
    },
    // æ•°æ®æœç´¢äº‹ä»¶
    async handleSearch () {
      this.list = []
      this.wfsHelper.clearFilter()
@@ -137,25 +178,13 @@
        this.list = res.features
      }
    },
    // æœç´¢çš„数据点击事件
    handleLocation (val, index) {
      console.log(val)
      this.activeNum = index
      // layer && layer.openPopup()
      // window.layerFactory.flyByFeature(val, this.form.dataType.code)
      window.map.flyTo([val.properties.y, val.properties.x], 15)
    },
    btnAffiliatedFacilities () {
      console.log('item')
      window.$layer.open({
        content: {
          content: ReportPopup, // ç»„件
          parent: this, // çˆ¶ç»„件
          data: { // ä¼ é€’的参数
            // storagePlaceId: e.layer.options.totransferData.StoragePlaceId
          }
        }
        // title: 'title' // æ ‡é¢˜
      })
    }
  }
}

 src/components/panel/topicSearch/EnterpriseEmergency/ResourcesQuery.vue

@@ -43,8 +43,8 @@
            <div class="environmental-risk-list" v-for="(item,index) in list" :key="index"
                 :class="activeNum===index?'hover':''" @click="handleLocation(item,index)">
                <img class="state" :src="getImgSrc(item.properties.type)" style="background: none"/>
                <h3>资源类型:{{item.properties.adminzonename}}</h3>
                <h5>资源名称:{{item.properties.type}}</h5>
                <h3>{{changeAmount}}类型:{{item.properties.type}}</h3>
                <h5>{{changeAmount}}名称:{{item.properties.name}}</h5>
                <p>负责人:<span>{{item.properties.resperson}}</span></p>
                <p>电话:<span>{{item.properties.telephone}}</span></p>
            </div>
@@ -78,7 +78,8 @@
      list: [],
      items: [LayerEmergencySource, LayerSurroundings],
      subItems: LayerEmergencySource.layers || LayerSurroundings.layers,
      WfsHelper: null
      WfsHelper: null,
      changeAmount: '资源'
    }
  },
  mounted () {
@@ -102,8 +103,10 @@
      }
      if (this.form.pipelineType === '应急资源') {
        this.subItems = LayerEmergencySource.layers
        this.changeAmount = '资源'
      } else if (this.form.pipelineType === '周边环境') {
        this.subItems = LayerSurroundings.layers
        this.changeAmount = '环境'
      }
    },
    handleDataType (val) {
@@ -125,6 +128,7 @@
        this.wfsHelper.addLike('name', this.form.keyword)
      }
      const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
      console.log(res)
      if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
        this.list = res.features
      }

 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/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue

@@ -439,10 +439,10 @@
        this.linkPipeline.push(line)
      })
    },
    // è¿žé€šæ€§ åˆ†æžç»“æžœtable列表数据选择点击事件
    // å®šä½æ–¹æ³•äº‹ä»¶
    linkResultSelect (e) {
      // console.log('连通性分析结果列表点击')
      // console.log(e)
      console.log(e)
      const geom = JSON.parse(e.geomText)
      if (this.currentSelectResultLine != null) {
        this.currentSelectResultLine.remove()
@@ -483,8 +483,8 @@
      this.selectPipeLine()
    },
    async bgSelect (e) {
      console.log('选择爆管管段')
      console.log(e)
      // console.log('选择爆管管段')
      // console.log(e)
      this.bgFm = []
      if (this.bgMarker != null) {
        this.bgMarker.remove()
@@ -526,12 +526,10 @@

      this.bgPoint = res.data[0].startControlPoint

      const point = JSON.parse(this.bgPoint.geomText)

      const p = [point.coordinates[1], point.coordinates[0]]

      // const point = JSON.parse(this.bgPoint.geomText)
      // const p = [point.coordinates[1], point.coordinates[0]]
      // this.bgMarker = this.createFlowMarker(p)
      this.bgMarker = pulseEffect(p)
      // this.bgMarker = pulseEffect(p)
      // this.bgMarker.bindTooltip(this.bgPoint.pointnumbe)
      // this.bgMarker.addTo(window.map)
      // window.map.flyTo(p)
@@ -561,11 +559,11 @@
    },
    bgFmClick (e) {
      // console.log('点击影响的阀门')
      console.log(e)
      // console.log(e)
      // const point = [e.data[0][0], e.data[0][1]]
      const point = [e.startControlPoint.y, e.startControlPoint.x]
      // const marker = this.createFlowMarker(point)
      pulseEffect(point)
      // const marker = this.createFlowMarker(point)
      // marker.addTo(window.map)
      // window.map.flyTo(point, 17)
    },

 src/components/panel/topicSearch/SolidWasteSearch.vue

@@ -30,7 +30,6 @@
        <el-scrollbar style="height:286.22px">
            <div class="environmental-risk-list" v-for="(item,index) in searchDataDisplay" :key="index"
                 @click="setBounced(item)">
                <!--        <i class="state"></i>-->
                <img src="../../../../public/assets/images/map/solidwaste/gf_green2.png" alt="" class="state">
                <div>
                    <h3>###炼化部</h3>
@@ -159,7 +158,7 @@
    },
    // æ•°æ®å±•ç¤º,点击进行弹框及点的展示
    setBounced (val) {
      // console.log(val)
      console.log(val)
      const pos = [val.Latitude, val.Longitude]
      window.map.setView(pos, 15)
      window.$layer.open({
@@ -173,7 +172,7 @@
        title: val.Name
      })
      pulseEffect([val.Latitude, val.Longitude])
      setPanTo(pos, 250)
      setPanTo(pos, 200)
    }
  }
}

 src/conf/Constants.js

@@ -35,35 +35,179 @@
  ICON_SIZE: [10, 10]
}

export const props = {
  code: '编号',
  name: '名称',
  teamname: '名称',
  pfktype: '排放口类型',
  level: '级别',
  length: '长度(m)',
  unitname: '单位名称',
  pipename: '管线名称',
  subchaname: '支线名称',
  subchacode: '支线编码',
  mediumtype: '输送介质',
  startposname: '起点位置名称',
  endposname: '终点位置名称',
  pressureating: '设计压力（MPa）',
  designtranyear: '设计输量（万立/年）',
  earningcapacity: '实际输量（万立/年）',
  buriedtime: '埋设时间',
  coatingmaterial: '防腐状况',
  inservicetime: '投产时间',
  reportname: '填报人姓名',
  reportphone: '填报人联系方式',
  diameter: '管径(mm)',
  meterial: '材质',
  pressuerating: '管道压力(Mpa)',
  embeddingmode: '埋设方式',
  pipetrenchtype: '管沟类型',
  datecollected: '探测时间',
  operationalstatus: '运行状态',
  fourtype: '四通类型',
  fourm: '四通材料'
export const LAYERS = {
  pipenetwork: '管网',
  pipeline: '管线',
  manhole: '窨井',
  valve: '阀门',
  pipegallery: '管廊（带）',
  piperack: '管架（墩）',
  tee: '三通',
  fourlink: '四通',
  elbow: '弯头',
  raingate: '雨篦子',
  firedike: '防火堤',
  collectingbasin: '集水池（罐）',
  dischargeport: '排放口',
  overflowweir: '溢流堰',
  oilseparator: '隔油池',
  pointhydrology: '水体',
  pointpreservationzone: '自然保护区',
  hospital: '医院',
  emergencyres: '社会专业应急救援队伍',
  emergencyesources: '应急物资',
  firefightingunit: '消防单位'
}

export const LAYERPROPS = {
  // ç®¡ç½‘
  pipenetwork: {
    // ç®¡ç½‘
    name: '名称',
    LINENUMTYPE: '管线类型',
    PIPENAME: '管线名称',
    MEDIUMTYPE: '输送介质',
    LENGTH: '长度(m)',
    STARTPOSNAME: '起点位置名称',
    ENDPOSNAME: '终点位置名称',
    BURIEDTIME: '埋设时间',
    COATINGMATERIAL: '防腐状况',
    INSERVICETIME: '投产时间',
    UNITNAME: '所属单位名称',
    ORGNAME: '所属企业名称',
    OPERATIONALSTATUS: '运行状态'
  },
  // ç®¡çº¿
  pipeline: {
    // ç®¡ç½‘
    name: '名称',
    linenumtype: '管线类型',
    pipename: '管线名称',
    mediumtype: '输送介质',
    length: '长度(m)',
    startposname: '起点位置名称',
    endposname: '终点位置名称',
    buriedtime: '埋设时间',
    coatingmaterial: '防腐状况',
    inservicetime: '投产时间',
    unitname: '所属单位名称',
    orgname: '所属企业名称',
    operationalstatus: '运行状态'
  },
  // çª¨äº•
  manhole: {
    type: '类型',
    wellmaterial: '井盖材质',
    havesafetynet: '是否有安全网',
    datasource: '数据来源',
    operationalstatus: '运行状态'
  },
  // é˜€é—¨
  valve: {
    valvetype: '阀门类型',
    executagencyf: '执行机构形式',
    datasource: '数据来源',
    operationalstatus: '运行状态'
  },
  // ç®¡å»Šï¼ˆå¸¦ï¼‰
  pipegallery: {
    datasource: '数据来源',
    operationalstatus: '运行状态'
  },
  // ç®¡æž¶ï¼ˆå¢©ï¼‰
  piperack: {
    piperacktype: '类型',
    piperackst: '管架(墩）结构类型',
    longitudinalpiperack: '是否有纵向架',
    datasource: '数据来源',
    operationalstatus: '运行状态'
  },
  // ä¸‰é€š
  tee: {
    teetype: '三通类型',
    exportconnectm: '出口连接方式',
    entrycontype: '入口连接方式',
    teem: '三通材料',
    branchconntype: '支管连接类型',
    operationalstatus: '运行状态'
  },
  // å››é€š
  fourlink: {
    fourtype: '四通类型',
    exportcontype: '出口连接方式',
    entrycontype: '入口连接方式',
    fourm: '四通材料',
    branchconntype1: '支线1连接方式',
    branchconntype2: '支线2连接方式',
    operationalstatus: '运行状态'
  },
  // å¼¯å¤´
  elbow: {
    elbowtype: '弯头类型',
    elbowmaterial: '弯头材料',
    anticorros: '防腐材料',
    entryconntype: '入口连接方式',
    outletconntype: '出口连接方式',
    operationalstatus: '运行状态'
  },
  // é›¨ç¯¦å­
  raingate: {
    operationalstatus: '运行状态'
  },
  // é˜²ç«å ¤
  firedike: {
    operationalstatus: '运行状态'
  },
  // é›†æ°´æ± ï¼ˆç½ï¼‰
  collectingbasin: {
    operationalstatus: '运行状态'
  },
  // æŽ’放口
  dischargeport: {
    mediumtype: '介质',
    pfktype: '排放口类型',
    level: '级别',
    operationalstatus: '运行状态'
  },
  // æˆªæµé—¸

  // æº¢æµå °
  overflowweir: {
    mediumtype: '防溢介质',
    operationalstatus: '运行状态'
  },
  // éš”油池
  oilseparator: {
    operationalstatus: '运行状态'
  },
  // æ°´ä½“
  pointhydrology: {
    hydrotype: '水系类型',
    drinkingresourceind: '是否是饮用水源',
    seasonalriverind: '是否是季节性河流',
    reservoirlocation: '水库位置',
    operationalstatus: '运行状态'
  },
  // è‡ªç„¶ä¿æŠ¤åŒº
  pointpreservationzone: {
    datasource: '数据来源'
  },
  // åŒ»é™¢
  hospital: {
    hospitalleaval: '医院资质等级',
    subtypecd: '医院类型',
    datasource: '数据来源'
  },
  // ç¤¾ä¼šä¸“业应急救援队伍
  emergencyres: {
    datasource: '数据来源'
  },
  // åº”急物资
  emergencyesources: {
    datasource: '数据来源'
  },
  // æ¶ˆé˜²å•ä½
  firefightingunit: {
    datasource: '数据来源'
  }
}

 src/conf/MapConfig.js

@@ -23,7 +23,6 @@
  crs: L.CRS.EPSG4326,
  minZoom: 3,
  maxZoom: 21,
  // center: [26, 104],
  center: [34.828558921813965, 117.41676807403564],
  zoom: 5,
  // center: [39.907214641571045, 116.39019012451172],

 src/conf/layers/LayerArea.js

@@ -13,6 +13,7 @@
      sname: '公司', // è¡¨å
      checked: true, // é»˜è®¤é€‰ä¸­çŠ¶æ€
      type: 0,
      icon: 'sewers/公司.png',
      legendImage: '../.././assets/images/map/company_refining.png'
    },
    {
@@ -21,6 +22,7 @@
      sname: '码头',
      checked: false, // é»˜è®¤é€‰ä¸­çŠ¶æ€
      type: 0,
      icon: 'sewers/码头.png',
      legendImage: '../.././assets/images/map/sewers/码头.png'
    },
    {
@@ -28,6 +30,7 @@
      name: '装置区',
      sname: '装置区',
      checked: false, // é»˜è®¤é€‰ä¸­çŠ¶æ€
      icon: 'sewers/装置区.png',
      typeName: 'sewer:unitareaboundary'
    }
  ]

 src/conf/layers/LayerFsss.js

@@ -47,6 +47,7 @@
      minZoom: 16,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:piperack',
      icon: 'sewers/管架.png',
      checked: false
    },
    {
@@ -56,6 +57,7 @@
      minZoom: 16,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:pipegallery',
      icon: 'sewers/管廊.png',
      checked: false
    },
    {
@@ -63,6 +65,7 @@
      name: '流向',
      sname: 'ywslx',
      type: SERVICE_TYPE.WMS,
      icon: 'sewers/流向.png',
      checked: false
    },
    {

 src/conf/layers/LayerHbss.js

@@ -35,6 +35,7 @@
      minZoom: 16,
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:firedike',
      icon: 'sewers/防火堤.png',
      checked: false
    },
    {
@@ -53,6 +54,7 @@
      sname: '截流闸',
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:collectingbasin',
      icon: 'sewers/截流闸.png',
      checked: false
    },
    {
@@ -62,6 +64,7 @@
      minZoom: 16,
      type: SERVICE_TYPE.WMS,
      typeName: 'ewer:overflowweir',
      icon: 'sewers/溢流堰.png',
      checked: false
    },
    {

 src/conf/layers/LayerPipeLines.js

@@ -17,7 +17,7 @@
      code: 'rainline',
      name: '雨水线',
      sname: '管网',
      checked: false,
      checked: true,
      type: SERVICE_TYPE.WMS,
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
@@ -40,6 +40,7 @@
      type: SERVICE_TYPE.WMS,
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      icon: 'sewers/事故水.png',
      minZoom: 13,
      filter: 'mediumtype = \'事故水\'',
      index: 1
@@ -52,6 +53,7 @@
      type: SERVICE_TYPE.WMS,
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      icon: 'sewers/含油污水.png',
      minZoom: 13,
      color: '#ffaa00',
      filter: 'mediumtype = \'含油污水\'',
@@ -69,6 +71,7 @@
      type: SERVICE_TYPE.WMS,
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      icon: 'sewers/含盐污水.png',
      minZoom: 13,
      filter: 'mediumtype = \'含盐污水\'',
      index: 1
@@ -81,6 +84,7 @@
      type: SERVICE_TYPE.WMS,
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      icon: 'sewers/含碱污水.png',
      filter: 'mediumtype = \'含碱污水\'',
      minZoom: 10,
      index: 1
@@ -93,6 +97,7 @@
      type: SERVICE_TYPE.WMS,
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      icon: 'sewers/含硫污水.png',
      filter: 'mediumtype = \'含硫污水\'',
      minZoom: 10,
      index: 1
@@ -105,6 +110,7 @@
      type: SERVICE_TYPE.WMS,
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      icon: 'sewers/生活污水.png',
      filter: 'mediumtype = \'生活污水\'',
      minZoom: 13,
      index: 1
@@ -117,6 +123,7 @@
      type: SERVICE_TYPE.WMS,
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      icon: 'sewers/净化水.png',
      filter: 'mediumtype = \'净化水\'',
      minZoom: 13,
      index: 1
@@ -128,6 +135,7 @@
      type: SERVICE_TYPE.WMS,
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      icon: 'sewers/循环水.png',
      filter: 'mediumtype = \'循环水\'',
      checked: false,
      minZoom: 13,
@@ -141,6 +149,7 @@
      type: SERVICE_TYPE.WMS,
      layerGroup: 'sewer:pipeline_group',
      typeName: 'sewer:pipeline',
      icon: 'sewers/生产污水.png',
      filter: 'mediumtype = \'生产污水\'',
      minZoom: 13,
      color: '#a8a800',

 src/utils/utils.js

@@ -27,15 +27,15 @@
 * è„‰å†²æ•ˆæžœ
 */
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: ''
  })
  var picGroupMarker = window.L.marker(xy, { icon: pulsingIcon }).addTo(window.map)
  var picGroupMarker = window.L.marker(xy, { icon: pulsingIcon }).addTo(window.mapManager.hightlightLayer)
  // å®šæ—¶
  var timeInterval = setInterval(() => {
    if (times > 0) {
@@ -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

@@ -38,9 +38,9 @@
// // å…¬å…±å±•ç¤ºæ•°æ®
// import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced'
import LayerFactory from '@components/LayerController/service/LayerFactory'
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',
@@ -102,10 +102,6 @@

      // this.AddGasHelper()
      // this.ChangeWaterState()

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

      var layerFactory = new LayerFactory({
        L: window.L,
        map: this.map
@@ -113,6 +109,8 @@
      layerFactory.init(this.$store.state.map.serviceLayers.LayerSewersLine)
      layerFactory.initEvent(this.$store.state.map.serviceLayers.LayerSewersLine)
      window.layerFactory = layerFactory
      window.mapManager = new MapManager()
      window.mapManager.mapClickListener()
      this.saveMapStatus()
      // this.setMapObj(this.mapObj)
      // this.setBasemapHelper(this.basemapHelper)

 src/views/popup/Popup.vue

@@ -1,15 +1,15 @@
<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 type="card" :value="0">
      <el-tab-pane
              :key="item.name"
              :key="index"
              v-for="(item,index) in datas"
              :label="item.title"
              :name="index"
              :name="index.toString()"
      >
        <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 v-for="(item,key)  in item.content" :key="key">
          <el-col :span="12"><B>{{key}}：</B></el-col>
          <el-col :span="12">{{item}}</el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
@@ -18,7 +18,6 @@

<script>
// import '@/assets/css/map/map-popup.scss'
import { props } from '../../conf/Constants'

export default {
  name: 'Popup',
@@ -28,8 +27,7 @@
      tabsValue: '',
      tabIndex: 2,
      isShow: false,
      properties: {},
      props: props
      properties: {}
    }
  },
  computed: {
@@ -45,11 +43,6 @@
      // console.log(obj)
      return obj
    },
    setDatas (layer) {
      console.log(layer)
      this.datas = layer
      this.tabsValue = layer[0].name
    },
    setShow () {
      // this.style.display='auto'
      this.isShow = true
@@ -61,7 +54,6 @@
  },
  watch: {
    datas (newVal) {
      console.log(newVal)
      if (newVal != null) {
        this.tabsValue = newVal[0].name
      }