From 7583d1a0b73f274bed7bb43cc8341ed044a5ee3d Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Tue, 27 Sep 2022 17:16:24 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs
---
src/views/activity/index.vue | 172 +++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 161 insertions(+), 11 deletions(-)
diff --git a/src/views/activity/index.vue b/src/views/activity/index.vue
index adc92fd..9861b76 100644
--- a/src/views/activity/index.vue
+++ b/src/views/activity/index.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2022-08-18 16:18:17
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2022-09-27 11:14:20
+ * @LastEditTime: 2022-09-27 16:01:02
* @FilePath: \srs-police-affairs\src\views\activity\index.vue
* @Description: 安保活动
*
@@ -88,6 +88,47 @@
</div>
</div>
+ <div class="draw-btn-box">
+ <ul>
+ <li>
+ <button @click="draw('point')">点</button>
+ </li>
+ <li>
+ <button @click="draw('billboard')">图标点</button>
+ </li>
+ <li>
+ <button @click="draw('polyline')">线</button>
+ </li>
+ <li>
+ <button @click="draw('polygon')">面</button>
+ </li>
+ <li>
+ <button @click="draw('circle')">圆</button>
+ </li>
+ <li>
+ <button @click="draw('rectangle')">矩形</button>
+ </li>
+ <li>
+ <button @click="draw('attack_arrow')">进攻箭头</button>
+ </li>
+ <li>
+ <button @click="draw('double_arrow')">双箭头</button>
+ </li>
+ <li>
+ <button @click="draw('fine_arrow')">直箭头</button>
+ </li>
+ <li>
+ <button @click="draw('tailed_attack_arrow')">燕尾箭头</button>
+ </li>
+ <li>
+ <button @click="draw('gathering_place')">聚集地</button>
+ </li>
+ <li>
+ <button @click="removeAll()">清除</button>
+ </li>
+ </ul>
+ </div>
+
<div class="second-container">
<el-tree
:data="treeData"
@@ -99,6 +140,13 @@
</div>
<div v-show="dialogVisible" class="activity-details-box">
+ <div class="title">
+ 活动详情
+ <div class="close" @click="closeActivityDetails">
+ <i class="el-icon-close"></i>
+ </div>
+ </div>
+
<div class="row-box">
<div class="category">活动名称：</div>
<div class="category-value">xxx活动</div>
@@ -159,6 +207,9 @@
<script>
let analyseLayer = null
let analysePolygon = null
+
+let drawLayers = null
+let plot = undefined
export default {
data () {
@@ -360,7 +411,8 @@
alt: 100,
url: '/img/icon/activity.png'
}
- ]
+ ],
+ activityDetails: {}
}
},
created () {
@@ -368,6 +420,8 @@
},
mounted () {
this.$nextTick(() => {
+
+
this.activityList.forEach(item => {
this.$EventBus.$emit('layerPointAdd', {
layerName: 'activityLayers',
@@ -378,8 +432,21 @@
})
- analyseLayer = new global.DC.VectorLayer('analyseLayer')
- global.viewer.addLayer(analyseLayer)
+ if (analyseLayer == null) {
+
+ analyseLayer = new global.DC.VectorLayer('analyseLayer')
+ global.viewer.addLayer(analyseLayer)
+
+ }
+
+ if (drawLayers == null) {
+
+ drawLayers = new global.DC.VectorLayer('drawLayers')
+ global.viewer.addLayer(drawLayers)
+ plot = new global.DC.Plot(global.viewer)
+
+ }
+
})
},
updated () {
@@ -419,16 +486,24 @@
},
goAbDetail (item, index) {
+ if (this.currentClickIndex !== '' && this.currentClickIndex == index) {
+ return
+ }
+
+ this.analyseInput = 100
+
+ this.activityDetails = item
+
this.polylineSwitch = false
if (analyseLayer != null) {
analyseLayer.clear()
}
- let point = new global.DC.Point("116.027001,28.683111")
+ let point = new global.DC.Point(`${item.lng}, ${item.lat}`)
analyseLayer.addOverlay(point)
- let coords = global.DC.GeoTools.pointBuffer("116.027001,28.683111", 100)
+ let coords = global.DC.GeoTools.pointBuffer(`${item.lng}, ${item.lat}`, 100)
analysePolygon = new global.DC.Polygon(coords)
analysePolygon.setStyle({
@@ -478,7 +553,7 @@
analyseChange (e) {
analyseLayer.removeOverlay(analysePolygon)
- let coords = global.DC.GeoTools.pointBuffer("116.027001,28.683111", e)
+ let coords = global.DC.GeoTools.pointBuffer(`${this.activityDetails.lng}, ${this.activityDetails.lat}`, e)
analysePolygon = new global.DC.Polygon(coords)
analysePolygon.setStyle({
@@ -487,9 +562,39 @@
analyseLayer.addOverlay(analysePolygon)
},
+
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage
},
+
+ closeActivityDetails () {
+ this.dialogVisible = false
+
+ this.currentClickIndex = ''
+
+ this.polylineSwitch = false
+
+ analyseLayer.clear()
+
+ this.$EventBus.$emit('mapClearLayer', {
+ layerName: 'polylineLayer',
+ type: 'VectorLayer'
+ })
+ },
+
+ draw (type) {
+ plot && plot.draw(type, overlay => {
+ if (overlay) {
+ drawLayers.addOverlay(overlay)
+ plot.edit(overlay)
+ }
+ })
+ },
+
+ removeAll () {
+ drawLayers.clear()
+ }
+
},
destroyed () {
this.$EventBus.$emit('mapClearLayer', {
@@ -508,6 +613,8 @@
})
analyseLayer.clear()
+
+ this.removeAll()
}
}
</script>
@@ -652,13 +759,42 @@
}
}
+ .draw-btn-box {
+ position: fixed;
+ bottom: 40px;
+ left: 50%;
+ transform: translate(-50%, 0);
+
+ ul {
+ display: flex;
+
+ li {
+ button {
+ width: 60px;
+ height: 30px;
+ margin: 0 5px;
+ background-color: $bg-color;
+ border: 1px solid #cecece;
+ border-radius: 4px;
+ color: #fff;
+ cursor: pointer;
+ outline: none;
+ }
+ }
+ }
+ }
+
.second-container {
position: absolute;
- top: 0;
+ top: 10px;
display: flex;
left: 405px;
flex-direction: column;
width: 240px;
+
+ :deep(.el-tree) {
+ background: transparent;
+ }
:deep(.el-tree-node__content) {
background: transparent;
@@ -671,17 +807,31 @@
.activity-details-box {
position: fixed;
- top: 80px;
- right: 0;
+ top: 90px;
+ right: 10px;
width: 400px;
padding: 10px;
- border-radius: 10px 0 0 10px;
+ border-radius: 10px;
color: #fff;
background: $bg-color;
overflow-x: hidden;
overflow-y: auto;
+ .title {
+ position: relative;
+ height: 36px;
+ line-height: 36px;
+
+ .close {
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translate(0, -50%);
+ cursor: pointer;
+ }
+ }
+
.row-box {
width: 100%;
line-height: 28px;
--
Gitblit v1.9.3