定位、弹窗

徐旺旺

2021-05-17 4423935d0249d35161efa7f2a095fbfc4b2fd017

定位、弹窗

 src/components/LayerController/event/EventHandler.js

File was deleted

 src/components/LayerController/service/WmsLayerService.js

@@ -1,8 +1,5 @@
import AjaxUtils from '../../../utils/AjaxUtils'
import { WMS_URL } from '../../../conf/Constants'
import Popup from '@views/popup/Popup'
import WmsLayerList from '../dataset/WmsLayerList'
import { highlight } from '../../helpers/LocateHelper'

/**
 * todo 得考虑一个图层配置了多个 wmsLayers的情况
@@ -40,7 +37,6 @@
  }

  init () {
    this.clickListener()
  }

  add (config) {
@@ -77,91 +73,6 @@
      params.cql_filter = filter
    }
    this.wmsLayer = this.L.tileLayer.wms(WMS_URL, params).addTo(this.map)
  }

  clickListener () {
    window.map.on('click', (e) => {
      // console.log(e)
      window.mapManager.clearHighlight()
      this.featureGroup.clearLayers()
      var point = this.map.latLngToContainerPoint(e.latlng, this.map.getZoom())
      var size = this.map.getSize()
      // const bbox = this.L.latLngBounds(this.L.latLng(e.latlng.lng, e.latlng.lat)).toBBoxString()
      const layers = this.wmsLayerList.getLayers()
      const filter = this.wmsLayerList.getFilters()
      if (layers.length > 0) {
        const params = Object.assign({
          LAYERS: layers,
          QUERY_LAYERS: layers,
          WIDTH: size.x,
          HEIGHT: size.y,
          X: Math.round(point.x),
          Y: Math.round(point.y),
          BBOX: this.map.getBounds().toBBoxString()
        }, this.params)
        if (filter.length > 0) {
          params.cql_filter = filter
        }
        AjaxUtils.get4JsonDataByUrl(WMS_URL, params, (res) => {
          const features = res.data.features
          /**
           * {
           *     title: 'New Tab',
           *     name: newTabName,
           *     content: 'New Tab content'
           * }
           * @type {*[]}
           */
          const popupDatas = []
          if (features) {
            for (var i = 0; i < features.length; i++) {
              const feature = features[i]
              const properties = feature.properties
              highlight(feature)
              // const coordinates = feature.geometry.coordinates
              popupDatas.push({
                title: properties.wellname || properties.devicename || properties.name || properties.pipename,
                name: feature.id,
                content: properties
              })
            }
          }
          if (popupDatas.length > 0) {
            var myIcon = this.L.divIcon({ className: 'my-div-icon' })
            this.L.marker(e.latlng, {
              icon: myIcon
            }).addTo(this.featureGroup)/*
              .bindPopup((layer) => {
                this.popupComp.setDatas(popupDatas)
                this.popupComp.setShow()
                return this.popupComp.$el
              }, {
                className: 's-map-popup',
                minWidth: 300,
                closeButton: false,
                autoClose: false
              })
              .openPopup() */

            if (window.layerFactory.clickSwitch) {
              window.$layer.open({
                content: {
                  content: Popup, // 组件
                  data: { // 传递的参数
                    datas: popupDatas
                  }
                },
                title: '', // 标题
                left: e.originalEvent.clientX,
                top: e.originalEvent.clientY
              })
            }
            // this.popupComp.setDatas(popupDatas)
            // this.popupComp.setShow()
          }
        })
      }
    })
  }
}


 src/components/helpers/LocateHelper.js

@@ -1,5 +1,6 @@
import { pulseEffect, reversePolyLine } from '../../utils/utils'

