From c42289cc56a240c466bfb366670c14b7e93a145b Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Mon, 13 Feb 2023 11:09:16 +0800
Subject: [PATCH] 安保管理添加活动区域
---
src/components/map/mapBox.vue | 32 ++++++++++++++++++++++++--------
1 files changed, 24 insertions(+), 8 deletions(-)
diff --git a/src/components/map/mapBox.vue b/src/components/map/mapBox.vue
index 6a26179..4891e55 100644
--- a/src/components/map/mapBox.vue
+++ b/src/components/map/mapBox.vue
@@ -3,7 +3,7 @@
<div id='map' :style="{ height: isDetail ? '90vh' : '40vh', width: '100%' }" ref="MapContent">
<div style="position: absolute;right:40%;top:-1%;z-index: 999999">
<p style="margin-top: 10px" v-if="!isDetail">
- <el-button type="primary" size="small" @click="point()">绘制路线</el-button>
+ <el-button type="primary" size="small" @click="point()">绘制区域</el-button>
<el-button size="small" @click="clearDraw()">重置</el-button>
</p>
</div>
@@ -45,6 +45,7 @@
drawLayer: null,
lineVector: null,
pointVector: null,
+ polygonVector:null,
coordinates: [],// 保存绘画坐标地址 [[115.90490549080435, 28.746101718722358],[115.93151300423209, 28.741123538790717]]
toData: null,// 保存数据库格式坐标地址
showTip: false,
@@ -92,8 +93,15 @@
wrapX: false // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
}),
})
+ _this.polygonVector = new VectorLayer({
+ //layer所对应的source
+ source: new VectorSource({
+ wrapX: false // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
+ }),
+ })
_this.map.addLayer(_this.lineVector)
_this.map.addLayer(_this.pointVector)
+ _this.map.addLayer(_this.polygonVector)
//在地图上回显线或点
_this.startAdd(_this.routeRange)
},
@@ -176,6 +184,10 @@
})
}
},
+ //回显多边形区域
+ addPolygon(area){
+
+ },
// 将点坐标集合转换为数据库数据
doData (val) {
let str = "LINESTRING("
@@ -185,6 +197,7 @@
str += ","
}
}
+ str =str +","+ `${val[0][0]} ${val[0][1]}`
str += ")"
// console.log(str)
return '\'' + str + '\''
@@ -194,7 +207,7 @@
let _this = this
_this.coordinates = []
_this.map.removeInteraction(_this.draw)
- _this.lineVector.getSource().clear()
+ _this.polygonVector.getSource().clear()
//提示
if (!_this.showTip) {
_this.showTip = true
@@ -205,17 +218,17 @@
_this.setTipPosition(e.offsetX, e.offsetY, 5, 5)
}
this.$refs.MapContent.addEventListener('mousemove', mapMousemove)
- this.$refs.MapContent.removeEventListener('mousemove', mapMousemove)
+ // this.$refs.MapContent.removeEventListener('mousemove', mapMousemove)
function mapMousedown () {
_this.tipTitle = "可继续，或选择最终位置双击结束绘画"
}
this.$refs.MapContent.addEventListener('mousedown', mapMousedown)
- this.$refs.MapContent.removeEventListener('mousedown', mapMousedown)
+ // this.$refs.MapContent.removeEventListener('mousedown', mapMousedown)
_this.draw = new Draw({
- source: _this.lineVector.getSource(),
- type: 'LineString',
+ source: _this.polygonVector.getSource(),
+ type: 'Polygon',
style: new Style({
stroke: new StyleStroke({
color: "red",
@@ -233,7 +246,7 @@
_this.draw.on('drawend', function () {
_this.map.removeInteraction(_this.draw)
- _this.lineVector.setStyle(_this.styleFunction())// 路线画好之后的样式
+ _this.polygonVector.setStyle(_this.styleFunction())// 路线画好之后的样式
// 将点坐标集合转换为数据库数据
let toData = _this.doData(_this.coordinates)
// 传值给父组件
@@ -242,6 +255,7 @@
_this.tipTitle = null
_this.showTip = false
})
+
},
// 设置统一控制点击事件，需要画图方式在此处切换
handleClick (point) {
@@ -405,8 +419,10 @@
startAdd (routeRange) {
if (routeRange.startsWith("LINESTRING")) {
this.addLineDraw(routeRange)
- } else {
+ } else if (routeRange.startsWith("POINT")) {
this.addPoint(routeRange)
+ } else if (routeRange.startsWith("POLYGON")){
+ this.addPolygon(routeRange)
}
}
},
--
Gitblit v1.9.3