/**
|
* 缓冲区查询类
|
*/
|
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
|
