无人机地面站（GCS）里的地图轨迹功能，本质上要把一个个携带经纬度、高度和时间戳的遥测点，实时转换成地图上连续、可读的飞行路径。这个需求看似只需要把点连起来，但在实际工程中会碰到两个主要问题：一是遥测数据到达频率不稳定，二是原始坐标存在跳变和噪声。jQuery在这种场景里并不是绘图引擎，它更适合做数据请求、DOM状态管理和视图层的协调工作。下面围绕这一思路，从绘制方案、平滑算法和性能优化几个角度展开。
一、GCS轨迹实时绘制的难点与jQuery的定位
无人机回传的遥测数据通常由飞控通过数传链路发送到地面站，常见频率为1Hz到10Hz不等。这个频率并不稳定，尤其在距离较远或信号受遮挡时，数据包可能出现几百毫秒的延迟，随后又一次性到达多个点。如果页面收到一个点就立刻重绘整条轨迹，DOM更新会非常频繁，地图容器很容易出现卡顿。
另一个难点是坐标投影。GPS模块输出的是WGS84经纬度，而地图组件内部使用屏幕像素或墨卡托投影坐标。如果直接拿经纬度数值进行平滑计算，纬度方向的距离缩放会失真。正确做法是先把经纬度转换为地图投影坐标，再在投影坐标系里做平滑处理，最后交给地图组件渲染。jQuery在这个链路里可以封装坐标转换、管理轨迹图层状态，并通过事件机制控制绘制节奏。
从职责划分看，jQuery负责管理页面上的控制按钮、状态提示、图层显隐，以及通过$.ajax或WebSocket回调接收数据。真正的高频绘制交给<canvas>或SVG完成。这样能把频繁的DOM操作降到最低，同时保留jQuery在交互逻辑上的便利性。
二、基于jQuery与Canvas的实时绘制链路
在页面中放置一个<canvas>元素覆盖在地图上方，jQuery负责在窗口尺寸变化时调整画布大小，并控制显示与隐藏。下面是一个基础的HTML结构：
<div id="map-container" style="position: relative; width: 100%; height: 600px;"> <div id="map" style="width: 100%; height: 100%;"></div> <canvas id="track-canvas" style="position: absolute; left: 0; top: 0; pointer-events: none;"></canvas> </div>
地图组件可以使用Leaflet或OpenLayers，这里不展开。关键是<canvas>的pointer-events要设为none，避免遮挡地图的拖拽和缩放操作。jQuery初始化画布尺寸时，需要监听地图容器的resize事件，同时调用getBoundingClientRect获取实际宽高，保证绘制坐标与地图像素对齐。
数据接收端可以用$.ajax轮询，也可以使用WebSocket推送。每次收到新点时，不要立即重绘，而是把点存入一个数组，然后通过requestAnimationFrame统一调度绘制。下面是一个简化版的实时绘制逻辑：
var trackPoints = [];
var canvas = document.getElementById('track-canvas');
var ctx = canvas.getContext('2d');
function resizeCanvas() {
var container = $('#map-container');
canvas.width = container.width();
canvas.height = container.height();
}
$(window).on('resize', resizeCanvas);
resizeCanvas();
function addPoint(lng, lat) {
var projected = map.latLngToContainerPoint([lat, lng]);
trackPoints.push({ x: projected.x, y: projected.y });
if (trackPoints.length > 1) {
requestAnimationFrame(drawTrack);
}
}
function drawTrack() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(trackPoints[0].x, trackPoints[0].y);
for (var i = 1; i < trackPoints.length; i++) {
ctx.lineTo(trackPoints[i].x, trackPoints[i].y);
}
ctx.strokeStyle = '#00a8ff';
ctx.lineWidth = 2;
ctx.stroke();
}
这段代码的核心在于map.latLngToContainerPoint把经纬度转换成当前地图视图下的容器像素坐标。这样当地图缩放或平移时，已经生成的轨迹点需要重新投影，否则轨迹会与底图错位。实际工程中，一般在地图moveend事件里重新计算所有点并重绘。
jQuery在这里可以监听地图事件，比如用$('#map').on('moveend', redrawTrack)触发重绘。如果轨迹点数量很大，重绘整条线会消耗较多CPU，这时可以采用分层绘制或离屏Canvas来优化。
三、轨迹平滑算法：从移动平均到贝塞尔插值
原始遥测点直接连线会出现明显的锯齿和毛刺，尤其在GPS漂移或高度保持不稳定时。平滑处理的核心是在保持轨迹形状的前提下，抑制高频噪声。最简单的算法是滑动平均，对每个点取其前后若干点的平均值。这种算法计算量小，适合实时场景，但会造成轨迹向中心收缩，转弯处会被拉直。
function movingAverage(points, windowSize) {
var result = [];
for (var i = 0; i < points.length; i++) {
var sumX = 0, sumY = 0, count = 0;
for (var j = Math.max(0, i - windowSize); j <= Math.min(points.length - 1, i + windowSize); j++) {
sumX += points[j].x;
sumY += points[j].y;
count++;
}
result.push({ x: sumX / count, y: sumY / count });
}
return result;
}
滑动平均的窗口大小需要根据数据频率调整。对于3Hz的数据，窗口取3到5比较合适；对于10Hz的数据，窗口可以取7到9。窗口越大越平滑，但延迟也越大。无人机轨迹对实时性要求较高，不能为了平滑而引入过多滞后。
另一种常用的方法是加权移动平均，让离当前点更近的数据拥有更高权重。比如采用三角权重或指数权重。下面是一个指数加权平滑的示例，它只需要保存上一次的平滑结果，内存占用很小：
function exponentialSmooth(points, alpha) {
var result = [];
if (points.length === 0) return result;
result.push(points[0]);
for (var i = 1; i < points.length; i++) {
var prev = result[i - 1];
result.push({
x: prev.x + alpha * (points[i].x - prev.x),
y: prev.y + alpha * (points[i].y - prev.y)
});
}
return result;
}
这里的alpha取值通常在0.2到0.5之间。alpha越大，平滑结果越接近原始数据；alpha越小，轨迹越平滑但响应越慢。指数平滑的优点是计算简单，适合逐点到达的实时场景。不过它无法消除较大的孤立跳变点，需要配合离群点检测一起使用。
对于更高的视觉质量要求，可以采用贝塞尔曲线插值。二次贝塞尔曲线需要三个控制点，生成的路径更加圆润，但计算量高于滑动平均。实际工程中常用的是先做移动平均去噪，再对去噪后的关键点进行贝塞尔插值。下面是一个基于二次贝塞尔的插值实现：
function quadraticBezier(p0, p1, p2, t) {
var mt = 1 - t;
return {
x: mt * mt * p0.x + 2 * mt * t * p1.x + t * t * p2.x,
y: mt * mt * p0.y + 2 * mt * t * p1.y + t * t * p2.y
};
}
function smoothWithBezier(points, segments) {
if (points.length < 3) return points;
var result = [];
for (var i = 0; i < points.length - 2; i++) {
var p0 = points[i];
var p1 = points[i + 1];
var p2 = points[i + 2];
for (var s = 0; s <= segments; s++) {
var t = s / segments;
result.push(quadraticBezier(p0, p1, p2, t));
}
}
return result;
}
这段代码对每三个相邻点生成一段二次贝塞尔曲线，segments控制每段曲线的细分程度。需要注意的是，二次贝塞尔不会严格经过中间控制点，因此如果直接对原始点使用，轨迹可能会偏离实际飞行位置。更稳妥的做法是先把原始点做一次滑动平均，再对平滑后的点进行贝塞尔插值。
四、性能优化与异常数据处理
长时间飞行任务中，轨迹点可能达到几万个甚至更多。如果每次都全量重绘，Canvas的绘制时间会线性增长，最终导致掉帧。优化思路之一是增量绘制：已经画过的轨迹保持不变，只绘制新增的部分。Canvas 2D天然支持这种模式，只要不清除画布，新的线段会叠加在已有内容上。但当地图缩放或平移时，仍然需要全量重绘。
另一种有效方式是降采样。对于屏幕上距离很近的点，可以合并或丢弃。一个常用的规则是：如果新点与上一个已保留点的屏幕距离小于2像素，则直接跳过。这样在不影响视觉效果的前提下，能大幅减少需要绘制的顶点数量。下面是一个简单的降采样逻辑：
function downsample(points, minDistance) {
var result = [];
for (var i = 0; i < points.length; i++) {
if (result.length === 0) {
result.push(points[i]);
continue;
}
var last = result[result.length - 1];
var dx = points[i].x - last.x;
var dy = points[i].y - last.y;
if (Math.sqrt(dx * dx + dy * dy) >= minDistance) {
result.push(points[i]);
}
}
return result;
}
异常数据也需要在进入绘制队列前处理。GPS偶尔会返回明显偏离正常范围的坐标，比如突然跳到几十公里外。可以在添加点之前计算与上一个点的距离，如果超过合理阈值，比如500米，则将该点标记为断点。绘制时遇到断点就重新开始一条路径，而不是画一条横穿地图的长线。
对于高度数据，也可以用类似的方法进行限幅和滑动平均。一些地面站还会使用卡尔曼滤波对位置和速度做最优估计，但卡尔曼滤波的计算量较大，通常在地面站后端处理，前端只负责展示过滤后的结果。jQuery可以在这个链路中管理断点标记，比如在断点处显示一个图标或改变轨迹颜色。
最后要注意的是，不要在地图事件或数据回调中直接操作大量DOM。所有与绘制无关的UI更新应尽量合并，必要时使用jQuery的$.debounce或自定义节流函数。例如高度显示、电量显示等信息可以每秒更新一次，而不是每收到一个遥测包就更新。这样能把CPU资源留给轨迹绘制，保证整体界面响应流畅。