活动文字标绘

guanqb

2023-03-08 1e809096ce199b6ad2845919a18d3a6272dcbfa5

 src/views/activity/components/drawBtnBox.vue

@@ -45,6 +45,9 @@
                    <li>
                        <button @click="drawArrow('polygon')" title="多边形">多边形</button>
                    </li>
                    <li>
                        <button @click="drawArrowLabel" title="文字标注">文字标注</button>
                    </li>
                </ul>
            </div>
            <div>
@@ -60,6 +63,22 @@
                </ul>
            </div>
        </div>

        <el-dialog title="添加文字标注" :modal="false" :visible.sync="addLabelVisible" :close-on-click-modal="true"
            class="add-label-box" :before-close="cancelSaveLabel">
            <div>
                <div class="value-name-box">文字内容：</div>
                <div class="input-width-box">
                    <input type="text" v-model="labelInput" placeholder="请输入..." />
                </div>
            </div>
            <div class="btn-box">
                <el-button @click="lableBoxSave">添加</el-button>
                <el-button @click="cancelSaveLabel">取消</el-button>
            </div>
        </el-dialog>


    </div>
</template>

@@ -74,12 +93,23 @@

let arrowPlot = null
let drawArrowLayers = null
let isAddLabel = false

let curLabelOverLayer = null

export default {
    props: [
        'dialogVisible', 'isShowActivityEditBox', 'showingSecurityId',
        'policeSwitch', 'polylineBtnSwitch',
        'arrowBtnSwitch', 'policeIconId', 'lineWidth'],

    data() {
        return {
            addLabelVisible:false,// 文字标注的窗口（内容是名称）
            labelInput:'',
            addLabelPosition:null,
        }
    },

    mounted () {
        this.$nextTick(() => {
@@ -95,6 +125,8 @@
                global.viewer.addLayer(drawArrowLayers)
                arrowPlot = new global.DC.Plot(global.viewer)
            }

            global.viewer.on(global.DC.MouseEventType.CLICK, this.viewerClick)
        })
    },

@@ -348,6 +380,77 @@
                this.$parent.getSecurityPlotList(this.showingSecurityId, this.arrowBtnSwitch,'plot')
            })
        },

        drawArrowLabel(){
            isAddLabel = true
            this.$message({
                message: '请在地图上单击选择标注位置',
                type: 'warning'
            })
        },

        // 文字标注窗口的添加按钮
        lableBoxSave () {
            if (this.labelInput == '') {
                this.$message({
                    message: '请输入标注文字',
                    type: 'error'
                })
            } else {
              this.$parent.addSecurityPlot({ securityId: this.showingSecurityId, position: this.addLabelPosition, type: 9,name: this.labelInput})
              this.cancelSaveLabel()
            }
            // ---------------------------
            // 调用接口进行保存

            // getlablelist().then(res => {
            // 保存成功后进行添加
            // let label = new global.DC.Label()

            // label.on(global.DC.MouseEventType.RIGHT_DOWN, this.labelDowm)

            // global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, this.viewerLableMove)

            // label.on(global.DC.MouseEventType.RIGHT_UP, this.labelUp)

            // 添加文字标注的时候，在加的时候要把事件也加入

            // })
        },

        labelDowm (e) {
            // 保存当前按下的文字标注
            curLabelOverLayer = e // e里面的东西（overlayer)
        },

        viewerLableMove (e) {
            // 根据e里面的坐标信息，设置当前鼠标按下的文字标注位置
            // curLabelOverLayer 的坐标 = e 的坐标
        },

        labelUp (e) {
            global.viewer.off(global.DC.MouseEventType.MOUSE_MOVE, this.viewerLableMove)
            
            // 调接口，更新数据，   不要再去调接口全查了

            // upDateLable().then(res => {

            // })
        },

        viewerClick(e) {
            if(isAddLabel){
                this.addLabelPosition = e.wgs84SurfacePosition.lng + ' ' + e.wgs84SurfacePosition.lat + ',' + e.wgs84SurfacePosition.lng + ' ' + e.wgs84SurfacePosition.lat 
                this.addLabelVisible = true
                isAddLabel = false
            }
        },

        // 关闭添加标注弹窗
        cancelSaveLabel(){
            isAddLabel = false
            this.addLabelVisible = false
        }
    },

    destroyed () {
@@ -356,6 +459,8 @@

        drawArrowLayers.clear()
        drawArrowLayers = null

        global.viewer.off(global.DC.MouseEventType.CLICK, this.viewerClick)
    },
}
</script>