From 0110b78419d98e114c59fa9fb6f69663fbdc3c98 Mon Sep 17 00:00:00 2001
From: 陈泽平 <chenzeping>
Date: 星期日, 30 五月 2021 19:37:35 +0800
Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop
---
src/assets/images/map-pages/buffer/8.png | 0
src/assets/images/map-pages/buffer/3.png | 0
src/assets/css/map/map-panel-style.less | 8
src/components/base-page/enterprise-emergency/event-handling/EventHandling.vue | 8
src/components/plugin/L.CircleEditor.js | 216 +++++++++++++++
src/Sgis.js | 1
src/components/base-page/enterprise-emergency/DisposalEvent.vue | 40 ++
src/assets/images/map-pages/buffer/img.png | 0
src/assets/images/map-pages/buffer/2.png | 0
src/assets/images/map-pages/buffer/15.png | 0
src/assets/images/map-pages/buffer/area_query_drag.png | 0
src/assets/images/map-pages/buffer/1.png | 0
src/assets/images/map-pages/buffer/7.png | 0
src/assets/images/map-pages/buffer/10.png | 0
src/assets/images/map-pages/buffer/5.png | 0
src/components/base-page/enterprise-emergency/event-handling/BufferQuery.js | 553 +++++++++++++++++++++++++++++++++++++++
16 files changed, 818 insertions(+), 8 deletions(-)
diff --git a/src/Sgis.js b/src/Sgis.js
index 6e9dd2b..16feefe 100644
--- a/src/Sgis.js
+++ b/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'
diff --git a/src/assets/css/map/map-panel-style.less b/src/assets/css/map/map-panel-style.less
index 1ec2a41..f4ac982 100644
--- a/src/assets/css/map/map-panel-style.less
+++ b/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 {
diff --git a/src/assets/images/map-pages/buffer/1.png b/src/assets/images/map-pages/buffer/1.png
new file mode 100644
index 0000000..1c045b3
--- /dev/null
+++ b/src/assets/images/map-pages/buffer/1.png
Binary files differ
diff --git a/src/assets/images/map-pages/buffer/10.png b/src/assets/images/map-pages/buffer/10.png
new file mode 100644
index 0000000..85241da
--- /dev/null
+++ b/src/assets/images/map-pages/buffer/10.png
Binary files differ
diff --git a/src/assets/images/map-pages/buffer/15.png b/src/assets/images/map-pages/buffer/15.png
new file mode 100644
index 0000000..1793d5a
--- /dev/null
+++ b/src/assets/images/map-pages/buffer/15.png
Binary files differ
diff --git a/src/assets/images/map-pages/buffer/2.png b/src/assets/images/map-pages/buffer/2.png
new file mode 100644
index 0000000..9f87b74
--- /dev/null
+++ b/src/assets/images/map-pages/buffer/2.png
Binary files differ
diff --git a/src/assets/images/map-pages/buffer/3.png b/src/assets/images/map-pages/buffer/3.png
new file mode 100644
index 0000000..d473da8
--- /dev/null
+++ b/src/assets/images/map-pages/buffer/3.png
Binary files differ
diff --git a/src/assets/images/map-pages/buffer/5.png b/src/assets/images/map-pages/buffer/5.png
new file mode 100644
index 0000000..9f0cb2c
--- /dev/null
+++ b/src/assets/images/map-pages/buffer/5.png
Binary files differ
diff --git a/src/assets/images/map-pages/buffer/7.png b/src/assets/images/map-pages/buffer/7.png
new file mode 100644
index 0000000..20ef506
--- /dev/null
+++ b/src/assets/images/map-pages/buffer/7.png
Binary files differ
diff --git a/src/assets/images/map-pages/buffer/8.png b/src/assets/images/map-pages/buffer/8.png
new file mode 100644
index 0000000..38bb71c
--- /dev/null
+++ b/src/assets/images/map-pages/buffer/8.png
Binary files differ
diff --git a/src/assets/images/map-pages/buffer/area_query_drag.png b/src/assets/images/map-pages/buffer/area_query_drag.png
new file mode 100644
index 0000000..eebc54d
--- /dev/null
+++ b/src/assets/images/map-pages/buffer/area_query_drag.png
Binary files differ
diff --git a/src/assets/images/map-pages/buffer/img.png b/src/assets/images/map-pages/buffer/img.png
new file mode 100644
index 0000000..9358712
--- /dev/null
+++ b/src/assets/images/map-pages/buffer/img.png
Binary files differ
diff --git a/src/components/base-page/enterprise-emergency/DisposalEvent.vue b/src/components/base-page/enterprise-emergency/DisposalEvent.vue
index c7c4c15..2b7b0a5 100644
--- a/src/components/base-page/enterprise-emergency/DisposalEvent.vue
+++ b/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>
<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 () {
+
}
}
}
diff --git a/src/components/base-page/enterprise-emergency/event-handling/BufferQuery.js b/src/components/base-page/enterprise-emergency/event-handling/BufferQuery.js
new file mode 100644
index 0000000..e3b5a41
--- /dev/null
+++ b/src/components/base-page/enterprise-emergency/event-handling/BufferQuery.js
@@ -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
diff --git a/src/components/base-page/enterprise-emergency/event-handling/EventHandling.vue b/src/components/base-page/enterprise-emergency/event-handling/EventHandling.vue
index a4ec6ef..b0d39c3 100644
--- a/src/components/base-page/enterprise-emergency/event-handling/EventHandling.vue
+++ b/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>
diff --git a/src/components/plugin/L.CircleEditor.js b/src/components/plugin/L.CircleEditor.js
new file mode 100644
index 0000000..c7d9d17
--- /dev/null
+++ b/src/components/plugin/L.CircleEditor.js
@@ -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
+// }
--
Gitblit v1.8.0