在cesium中添加按钮，并显示表单实现功能

打怪升级咯

已于 2024-08-20 17:12:25 修改

阅读量466

点赞数 5

文章标签： javascript 前端 html

于 2024-08-20 16:55:46 首次发布

本文链接：https://blog.csdn.net/m0_57211146/article/details/141361822

版权

先放入效果图

一、添加按钮

1.操作DOM元素添加一个按钮，并添加设置位置

const setTrace = document.createElement('button');
setTrace.style.left = '380px';
this.createButton('规划航迹', setTrace)
setTrace.onclick = () => {
    this.traceVisible = !this.traceVisible
    if (this.traceVisible) {
        this.$message.success("再点击一次隐藏！！！")
    } else {
        this.$message.warning("再点击一次显示！！！")
    }
};

这里我使用 this.traceVisible = !this.traceVisible来实现点击按钮出现表单，再点击隐藏，如此反复。

2. 调用的方法

createButton(content, button) {
    button.style.position = 'absolute';
    button.textContent = content;
    button.style.top = '120px';
    button.style.padding = '10px';
    button.style.backgroundColor = 'rgb(13,99,27)';
    button.style.color = 'white';
    button.style.border = 'none';
    button.style.cursor = 'pointer';
    this.viewer.container.appendChild(button);
}

主要是为按钮添加样式。button.style.cursor = 'pointer';的作用是当鼠标移动到按钮处时，鼠标形状变为手掌指向。

二、添加表单，并为表单添加按钮

1.主要实现代码

<el-form v-show="traceVisible" label-position="top" label-width="100px" class="demo-trace">
    <img :src="close" class="close_css" @click="traceVisible = false">
    <el-form-item class="label_item">
        <span>{{ content }}</span>
    </el-form-item>
    <el-form-item class="label_item">
        <span>经度：</span>
        <el-input-number class="custom-width" v-model="position.longitude" :precision=12
                         :step="0.00001"></el-input-number>
    </el-form-item>
    <el-form-item class="label_item">
        <span>纬度：</span>
        <el-input-number class="custom-width" v-model="position.latitude" :precision=12
                         :step="0.00001"></el-input-number>
    </el-form-item>
    <el-form-item class="label_item">
        <span>高度：</span>
        <el-input-number class="custom-width" v-model="position.height" :precision=2
                         :step="1"></el-input-number>
    </el-form-item>
    <el-form-item class="label_btn">
        <el-button type="warning" @click="cancelPoint()">撤销该点</el-button>
        <el-button type="primary" @click="showTrace()">创建航线</el-button>
    </el-form-item>
    <el-form-item class="label_btn">
        <el-button type="warning" @click="cancelLine()">撤销该航迹</el-button>
        <el-button type="danger" @click="removeAll()">清除所有</el-button>
    </el-form-item>
</el-form>

表单主要是结合Element来实现。content的作用是在表单最上方显示提示。:src="close"是引入的一个本地图标，就是表单右上角的×，用来关闭表单，可自己在网上找一个图片放上去。本来自己添加按钮来实现数据的增加和减少（这种方法要自己写方法来实现增加和减少，非常冗余），但发现Element里 <el-input-number中有自带的加减按钮，而且还能调整精度，很方便。

2.实现方法

画点

drawPoint(position, Cesium) {
    this.content = '规划航点中......'
    const pointEntity = this.viewer.entities.add({
        name: "点几何对象",
        position: position,
        point: {
            color: Cesium.Color.SKYBLUE,
            pixelSize: 3,
            outlineColor: Cesium.Color.YELLOW,
            outlineWidth: 2
        }
    });
    return pointEntity;
}

画线

drawLine(points) {
    const polylineEntity = this.viewer.entities.add({
        polyline: {
            positions: points, // 线的坐标数组
            width: 2 // 线的宽度
        }
    });
    this.lineEntities.push(polylineEntity);
    return polylineEntity;
}

撤销点

cancelPoint() {
    if (this.points.length === 0) {
        this.$message.warning("请先创建航点！！！")
    } else {
        this.initPoint();
        this.viewer.entities.remove(this.currentPointEntity);
        this.points.pop();
        this.pointEntities.pop();
    }
}

撤销线

cancelLine() {
    if (this.points.length === 0) {
        this.initPoint();
        this.viewer.entities.remove(this.currentLineEntity);
        const Len = this.pointEntities.length
        const entitiesToRemove = this.pointEntities.slice(Len - this.currentLen, Len);
        entitiesToRemove.forEach(entity => {
            this.viewer.entities.remove(entity);
        });
    } else {
        this.$message.warning("请先创建航线！！！")
    }
}

撤销所有

removeAll() {
    this.initPoint();
    // 遍历并移除所有点实体
    this.pointEntities.forEach(entity => {
        this.viewer.entities.remove(entity);
    });
    // 遍历并移除所有线实体
    this.lineEntities.forEach(entity => {
        this.viewer.entities.remove(entity);
    });
    // 清空实体数组
    this.pointEntities = [];
    this.lineEntities = [];
    this.points = [];
}

创建航线

showTrace() {
    if (this.points.length >= 2) {
        this.currentLineEntity = this.drawLine(this.points);
        this.currentLen = this.points.length // 获取该航线的长度
        this.points = [],
            this.currentPointEntity = null
    } else {
        this.$message.warning("至少创建两个点才能创建航线！！！")
    }
}

将输入框中的数字初始化

initPoint() {
    this.position.longitude = null;
    this.position.latitude = null;
    this.position.height = 500;
}

3.所需样式（可根据自己喜好）

.demo-trace {
    width: 240px;
    position: absolute;
    background: #05821a;
    opacity: 0.75;
    color: white;
    left: 230px;
    top: 180px;
    border-radius: 5px;
}

.label_item {
    color: white;
    padding-left: 10px;
    padding-right: 10px;
}

.label_btn {
    display: flex;
    justify-content: center;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
}

.close_css {
    position: absolute;
    left: 220px;
    top: 8px;
    z-index: 100;
    width: 13px;
    height: 13px;
}

.custom-width {
    width: 220px;
}