具体效果如下:
主要代码如下:
// 添加模型
addPic(longitude, latitude, altitude) {
// 当地球上存在其他实体时,清空再添加
if (viewer.entities.values.length >= 1) {
var existedId = viewer.entities.getById(viewer.entities.values[0].id);
viewer.entities.remove(existedId);
}
this.paramForm.longitude = longitude;
this.paramForm.latitude = latitude;
this.paramForm.altitude = altitude;
// 添加点
viewer.entities.add({
//点的位置
position : Cesium.Cartesian3.fromDegrees(longitude, latitude, altitude),
//点
point : {
pixelSize : 10,//点的大小
color : Cesium.Color.RED,//点的颜色
outlineColor:Cesium.Color.YELLOW,//外圈颜色
outlineWidth:5,//外圈大小
}
});
},
我主要是通过input输入框来控制经纬高的变化
<el-form-item label="经度(deg)" prop="longitude">
<el-input type="number" v-model="paramForm.longitude" @change="angleChange('lng',$event)"
></el-input>
</el-form-item>
<el-form-item label="纬度(deg)" prop="latitude">
<el-input type="number" v-model="paramForm.latitude" @change="angleChange('lat',$event)"
></el-input>
</el-form-item>
<el-form-item label="高度(m)" prop="altitude">
<el-input type="number" v-model="paramForm.altitude" @change="angleChange('alt',$event)"
></el-input>
</el-form-item>
当经纬高发生变化后触发以下事件
angleChange(flag, val) {
let num = parseInt(val);
if (flag == "lng") {
// 当经度发生变化时
this.addPic(num, this.paramForm.latitude, this.paramForm.altitude);
} else if (flag == "lat") {
// 当纬度发生变化时
this.addPic(this.paramForm.longitude, num, this.paramForm.altitude);
} else if (flag == "alt") {
// 当高度(程)发生变化时
this.addPic(this.paramForm.longitude, this.paramForm.latitude, num);
}
},