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

seatonwan9

2021-05-30 dc2421508ec5cc18dc5ff2b2df6b39aba59188c8

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

 src/Sgis.js

@@ -14,6 +14,7 @@
import '@/components/plugin/magicMarker.css'
import '@components/plugin/pulse/Pulse' // marker 外圈波
import '@components/plugin/pulse/Pulse.css' // marker 外圈波 css
import '@components/plugin/L.CircleEditor'
import BasemapHelper from './components/helpers/BasemapHelper'
import VectorLayerHelper from './components/helpers/VectorLayerHelper'


 src/assets/css/map/map-panel-style.less

@@ -28,7 +28,8 @@
}

.el-button--mini, .el-button--mini.is-round {
  padding: 0.02rem 0.04rem;
  margin-left: 5px;
  margin-right: 5px;
}

/*隐藏*/
@@ -164,6 +165,11 @@
    background-color: @background-color-light;
    border: solid 1px @color;
  }

   input:hover {
    border: solid 1px @color;
  }

}

.map-tooltip.is-dark {

 src/assets/images/map-pages/buffer/1.png

 src/assets/images/map-pages/buffer/10.png

 src/assets/images/map-pages/buffer/15.png

 src/assets/images/map-pages/buffer/2.png

 src/assets/images/map-pages/buffer/3.png

 src/assets/images/map-pages/buffer/5.png

 src/assets/images/map-pages/buffer/7.png

 src/assets/images/map-pages/buffer/8.png

 src/assets/images/map-pages/buffer/area_query_drag.png

 src/assets/images/map-pages/buffer/img.png

 src/components/base-page/enterprise-emergency/DisposalEvent.vue

@@ -48,7 +48,7 @@
                <el-col class="info-text" :span="18">{{ form.eventDesc }}</el-col>
              </el-row>
              <el-row>
                <el-col class="info-label"  span="6">附件：</el-col>
                <el-col class="info-label"  :span="6">附件：</el-col>
                <el-col class="info-text" :span="18"><a class="link-btn" href="javascript:">附件</a>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <a class="link-btn" href="javascript:">附件</a>
@@ -94,8 +94,12 @@
    </div>
    </el-scrollbar>
    <div class="event-management">
      <el-input></el-input>
      <el-button type="primary" size="mini" @click="ToManagement">开始分析</el-button>
      <el-button type="primary" size="mini" @click="mapClick">地图点选</el-button>
      <el-select v-model="radius.value" placeholder="请选择" size="mini" class="map-input">
        <el-option v-for="(item,index) in radius.options" :key="index" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-button type="primary" size="mini" @click="eventHanding">开始分析</el-button>
      <el-button type="primary" size="mini" @click="toManagement">事件管理</el-button>
      <!--            <el-button size="mini">关闭</el-button>-->
    </div>
  </div>
@@ -105,12 +109,17 @@
<script>

import eventBus from '../../../eventBus'

import BufferQuery from '@components/base-page/enterprise-emergency/event-handling/BufferQuery'
export default {
  name: 'DisposalEvent',
  data () {
    return {
      bufferQuery: null,
      activeNames: ['1'],
      radius: {
        value: 0.1,
        options: [{ label: '500m', value: 0.5 }, { label: '1km', value: 1 }, { label: '2km', value: 2 }, { label: '5km', value: 5 }, { label: '10km', value: 10 }]
      },
      form: {
        nameOfEvent: '***************事件',
        eventLocation: '**********装置',
@@ -170,9 +179,13 @@
      ]
    }
  },
  mounted () {
    this.bufferQuery = new BufferQuery(window.map, window.L)
    this.bufferQuery.initLayers()
  },
  methods: {
    // 开始分析
    ToManagement () {
    eventHanding () {
      eventBus.$emit('event-handling', {})
    },
    handleClickView (item) {
@@ -183,6 +196,23 @@
    },
    handleChange (val) {
      console.log(val)
    },
    mapClick () {
      window.map.once('click', (e) => {
        console.log(e)
        // [-75.343, 39.984];

        // var circle = turf.circle(center, radius, options)
        // eslint-disable-next-line no-unreachable
        this.bufferQuery.radius = this.radius.value
        const lat = 32.26431369781494
        const lng = 118.79283785820007
        // this.bufferQuery.bufferQuery(e.latlng.lng, e.latlng.lat)
        this.bufferQuery.bufferQuery(lng, lat)
      })
    },
    toManagement () {

    }
  }
}

 src/components/base-page/enterprise-emergency/event-handling/BufferQuery.js

New file
@@ -0,0 +1,553 @@
/**
 * 缓冲区查询类
 */
import * as turf from '@turf/turf'
import $ from 'jquery'
// import MapConfig from '@/map/conf/MapConfig'
import zrbhq from '@assets/images/map-pages/buffer/1.png'
import yjdw from '@assets/images/map-pages/buffer/2.png'
import gadw from '@assets/images/map-pages/buffer/3.png'
import yy from '@assets/images/map-pages/buffer/5.png'
import st from '@assets/images/map-pages/buffer/7.png'
import yjzy from '@assets/images/map-pages/buffer/8.png'
import xfdw from '@assets/images/map-pages/buffer/10.png'
import mgmb from '@assets/images/map-pages/buffer/15.png'
const MapConfig = {

}
MapConfig.mapConfig = {}
MapConfig.mapConfig.bufferQueryUrlProd = 'http://10.238.235.179:6240/geoserver/sewer/ows'
class BufferQuery {
  constructor (map, L) {
    this.map = map
    this.L = L
    this.bufferLayer = null
    this.resultLayer = null
    this.resultMarkers = []
    this.queryResults = []
    this.radius = 10
    this.currentRadius = null
    this.bufferResultLayerArr = []
    this.bufferQueryLayerArr = []
    this.vueRef = null
    this.currentX = null
    this.currentY = null
  }

  setVueRef (vueRef) {
    this.vueRef = vueRef
  }

  initLayers () {
    // if (this.bufferLayer != null) {
    this.bufferLayer = this.L.layerGroup().addTo(this.map)
    // }
    // if (this.resultLayer != null) {
    this.resultLayer = this.L.layerGroup().addTo(this.map)
    // }
  }

  drawCricleBuffer (center, radius) {
    const circleLocation = new this.L.LatLng(center[1], center[0])
    const circleOptions = {
      color: '#3effed',
      fillColor: 'white',
      fillOpacity: 0,
      extendedIconClass: 'extend-icon' /* there are 3 classes defined in the marker-extend.css file */
    }
    const circle = new this.L.CircleEditor(circleLocation, radius * 1000, circleOptions)
    return circle
  }

  getCircleCoord (center, radius) {
    const options = { steps: 10, units: 'kilometers' }
    const circle = turf.circle(center, radius, options)
    const coordinate = turf.getCoords(circle)
    return coordinate
  }

  QueryInfoByArcgis (url, dis, geom, extent, layers) {
    const that = this
    const data = {
      f: 'json',
      tolerance: dis,
      returnGeometry: 'true',
      returnFieldName: 'false',
      returnUnformattedValues: 'false',
      imageDisplay: '920,622,96',
      geometry: geom,
      geometryType: 'esriGeometryPolygon',
      sr: '4326',
      mapExtent: extent,
      layers: layers
    }
    this.vueRef.datas = []
    this.vueRef.allDatas = []
    this.vueRef.currentX = this.currentX
    this.vueRef.currentY = this.currentY
    this.vueRef.total = 0
    this.vueRef.total1 = 0
    this.vueRef.countsMap = {}
    this._postQuery(url, data, function (res) {
      console.log(res)
      if (res.results != null && res.results.length !== 0) {
        that.drawGraphic(res.results)
        for (let i = 0; i < res.results.length; i++) {
          const ndata = {
            layerId: res.results[i].layerId,
            layerName: res.results[i].layerName,
            displayFieldName: res.results[i].displayFieldName,
            value: res.results[i].value,
            attributes: res.results[i].attributes,
            geometryType: res.results[i].geometryType,
            geometry: res.results[i].geometry,
            feature: {
              attributes: res.results[i].attributes,
              geometry: res.results[i].geometry
            }
          }
          that.queryResults.push(ndata)
        }
        // fillBufferResult(nrltData,currShowBufferLayerIndex);//填充面板
        that.fillBufferResultPanel(that.queryResults)
      }
    })
  }

  QueryInfoByGeoserver (url, dis, geom, extent, layers) {
    const that = this
    const data = {
      service: 'WFS',
      version: '1.1.0',
      request: 'GetFeature',
      // typeName: 'sewer:manhole',
      typeName: 'sewer:pipeline',
      maxFeatures: 50,
      outputFormat: 'application/json',
      srsname: 'EPSG:4326',
      // filter: '<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">\n' +
      //   '<Intersects><PropertyName>geom</PropertyName><gml:Polygon srsName="EPSG:4326">\n' +
      //   '<gml:outerBoundaryIs>\n' +
      //   '    <gml:LinearRing>\n' +
      // eslint-disable-next-line no-irregular-whitespace
      //   '　<gml:coordinates>' + geom + '</gml:coordinates>\n' +
      //   '</gml:LinearRing>\n' +
      //   '</gml:outerBoundaryIs>\n' +
      //   '</gml:Polygon></Intersects></Filter>\n'

      /* filter: '<Filter xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">\n' +
        '\n' +
        '<Intersects> \n' +
        '\n' +
        '<PropertyName>geom</PropertyName>\n' +
        '\n' +
        '<gml:MultiPolygon srsName="EPSG:4490"> \n' +
        '\n' +
        '<gml:polygonMember> \n' +
        '\n' +
        '<gml:Polygon> \n' +
        '\n' +
        '<gml:outerBoundaryIs> \n' +
        '\n' +
        '<gml:LinearRing>\n' +
        '\n' +
        '<gml:coordinates xmlns:gml="http://www.opengis.net/gml" decimal="." cs="," ts="">\n' +
        '\n' +
        geom +
        '\n' +
        '</gml:coordinates>  \n' +
        '\n' +
        '</gml:LinearRing>  \n' +
        '\n' +
        '</gml:outerBoundaryIs>  \n' +
        '\n' +
        '</gml:Polygon>  \n' +
        '\n' +
        '</gml:polygonMember>  \n' +
        '\n' +
        '</gml:MultiPolygon>\n' +
        '\n' +
        '</Intersects>\n' +
        '\n' +
        '</Filter>' */

      cql_filter: 'INTERSECTS(geom,POLYGON((' + geom + ')))'
    }
    // this.vueRef.datas = []
    // this.vueRef.allDatas = []
    // this.vueRef.currentX = this.currentX
    // this.vueRef.currentY = this.currentY
    // this.vueRef.total = 0
    // this.vueRef.total1 = 0
    // this.vueRef.countsMap = {}
    this._postQuery(url, data, function (res) {
      console.log(res)
      if (res.results != null && res.results.length !== 0) {
        that.drawGraphic(res.results)
        for (let i = 0; i < res.results.length; i++) {
          const ndata = {
            layerId: res.results[i].layerId,
            layerName: res.results[i].layerName,
            displayFieldName: res.results[i].displayFieldName,
            value: res.results[i].value,
            attributes: res.results[i].attributes,
            geometryType: res.results[i].geometryType,
            geometry: res.results[i].geometry,
            feature: {
              attributes: res.results[i].attributes,
              geometry: res.results[i].geometry
            }
          }
          that.queryResults.push(ndata)
        }
        // fillBufferResult(nrltData,currShowBufferLayerIndex);//填充面板
        that.fillBufferResultPanel(that.queryResults)
      }
    })
  }

  fillBufferResultPanel (datas) {
    // let resArray = []
    const that = this
    const layerIds = []
    for (let j = 0; j < this.bufferQueryLayerArr.length; j++) {
      if (this.bufferQueryLayerArr[j].ifSelected) {
        layerIds.push(this.bufferQueryLayerArr[j].layerid)
      }
    }
    const ndatas = []
    for (let i = 0; i < datas.length; i++) {
      if (datas[i].layerId === layerIds[0]) {
        const newObj = {}
        newObj.id = i
        if (Number(datas[i].layerId) === 10) {
          newObj.objid = datas[i].feature.attributes.id
          newObj.name = datas[i].feature.attributes.name
        } else {
          newObj.objid = datas[i].feature.attributes.OBJECTID
          newObj.name = datas[i].value
        }

        newObj.distance = this.countDisByLatLng(datas[i].feature.geometry.x, datas[i].feature.geometry.y, this.currentX, this.currentY)
        newObj.x = datas[i].feature.geometry.x
        newObj.y = datas[i].feature.geometry.y
        switch (datas[i].layerId) {
          case 5:
          case 3:
          case 8:
            newObj.addr = datas[i].feature.attributes['单位地址'] === 'Null' ? '' : datas[i].feature.attributes['单位地址']
            newObj.person = datas[i].feature.attributes['联系人'] === 'Null' ? '' : datas[i].feature.attributes['联系人']
            newObj.tel = datas[i].feature.attributes['联系电话'] === 'Null' ? '' : datas[i].feature.attributes['联系电话']
            break
          case 10:
            newObj.addr = datas[i].feature.attributes.name
            newObj.person = datas[i].feature.attributes.contact
            newObj.tel = datas[i].feature.attributes.officeTel
            break
          case 9:
          case 15:
            newObj.addr = ''
            newObj.person = datas[i].feature.attributes['负责人'] === 'Null' ? '' : datas[i].feature.attributes['负责人']
            newObj.tel = datas[i].feature.attributes['联系电话'] === 'Null' ? '' : datas[i].feature.attributes['联系电话']
            break
          case 7:
            newObj.addr = ''
            newObj.person = ''
            newObj.tel = datas[i].feature.attributes['联系方式'] === 'Null' ? '' : datas[i].feature.attributes['联系方式']
            break
          case 1:
            newObj.addr = ''
            newObj.person = datas[i].feature.attributes['负责人'] === 'Null' ? '' : datas[i].feature.attributes['负责人']
            newObj.tel = datas[i].feature.attributes['联系电话'] === 'Null' ? '' : datas[i].feature.attributes['联系电话']
            break
        }
        ndatas.push(newObj)
      }
    }
    this.vueRef.datas = ndatas
    this.vueRef.allDatas = datas
    this.vueRef.currentX = this.currentX
    this.vueRef.currentY = this.currentY
    this.vueRef.total = datas.length
    this.vueRef.total1 = ndatas.length
    const Map = {}
    for (let k = 0; k < layerIds.length; k++) {
      const id = layerIds[k]
      Map[id] = that.getCountByLayerID(datas, layerIds[k])
    }
    this.vueRef.countsMap = Map
  }

  /**
     *根据两点经纬度计算距离
     * @param lng1
     * @param lat1
     * @param lng2
     * @param lat2
     */
  countDisByLatLng (lng1, lat1, lng2, lat2) {
    const a = this.Rad(lat1) - this.Rad(lat2)
    const b = this.Rad(lng1) - this.Rad(lng2)
    let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
            Math.cos(this.Rad(lat1)) * Math.cos(this.Rad(lat2)) * Math.pow(Math.sin(b / 2), 2)))
    s = s * 6378137.0
    s = Math.round(s * 10000) / 10000000
    return s.toFixed(3)
  }

  Rad (d) {
    return d * Math.PI / 180.0
  }

  /**
     * 根据图层id 获取 各个图层查询结果的数量
     * @param arrs
     * @param id
     */
  getCountByLayerID (arrs, id) {
    let count = 0
    for (let i = 0; i < arrs.length; i++) {
      if (arrs[i].layerId === id) {
        count++
      }
    }
    return count
  }

  _postQuery (url, data, cb) {
    $.ajax({
      type: 'GET',
      url: url,
      dataType: 'json',
      data: data,
      timeout: 600000,
      async: true,
      success: function (datas) {
        cb(datas)
      },
      error: function (e) {
        console.log('返回的错误信息：', e)
        return null
      }
    })
  }

  drawGraphic (data) {
    for (let i = 0; i < data.length; i++) {
      const pt = [data[i].geometry.y, data[i].geometry.x]
      const iconUrl = this.getIconUrl(data[i].layerId)
      const icon = new this.L.Icon({ iconUrl: iconUrl, iconSize: [20, 20], iconAnchor: [10, 10] })
      const marker = this.L.marker(pt, {
        icon: icon,
        attributes: data[i]
      })
      this.markerBindPopup(marker)
      this.resultMarkers.push(marker)
      this.resultLayer.addLayer(marker)
    }
  }

  markerBindPopup (maker) {
    const name = maker.options.attributes.value
    const layerId = maker.options.attributes.layerId
    let addr = ''
    let person = ''
    let tel = ''
    const distance = this.countDisByLatLng(maker.options.attributes.geometry.x, maker.options.attributes.geometry.y, this.currentX, this.currentY)
    switch (layerId) {
      case 5:
      case 3:
      case 8:
        addr = maker.options.attributes.attributes['单位地址'] === 'Null' ? '' : maker.options.attributes.attributes['单位地址']
        person = maker.options.attributes.attributes['联系人'] === 'Null' ? '' : maker.options.attributes.attributes['联系人']
        tel = maker.options.attributes.attributes['联系电话'] === 'Null' ? '' : maker.options.attributes.attributes['联系电话']
        break
      case 10:
        addr = maker.options.attributes.attributes.name
        person = maker.options.attributes.attributes.contact
        tel = maker.options.attributes.attributes.officeTel
        break
      case 9:
      case 15:
        addr = ''
        person = maker.options.attributes.attributes['负责人'] === 'Null' ? '' : maker.options.attributes.attributes['负责人']
        tel = maker.options.attributes.attributes['联系电话'] === 'Null' ? '' : maker.options.attributes.attributes['联系电话']
        break
      case 7:
        addr = ''
        person = ''
        tel = maker.options.attributes.attributes['联系方式'] === 'Null' ? '' : maker.options.attributes.attributes['联系方式']
        break
      case 1:
        addr = ''
        person = maker.options.attributes.attributes['负责人'] === 'Null' ? '' : maker.options.attributes.attributes['负责人']
        tel = maker.options.attributes.attributes['联系电话'] === 'Null' ? '' : maker.options.attributes.attributes['联系电话']
        break
    }

    const html = '<div style="width: 306px; height: 156px" class="aroundPanel">' +
                   '<div class="header">周边环境</div>' +
                   '<table width="100%"   border="0" align="center" cellpadding="0" cellspacing="0"  class="editform edit-pf bg1 pd1" style="color: #deebf9;line-height: 26px;">\n' +
            '      <tr>\n' +
            '        <td width="10%" align="right" valign="top" class="zt05">名称：</td>\n' +
            '        <td width="19%" align="left" valign="top" class="zt05" id="name">' + name + '</td>\n' +
            '      </tr>\n' +
            '      <tr>\n' +
            '        <td align="right" valign="top" class="zt05">地址：</td>\n' +
            '        <td align="left" valign="top" class="zt05" id="addr">' + addr + '</td>\n' +
            '      </tr>\n' +
            '      <tr>\n' +
            '        <td align="right" valign="top" class="zt05">负责人：</td>\n' +
            '        <td align="left" valign="top" class="zt05" id="person">' + person + '</td>\n' +
            '      </tr>\n' +
            '      <tr>\n' +
            '        <td align="right" valign="top" class="zt05">联系电话：</td>\n' +
            '        <td align="left" valign="top" class="zt05" id="tel">' + tel + '</td>\n' +
            '    </tr>\n' +
            '      <tr>\n' +
            '        <td align="right" valign="top" class="zt05 line-dotted">距离（公里）：</td>\n' +
            '        <td align="left" valign="top" class="zt05 line-dotted" id="distance">' + distance + '</td>\n' +
            '      </tr>\n' +
            '    </table>' +
                   '</div>'
    maker.bindPopup(html, {
      closeButton: false,
      offset: this.L.point(0, -0.5)
    })
  }

  getIconUrl (index) {
    let url = null
    switch (index) {
      case 1:
        url = zrbhq
        break
      case 2:
        url = yjdw
        break
      case 3:
        url = gadw
        break
      case 5:
        url = yy
        break
      case 7:
        url = st
        break
      case 8:
        url = yjzy
        break
      case 10:
        url = xfdw
        break
      case 15:
        url = mgmb
        break
    }
    return url
  }

  bufferQuery (currEventX, currEventY) {
    this.currentX = currEventX
    this.currentY = currEventY
    const that = this
    if (this.bufferLayer) {
      this.bufferLayer.clearLayers()
    }
    this.map.setView(this.L.latLng(currEventY, currEventX), 11)
    const circle = this.drawCricleBuffer([currEventX, currEventY], this.radius)
    this.bufferLayer.addLayer(circle)
    circle.on('edit', function () {
      that.doBuffer(circle.getRadius() / 1000, that.bufferQueryLayerArr, that.currentX, that.currentY)
      that.currentRadius = circle.getRadius() / 1000
    })
    this.doBuffer(this.radius, this.bufferQueryLayerArr, currEventX, currEventY)
  }

  doBuffer (radius, bufferQueryLayerArr, currEventX, currEventY) {
    this.bufferResultLayerArr = this.getBufferLayerArr(bufferQueryLayerArr)
    this.bufferSearch(this.bufferResultLayerArr, radius, currEventX, currEventY)
  }

  getBufferLayerArr (arr) {
    var resultArr = []
    for (let i = 0; i < arr.length; i++) {
      const obj = arr[i]
      if (obj.ifSelected === 1) {
        resultArr.push(obj.layerid)
      }
    }
    return resultArr
  }

  bufferSearch (layerIDs, radius, currEventX, currEventY) {
    const that = this
    that.resultMarker = []
    that.queryResults = []
    if (that.resultLayer) {
      that.resultLayer.clearLayers()
    }
    // if (layerIDs == null || layerIDs.length === 0) {
    //   return null
    // }
    const xfIndex = layerIDs.indexOf(10)
    if (xfIndex > -1) {
    }
    let queryLayerStr = 'all:'
    for (let j = 0; j < layerIDs.length; j++) {
      if (layerIDs[j] !== 10) {
        queryLayerStr += layerIDs[j] + ','
      }
    }
    queryLayerStr = queryLayerStr.substring(0, queryLayerStr.length - 1)
    const coord = that.getCircleCoord([currEventX, currEventY], radius)
    const str = that.sgisTransfromToArcGeom(coord)
    debugger
    const bounds = this.map.getBounds()
    const extent = bounds.toBBoxString()
    debugger
    if (window.vm.$nodeEnv === 'production') {
      that.QueryInfoByGeoserver(MapConfig.mapConfig.bufferQueryUrlProd, radius, str, extent, queryLayerStr)
      // that.QueryInfoByArcgis(MapConfig.mapConfig.bufferQueryUrlProd, radius, str, extent, queryLayerStr)
    } else {
      that.QueryInfoByGeoserver(MapConfig.mapConfig.bufferQueryUrlProd, radius, str, extent, queryLayerStr)
      // that.QueryInfoByArcgis(MapConfig.mapConfig.bufferQueryUrlProd, radius, str, extent, queryLayerStr)
    }
  }

  sgisTransfromToArcGeom (coord) {
    const geomStr = ''
    let str = ''
    for (let i = 0; i < coord[0].length; i++) {
      str += coord[0][i][0] + ' ' + coord[0][i][1] + ','
    }
    str = str.substring(0, str.length - 1)
    const endStr = geomStr + str
    return endStr
  }

  /* sgisTransfromToArcGeom (coord) {
    const geomStr = '{"rings":[['
    let str = ''
    for (let i = 0; i < coord[0].length; i++) {
      str += '[' + coord[0][i][0] + ',' + coord[0][i][1] + '],'
    }
    str = str.substring(0, str.length - 1)
    const endStr = geomStr + str + ']]}'
    return endStr
  } */
  setBufferQueryLayerArr (bufferQueryLayerArr) {
    this.bufferQueryLayerArr = bufferQueryLayerArr
  }

  cleanLayer () {
    if (this.bufferLayer) {
      this.bufferLayer.clearLayers()
    }
    if (this.resultLayer) {
      this.resultLayer.clearLayers()
    }
    this.map.closePopup()
  }
}
export default BufferQuery

 src/components/base-page/enterprise-emergency/event-handling/EventHandling.vue

