点击废水显示弹窗效果

zhangshuaibao

2021-04-01 cb0e263d36be16efbfbbb27f02139749f7ef5c2c

 src/components/BaseNav/WasteWater/WasteWater.js

@@ -1,7 +1,8 @@
// 请求数据
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'
// 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 {
@@ -16,9 +17,10 @@
  }

  // 请求数据 data 为参数， 请求后台数据时 携带data参数
  requestData () {
    requestWasteWater().then(res => {
      this.DrawTheWasteWaterContent(res.Result.DataInfo)
  requestData (data) {
    requestWasteWater(data).then(res => {
      console.log(res)
      this.DrawWasteWaterContent(res.Result.DataInfo)
      // console.log(res)
    }).catch(err => {
      console.log(err)
@@ -26,18 +28,17 @@
  }

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

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

      // 判断 经纬度位置信息是否存在
      // if (positionX != null && positionY != null) {
@@ -51,18 +52,19 @@
      const Icon = new WasteWaterIcon({ iconUrl: iconUrl })
      // let url = Icon.options.iconUrl

      const marker = this.L.marker.magic([positionX, positionY], { icon: Icon, magic: 'vanishIn' })
      // const marker = this.L.marker.magic([positionX, positionY], { icon: Icon, magic: 'vanishIn' }) // 带显示动画
      const marker = this.L.marker([positionX, positionY], { icon: Icon })

      marker.bindPopup(() => {
        return this.WasteWaterPopup.$el
      }, {
        className: 's-map-popup',
        minWidth: 1000,
        closeButton: true,
        autoClose: false
      })
      // marker.bindPopup(() => {
      //   return this.WasteWaterPopup.$el
      // }, {
      //   className: 's-map-popup',
      //   minWidth: 1000,
      //   closeButton: true,
      //   autoClose: false
      // })
      // 划过出现 展示数据
      marker.bindTooltip(data[i].StoragePlaceName, {
      marker.bindTooltip(data[i].Name, {
        permanent: true,
        offset: [0, -16],
        direction: 'top',
@@ -73,7 +75,8 @@
        try {
          // console.log(e)
          this.EffectOfPulse(e.target.getLatLng())
          this.WasteWaterPopup.setDate(data[i])
          this.WasteWaterPopup.setData(data[i])
          return this.WasteWaterPopup.$el
        } catch (error) {
          console.log(error)
        }
@@ -103,10 +106,10 @@
  WasteWaterIconUrl (determineValueOne, determineValueTwo, position) {
    let EffectOfChange
    if (determineValueOne === 1 || determineValueTwo === 1) {
      EffectOfChange = defaultImg
      // EffectOfChange = defaultImg
      this.EffectOfPulse(position, this.WasteWaterMarkersLabels, this.WasteWaterLayerGroup)
    } else {
      EffectOfChange = Setting
      // EffectOfChange = Setting
    }
    return EffectOfChange
  }