修改管网先tooltip样式

YANGDL

2021-03-04 6ffa578934b471302ed9ced5d1813003f8c23cc5

 src/components/helpers/ServiceLayerHelper.js

@@ -3,7 +3,8 @@
 * 创建图层相关的类
 */
import AjaxUtils from '@/utils/AjaxUtils'
import { GEOM_TYPE } from '../../conf/Constants'
import store from '@/store'
import styles from '@/conf/Styles'

class ServiceLayerHelper {
  constructor (options) {
@@ -14,9 +15,10 @@
    this.tileLayersWMTSArray = [] // 初始的WMTS集
    this.tileLayersTileArray = [] // 初始的Tile集
    this.tileLayersWMSArray = [] // 初始的WMS集
    this.geojsonArray = [] // 初始的geojson集
    this.geojsonArray = {} // 初始的geojson集
    this.layerConfig = {}
    this.regex = /\{(.+?)\}/g // 匹配{}
    this.popupComp = null
  }

  getTileLayer (code) {
@@ -26,9 +28,11 @@
  /**
     * 根据配置文件初始化业务底图
     */
  initServiceLayers (layerConfig) {
  initServiceLayers (layerConfig, popupComp) {
    this.layerConfig = layerConfig
    this.popupComp = popupComp
    this.loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine)
    this.loadLayers(layerConfig.mapConfig.Layers.layerSewersPoint)
  }

  /**
@@ -40,100 +44,149 @@
    console.debug('ServiceLayerHelper加载参数：', layerConfig)
    for (let i = 0, len = layerConfig.length; i < len; ++i) {
      const opt = layerConfig[i]
      if (opt.checked) {
        if (opt.type === 'wmts') {
          this.loadWmtsLayer(opt, isAddToMap)
          this.tileLayersWMTSArray.push(opt)
        } else if (opt.type === 'wms') {
          this.loadWmsLayer(opt, isAddToMap)
          this.tileLayersWMSArray.push(opt)
        } else if (opt.type === 'tile') {
          this.loadTileLayer(opt, isAddToMap)
          this.tileLayersTileArray.push(opt)
        } else if (opt.type === 'geojson') {
          this.loadGeojson(opt)
        }
      if (opt.type === 'wmts') {
        this.loadWmtsLayer(opt, isAddToMap)
        this.tileLayersWMTSArray.push(opt)
      } else if (opt.type === 'wms') {
        this.loadWmsLayer(opt, isAddToMap)
        this.tileLayersWMSArray.push(opt)
      } else if (opt.type === 'tile') {
        this.loadTileLayer(opt, isAddToMap)
        this.tileLayersTileArray.push(opt)
      } else if (opt.type === 'geojson') {
        this.loadGeojsonLayers(opt)
      }
    }
  }

  loadGeojson (options) {
  loadGeojsonLayers (options) {
    var url = options.url
    var layers = options.layers
    var matches = this.regex.exec(url)
    for (var i = 0; i < layers.length; i++) {
      var layer = layers[i]
      var matchValue = layer[matches[1]]
      var checked = layer.checked
      var geomtype = layer.geomtype
      if (!checked) {
        continue
      if (checked) {
        this.loadGeojsonLayer(url, layer)
      }
      var newUrl = url.replace(this.regex, matchValue)
      var that = this
    }
  }

  /**
     * 请求wfs数据
     * @param url
     * @param item
     */
  loadGeojsonLayer (url, item) {
    var matches = this.regex.exec(url)
    var matchValue = item[matches[1]]
    var code = item.code
    var newUrl = url.replace(this.regex, matchValue)
    var that = this
    if (!that.geojsonArray[code]) {
      AjaxUtils.GetDataAsynByUrl(newUrl, {}, function (res) {
        switch (geomtype) {
          case GEOM_TYPE.POINT :
            that.loadPointGeojson(res)
            break
          case GEOM_TYPE.LINE :
            that.loadLineGeojson(res)
            break
          case GEOM_TYPE.POLYGON :
            break
          default:
            that.loadLineGeojson(res)
            break
        }
        store.commit('setSewersDatas', res)
        var layer = that.loadGeojson(res, item)
        that.geojsonArray[code] = layer
      })
    }
  }

  /**
   * 加载点数据
   * @param res
   */
  loadPointGeojson (res) {
    this.L.geoJSON(res.features, {
     * 加载gis server返回的geoson数据到地图中展示
     * @param res
     */
  loadGeojson (res, opt) {
    var that = this
    var icon = opt.icon
    const featureGroup = that.L.featureGroup().addTo(that.map)
    const geojson = that.L.geoJSON(res.features, {
      style: function (feature) {
        return {
          fill: styles.defaultLineStyle.fill,
          weight: styles.defaultLineStyle.weight,
          fillColor: styles.defaultLineStyle.fillColor,
          color: styles.defaultLineStyle.color,
          fillOpacity: styles.defaultLineStyle.fillOpacity,
          opacity: styles.defaultLineStyle.opacity
          // dashArray: styles.defaultLineStyle.dashArray,
          // dashSpeed: styles.defaultLineStyle.dashSpeed
        }
      },
      pointToLayer: function (geoJsonPoint, latlng) {
        return this.L.canvasMarker(latlng,
        return that.L.canvasMarker(latlng,
          {
            radius: 20,
            prevLatlng: this.L.latLng(51.503, -0.09), // previous point
            img: {
              url: './images/beng.png',
              size: [20, 20],
              rotate: 90
              // url: 'assets/images/map/marker-icon.png',
              url: '/assets/images/map/' + icon,
              size: styles.defaultLineStyle.size
            }
          })
      }
    }).bindPopup(function (layer) {
      // return layer.feature.properties.linenumber
    }).addTo(this.map)
      that.popupComp.setDatas(layer)
      that.popupComp.setShow()
      return that.popupComp.$el
    }, {
      className: 's-map-popup',
      minWidth: 300,
      closeButton: false,
      autoClose: false
    })
      .bindTooltip(function (layer) {
        const nameId = layer.feature.id
        let name = ''
        if (nameId.indexOf('三通') !== -1 || nameId.indexOf('四通') !== -1) {
          name = layer.feature.properties.pointnumber
        } else {
          name = layer.feature.properties.name
        }
        return name
      })
      .on('mouseover', function (e) {
        const layer = e.layer
        const type = e.layer.feature.geometry.type
        if (type === 'LineString' || type === 'MultiLineString') {
          layer.setStyle({ weight: 8, color: '#00ffff' })
        } else if (type === 'Point' || type === 'MultiPoint') {
          layer.setStyle({
            img: {
              url: '/assets/images/map/' + icon,
              size: [25, 25]
            }
          })

          layer.bringToFront()
        }
      }).on('mouseout', function (e) {
        const layer = e.layer
        const type = e.layer.feature.geometry.type
        if (type === 'LineString' || type === 'MultiLineString') {
          layer.setStyle({ weight: styles.defaultLineStyle.weight, color: styles.defaultLineStyle.color })
        }
        if (type === 'Point' || type === 'MultiPoint') {
          layer.setStyle({
            img: {
              url: '/assets/images/map/' + icon,
              size: styles.defaultLineStyle.size
            }
          })
        }
      }).addTo(featureGroup)
    if (Object.prototype.hasOwnProperty.call(res, 'features') && res.features.length > 0 && (res.features[0].geometry.type === 'LineString' || res.features[0].geometry.type === 'MultiLineString')) {
      geojson.bringToBack()
    } else {
      geojson.bringToFront()
    }
    return featureGroup
  }

  /**
   * 加载线数据
   * @param res
   */
  loadLineGeojson (res) {
    this.L.geoJSON(res.features, {
      style: function (feature) {
        return {
          fill: true,
          weight: 2,
          fillColor: '#06cccc',
          color: '#06cccc',
          fillOpacity: 0.2,
          opacity: 0.8,
          dashArray: '10,4',
          dashSpeed: -10
        }
      },
      minZoom: 10
    }).bindPopup(function (layer) {
      // return layer.feature.properties.linenumber
    }).addTo(this.map)
  removeLayer (item) {
    var code = item.code
    var layer = this.geojsonArray[code]
    if (layer) {
      this.map.removeLayer(layer)
      delete this.geojsonArray[code]
    }
  }

  /**
@@ -144,11 +197,13 @@
  loadWmtsLayer (options, isAddToMap = true) {
    const layer = this.L.tileLayer(options.url, options.option)
    layer.config = options

    if (isAddToMap) {
      layer.addTo(this.map)
    var checked = options.checked
    if (checked) {
      if (isAddToMap) {
        layer.addTo(this.map)
      }
      this.loadedLayersMap.set(options.code, layer)
    }
    this.loadedLayersMap.set(options.code, layer)
  }

  /**
@@ -160,10 +215,13 @@
    const layer = this.L.tileLayer.wms(options.url, options.option)
    layer.config = options

    if (isAddToMap) {
      layer.addTo(this.tileLayerWmslayerGroup)
    var checked = options.checked
    if (checked) {
      if (isAddToMap) {
        layer.addTo(this.tileLayerWmslayerGroup)
      }
      this.loadedLayersMap.set(options.code, layer)
    }
    this.loadedLayersMap.set(options.code, layer)
  }

  /**