我现在的需求是无人机点位根据ws传输的经纬度改变位置,在网上查了很多资料,终于是做出来了,如果有问题请指出。
效果图,无人机可以来回移动
这里是核心代码
// 添加飞机点位图层let vectorLayerpointfunction 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;}