先放入效果图
一、添加按钮
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; }
三、注意事项
在代码中很多数据需要在data中初始化,这些就不过多赘述了。在使用代码时有些逻辑需要自己完善, 可能会遇到清除的线不对,点没清除干净等等问题。需要修改上述代码来实现自己的效果。
另,若有更好的方法,或者有不足的都可以评论。