From 6e6044933c22901b1fa20582d37774d28ca7f7b3 Mon Sep 17 00:00:00 2001 From: jevononlie <728254585@qq.com> Date: Thu, 23 May 2024 15:45:22 +0800 Subject: [PATCH] map --- .../src/views/stationarea/areaDialog.vue | 137 ++++++++++-------- 1 file changed, 74 insertions(+), 63 deletions(-) diff --git a/jnpf-java-boot/jnpf-web/src/views/stationarea/areaDialog.vue b/jnpf-java-boot/jnpf-web/src/views/stationarea/areaDialog.vue index 1b23985..9ae5796 100644 --- a/jnpf-java-boot/jnpf-web/src/views/stationarea/areaDialog.vue +++ b/jnpf-java-boot/jnpf-web/src/views/stationarea/areaDialog.vue @@ -36,16 +36,55 @@ export default { longitude: '', latitude: '', lngLatData: [], // 绘制多边形坐标点 - polygonPath: [ + polygonPath: [ { - provider: '', + provider: 'provider1', + editable: false, polygonsVOS: [ { - lat: '', - lng: '', + lat: '31.035352998532925', + lng: '121.22047942131758', + }, + { + lat: '31.034433694479787', + lng: '121.22200291603804', + }, + { + lat: '31.035408156493887', + lng: '121.22356932610273', + }, + { + lat: '31.03625390789439', + lng: '121.22146647423506', } ] - } + }, + { + provider: 'provider2', + editable: true, + polygonsVOS: [ + { + "lat": 31.036180364592568, + "lng": 121.22818272560835 + }, + { + "lat": 31.033992425381925, + "lng": 121.22753899544477 + }, + { + "lat": 31.03472787274239, + "lng": 121.22535031288862 + }, + { + "lat": 31.03625390789439, + "lng": 121.22625153511763 + }, + { + "lat": 31.036879023666664, + "lng": 121.2274531647563 + } + ] + } ], editor: null, loadMapFlag: true, @@ -69,11 +108,28 @@ export default { this.$emit('areaVisibleChange', false) }, combineOverlays() { - // overlaysArray. + const lngLat = []; + for (var i = 0;i < overlaysArray.length;i++) { + for (const item of overlaysArray[i].getPath().elems) { + const lng = item.getLng(); + const lat = item.getLat(); + lngLat.push({ + lat: lat, + lng: lng + }); + } + } + this.targetAreaPath = lngLat + const obj = { + provider: '新增商户', + editable: true, + polygonsVOS: lngLat, + } + this.polygonPath.push(obj) + this.setMapData(true) }, // 删除绘制的多边形 clearOverlays() { - polygon.setPath([]); if (overlaysArray) { // 这个if判断在vue中会报错,不知道是里面的for in 被重写还是咋的,原因还不知道,如果报错可以不要这个if判断,删除标注那个地方跟这个原理是一样的,报错的话也不要,把长度重置为0 // for (i in overlaysArray) { for (var i = 0;i < overlaysArray.length;i++) { @@ -81,8 +137,6 @@ export default { } } overlaysArray = []; // 需要重置为空,否则之前的数据还在这个数组里面 - console.log(drawingManager); - this.setMapData(); }, // clearOverlays() { // polygon.setMap(null); @@ -113,7 +167,7 @@ export default { /** * 位置信息在地图上展示 */ - setMapData() { + setMapData(flag) { const myLatlng = new qq.maps.LatLng(this.position.latitude, this.position.longitude); console.log("当前位置:"+this.position.latitude, this.position.longitude, myLatlng) const myOptions = { @@ -129,8 +183,14 @@ export default { map: map, draggable: false }) - //查询所有后台围栏 - this.getAllPolygons() + if (!flag) { + //查询所有后台围栏 + this.getAllPolygons() + } else { + this.showArrayPolygon() + /**绘制围栏 */ + this.addpolygon(); + } }, /**绘制围栏 */ addpolygon() { @@ -143,7 +203,6 @@ export default { position: window.qq.maps.ControlPosition.TOP_CENTER, // 表头显示区域 drawingModes: [ - // window.qq.maps.drawing.OverlayType.MARKER, window.qq.maps.drawing.OverlayType.POLYGON, ] }, @@ -162,6 +221,7 @@ export default { // 监听 window.qq.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) { console.log('overlaycomplete', event) + _this.clearOverlays() overlaysArray.push(event.overlay); const lngLat = []; for (const item of event.overlay.getPath().elems) { @@ -203,56 +263,7 @@ export default { // .catch(function (error) { // console.error(error); // }); - _this.polygonPath = [ - { - provider: 'provider1', - editable: false, - polygonsVOS: [ - { - lat: '31.035352998532925', - lng: '121.22047942131758', - }, - { - lat: '31.034433694479787', - lng: '121.22200291603804', - }, - { - lat: '31.035408156493887', - lng: '121.22356932610273', - }, - { - lat: '31.03625390789439', - lng: '121.22146647423506', - } - ] - }, - { - provider: 'provider2', - editable: true, - polygonsVOS: [ - { - "lat": 31.036180364592568, - "lng": 121.22818272560835 - }, - { - "lat": 31.033992425381925, - "lng": 121.22753899544477 - }, - { - "lat": 31.03472787274239, - "lng": 121.22535031288862 - }, - { - "lat": 31.03625390789439, - "lng": 121.22625153511763 - }, - { - "lat": 31.036879023666664, - "lng": 121.2274531647563 - } - ] - } - ] + if (this.mode == 'add') { _this.polygonPath = _this.polygonPath.filter(e => !e.editable) }