From dc2421508ec5cc18dc5ff2b2df6b39aba59188c8 Mon Sep 17 00:00:00 2001
From: seatonwan9 <seatonwan9@163.com>
Date: 星期日, 30 五月 2021 20:24:25 +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/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue | 323 +++++++++-------
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/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue | 14
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/utils/utils.js | 2
src/assets/images/map-pages/buffer/5.png | 0
src/components/base-page/enterprise-emergency/event-handling/BufferQuery.js | 553 +++++++++++++++++++++++++++
19 files changed, 1,009 insertions(+), 156 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/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue
index ca90d4e..45d885a 100644
--- a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationPoint.vue
+++ b/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 = ''
diff --git a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue b/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue
index 599d02d..63fa1f4 100644
--- a/src/components/base-page/enterprise-emergency/events-reported/ReportLocationSearch.vue
+++ b/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锛堟櫘閫歅OI锛�
+ 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>
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
+// }
diff --git a/src/utils/utils.js b/src/utils/utils.js
index d8d5e40..c187b1c 100644
--- a/src/utils/utils.js
+++ b/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({
--
Gitblit v1.8.0