统计表弹框UI优化；增加点击企业名称缩放至企业；二级表展示功能优化。

XingChuan

2021-05-31 4df0471b7dff0494625ff09969b1a13b5359a26e

 src/components/helpers/LocateHelper.js

@@ -1,6 +1,43 @@
import { pulseEffect, reversePolyLine } from '../../utils/utils'
import { pulseEffect } from '../../utils/utils'
import Popup from '@views/popup/Popup'
import { LAYERPROPS, LAYERS } from '../../conf/Constants'

/**
 * 整合定位、高亮、弹窗
 * @param feature  geojson
 * @param config   图层的config
 */
export const locate = function (feature, config, filter) {
  fitBounds(feature)
  highlight(feature, config.icon)
  const centerPoint = getCenterPoint(feature)
  const params = { LAYERS: config.layerGroup || config.typeName, QUERY_LAYERS: config.layerGroup || config.typeName }
  const filters = []
  if (config.filter) {
    filters[filters.length] = config.filter
  }
  if (filter) {
    filters[filters.length] = filter
  }
  if (filters.length > 0) {
    params.CQL_FILTER = filters.join(' AND ')
  }
  console.log(centerPoint)
  loadPointWfs(centerPoint, params)
}

/**
 * 加载点范围的wfs数据并弹窗
 * @param latlng  点的经纬度坐标
 * @param params
 */
export const loadPointWfs = function (latlng, params) {
  setTimeout(() => {
    window.mapManager.loadWfsDatas(latlng, params).then((res) => {
      openPropsPopup(latlng, res.features)
    })
  }, 1000)
}
/**
 * 根据传的 feature对象定位，
 * @param code
@@ -8,58 +45,67 @@
 */
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
  if (type === 'Point') {
    var point = feature.geometry.coordinates
    point = [point[1], point[0]]
    window.map.setView(point, 19)
  } else {
    window.map.fitBounds(window.L.geoJSON(feature).getBounds())
  }
}

export const highlight = function (feature, config) {
export const highlight = function (feature, icon) {
  /* if (Array.isArray(feature)) {
    for (let i = 0; i < feature.length; i++) {
      highlight(feature[i], icon)
    }
  } else { */
  window.mapManager.clearHighlight()
  const L = window.L
  const type = feature.geometry.type
  window.mapManager.clearHighlight()
  const highlightLayer = window.mapManager.hightlightLayer
  if (type === 'MultiLineString') {
  if (type === 'Point') {
    // 叠加一个大尺寸的图标
    let point = feature.geometry.coordinates
    point = [point[1], point[0]]
    pointZoom(point, icon)
    pulseEffect(point)
  } else {
    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) {
/**
 * 高亮点位图标
 * @param latlng  经纬度
 * @param icon    图标
 */
export const pointZoom = function (latlng, icon) {
  const L = window.L
  const highlightLayer = window.mapManager.hightlightLayer
  if (icon) {
    L.marker(latlng, {
      icon: L.icon({
        iconUrl: '/assets/images/map/' + icon,
        iconSize: [30, 30],
        iconAnchor: [15, 15]
      })
    }).addTo(highlightLayer)
  }
}

/**
 * 弹出属性列表展示窗口
 * @param xy      弹出窗口跟随要素的经纬度
 * @param layer   查询指定的图层。不指定时，默认为勾选的图层
 */
export const openPropsPopup = function (xy, features) {
  const lt = window.map.latLngToContainerPoint(xy)
  const datas = popupDatas(features)
  if (datas.length > 0) {
@@ -77,8 +123,24 @@
  }
}

export const getCenterPoint = function (feature) {
  const L = window.L
  const type = feature.geometry.type
  var coordinates = feature.geometry.coordinates

  if (type === 'Point') {
    return [coordinates[1], coordinates[0]]
  } else {
    return L.geoJSON(feature, {}).getBounds().getSouthWest()
    // return [center.lat, center.lng]

    // return turf.centerOfMass(L.geoJSON(feature, {}).toGeoJSON())
  }
}

const popupDatas = function (features) {
  const datas = []
  console.log(features)
  if (features) {
    for (var i = 0; i < features.length; i++) {
      const feature = features[i]
@@ -88,22 +150,52 @@

      const propValues = LAYERPROPS[ids[0]]
      const contents = {}
      if (!propValues) {
        continue
      }
      if (id.indexOf('pipesegment') >= 0) {
        continue
      }
      for (const k in properties) {
        if (propValues[k]) {
          contents[propValues[k]] = properties[k]
        }
      }
      datas.push({
      const data = {
        title: LAYERS[ids[0]],
        name: feature.id,
        content: contents
      })
        content: contents,
        feature: feature
      }
      if (id.indexOf('pipeline') >= 0) {
        data.tableList = listPipeSection(features, properties.subchacode || properties.pipecode)
      }
      datas.push(data)
      console.log(properties)
    }
  }
  return datas
}

// 管线信息绑定所属管段
export const listPipeSection = function (features, code) {
  const list = []
  if (features) {
    for (var i = 0; i < features.length; i++) {
      const feature = features[i]
      const id = feature.id
      if (id.indexOf('pipesegment') < 0) {
        continue
      }
      const properties = feature.properties
      if (properties.pipecode === code) {
        list[list.length] = properties
      }
    }
  }
  return list
}

export const getLayer = function (layerId, id) {
  const layer = this.layers[layerId]