import Popup from '@views/popup/Popup'
import { LAYERPROPS, LAYERS } from '../../conf/Constants'
/**
 * 根据传的 feature对象定位，
 * @param code
@@ -25,6 +26,7 @@
export const highlight = function (feature, config) {
  const L = window.L
  const type = feature.geometry.type
  window.mapManager.clearHighlight()
  const highlightLayer = window.mapManager.hightlightLayer
  if (type === 'MultiLineString') {
    L.geoJSON(feature, {
@@ -50,29 +52,56 @@
      }).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 (layerId, id) {
  const layer = this.layers[layerId]

  if (layer) {
    layer.eachLayer(function (layer) {
      const layers = layer.getLayers()
      for (var i = 0; i < layers.length; i++) {
        const lay = layers[i]
        const feature = lay.feature
        lay.closePopup()
        if (feature.id === id) {
          lay.openPopup()
          break
export const openPopup = function (xy, features) {
  const lt = window.map.latLngToContainerPoint(xy)
  const datas = popupDatas(features)
  if (datas.length > 0) {
    window.$layer.open({
      content: {
        comp: Popup, // 组件
        data: { // 传递的参数
          datas: datas
        }
      }
      },
      title: '', // 标题
      left: lt.x,
      top: lt.y
    })
  }
  return null
}

const popupDatas = function (features) {
  const datas = []
  if (features) {
    for (var i = 0; i < features.length; i++) {
      const feature = features[i]
      const id = feature.id
      const properties = feature.properties
      const ids = id.split('.')

      const propValues = LAYERPROPS[ids[0]]
      const contents = {}
      for (const k in properties) {
        if (propValues[k]) {
          contents[propValues[k]] = properties[k]
        }
      }
      datas.push({
        title: LAYERS[ids[0]],
        name: feature.id,
        content: contents
      })
      console.log(properties)
    }
  }
  return datas
}

export const getLayer = function (layerId, id) {

 src/components/helpers/MapManager.js

@@ -1,22 +1,58 @@
import AjaxUtils from '../../utils/AjaxUtils'
import { WMS_URL } from '../../conf/Constants'
import { openPopup } from './LocateHelper'

class MapManager {
  constructor () {
    this.hightlightLayer = window.L.featureGroup({}).addTo(window.map)
    this.clickDialogSwitch = true // 图层点击弹窗开关
    this.L = window.L
    this.map = window.map
    // wms getfeatureinfo 默认参数
    this.defaultWmsParams = {
      VERSION: '1.1.1',
      SERVICE: 'WMS',
      REQUEST: 'GetFeatureInfo',
      // bbox: bbox,
      FORMAT: 'image/png',
      INFO_FORMAT: 'application/json',
      TRANSPARENT: true,
      FEATURE_COUNT: 50,
      SRS: 'EPSG:4326',
      EXCEPTIONS: 'application/vnd.ogc.se_inimage'
    }
  }

  mapClickListener () {
    window.map.on('click', (e) => {
    this.map.on('click', (e) => {
      // console.log(e)
      this.clearHighlight()
      this.loadWfsDatas(e.latlng)
    })
  }

  loadWfsDatas (latlng) {
    const size = this.map.getSize()
    var point = this.map.latLngToContainerPoint(latlng, this.map.getZoom())
    const wmsLayerService = window.layerFactory.wmsLayerService
    const layers = wmsLayerService.wmsLayerList.getLayers()
    // const filters = wmsLayerService.wmsLayerList.getFilters()
    const params = Object.assign({
      LAYERS: layers,
      QUERY_LAYERS: layers,
      WIDTH: size.x,
      HEIGHT: size.y,
      X: Math.round(point.x),
      Y: Math.round(point.y),
      BBOX: this.map.getBounds().toBBoxString()
    }, this.defaultWmsParams)
    AjaxUtils.get4JsonDataByUrl(WMS_URL, params, (res) => {
      openPopup(latlng, res.data.features)
    })
  }

  clearHighlight () {
    this.hightlightLayer.clearLayers()
  }

  iconPoint (latlng) {
  }
}


 src/components/layer/src/layer.js

@@ -23,10 +23,12 @@
    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.content = Vue.extend(options.content.content)
    options.content.comp = Vue.extend(options.content.comp)
    console.log(options)
    const instance = new LayerVueExtend({
      data: options
    })

 src/components/layer/src/layer.vue

@@ -47,10 +47,8 @@
    },
    init () {
      const propsData = helper.deepClone(this.content.data) || {}
      propsData.layerid = this.id
      propsData.lydata = this.content.data
      propsData.lyoption = this.options
      const instance = new this.content.content({
      console.log(propsData)
      const instance = new this.content.comp({
        // parent: this.content.parent,
        propsData: propsData
      })

 src/conf/Constants.js

@@ -35,9 +35,33 @@
  ICON_SIZE: [10, 10]
}

export const props = {
export const LAYERS = {
  pipenetwork: '管网',
  pipeline: '管线',
  manhole: '窨井',
  valve: '阀门',
  pipegallery: '管廊（带）',
  piperack: '管架（墩）',
  tee: '三通',
  fourlink: '四通',
  elbow: '弯头',
  raingate: '雨篦子',
  firedike: '防火堤',
  collectingbasin: '集水池（罐）',
  dischargeport: '排放口',
  overflowweir: '溢流堰',
  oilseparator: '隔油池',
  pointhydrology: '水体',
  pointpreservationzone: '自然保护区',
  hospital: '医院',
  emergencyres: '社会专业应急救援队伍',
  emergencyesources: '应急物资',
  firefightingunit: '消防单位'
}

export const LAYERPROPS = {
  // 管网
  pipenet: {
  pipenetwork: {
    // 管网
    name: '名称',
    LINENUMTYPE: '管线类型',
@@ -55,122 +79,135 @@
  },
  // 管线
  pipeline: {

    // 管网
    name: '名称',
    linenumtype: '管线类型',
    pipename: '管线名称',
    mediumtype: '输送介质',
    length: '长度(m)',
    startposname: '起点位置名称',
    endposname: '终点位置名称',
    buriedtime: '埋设时间',
    coatingmaterial: '防腐状况',
    inservicetime: '投产时间',
    unitname: '所属单位名称',
    orgname: '所属企业名称',
    operationalstatus: '运行状态'
  },
  // 窨井
  manhole: {
    type: '类型',
    wellmaterial: '井盖材质',
    HAVESAFETYNET: '是否有安全网',
    DATASOURCE: '数据来源',
    OPERATIONALSTATUS: '运行状态'
    havesafetynet: '是否有安全网',
    datasource: '数据来源',
    operationalstatus: '运行状态'
  },
  // 阀门
  valve: {
    VALVETYPE: '阀门类型',
    EXECUTAGENCYF: '执行机构形式',
    DATASOURCE: '数据来源',
    OPERATIONALSTATUS: '运行状态'
    valvetype: '阀门类型',
    executagencyf: '执行机构形式',
    datasource: '数据来源',
    operationalstatus: '运行状态'
  },
  // 管廊（带）
  pipegallery: {
    DATASOURCE: '数据来源',
    OPERATIONALSTATUS: '运行状态'
    datasource: '数据来源',
    operationalstatus: '运行状态'
  },
  // 管架（墩）
  piperack: {
    PIPERACKTYPE: '类型',
    PIPERACKST: '管架(墩）结构类型',
    LONGITUDINALPIPERACK: '是否有纵向架',
    DATASOURCE: '数据来源',
    OPERATIONALSTATUS: '运行状态'
    piperacktype: '类型',
    piperackst: '管架(墩）结构类型',
    longitudinalpiperack: '是否有纵向架',
    datasource: '数据来源',
    operationalstatus: '运行状态'
  },
  // 三通
  tee: {
    TEETYPE: '三通类型',
    EXPORTCONNECTM: '出口连接方式',
    ENTRYCONTYPE: '入口连接方式',
    TEEM: '三通材料',
    BRANCHCONNTYPE: '支管连接类型',
    OPERATIONALSTATUS: '运行状态'
    teetype: '三通类型',
    exportconnectm: '出口连接方式',
    entrycontype: '入口连接方式',
    teem: '三通材料',
    branchconntype: '支管连接类型',
    operationalstatus: '运行状态'
  },
  // 四通
  fourlink: {
    FOURTYPE: '四通类型',
    EXPORTCONTYPE: '出口连接方式',
    ENTRYCONTYPE: '入口连接方式',
    FOURM: '四通材料',
    BRANCHCONNTYPE1: '支线1连接方式',
    BRANCHCONNTYPE2: '支线2连接方式',
    OPERATIONALSTATUS: '运行状态'
    fourtype: '四通类型',
    exportcontype: '出口连接方式',
    entrycontype: '入口连接方式',
    fourm: '四通材料',
    branchconntype1: '支线1连接方式',
    branchconntype2: '支线2连接方式',
    operationalstatus: '运行状态'
  },
  // 弯头
  elbow: {
    ELBOWTYPE: '弯头类型',
    ELBOWMATERIAL: '弯头材料',
    ANTICORROS: '防腐材料',
    ENTRYCONNTYPE: '入口连接方式',
    OUTLETCONNTYPE: '出口连接方式',
    OPERATIONALSTATUS: '运行状态'
    elbowtype: '弯头类型',
    elbowmaterial: '弯头材料',
    anticorros: '防腐材料',
    entryconntype: '入口连接方式',
    outletconntype: '出口连接方式',
    operationalstatus: '运行状态'
  },
  // 雨篦子
  raingate: {
    OPERATIONALSTATUS: '运行状态'
    operationalstatus: '运行状态'
  },
  // 防火堤
  firedike: {
    OPERATIONALSTATUS: '运行状态'
    operationalstatus: '运行状态'
  },
  // 集水池（罐）
  collectingbasin: {
    OPERATIONALSTATUS: '运行状态'
    operationalstatus: '运行状态'
  },
  // 排放口
  dischargeport: {
    MEDIUMTYPE: '介质',
    PFKTYPE: '排放口类型',
    LEVEL: '级别',
    OPERATIONALSTATUS: '运行状态'
    mediumtype: '介质',
    pfktype: '排放口类型',
    level: '级别',
    operationalstatus: '运行状态'
  },
  // 截流闸

  // 溢流堰
  overflowweir: {
    MEDIUMTYPE: '防溢介质',
    OPERATIONALSTATUS: '运行状态'
    mediumtype: '防溢介质',
    operationalstatus: '运行状态'
  },
  // 隔油池
  oilseparator: {
    OPERATIONALSTATUS: '运行状态'
    operationalstatus: '运行状态'
  },
  // 水体
  pointhydrology: {
    HYDROTYPE: '水系类型',
    DRINKINGRESOURCEIND: '是否是饮用水源',
    SEASONALRIVERIND: '是否是季节性河流',
    RESERVOIRLOCATION: '水库位置',
    OPERATIONALSTATUS: '运行状态'
    hydrotype: '水系类型',
    drinkingresourceind: '是否是饮用水源',
    seasonalriverind: '是否是季节性河流',
    reservoirlocation: '水库位置',
    operationalstatus: '运行状态'
  },
  // 自然保护区
  pointpreservationzone: {
    DATASOURCE: '数据来源'
    datasource: '数据来源'
  },
  // 医院
  hospital: {
    HOSPITALLEAVAL: '医院资质等级',
    SUBTYPECD: '医院类型',
    DATASOURCE: '数据来源'
    hospitalleaval: '医院资质等级',
    subtypecd: '医院类型',
    datasource: '数据来源'
  },
  // 社会专业应急救援队伍
  emergencyres: {
    DATASOURCE: '数据来源'
    datasource: '数据来源'
  },
  // 应急物资
  emergencyesources: {
    DATASOURCE: '数据来源'
    datasource: '数据来源'
  },
  // 消防单位
  firefightingunit: {
    DATASOURCE: '数据来源'
    datasource: '数据来源'
  }
}

 src/utils/utils.js

@@ -35,7 +35,7 @@
    color: colors[0],
    fillColor: ''
  })
  var picGroupMarker = window.L.marker(xy, { icon: pulsingIcon }).addTo(window.map)
  var picGroupMarker = window.L.marker(xy, { icon: pulsingIcon }).addTo(window.mapManager.hightlightLayer)
  // 定时
  var timeInterval = setInterval(() => {
    if (times > 0) {

 src/views/MapTemplate.vue

@@ -38,7 +38,6 @@
// // 公共展示数据
// import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced'
import LayerFactory from '@components/LayerController/service/LayerFactory'
import EventHandler from '../components/LayerController/event/EventHandler'
// import ReportPopup from '../components/panel/topicSearch/SewersSelect/EnterpriseEmergency/ReportPopup'
import Emergency from '@components/emergency/index'
import MapManager from '../components/helpers/MapManager'
@@ -103,10 +102,6 @@

      // this.AddGasHelper()
      // this.ChangeWaterState()

      var eventHandler = new EventHandler()
      window.eventHandler = eventHandler

      var layerFactory = new LayerFactory({
        L: window.L,
        map: this.map
@@ -115,6 +110,7 @@
      layerFactory.initEvent(this.$store.state.map.serviceLayers.LayerSewersLine)
      window.layerFactory = layerFactory
      window.mapManager = new MapManager()
      window.mapManager.mapClickListener()
      this.saveMapStatus()
      // this.setMapObj(this.mapObj)
      // this.setBasemapHelper(this.basemapHelper)

 src/views/popup/Popup.vue

@@ -1,15 +1,15 @@
<template>
  <div id="popup" class="s-map-popup-panel" style="min-width: 280px;max-width: 280px;padding: 0 10px">
    <el-tabs value="0" type="card">
    <el-tabs type="card" :value="0">
      <el-tab-pane
              :key="item.name"
              :key="index"
              v-for="(item,index) in datas"
              :label="item.title"
              :name="index"
              :name="index.toString()"
      >
        <el-row v-for="(v,k) in filter(item.content)" :key="k">
          <el-col :span="12"><B>{{k}}：</B></el-col>
          <el-col :span="12">{{v}}</el-col>
        <el-row v-for="(item,key)  in item.content" :key="key">
          <el-col :span="12"><B>{{key}}：</B></el-col>
          <el-col :span="12">{{item}}</el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
@@ -18,7 +18,6 @@

<script>
// import '@/assets/css/map/map-popup.scss'
import { props } from '../../conf/Constants'

export default {
  name: 'Popup',
@@ -28,8 +27,7 @@
      tabsValue: '',
      tabIndex: 2,
      isShow: false,
      properties: {},
      props: props
      properties: {}
    }
  },
  computed: {
@@ -45,11 +43,6 @@
      // console.log(obj)
      return obj
    },
    setDatas (layer) {
      console.log(layer)
      this.datas = layer
      this.tabsValue = layer[0].name
    },
    setShow () {
      // this.style.display='auto'
      this.isShow = true
@@ -61,7 +54,6 @@
  },
  watch: {
    datas (newVal) {
      console.log(newVal)
      if (newVal != null) {
        this.tabsValue = newVal[0].name
      }