文字标绘改变字体大小和颜色

guanqb

2023-03-20 0d18c9abbe96a6fde532de0d8666a04ae17e6c8d

文字标绘改变字体大小和颜色

 src/styles/base/index.scss

@@ -1178,12 +1178,43 @@
                width: 60px;
                height: 30px;
                text-align: center;
                vertical-align: bottom;
            }

            .el-button:hover {
                background-color: #409EFF;
            }

            .el-input-number {
                line-height: 100%;
                width: 100%;

                input {
                    text-indent: 0;
                    height: 30px;
                }
            }

            .input-fontsize-box {
                width: 100px;
            }

            .el-input-number .el-input__inner {
                padding-left: 0;
                padding-right: 0;
            }

            .el-input-number__decrease,
            .el-input-number__increase {
                top: 0;
                width: 30px;
                height: 30px;
                line-height: 30px;
                background-color: transparent;
                color: #ffffff;
                border: 1px solid #3d5ad5;
            }

            &>div {
                display: flex;
                margin-bottom: 10px;

 src/styles/media/index.scss

@@ -2387,7 +2387,7 @@
                    .add-label-box {
                        .el-dialog {
                            width: countSizeVw(300, 1920);
                            height: countSizeVh(140);
                            height: countSizeVh(220);

                            .el-dialog__body {
                                .el-button {
@@ -2410,6 +2410,22 @@
                                    font-size: countSizeVh(16);
                                    border: countSizeVh(1) solid rgb(0, 92, 169);
                                }

                                .el-input-number input {
                                    height: countSizeVh(30);
                                }

                                .input-fontsize-box {
                                    width: countSizeVw(100, 1920);
                                }

                                .el-input-number__decrease,
                                .el-input-number__increase {
                                    width: countSizeVw(30, 1920);
                                    height: countSizeVh(30);
                                    line-height: countSizeVh(30);
                                    border: countSizeVh(1) solid #3d5ad5;
                                }
                            }
                        }
                    }

 src/views/activity/components/drawBtnBox.vue

@@ -72,6 +72,19 @@
                    <input type="text" v-model="labelInput" placeholder="请输入..." />
                </div>
            </div>
            <div>
                <div class="value-name-box">字体大小：</div>
                <div class="input-fontsize-box">
                    <el-input-number v-model="labelInputFontSize" :step="2" :min="12" max="72" step-strictly></el-input-number>
                </div>
            </div>
            <div>
                <div class="value-name-box">字体颜色：</div>
                <div class="pick-color-box">
                    <el-color-picker v-model="labelInputFontColor" :predefine="predefineColors" size="small">
                    </el-color-picker>
                </div>
            </div>
            <div class="btn-box">
                <el-button @click="lableBoxSave">保存</el-button>
                <el-button @click="lableBoxDelete">删除</el-button>
@@ -118,6 +131,24 @@
            addLabelPosition: null,
            labelPopupTitle: '添加文字标注',
            labelId: '',
            labelInputFontSize:'40',
            labelInputFontColor:'#FFFFFF',
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, )',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%)',
                '#c7158577'
            ],
        }
    },

@@ -421,8 +452,24 @@
            let r = parseInt(item.color.slice(1, 3), 16)
            let g = parseInt(item.color.slice(3, 5), 16)
            let b = parseInt(item.color.slice(5, 7), 16)
            let a = Math.floor(Number(item.color.split(',')[1]) * 2.55)
            let a = Math.floor(Number(item.color.split(',')[1]) * 2.55)?Math.floor(Number(item.color.split(',')[1]) * 2.55):255
            let color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
            if(item.type == 9) {
                let position = item.position.slice(12, item.position.length - 1).replace(/,/g, ';').replace(/ /g, ',')
                position = position.split(';')[0].split(',')
                position = new global.DC.Position(Number(position[0]), Number(position[1]))
                let label = new global.DC.Label(position, item.name)
                label.attrParams = { 'id': item.id, item }
                console.log(item,`${item.width}px`,123);
                label.setStyle({
                    'fillColor':color,
                    "font": `${item.width}px sans-serif`,
                })
                this.lableAllEvent(label)
                drawArrowLayers.addOverlay(label)
                return
            }
            
            addPlotOverlayData.attrParams = { 'id': item.id, 'color': item.color, item }
            addPlotOverlayData.setStyle({
                "material": color
@@ -571,12 +618,18 @@
                let r = parseInt(params.color.slice(1, 3), 16)
                let g = parseInt(params.color.slice(3, 5), 16)
                let b = parseInt(params.color.slice(5, 7), 16)
                let a = Math.floor(Number(params.color.split(',')[1]) * 2.55)
                let a = Math.floor(Number(params.color.split(',')[1]) * 2.55) ? Math.floor(Number(params.color.split(',')[1]) * 2.55) : 255
                let color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
                overlay.attrParams.color = params.color
                overlay.setStyle({
                    "material": color
                })
                if(overlay.attrParams.item.type == 9) {
                   overlay.setStyle({
                       "fillColor": color
                   })
                }else{
                    overlay.setStyle({
                        "material": color
                    })
                }
                if('pointOverlayData' in overlay.attrParams){
                    let r = parseInt(params.color.slice(1, 3), 16)
                    let g = parseInt(params.color.slice(3, 5), 16)
@@ -592,7 +645,13 @@
                }
            }
            if('name' in params){
                lableOverlayData.text = params.name
                addPlotOverlayData.text = params.name
            }

            if('width' in params){
                overlay.setStyle({
                    "font": `${params.width}px sans-serif`
                })
            }
        },

