多边形按缓存区核心区添加

guanqb

2023-03-04 dae61d30cfb6b747d49b94918b662acc3801df56

多边形按缓存区核心区添加

 src/styles/base/index.scss

@@ -927,6 +927,8 @@

            .value-name-box {
                width: 110px;
                display: flex;
                align-items: center;
            }

            .add-polygon-btn-box {
@@ -937,7 +939,6 @@
            input {
                height: 30px;
                font-size: 16px;
                text-indent: 1em;
                color: #ffffff;
                background-color: transparent;
                border: 1px solid rgb(0, 92, 169);
@@ -950,6 +951,10 @@
            input::-webkit-input-placeholder {
                color: rgba(238, 238, 238, 0.7);
            }

            .el-input--suffix .el-input__inner {
                padding-right: 10px;
            }
        }
    }
}

 src/styles/media/index.scss

@@ -2246,8 +2246,8 @@

                    .add-polygon-box {
                        .el-dialog {
                            width: countSizeVw(320, 1920);
                            height: countSizeVh(186);
                            width: countSizeVw(340, 1920);
                            height: countSizeVh(220);

                            .el-dialog__body {
                                .el-button {
@@ -2264,7 +2264,7 @@
                                }

                                .alpha {
                                    width: calc(100% - countSizeVw(110, 1920));
                                    width: calc(100% - countSizeVw(130, 1920));
                                }

                                input {

 src/views/activity/index.vue

@@ -413,6 +413,15 @@
                </div>
            </div> -->
            <div class="line">
                <div class="value-name-box">选择类型：</div>
                <div class="select-type">
                    <el-select size="small" v-model="polygonAreaType" placeholder="请选择区域类型">
                       <el-option v-for="item in polygonAreaOption" :key="item.value" :label="item.label"
                           :value="item.value"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="line">
                <div class="value-name-box">设置透明度：</div>
                <div class="alpha">
                    <el-slider v-model="choosePlotColorAlpha" :format-tooltip="formatTooltip"></el-slider>
@@ -736,6 +745,14 @@
                video3: false,
                video4: false,
            },
            polygonAreaType:1,
            polygonAreaOption:[{
              value: 1,
              label: '核心区'
            }, {
              value: 2,
              label: '缓冲区'
            }]
        }
    },

@@ -1584,6 +1601,7 @@
                                if (flag) {
                                    that.choosePlotColor =  '#409EFF'
                                    that.choosePlotColorAlpha = 48
                                    that.polygonAreaType = 1
                                    that.isNeedName = true
                                    that.polygonName = ''
                                    that.polygonAddVisible = true
@@ -1855,7 +1873,7 @@
        },

        // 保存活动标绘箭头
        // securityId活动id, position坐标, type标绘类型, name多边形名称,color标绘颜色
        // securityId活动id, position坐标, type标绘类型, name多边形名称,color标绘颜色,aera_type多边形类型
        addSecurityPlot (params) {
            addSecurityPlot(params).then(res => {
                if (res.data.success) {
@@ -1882,11 +1900,11 @@
                this.isHaveArrow = res.data.data.some(item => {
                    return item
                })
                console.log(res.data.data,1111);
                let plotList = res.data.data
                res.data.data.forEach(item => {
                    let position = item.position.slice(11, item.position.length - 1).replace(/,/g, ';').replace(/ /g, ',')
                    let chooseArrow = null
                    let nameLabel = null
                    // let nameLabel = null
                    if (item.type == 1) {
                        chooseArrow = new global.DC.AttackArrow(position)
                    } else if (item.type == 2) {
@@ -1897,6 +1915,32 @@
                        chooseArrow = new global.DC.TailedAttackArrow(position)
                    } else if (item.type == 5) {
                        chooseArrow = new global.DC.Polygon(position)
                        // 缓存区的话需要扣去包含的核心区
                        if(item.areaType == 2){
                            let itemPositionArr = item.position.slice(11, item.position.length - 1).replace(/,/g, ';').replace(/ /g, ',').split(';')
                            itemPositionArr.push(itemPositionArr[0])
                            itemPositionArr = itemPositionArr.map(item=>{
                                return item.split(',').map(Number)
                            })
                            let cachePolygon = this.$turf.polygon([itemPositionArr])
                            plotList.forEach(inItem => {
                                // 查询被包含的核心区
                                if(inItem.areaType == 1 && inItem.type == 5){
                                    let inItemPositionArr = inItem.position.slice(11, inItem.position.length - 1).replace(/,/g, ';').replace(/ /g, ',').split(';')
                                    inItemPositionArr.push(inItemPositionArr[0])
                                    inItemPositionArr = inItemPositionArr.map(item=>{
                                        return item.split(',').map(Number)
                                    })
                                    let carePolygon = this.$turf.polygon([inItemPositionArr])
                                    let isContains = this.$turf.booleanContains(cachePolygon, carePolygon);
                                    // 如果完全包含就作为洞面扣去
                                    if(isContains){
                                        chooseArrow.holes = [inItem.position.slice(11, inItem.position.length - 1).replace(/,/g, ';').replace(/ /g, ',')]
                                    }

                                }
                            })
                        }
                        // let center = this.getCenter(item.position)
                        // let centerPosition = new global.DC.Position(center[0], center[1])
                        // nameLabel = new global.DC.Label(centerPosition, item.name)
@@ -1916,7 +1960,7 @@
                        color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
                    }
                    // chooseArrow.attrParams = { 'id': item.id, 'color': item.color, 'name': item.name }
                    chooseArrow.attrParams = { 'id': item.id, 'color': item.color }
                    chooseArrow.attrParams = { 'id': item.id, 'color': item.color,item }
                    arrowsListLayer.addOverlay(chooseArrow)
                    chooseArrow.setStyle({
                        "material": color,
@@ -1946,7 +1990,9 @@
            this.plotOverlayData = e
            this.choosePlotColor = e.overlay.attrParams.color != '' ? e.overlay.attrParams.color.slice(0,7) :  '#409EFF'
            this.choosePlotColorAlpha = e.overlay.attrParams.color != '' ? Number(e.overlay.attrParams.color.split(',')[1]) :  48
            console.log(e.overlay.attrParams.color,this.choosePlotColorAlpha,666);
            if(e.overlay.attrParams.item.type == 5){
                this.polygonAreaType = e.overlay.attrParams.item.areaType != '' ? e.overlay.attrParams.item.areaType : 1
            }
            // this.polygonName = e.overlay.attrParams.name
            if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == this.activityDeptId) {
                this.plotId = e.overlay.attrParams.id
@@ -2385,7 +2431,7 @@
        // 保存绘制区域
        savePolygonInfo () {
            if (this.isNeedName) {
                this.addSecurityPlot({ securityId: this.showingSecurityId, position: this.polygonPositionStr, type: 5, color: this.choosePlotColor + ',' + this.choosePlotColorAlpha })
                this.addSecurityPlot({ securityId: this.showingSecurityId, position: this.polygonPositionStr, type: 5, color: this.choosePlotColor + ',' + this.choosePlotColorAlpha,areaType:this.polygonAreaType })
                this.polygonAddVisible = false
            } else {
                this.addSecurityPlot({ securityId: this.showingSecurityId, position: this.arrowPositionStr, type: this.plotSaveType, color: this.choosePlotColor + ',' + this.choosePlotColorAlpha })