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

陈泽平

2021-05-19 b4fa7ad9c8e0051e9851c3bfbe398d5ff4cbfafe

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

 src/components/LayerController/service/WmsLayerGroupService.js

@@ -25,7 +25,7 @@
        maxZoom: 21,
        layers: k // todo
      }).addTo(this.layer).bringToFront()
    }
    }z
  }

  init () {

 src/components/LayerController/service/WmsLayerService.js

@@ -65,6 +65,7 @@
    const params = {
      format: 'image/png', // 返回的数据格式
      transparent: true,
      maxZoom: 21,
      BBOX: this.map.getBounds().toBBoxString()
    }
    if (layers) {

 src/components/helpers/LocateHelper.js

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

@@ -9,22 +9,31 @@
 */
export const locate = function (feature, config, filter) {
  fitBounds(feature)
  highlight(feature, config)
  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 ')
  }
  loadPointWfs(centerPoint, params)
}

/**
 * 加载点范围的wfs数据并弹窗
 * @param latlng  点的经纬度坐标
 * @param params
 */
export const loadPointWfs = function (latlng, params) {
  setTimeout(() => {
    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 ')
    }
    window.mapManager.loadWfsDatas(centerPoint, params).then((res) => {
      openPropsPopup(centerPoint, res.features)
    window.mapManager.loadWfsDatas(latlng, params).then((res) => {
      openPropsPopup(latlng, res.features)
    })
  }, 1000)
}
@@ -35,58 +44,58 @@
 */
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, 17)
  } else {
    window.map.fitBounds(window.L.geoJSON(feature).getBounds())
  }
}

export const highlight = function (feature, icon) {
  if (Array.isArray(feature)) {
  /* if (Array.isArray(feature)) {
    for (let i = 0; i < feature.length; i++) {
      highlight(feature[i], icon)
    }
  } else {
    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') {
  } else { */
  window.mapManager.clearHighlight()
  const L = window.L
  const type = feature.geometry.type
  const highlightLayer = window.mapManager.hightlightLayer
  if (type === 'Point') {
    // 叠加一个大尺寸的图标
      let point = feature.geometry.coordinates
      point = [point[1], point[0]]

      if (icon) {
        L.marker(point, {
          icon: L.icon({
            iconUrl: '/assets/images/map/' + icon,
            iconSize: [30, 30],
            iconAnchor: [15, 15]
          })
        }).addTo(highlightLayer)
    let point = feature.geometry.coordinates
    point = [point[1], point[0]]
    pointZoom(point, icon)
    pulseEffect(point)
  } else {
    L.geoJSON(feature, {
      style: function () {
        return {
          color: 'red'
        }
      }
      pulseEffect(point)
    } else if (type === 'LineString') {
      L.polyline(reversePolyLine(feature), { color: 'red' }).addTo(highlightLayer)
    }
    }).addTo(highlightLayer)
  }
}

/**
 * 高亮点位图标
 * @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)
  }
}

@@ -98,7 +107,6 @@
export const openPropsPopup = function (xy, features) {
  const lt = window.map.latLngToContainerPoint(xy)
  const datas = popupDatas(features)
  console.log(datas)
  if (datas.length > 0) {
    window.$layer.open({
      content: {
@@ -115,32 +123,21 @@
}

export const getCenterPoint = function (feature) {
  const L = window.L
  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
  var coordinates = feature.geometry.coordinates

  if (type === 'Point') {
    return [coordinates[1], coordinates[0]]
  } else {
    const center = L.geoJSON(feature, {}).getBounds().getCenter()
    return [center.lat, center.lng]
  }
  if (point.length > 2) {
    point.splice(2, 1)
  }
  return point.reverse()
}

const popupDatas = function (features) {
  const datas = []
  console.log(features)
  if (features) {
    for (var i = 0; i < features.length; i++) {
      const feature = features[i]
@@ -153,22 +150,49 @@
      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]


 src/components/helpers/MapManager.js

@@ -28,9 +28,10 @@
      // console.log(e)
      this.clearHighlight()
      this.loadWfsDatas(e.latlng).then((res) => {
        console.log(res)
        highlight(res.features)
        openPropsPopup(e.latlng, res.features)
        if (res.features.length > 0) {
          highlight(res.features[0])
          openPropsPopup(e.latlng, res.features)
        }
      })
    })
  }

 src/components/helpers/WfsHelper.js

@@ -2,6 +2,7 @@
 * 加载WMS,拼接FILTER,LAYERS参数等
 */
import { WFS_URL } from '../../conf/Constants'
import { lrtrim } from '../../utils/utils'
function WfsHelper () {
  this.filters = []
  this.typeNames = []
@@ -16,7 +17,35 @@
  }

  this.setTypeName = (typeName) => {
    this.typeNames = typeName
    if (typeof typeName === 'string' || typeName instanceof String) {
      const comma = typeName.indexOf(',')
      if (comma >= 0) {
        const typeNameArr = typeName.split(',')
        for (let i = 0; i < typeNameArr.length; i++) {
          this.addTypeName(lrtrim(typeNameArr[i]))
        }
      }
    } else if (Array.isArray(typeName)) {
      this.typeNames = typeName
    }
  }

  this.setFilter = (filter) => {
    console.log(filter)
    if (typeof filter === 'string' || filter instanceof String) {
      const eq = filter.indexOf('=')
      const lk = filter.indexOf('like')
      if (eq >= 0) {
        const filterArr = filter.split('=')
        this.addEquals(lrtrim(filterArr[0]), lrtrim(filterArr[1]))
      }
      if (lk >= 0) {
        const filterArr = filter.split('like')
        this.addLike(lrtrim(filterArr[0]), lrtrim(filterArr[1]))
      }
    } else if (Array.isArray(filter)) {
      this.filters = filter
    }
  }

  this.clearFilter = () => {

 src/components/layer/src/layer.js

@@ -20,15 +20,12 @@
   * @return {[type]}         [description]
   */
  self.open = function (opt) {
    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.comp = Vue.extend(options.content.comp)
    console.log(options)
    const instance = new LayerVueExtend({
      data: options
    })

 src/components/panel/topicSearch/SewersSearch.vue

@@ -178,9 +178,12 @@
      if (this.form.keyword) {
        this.wfsHelper.addLike('name', this.form.keyword)
      }
      const filter = this.form.dataType.filter
      if (filter) {
        this.wfsHelper.setFilter(filter)
      }
      // const _this = this
      const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
      console.log(res)
      if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
        this.total = res.totalFeatures
        this.list = res.features

 src/conf/Constants.js

@@ -2,6 +2,8 @@
// export const PIPELINE_WMS = 'http://xearth.cn:6240/geoserver/sewer/wms'
export const WMS_URL = 'http://10.238.235.179:6240/geoserver/sewer/wms'
export const WFS_URL = 'http://10.238.235.179:6240/geoserver/sewer/ows?service=WFS'
// export const WMS_URL = 'http://xearth.cn:6240/geoserver/sewer/wms'
// export const WFS_URL = 'http://xearth.cn:6240/geoserver/sewer/ows?service=WFS'

export const GEOM_TYPE = {
  POINT: 'point',

 src/conf/layers/LayerHbss.js

@@ -53,7 +53,7 @@
      name: '截流闸',
      sname: '截流闸',
      type: SERVICE_TYPE.WMS,
      typeName: 'sewer:collectingbasin',
      typeName: 'sewer:chokevalve',
      icon: 'sewers/.png',
      checked: false
    },
@@ -63,7 +63,7 @@
      sname: '溢流堰',
      minZoom: 16,
      type: SERVICE_TYPE.WMS,
      typeName: 'ewer:overflowweir',
      typeName: 'sewer:overflowweir',
      icon: 'sewers/.png',
      checked: false
    },
@@ -74,7 +74,7 @@
      minZoom: 16,
      checked: false,
      type: SERVICE_TYPE.WMS,
      typeName: 'ewer:oilseparator',
      typeName: 'sewer:oilseparator',
      icon: 'sewers/隔油池.png'
    }
  ]

 src/utils/utils.js

