HTML5 WebGL 实现民航客机飞行监控系统

realVector.setLength(oldLength);

realEye = realVector.clone().add(centerV);

// 防止移动角度大于 180 度，视角反转
if (oldAngle > Math.PI / 2) {
realEye.negate();
}

e.newValue[0] = realEye.x;
e.newValue[1] = realEye.y;
e.newValue[2] = realEye.z;
}
}
})
}

飞机监控系统

当然作为监控系统，自然要有监控了，增加右下角的小地图，并提供三种模式，分别是聚焦飞机，聚焦飞行轨迹和聚焦地图，并根据飞机的飞行方向控制飞行轨迹的流动效果，其中聚焦飞机会跟随飞机移动进行 fitData ，使飞机一直处于小地图的中心，代码如下：

var fitFlowP = function (e) {
if (e.property === 'position' && e.data === plane) {
mapGV.fitData(plane, false);
}
};
buttonP.s({
'interactive': true,
'onClick': function (event, data, view, point, width, height) {
map.a('fitDataTag', 'plane2D');
mapGV.fitData(plane, false);
mapDM.md(fitFlowP);
}
});
buttonL.s({
'interactive': true,
'onClick': function (event, data, view, point, width, height) {
mapDM.umd(fitFlowP);
map.a('fitDataTag', 'flyLine');
mapGV.fitData(flyLine, false);
}
});
// ...省略

增加鼠标移到飞机相应位置进行名称的提示、双击后显示飞机相应位置的信息面板并将视角聚焦到面板上、点击飞机任意地方切换回飞机飞行模式等效果。

左侧增加监控面板替代上面提到的双击相应位置这步操作直接聚焦到相应位置的信息面板上，这里按钮开启了交互并添加了相应的交互逻辑，代码如下：

button_JC.s({
'interactive': true,
'onClick': function (event, data, view, point, width, height) {
event.preventDefault();
let g3d = G.g3d,
g3dDM = G.g3d.dm();
g3d.fireInteractorEvent({
kind: 'doubleClickData',
data: g3dDM.getDataByTag(data.getTag())
})
}
});
//...省略