我现在的需求是无人机点位根据ws传输的经纬度改变位置,在网上查了很多资料,终于是做出来了,如果有问题请指出。
效果图,无人机可以来回移动
这里是核心代码
// 添加飞机点位图层
let vectorLayerpoint
function DronepointLayer() {
vectorLayerpoint = new VectorLayer({
source: new VectorSource(),
name: 'Pointlayers'
});
imap.addLayer(vectorLayerpoint);
// var layerA = imap.getLayers().getArray()[1];
// imap.getView().setZIndex(layerA, vectorLayerpoint.getZIndex() + 1);
}
//Dronepoint方法传入ws的数据
let modelArr = []
function Dronepoint(params) {
if (vectorLayerpoint == undefined) {
return
}
if(!params){
vectorLayerpoint.getSource().clear();
//cesiumViewer.entities.removeById('threeDrone')
modelArr=[]
return
}
// vectorLayerpoint.getSource().clear();
// cesiumViewer.entities.removeById('threeDrone')
params.forEach((item, index) => {
var items = item;
var obj = getModelById(item.id);
var model;
if (obj.model) { //表示已经存在于数组当中
// 更新位置
model = obj.model;
vectorLayerpoint.getSource().forEachFeature((itempoint)=>{
itempoint.setGeometry(new Point([item.tracing.origin.lng, item.tracing.origin.lat]));
// itempoint.getGeometry().translate(model.tracing.origin.lng, model.tracing.origin.lat)
console.log([item.tracing.origin.lng, item.tracing.origin.lat],itempoint, '更新位置');
})
}
else {
// 创建模型
model = crateModel(items);
modelArr.push(model);
console.log(modelArr, model,'创建模型');
}
});
}
// 创建无人机
function crateModel(item) {
// 创建feature,一个feature就是一个点坐标信息
const featurepoint = new Feature({
geometry: new Point([item.tracing.origin.lng, item.tracing.origin.lat]),
});
//addModel(item.tracing.origin.lng, item.tracing.origin.lat, item.height);
//console.log(item.tracing.origin,vectorLayerpoint,imap.getLayers().getArray(),'具体点');
let style = new Style({
image: new Icon({
scale: [0.3, 0.3],
src: DronepointImg,
anchor: [0.2, 0.5]
}),
text: new Text({
font: 'normal 14px 黑体',
// // 对其方式
textAlign: 'center',
// 基准线
textBaseline: 'middle',
offsetY: 35,
offsetX: 35,
backgroundFill: new Stroke({
color: 'rgb(65 65 65 / 70%)',
}),
// 文本填充样式
fill: new Fill({
color: 'rgba(236,218,20,1)'
}),
padding: [5, 5, 5, 5],
text: `${item.name + '\n'}${'lng:' + item.tracing.origin.lng},${'lat:' + item.tracing.origin.lat}`,
})
})
featurepoint.setStyle(style);
vectorLayerpoint.getSource().addFeature(featurepoint);
return item;
}
// 获取模型
function getModelById(id) {
if (!id) return null;
var obj = {};
for (var i = 0; i < modelArr.length; i++) {
var item = modelArr[i];
if (id === item.id) {
obj.index = i;
obj.model = item;
break;
}
}
return obj;
}