@@ -48,23 +48,27 @@
}

export function reversePolyLine (feature) {
  const coordinates = feature.geometry.coordinates
  const coordinates = clone(feature.geometry.coordinates)
  var latlng = []
  for (var j = 0; j < coordinates.length; j++) {
    const coordinate = coordinates[j]
    latlng.push(coordinate.reverse())
    let coordinate = coordinates[j]
    coordinate = [coordinate[1], coordinate[0]]
    latlng.push(coordinate)
  }
  return latlng
}

export function reverseMultiLine (feature) {
  const coordinates = feature.geometry.coordinates
  const coordinates = clone(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]
      let coor = coordinate[k]
      if (coor.length > 2) {
        coor = coor.splice(2, 1)
      }
      xy.push(coor.reverse())
    }
    latlng.push(xy)
@@ -141,4 +145,13 @@
  }
}

/**
 * 去掉两头空格
 * @param str
 * @returns {*}
 */
export function lrtrim (str) {
  return str.replace(/^\s+|\s+$/g, '')
}

export default clone

 src/views/popup/Popup.vue

@@ -1,6 +1,6 @@
<template>
  <div id="popup" class="s-map-popup-panel" style="min-width: 280px;max-width: 280px;padding: 0 10px">
    <el-tabs type="card" :value="0">
    <el-tabs type="card" v-model="tabIndex" @tab-click="handleClick">
      <el-tab-pane
              :key="index"
              v-for="(item,index) in datas"
@@ -11,6 +11,22 @@
          <el-col :span="12"><B>{{key}}：</B></el-col>
          <el-col :span="12">{{item}}</el-col>
        </el-row>
        <el-table v-if="item.tableList"
                :data="item.tableList"
                style="width: 100%">
          <el-table-column
                  prop="pipesegcode"
                  label="管段编码">
          </el-table-column>
          <el-table-column
                  prop="startpointdepth"
                  label="起点埋深(m)">
          </el-table-column>
          <el-table-column
                  prop="startpointz"
                  label="起点高程(m)">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
@@ -19,13 +35,15 @@
<script>
// import '@/assets/css/map/map-popup.scss'

import { highlight } from '../../components/helpers/LocateHelper'

export default {
  name: 'Popup',
  props: ['datas'],
  data () {
    return {
      tabsValue: '',
      tabIndex: 2,
      tabIndex: 0,
      isShow: false,
      properties: {}
    }
@@ -47,9 +65,10 @@
      // this.style.display='auto'
      this.isShow = true
    },
    onClick () {
      const param = 1111
      this.$emit('callPopup', param)
    handleClick (tab, event) {
      const data = this.datas[this.tabIndex]
      const feature = data.feature
      highlight(feature)
    }
  },
  watch: {