@@ -15,7 +15,7 @@
      <el-button type="primary" size="mini" @click="toggleShowCalc">事故水计算</el-button>
      <el-button type="primary" size="mini" @click="toggleShowResInfo">周边资源</el-button>
      <el-button type="primary" size="mini" @click="toggleShowReportDoc">生成报告</el-button>
      <el-button type="primary" size="mini" @click="close">返回</el-button>
<!--      <el-button type="primary" size="mini" @click="close">返回</el-button>-->
    </div>

    <effective-volume-calc ref="effectVolCalc"></effective-volume-calc>
@@ -75,6 +75,10 @@
}
</script>

<style scoped>
<style lang="less" scoped>
.footer{
  text-align: right;
  margin: 15px;
}

</style>

 src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue

@@ -64,7 +64,8 @@
        longPos: '',
        latPos: ''
      },
      marker: null
      marker: window.L.layerGroup().addTo(window.map),
      layersGroupArrList: []
    }
  },
  methods: {
@@ -85,6 +86,7 @@
          })
        })
        window.map.addLayer(this.marker)
        this.layersGroupArrList.push(this.marker)
        window.map.off('click')
      })
    },
@@ -99,19 +101,23 @@
        this.marker = window.L.marker(as, {
          icon: window.L.icon({
            iconUrl: iconUrl,
            iconSize: [30, 40],
            iconAnchor: [15, 20]
            iconSize: [26, 40],
            iconAnchor: [13, 20]
          })
        })
        window.map.addLayer(this.marker)
        this.layersGroupArrList.push(this.marker)
      } else {
        this.$message('请输入识取经纬度')
      }
    },
    // 点击确认按钮事件
    confirm () {
      for (let i = 0; i < this.layersGroupArrList.length; i++) {
        window.map.removeLayer(this.layersGroupArrList[i])
      }
      window.mapManager.clearHighlight()
      window.map.removeLayer(this.marker)
      // window.map.removeLayer(this.marker)
      eventBus.$emit('location-setChange', true)
      this.lonlatpos.longPos = ''
      this.lonlatpos.latPos = ''

 src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue

@@ -1,53 +1,76 @@
<template>
    <div class="click-location">
        <el-row>
            <el-input type="text" v-model="clickLocation" @change="focusLocation">
                <el-button slot="suffix" type="text" @click="focusLocation">
                    <img src="../../../../../public/assets/images/map/emergency/search.png" alt="">
                </el-button>
            </el-input>
        </el-row>
        <!--        <el-scrollbar style="height:250.34px">-->
        <el-row v-for="(item,index) in searchList.slice((currentPage-1)*pageSize,currentPage*pageSize)" :key="index"
                style="display: flex;align-items: center;margin: 0.1343rem 15px;text-align: left"
                class="environmental-risk-list">
            <el-col :span="4">
                <img src="../../../../../public/assets/images/map/marker-icon.png" alt="" class="state"
                     style="background: none;margin: 0 15px">
            </el-col>
            <el-col :span="12">
                <div class=search-list>
                    <!--                        <h4 :class="activeNum===index?'hover':''" @click="handleLocation(index)">名称：<h3 style="display: inline-block">{{ item.name }}</h3></h4>-->
                    <h3 :class="activeNum===index?'hover':''" @click="handleLocation(index)">名称：{{ item.name }}</h3>
                    <p style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden">地址：<span>{{ item.address }}</span>
                    <p>电话：<span>{{ item.phone }}</span></p>
                </div>
            </el-col>
            <el-col :span="8" style="text-align: right">
                <el-button type="primary" size="mini" icon="el-icon-position" @click="locationMapClick(item,index)">
                    定位
                </el-button>
            </el-col>
        </el-row>
        <!--        </el-scrollbar>-->
        <!--        <el-card class="footer-page" >-->
        <div v-if="total > 10">
            <el-pagination
                    small
                    @current-change="handlePage"
                    :page-size=pageSize
                    :current-page.sync="currentPage"
                    layout="prev, pager, next"
                    :total=total
                    class="warnPagination"
            >
            </el-pagination>
  <div class="click-location">
    <el-row>
      <!--      clearable-->
      <el-input type="text" v-model="clickLocation" @change="focusLocation">
        <el-button slot="suffix" type="text" @click="focusLocation">
          <img src="../../../../../public/assets/images/map/emergency/search.png" alt="">
        </el-button>
      </el-input>
    </el-row>
    <!--        <el-scrollbar style="height:250.34px">-->
    <el-row v-for="(item,index) in searchList.slice((currentPage-1)*pageSize,currentPage*pageSize)" :key="index"
            style="display: flex;align-items: center;margin: 0.1343rem 15px;text-align: left"
            class="environmental-risk-list">
<!--      <div v-if="item.resultType === 1">-->
        <el-col :span="4">
          <img src="../../../../../public/assets/images/map/marker-icon.png" alt="" class="state"
               style="background: none;margin: 0 15px">
        </el-col>
        <el-col :span="12">
          <div class=search-list>
            <!--                        <h4 :class="activeNum===index?'hover':''" @click="handleLocation(index)">名称：<h3 style="display: inline-block">{{ item.name }}</h3></h4>-->
            <h3 style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden" :class="activeNum===index?'hover':''" @click="handleLocation(index)">名称：{{ item.name }}</h3>
            <p style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden">地址：<span>{{ item.address }}</span>
            <p style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden">电话：<span>{{ item.phone }}</span></p>
          </div>
        </el-col>
        <el-col :span="8" style="text-align: right">
          <el-button type="primary" size="mini" icon="el-icon-position" @click="locationMapClick(item,index)">
            定位
          </el-button>
        </el-col>
<!--      </div>-->
    </el-row>
    <el-row v-for="(item,index) in searchListStatistics.slice((currentPage-1)*pageSize,currentPage*pageSize)" :key="index"
            style="display: flex;align-items: center;margin: 0.1343rem 15px;text-align: left"
            class="environmental-risk-list">
      <!--      <div v-if="item.resultType === 1">-->
      <el-col :span="4">
        <img src="../../../../../public/assets/images/map/marker-icon.png" alt="" class="state"
             style="background: none;margin: 0 15px">
      </el-col>
      <el-col :span="12">
        <div class=search-list>
          <!--                        <h4 :class="activeNum===index?'hover':''" @click="handleLocation(index)">名称：<h3 style="display: inline-block">{{ item.name }}</h3></h4>-->
          <h3 :class="activeNum===index?'hover':''" @click="handleLocation(index)" >名称：{{ item.name }}</h3>
          <p style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden">地址：<span>{{ item.address }}</span>
          <p>电话：<span>{{ item.phone }}</span></p>
        </div>
        <!--        </el-card>-->
        <el-row style="text-align: right">
            <el-button type="primary" size="small" @click="confirm">确认</el-button>
        </el-row>
      </el-col>
      <el-col :span="8" style="text-align: right">
        <el-button type="primary" size="mini" icon="el-icon-position" @click="locationMapClick(item,index)">
          定位
        </el-button>
      </el-col>
      <!--      </div>-->
    </el-row>
    <div v-if="total > 5">
      <el-pagination
          small
          @current-change="handlePage"
          :page-size=pageSize
          :current-page.sync="currentPage"
          layout="prev, pager, next"
          :total=total
          class="warnPagination"
      >
      </el-pagination>
    </div>
    <el-row style="text-align: right">
      <el-button type="primary" size="small" @click="confirm">确认</el-button>
    </el-row>
  </div>
</template>

<script>
@@ -62,15 +85,21 @@
  data () {
    return {
      activeNum: -1,
      // 点击定位绑定数据
      clickLocation: '',
      searchList: [],
      marker: null,
      // 分页
      total: 0,
      // 分页 默认展示
      currentPage: 1,
      // 分页 每页多少数据
      pageSize: 3
      pageSize: 3,
      // 定位点展示
      marker: window.L.layerGroup().addTo(window.map),
      layersGroupArrList: [],
      // 点击定位绑定数据
      clickLocation: '',
      // 搜索数据展示列表 1
      searchList: [],
      // 搜索数据展示列表 2
      searchListStatistics: []
    }
  },
  methods: {
@@ -83,14 +112,19 @@
    },
    // 搜索定位
    focusLocation () {
      const getBoundsData = '' + window.map.getBounds()._southWest.lng + ',' + window.map.getBounds()._southWest.lat + ',' + window.map.getBounds()._northEast.lng + ',' + window.map.getBounds()._northEast.lat
      // 每次进行搜索 都对之前数组列表进行置空
      this.searchList = []
      this.total = ''
      this.searchListStatistics = []
      // 搜索数据data参数
      const getBoundsData = '' + window.map.getBounds().getSouthWest().lng + ',' + window.map.getBounds().getSouthWest().lat + ',' + window.map.getBounds().getNorthEast().lng + ',' + window.map.getBounds().getNorthEast().lat
      const data = {
        postStr: {
          keyWord: this.clickLocation,
          level: window.map.getZoom(),
          mapBound: getBoundsData,
          queryType: 7,
          count: 14,
          count: 50,
          start: 0,
          queryTerminal: 10000
        },
@@ -99,28 +133,27 @@
      // $http.get('http://10.246.133.164//api/search?', data)
      reportLocationSearch(data).then(res => {
        console.log(res)
        this.searchList = res.pois
        this.total = res.pois.length
        // 返回数据类型 1（普通POI）
        if (res.resultType === 1) {
          this.searchList = res.pois
          this.total = res.pois.length
        } else if (res.resultType === 2) {
          // 返回数据类型 2（统计
          this.searchListStatistics = res.statistics.priorityCitys
          this.total = res.statistics.priorityCitys.length
        }
      })
    },
    // 点击定位
    locationMapClick (val, index) {
      this.activeNum = index
      // console.log(val)
      const ps = val.lonlat.trim().split(' ')
      // const htmls = '<div><ul><li>' + val.name + '</li></ul></div>'
      // var myIcon = window.L.divIcon({
      //   html: htmls,
      //   className: 'company-bindTooltip',
      //   iconSize: 16
      // })
      this.marker = window.L.marker([ps[1], ps[0]], {
        icon: window.L.icon({
          iconUrl: iconUrl,
          iconSize: [25, 40],
          iconAnchor: [15, 15]
          iconSize: [26, 40],
          iconAnchor: [13, 20]
        })
        // icon: myIcon
      })
        .bindTooltip(val.name, {
          permanent: 'true',
@@ -130,15 +163,19 @@
          className: ''
        })
      window.map.addLayer(this.marker)
      this.layersGroupArrList.push(this.marker)
      window.map.setView([ps[1], ps[0]], 17)
      pulseEffect([ps[1], ps[0]])
    },
    // 点击确认按钮事件
    confirm () {
      window.mapManager.clearHighlight()
      window.map.removeLayer(this.marker)
      for (let i = 0; i < this.layersGroupArrList.length; i++) {
        window.map.removeLayer(this.layersGroupArrList[i])
      }
      this.searchList = []
      this.clickLocation = ''
      this.total = 0
      eventBus.$emit('location-setChange', true)
    }
  }
@@ -146,91 +183,91 @@
</script>

<style lang="less" scoped>
    /*/deep/ .el-row {*/
    /*    margin: 2px 0 !important;*/
    /*    padding: 0;*/
    /*    height: 10px;*/
    /*    max-height: 10px;*/
    /*}*/
    .environmental-risk-list {
        color: @color;
        border-bottom: 1px solid rgba(0, 255, 246, 0.14);
/*/deep/ .el-row {*/
/*    margin: 2px 0 !important;*/
/*    padding: 0;*/
/*    height: 10px;*/
/*    max-height: 10px;*/
/*}*/
.environmental-risk-list {
  color: @color;
  border-bottom: 1px solid rgba(0, 255, 246, 0.14);

        h3 {
            font-size: 0.1rem;
        }
    }
  h3 {
    font-size: 0.1rem;
  }
}

    /*<!--.environmental-risk-list:hover {-->*/
    /*<!--    color: @color-highlight;-->*/
    /*<!--    background: @background-color;-->*/
    /*<!--}-->*/
    .search-list {
        h3:hover {
            color: @color-highlight;
        }
    }
/*<!--.environmental-risk-list:hover {-->*/
/*<!--    color: @color-highlight;-->*/
/*<!--    background: @background-color;-->*/
/*<!--}-->*/
.search-list {
  h3:hover {
    color: @color-highlight;
  }
}

    .hover {
        color: @color-highlight;
    }
.hover {
  color: @color-highlight;
}

    .click-location {
        margin: 0 auto;
        text-align: center;
.click-location {
  margin: 0 auto;
  text-align: center;

        .el-input {
            width: 80%;
            margin: 15px auto;
        }
    }
  .el-input {
    width: 80%;
    margin: 15px auto;
  }
}

    /deep/
    .warnPagination {
        .btn-quicknext, .btn-quickprev {
            color: #e4e8f1 !important;
            background-color: transparent;
            // border: 1px solid #25AECD;
            border-left: 1px solid #25AECD;
            border-bottom: 1px solid #25AECD;
            border-top: 1px solid #25AECD;
            color: #e4e8f1;
        }
/deep/
.warnPagination {
  .btn-quicknext, .btn-quickprev {
    color: #e4e8f1 !important;
    background-color: transparent;
    // border: 1px solid #25AECD;
    border-left: 1px solid #25AECD;
    border-bottom: 1px solid #25AECD;
    border-top: 1px solid #25AECD;
    color: #e4e8f1;
  }

        .el-pager li {
            color: #e4e8f1;
            background: transparent;
            // border: 1px solid #25AECD;
            border-left: 1px solid #25AECD;
            border-bottom: 1px solid #25AECD;
            border-top: 1px solid #25AECD;
        }
  .el-pager li {
    color: #e4e8f1;
    background: transparent;
    // border: 1px solid #25AECD;
    border-left: 1px solid #25AECD;
    border-bottom: 1px solid #25AECD;
    border-top: 1px solid #25AECD;
  }

        .el-pager li.active {
            border-color: #25AECD;
            background-color: rgba(38, 222, 253, 0.3);
            color: #e4e8f1;
        }
  .el-pager li.active {
    border-color: #25AECD;
    background-color: rgba(38, 222, 253, 0.3);
    color: #e4e8f1;
  }

        .el-pager li:hover {
            border-color: #25AECD;
            background-color: rgba(38, 222, 253, 0.3);
            color: #34e0ff;
        }
  .el-pager li:hover {
    border-color: #25AECD;
    background-color: rgba(38, 222, 253, 0.3);
    color: #34e0ff;
  }

        .btn-prev {
            background-color: transparent;
            // border: 1px solid #25AECD;
            border-left: 1px solid #25AECD;
            border-bottom: 1px solid #25AECD;
            border-top: 1px solid #25AECD;
            color: #e4e8f1;
        }
  .btn-prev {
    background-color: transparent;
    // border: 1px solid #25AECD;
    border-left: 1px solid #25AECD;
    border-bottom: 1px solid #25AECD;
    border-top: 1px solid #25AECD;
    color: #e4e8f1;
  }

        .btn-next {
            background-color: transparent;
            border: 1px solid #25AECD;
            color: #e4e8f1;
        }
    }
  .btn-next {
    background-color: transparent;
    border: 1px solid #25AECD;
    color: #e4e8f1;
  }
}
</style>

 src/components/plugin/L.CircleEditor.js

New file
@@ -0,0 +1,216 @@
/*
 * L.CircleEditor is an extension of L.Circle, just to add the edition part (remember, radius in meters).
 */
'use strict'
/* eslint-disable */
import dragPng  from '../../assets/images/map-pages/buffer/area_query_drag.png'
// const init = (L) => {
    L.CircleEditor = L.Circle.extend ({

        options: {
            icon: new L.Icon({
                iconUrl: dragPng,
                iconSize: [30,30],
                //className: 'leaflet-div-icon leaflet-editing-icon'
            }),
            extendedIconClass : 'extend-icon'
        },

        onAdd: function (map) {
            L.Path.prototype.onAdd.call(this, map);

            this.addHooks();
        },

        onRemove: function (map) {
            this.removeHooks();

            L.Path.prototype.onRemove.call(this, map);
        },


        addHooks: function () {
            if (this._map) {
                if (!this._markerGroup) {
                    this._initMarkers();
                }
                this._map.addLayer(this._markerGroup);
            }
        },

        removeHooks: function () {
            if (this._map) {
                this._map.removeLayer(this._markerGroup);
                delete this._markerGroup;
                delete this._markers;
            }
        },

        updateMarkers: function () {
            this._markerGroup.clearLayers();
            this._initMarkers();
        },

        _initMarkers: function () {
            this._markerGroup = new L.LayerGroup();
            this._markers = [];

            var markerCenter = this._createMarker(this._latlng, 0, true);
            this._markers.push(markerCenter);

            var circleBounds = this.getBounds(),
                center = circleBounds.getCenter(),
                neCoord = circleBounds.getNorthEast(),
                northCenterCoord = new L.LatLng(center.lat, neCoord.lng, true);
            var markerNorthCenter = this._createMarker(northCenterCoord, 1);
            this._markers.push(markerNorthCenter);

            //xinzeng label
            var newNeCoord =  Number(neCoord.lng.toFixed(6))+Number(0.006030);
            var labelCenterCood = new L.LatLng(center.lat,newNeCoord, true);
            var markerLabel = this._createLableMaker(labelCenterCood,2,this.getRadius())
            this._markers.push(markerLabel);
        },

        _createLableMaker:function(latlng,index,radius){
            var html = parseInt(radius/1000) + "Km";
            var icon = new L.DivIcon({
                html:html,
                iconSize: new L.Point(30, 15),
                className: 'customLabel'
            });
            var marker = new L.Marker(latlng, {
                // draggable: true,
                icon: icon
            });
            marker._origLatLng = latlng;
            marker._index = index;
            // marker._isCenter = isCenter;
            this._markerGroup.addLayer(marker);
            return marker;
        },

        _createMarker: function (latlng, index, isCenter) {
            if(isCenter){
                var marker = new L.Marker(latlng, {
                    draggable: true,
                    icon: this.options.icon,
                    opacity    :0
                });
            }else{
                var marker = new L.Marker(latlng, {
                    draggable: true,
                    icon: this.options.icon
                });
            }


            if (isCenter === undefined) {
                isCenter = false;
            }
            //console.log("this is center point: " + isCenter);

            marker._origLatLng = latlng;
            marker._index = index;
            marker._isCenter = isCenter;

            if (isCenter) {
                //marker.on('drag', this._onCenterMove, this)
                //     .on('dragend', this._onCenterMoveEnd, this);
            } else {
                marker.on('drag', this._onMarkerDrag, this);
                marker.on('dragend', this._fireEdit, this)
                    .on('mouseover', this._onMouseOver, this)
                    .on('mouseout', this._onMouseOut, this);
            }


            this._markerGroup.addLayer(marker);

            return marker;
        },
        _onMouseOver: function (e) {
            var target = e.target,
                icon = target._icon,
                classValues = icon.getAttribute("class");
            //icon.setAttribute("class", "extend-icon " + classValues);
            icon.setAttribute("class", this.options.extendedIconClass + " " + classValues);
        },
        _onMouseOut: function (e) {
            var target = e.target,
                icon = target._icon,
                classValues = icon.getAttribute("class");
            //icon.setAttribute("class", classValues.replace("extend-icon", ""));
            icon.setAttribute("class", classValues.replace(this.options.extendedIconClass, ""));
        },

        _fireEdit: function () {
            this.fire('edit');
        },

        _onCenterMove: function (e) {
            var marker = e.target;
            //console.log("center move - START");

            L.Util.extend(marker._origLatLng, marker._latlng);

            var mm = this._markers[1];
            mm.setOpacity(0.1);

            this.redraw();

            //console.log("END");
        },

        _onCenterMoveEnd: function (e) {
            var marker = e.target;

            //now resetting the side point
            var circleBounds = this.getBounds(),
                center = circleBounds.getCenter(),
                neCoord = circleBounds.getNorthEast(),
                northCenterCoord = new L.LatLng(center.lat, neCoord.lng, true);

            var mm = this._markers[1];
            mm.setLatLng(northCenterCoord);
            mm.setOpacity(1);

            this.fire('centerchange');
        },

        _onMarkerDrag: function (e) {
            var marker = e.target;
            //console.log("marker drag - START");
            var center = this._markers[0].getLatLng();
            var axis = marker._latlng;

            var distance = center.distanceTo(axis);

            this.setRadius(distance);

            this.redraw();
            //console.log("END");

            this.fire('radiuschange');


            this._markerGroup.removeLayer(this._markers[2]);
            this._markers.pop();

            var circleBounds = this.getBounds(),
                center = circleBounds.getCenter(),
                neCoord = circleBounds.getNorthEast();
            var newNeCoord =  Number(neCoord.lng.toFixed(6))+Number(0.011010);
            var labelCenterCood1 = new L.LatLng(center.lat,newNeCoord, true);
            var markerLabel1 = this._createLableMaker(labelCenterCood1,2,this.getRadius())
            this._markers.push(markerLabel1);
        },

        centerchange: function() {},
        radiuschange: function() {}
    });
// }
//
// export default {
//     init
// }

 src/utils/utils.js

@@ -27,7 +27,7 @@
 * 脉冲效果
 */
export function pulseEffect (xy) {
  let times = 5
  let times = 1000
  const colors = ['#00f100', '#ff0000']
  // 插件 效果实现
  var pulsingIcon = window.L.icon.pulse({