安保管理添加活动区域

guoshilong

2023-02-13 c42289cc56a240c466bfb366670c14b7e93a145b

 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)
            }
        }
    },