@@ -726,6 +785,7 @@
            })
        },

        // 绘制文字标绘
        drawArrowLabel () {
            global.viewer.tooltip.enable = false
            plot != null && plot.stop()
@@ -758,8 +818,11 @@
            }
        },

        // 文字编辑弹窗
        labelShowPopup (e) {
            this.labelPopupTitle = '添加文字标注'
            this.labelInputFontSize =  40
            this.labelInputFontColor =  '#FFFFFF'
            this.addLabelVisible = true
            this.addLabelPosition = e.wgs84SurfacePosition.lng + ' ' + e.wgs84SurfacePosition.lat + ',' + e.wgs84SurfacePosition.lng + ' ' + e.wgs84SurfacePosition.lat
            this.labelInput = ''
@@ -774,9 +837,9 @@
                })
            } else {
                if (this.labelPopupTitle == "添加文字标注") {
                    this.$parent.addSecurityPlot({ securityId: this.showingSecurityId, position: this.addLabelPosition, type: 9, name: this.labelInput })
                    this.$parent.addSecurityPlot({ securityId: this.showingSecurityId, position: this.addLabelPosition, type: 9, name: this.labelInput ,color:this.labelInputFontColor,width:this.labelInputFontSize})
                } else {
                    this.updateSecurityPlot({ id: this.labelId, name: this.labelInput })
                    this.updateSecurityPlot({ id: this.labelId, name: this.labelInput,color:this.labelInputFontColor,width:this.labelInputFontSize },addPlotOverlayData)
                }
                this.cancelSaveLabel()
            }
@@ -785,6 +848,7 @@
        // 文字标注窗口的删除按钮
        lableBoxDelete(){
            this.$parent.deleteSecurityPlot (this.labelId) 
            addPlotOverlayData&&addPlotOverlayData.remove()
            this.cancelSaveLabel()
        },

@@ -866,11 +930,13 @@

        // 单击文字标绘
        reEditLabel (e) {
            lableOverlayData = e.overlay
            addPlotOverlayData = e.overlay
            this.$EventBus.$emit('closeTooltip')
            this.labelId = e.overlay.attrParams.id
            this.labelId = addPlotOverlayData.attrParams.id
            this.labelPopupTitle = "修改文字标注"
            this.labelInput =  lableOverlayData.text
            this.labelInput =  addPlotOverlayData.text
            this.labelInputFontSize =  Number(addPlotOverlayData.attrParams.item.width)
            this.labelInputFontColor =  addPlotOverlayData.attrParams.item.color
            this.addLabelVisible = true
        },


 src/views/activity/index.vue

@@ -772,7 +772,7 @@
                        let r = parseInt(item.color.slice(1, 3), 16)
                        let g = parseInt(item.color.slice(3, 5), 16)
                        let b = parseInt(item.color.slice(5, 7), 16)
                        let a = Math.floor(Number(item.color.split(',')[1]) * 2.55)
                        let a = Math.floor(Number(item.color.split(',')[1]) * 2.55) ? Math.floor(Number(item.color.split(',')[1]) * 2.55) : 255
                        color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
                    }
                    if (item.type == 1 && showType == 'plot') {
@@ -863,6 +863,10 @@
                        let label = new global.DC.Label(position, item.name)
                        label.attrParams = { 'id': item.id, item }
                        this.$refs.DRAWBTNBOX.lableAllEvent(label)
                        label.setStyle({
                            'fillColor':color,
                            "font": `${item.width}px sans-serif`,
                        })
                        arrowsListLayer.addOverlay(label)
                    }
                    if (chooseArrow != null) {
@@ -1849,8 +1853,8 @@
        deleteSecurityPlot (id) {
            deleteSecurityPlot(id).then(res => {
                if (res.data.success) {
                    plotOverlayData.overlay.remove()
                    if ('pointOverlayData' in plotOverlayData.overlay.attrParams) {
                    plotOverlayData!=null && plotOverlayData.overlay!=null && plotOverlayData.overlay.remove()
                    if (plotOverlayData!=null && plotOverlayData.overlay!=null&&'pointOverlayData' in plotOverlayData.overlay.attrParams) {
                        plotOverlayData.overlay.attrParams.pointOverlayData.remove()
                    }
                    this.$message({

 vue.config.js

@@ -158,7 +158,7 @@
            "/api": {
                // target用于配置你允许访问数据的计算机名称，即是你的api接口的服务器地址
                // target: "http://localhost:82",
                target: "http://192.168.0.200:82",
                target: "http://192.168.0.126:82",
                // target: "http://17.20.10.3:82",
                // target: "http://10.141.11.11:8081/api",
                // ws: true, //启用webSocket6566