安保管理添加活动区域

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

 src/views/security/security.vue

@@ -16,6 +16,10 @@
                <el-button icon="el-icon-data-line" :size="size" :type="type"
                    @click="handleCarList(row)">活动车辆</el-button>
            </template>
            <template slot="activityAreaForm">
              <map-box ref="OpenLayersMap" @toData="toData" :routeRange="form.activityArea"></map-box>
            </template>

        </avue-crud>

        <el-drawer title="活动人员区域" :visible.sync="personBox" :append-to-body="true" size="50%" :destroy-on-close="true">
@@ -35,9 +39,11 @@
import { mapGetters } from "vuex"
import securityManage from "@/views/securityManage/securityManage"
import securityManageCar from "@/views/securityManageCar/securityManageCar"
import MapBox from "@/components/map/mapBox";

export default {
    components: {
      MapBox,
        securityManage,
        securityManageCar
    },
@@ -109,9 +115,41 @@
                    {
                        label: "活动地点",
                        prop: "place",
                        span: 24
                        // addDisplay: false,
                        // editDisplay: false,
                        // viewDisplay: false,
                    },
                    {
                      label: "经度",
                      prop: "longitude",
                      span: 12,
                      hide: true,
                      rules: [{
                        required: true,
                        message: "请输入纬度",
                        trigger: "blur"
                      }],
                    },
                    {
                      label: "纬度",
                      prop: "latitude",
                      span: 12,
                      hide: true,
                      rules: [{
                        required: true,
                        message: "请输入纬度",
                        trigger: "blur"
                      }],
                    },
                    {
                      label: "活动区域",
                      prop: "activityArea",
                      type: "input",
                      hide: true,
                      span: 24,
                      display: true,
                      addDisplay: true
                    },
                    {
                        label: "所属辖区",
@@ -125,6 +163,7 @@
                        },
                        search: true,
                        searchSpan: 4,
                        span: 24,
                        width: 110,
                        rules: [{
                            required: true,
@@ -165,29 +204,6 @@
                        }],
                        width: 120,
                    },

                    {
                        label: "经度",
                        prop: "longitude",
                        span: 12,
                        hide: true,
                        rules: [{
                            required: true,
                            message: "请输入纬度",
                            trigger: "blur"
                        }],
                    },
                    {
                        label: "纬度",
                        prop: "latitude",
                        span: 12,
                        hide: true,
                        rules: [{
                            required: true,
                            message: "请输入纬度",
                            trigger: "blur"
                        }],
                    },
                    // {
                    //   label: "",
                    //   prop: "map",
@@ -199,7 +215,6 @@
                    //   // display:false,
                    //   component: "AvueMap",
                    // },

                    {
                        label: "活动类型",
                        prop: "type",
@@ -408,6 +423,10 @@
        handleCarList (row) {
            this.carBox = true
            this.securityId = row.id
        },
        //地图传回的polygon坐标
        toData(data){
          this.form.activityArea = data
        }
    }
}