Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetw...

chenzeping

2021-03-29 e5502925619ecdbf8728086c73faeb5b654089c5

 src/components/BaseNav/WasteWater/WasteWater.js

New file
@@ -0,0 +1,177 @@
import { requestWasteWater } from '@/api/request'
// 展示图片
import defaultImg from '@assets/images/map-pages/basenav/Waste-water/fs_green.png'
import Setting from '@assets/images/map-pages/basenav/Waste-water/fs_yellow.png'

// 底图业务展示点
class AddWasteWaterHelper {
  constructor (options) {
    this.map = options.map
    this.L = window.L
    this.WasteWaterLayerGroup = this.L.layerGroup().addTo(this.map)
    this.WasteWaterPopup = null
    this.L.sgis = this.L.sgis || this.L
    this.WasteWaterMarkersLabels = []
    this.pulseHeighLightMarker = null
  }

  // 请求数据 data 为参数， 请求后台数据时 携带data参数
  requestData (data) {
    requestWasteWater(data).then(res => {
      console.log(res)
      this.DrawWasteWaterContent(res.Result.DataInfo)
      // console.log(res)
    }).catch(err => {
      console.log(err)
    })
  }

  // 根据获取数据 画出 内容
  DrawWasteWaterContent (data) {
    // 图标样式扩展
    const WasteWaterIcon = this.WasteWaterIcon()

    // //加载数据前如果存在图层组 那么清除掉
    if (this.WasteWaterLayerGroup) {
      this.WasteWaterLayerGroup.clearLayers()
    }
    for (let i = 0; i < data.length; i++) {
      // 经纬度 位置
      const positionX = data[i].Latitude
      const positionY = data[i].Longitude

      // 判断 经纬度位置信息是否存在
      // if (positionX != null && positionY != null) {
      // 用于 判断 => 判断是否展示脉冲效果 => temp(临时)
      const determineValueOne = data[i].LongDayWarning
      const determineValueTwo = data[i].StorageQty
      const positionArea = [positionX, positionY]

      // 图标展示
      const iconUrl = this.WasteWaterIconUrl(determineValueOne, determineValueTwo, positionArea)
      const Icon = new WasteWaterIcon({ iconUrl: iconUrl })
      // let url = Icon.options.iconUrl

      const marker = this.L.marker.magic([positionX, positionY], { icon: Icon, magic: 'vanishIn' })

      marker.bindPopup(() => {
        return this.WasteWaterPopup.$el
      }, {
        className: 's-map-popup',
        minWidth: 1000,
        closeButton: true,
        autoClose: false
      })
      // 划过出现 展示数据
      marker.bindTooltip(data[i].Name, {
        permanent: true,
        offset: [0, -16],
        direction: 'top',
        className: ''
      })
      // 点击事件
      marker.on('click', (e) => {
        try {
          // console.log(e)
          this.EffectOfPulse(e.target.getLatLng())
          this.WasteWaterPopup.setDate(data[i])
          return this.WasteWaterPopup.$el
        } catch (error) {
          console.log(error)
        }
      })
      // 设置内容添加到图层
      this.WasteWaterLayerGroup.addLayer(marker)
      // }
    }
  }

  // 废水按钮点击进行的 内容的设置
  SetWasteWaterContent (config, containerPopup) {
    this.WasteWaterPopup = containerPopup
  }

  // 图标样式扩展 => 光圈 图标脉冲
  WasteWaterIcon () {
    return this.L.Icon.extend({
      options: {
        iconSize: [50, 50],
        iconAnchor: [25, 25]
      }
    })
  }

  // 根据类型返回图片加载url
  WasteWaterIconUrl (determineValueOne, determineValueTwo, position) {
    let EffectOfChange
    if (determineValueOne === 1 || determineValueTwo === 1) {
      EffectOfChange = defaultImg
      this.EffectOfPulse(position, this.WasteWaterMarkersLabels, this.WasteWaterLayerGroup)
    } else {
      EffectOfChange = Setting
    }
    return EffectOfChange
  }

  // 脉冲效果设置实现
  EffectOfPulse (position, markers, layerGroup) {
    // // 区分直接执行 和判断执行的不同区别
    let differentColor = ''
    if (markers) {
      differentColor = '#ff0000'
    } else {
      differentColor = '#98FB98'
    }
    // 坐标数据：报警传进来的是数组 / 点击传进来的是object
    const FinalPosition = position instanceof Array ? {
      lat: position[0],
      lng: position[1]
    } : position
    // 插件 效果实现
    const pulsingIcon = this.L.icon.pulse({
      iconSize: [20, 20], // 控制光圈大小
      color: differentColor,
      fillColor: ' '
    })
    if (markers) {
      // markers.push(this.L.marker(FinalPosition, { icon: pulsingIcon }))
      // this.L.layerGroup(markers).addLayer(layerGroup)
    } else {
      const picGroupMarker = new this.L.FeatureGroup()
      this.L.marker(FinalPosition, { icon: pulsingIcon }).addTo(picGroupMarker)
      this.pulseHeighLightMarker = picGroupMarker.addTo(this.WasteWaterLayerGroup)
      this.PulseCountSetting()
    }
  }

  // 对图标脉冲 进行set设置  // 高亮图层
  PulseCountSetting () {
    const HeightLightTime = 5
    let PulseNumber = 5
    const pulseinterver = setInterval(() => {
      if (PulseNumber > 0) {
        PulseNumber--
      } else {
        this.pulseClear(pulseinterver)
        PulseNumber = HeightLightTime
      }
    }, 1000)
  }

  // 在执行下个前清除已存在图层
  pulseClear (pulseinterver) {
    clearInterval(pulseinterver)
    pulseinterver = null

    if (this.WasteWaterLayerGroup) {
      // this.WasteWaterLayerGroup.clearLayers()
    } else {
      this.WasteWaterLayerGroup = this.L.layerGroup().addTo(this.map)
    }
    if ((this.pulseHeighLightMarker)) {
      this.pulseHeighLightMarker.remove()
    }
  }
}

export default AddWasteWaterHelper