OpenLayers经纬度轨迹绘制全攻略：从坐标系转换到动态回放

在Web GIS开发里，“根据经纬度画轨迹”是我遇到咨询频率最高的一类需求。无论是做车辆路径回放、人员运动轨迹、户外运动记录，还是物流配送路线展示，核心逻辑都是同一套：拿到一系列经纬度坐标点，在OpenLayers地图上把它们连成一条线。听起来很简单，但实际操作中有不少细节会影响最终效果——坐标顺序写反了、坐标系没对齐、线段跨日期变更线、点太多导致卡顿……这些问题我在项目里都踩过。这篇就把从零到一在OpenLayers上实现经纬度轨迹绘制的完整思路、代码和避坑记录写下来，希望能帮你少走点弯路。

适合看的读者：刚接触OpenLayers的前端开发者、需要在业务系统里做轨迹展示的工程师，以及准备做车辆/人员轨迹回放功能但还没想清楚技术方案的同学。不需要深厚的地理信息基础，我会把坐标系、矢量图层这些底层概念也一并讲清楚。

1. 画轨迹之前，先搞清楚几件容易被忽略的事

1.1 经纬度坐标的本质：不是所有“坐标”都能直接拿来画线

很多第一次做轨迹功能的开发者容易把经纬度当成普通的平面坐标直接使用，结果画出来的线要么位置不对，要么干脆不显示。这里先明确一个基础概念：经纬度是球面坐标，单位是度；而浏览器上的地图是平面显示，OpenLayers内部会把球面坐标投影到平面坐标系里。所以真正的流程是：收集经纬度 → 做投影转换 → 在投影后的平面上连线。

OpenLayers对这件事做了封装，默认的坐标系设置就能帮我们处理大部分转换问题。但如果你拿到的轨迹数据不是标准的WGS84经纬度，而是某个地方坐标系、或者投影坐标系下的坐标，那必须先转换成WGS84才能正确显示。这一点在对接硬件设备、物流系统时尤其常见，后面我会专门讲。

1.2 轨迹数据的最小结构：一串有序坐标点

轨迹的本质是一串有序经纬度点。所谓有序，是指点的先后顺序代表时间上的先后和路线的走向。举个直观的例子：

[ [116.391, 39.907], [116.392, 39.908], [116.394, 39.909], ... ]

每个数组里的第一项是经度，第二项是纬度。这个顺序在代码里写错的后果很典型：轨迹线直接跑到地图之外，或者画出来是一团乱麻。我见过不少新手把经纬度搞反，因为国内习惯说“纬度经度”，而GIS标准里通常是“经度维度”。

提示：写代码前先在数据层约定好坐标数组的统一格式，最好是[lng, lat]，并且在注释里标明。这个约定能避免很多低级错误。

1.3 一次轨迹绘制需要哪些组成部分

从OpenLayers的架构来看，画一条轨迹需要四样东西配合：

1. 地图容器（Map）：承载一切显示的页面元素，核心是底图图层。
2. 矢量图层（Vector Layer）：专门用来显示点、线、面这类矢量数据的图层。轨迹线放在这里，而不是直接画在底图上。
3. 数据源（Source）：轨迹坐标点的集合，OpenLayers用Source对象管理这些数据。
4. 要素（Feature）+样式（Style）：Feature代表一条具体的几何对象（比如一条线段），Style决定它长什么样——颜色、宽度、虚线还是实线。

把四者的关系用一句大白话概括：地图是画板，矢量图层是透明纸，Source是透明纸上的数据台账，Feature和Style是画在透明纸上的一条条线及其外观配置。

2. 搭一个能跑起来的OpenLayers基础地图

在动手画轨迹之前，先确保地图本身能正常显示。这一节我们完成环境准备和底图初始化，所有代码都基于OpenLayers的CDN方式引入，方便你直接复制运行。

2.1 引入OpenLayers的两种方式

方式一：使用CDN链接，在HTML里直接引入。适合快速原型验证、学习测试。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.1.0/ol.css" /> <script src="https://cdn.jsdelivr.net/npm/ol@v10.1.0/dist/ol.js"></script>

方式二：使用npm安装，适合正式工程化项目。

npm install ol

然后在代码里按需引入。

import Map from 'ol/Map'; import View from 'ol/View'; import TileLayer from 'ol/layer/Tile'; import OSM from 'ol/source/OSM';

我建议学习阶段用CDN，把注意力放在轨迹绘制逻辑上；等真正集成进业务系统时再切npm。因为CDN方式里的ol是全局对象，所有API都挂在ol下，写起来和npm引入的模块化方式略有差异，混着用容易懵。

2.2 用几行代码初始化一张底图

下面是最小可运行的地图初始化代码。底图用的是OpenStreetMap（OSM），它是免费的瓦片源，适合开发和演示。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>OpenLayers轨迹绘制示例</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.1.0/ol.css" /> <style> #map { width: 100%; height: 600px; } </style> </head> <body> <div id="map"></div> <script src="https://cdn.jsdelivr.net/npm/ol@v10.1.0/dist/ol.js"></script> <script> // 1. 创建地图 const map = new ol.Map({ target: 'map', // 地图挂载到页面上 id 为 map 的容器 layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: [116.391, 39.907], // 经纬度，但是这里直接写会有问题，见下面注释 zoom: 12 }) }); </script> </body> </html>

注意上面代码里，center如果直接写经纬度，地图会显示不正常。因为ol.View的center属性期望的是投影坐标，而不是经纬度。OpenLayers默认使用Web Mercator投影（EPSG:3857），所以需要先把经纬度转成该投影下的坐标，用ol.proj.fromLonLat这个方法。

const map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([116.391, 39.907]), zoom: 12 }) });

ol.proj.fromLonLat([经度, 纬度])会把WGS84经纬度坐标转换为EPSG:3857投影坐标。这是整个轨迹绘制链路中最基础也最容易被忽略的一步——所有进入OpenLayers的经纬度，最后都要走这一层转换。

2.3 为什么是EPSG:3857，而不是WGS84

这里多解释几句坐标系的关系。我们平时用的GPS设备、手机定位拿到的经纬度，基于的是WGS84椭球体坐标系，它是一套全球统一的地理坐标系。而Web地图（包括OSM、各家互联网地图的Web版）通常采用Web Mercator投影，官方编码是EPSG:3857，它把球面经纬度投到平面，方便浏览器渲染。

OpenLayers的ol.View必须指定一个投影体系，默认就是EPSG:3857。所以画轨迹前，脑子里的“坐标系地图”得是这样一张表：

如果你的轨迹数据本身已经是EPSG:3857投影坐标，那就不用转，直接丢给ol.View和图层Source即可。但绝大多数业务场景拿到的都是GPS经纬度，所以fromLonLat是高频函数。

3. 核心实现：从经纬度数组到屏幕上的轨迹线

底图就绪，接下来是重头戏：把一串经纬度坐标变成一条可见的轨迹线。整个过程可以拆解为“创建矢量图层 → 构建轨迹几何 → 设置样式 → 添加到地图”，下面逐步说明。

3.1 准备一组模拟轨迹数据

先造一组有方向感、有拐弯的坐标数据，方便验证效果。我在这里模拟了一条从北京城区某点出发、向东再往南的折线路径，这7个点的顺序非常关键，代表了运动轨迹的方向。

// 模拟轨迹数据：一组经纬度 [经度, 纬度]，顺序不能乱 const trackPoints = [ [116.391, 39.907], [116.398, 39.906], [116.405, 39.902], [116.412, 39.896], [116.420, 39.891], [116.428, 39.884], [116.435, 39.876] ];

实际业务里，这组数据通常来自后端接口，可能是JSON数组，也可能是GPX轨迹文件解析后的结果。但无论来源怎么变，最终我们需要的都是一个二维数组：[[lng, lat], [lng, lat], ...]。

3.2 创建矢量图层和Source

轨迹线属于矢量要素，所以要创建一个矢量图层，并给它配一个Source，用来存放轨迹数据。

// 创建矢量图层 const vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector() }); // 把这个图层添加到地图上（加在底图图层之后，确保显示在底图上面） map.addLayer(vectorLayer);

这里有个小知识点：ol.source.Vector是矢量数据的管理容器，它可以同时容纳多个Feature。比如你既要显示轨迹线，又要显示轨迹起点和终点的标记点，就可以往同一个Source里加多个Feature，这会方便很多。

3.3 构造轨迹线几何对象

OpenLayers里，线是ol.geom.LineString类型。构造它时，传入的坐标数组同样必须是投影坐标，所以要对原始经纬度逐点转换。

// 将经纬度数组转换为投影坐标数组 const projectedCoords = trackPoints.map(function (coord) { return ol.proj.fromLonLat(coord); }); // 用投影坐标创建一条线要素 const lineFeature = new ol.Feature({ geometry: new ol.geom.LineString(projectedCoords) });

写完这段代码，轨迹的“几何形状”就已经生成了。但此时它还看不出颜色和粗细，把这些外观信息交给Style处理。

3.4 配置轨迹的显示样式

Style是整个绘制流程里最出效果的一环，也是最容易自定义的部分。先来一个最简单可用的配置：

lineFeature.setStyle(new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#3388ff', // 轨迹线颜色，可以换成业务主色调 width: 4 // 轨迹线宽度，单位是像素 }) }));

setStyle可以直接在Feature上设置，也可以设置在VectorLayer上统一控制。我的习惯是：如果只有一种轨迹样式，就设置在图层上；如果有多种轨迹（比如正常轨迹和异常轨迹用不同颜色），就分别设置在Feature上。

接着把Feature塞进Source里，轨迹就出现了：

vectorLayer.getSource().addFeature(lineFeature);

至此，轨迹已经能显示在地图上了。

3.5 完整示例代码整合

把上面的代码拼起来，得到一个可以完整运行的HTML页面。你也可以把trackPoints换成自己的轨迹数据，直接验证效果。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>OpenLayers轨迹绘制完整示例</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.1.0/ol.css" /> <style> #map { width: 100%; height: 600px; } </style> </head> <body> <div id="map"></div> <script src="https://cdn.jsdelivr.net/npm/ol@v10.1.0/dist/ol.js"></script> <script> // 假设的轨迹坐标 const trackPoints = [ [116.391, 39.907], [116.398, 39.906], [116.405, 39.902], [116.412, 39.896], [116.420, 39.891], [116.428, 39.884], [116.435, 39.876] ]; // 初始化地图 const map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat(trackPoints[0]), zoom: 13 }) }); // 创建矢量图层 const vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector() }); // 经纬度转投影坐标 const projectedCoords = trackPoints.map(coord => ol.proj.fromLonLat(coord)); // 创建线要素，设置样式 const lineFeature = new ol.Feature({ geometry: new ol.geom.LineString(projectedCoords) }); lineFeature.setStyle(new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#3388ff', width: 4 }) })); // 要素添加到数据源，图层添加到地图 vectorLayer.getSource().addFeature(lineFeature); map.addLayer(vectorLayer); // 让地图视野自动适配这条轨迹 map.getView().fit(vectorLayer.getSource().getExtent(), { padding: [40, 40, 40, 40], maxZoom: 16 }); </script> </body> </html>

里面多添加了一步map.getView().fit(...)，这个函数能自动调整视图范围，让整条轨迹都落在可视区域内，效果比手动指定center友好得多。对于轨迹较长、跨越范围较大的场景，这步几乎必不可少。

4. 让轨迹更实用：样式定制与运动方向表达

前面画出的是一条“素线”，但在真实业务中，轨迹往往要表达更多信息：起点在哪、终点在哪、往哪个方向走、不同路段的颜色区别。这节补充几个高频场景的做法。

4.1 起点和终点打上标记点

轨迹线光有线条，用户很难一眼看出从哪出发、到哪结束。常见的做法是在起点和终点各加一个点要素。

function createPointFeature(coordinate, color) { const pointFeature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat(coordinate)) }); pointFeature.setStyle(new ol.style.Style({ image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill({ color: color }), stroke: new ol.style.Stroke({ color: '#ffffff', width: 2 }) }) })); return pointFeature; } // 起点绿色，终点红色 const startFeature = createPointFeature(trackPoints[0], '#22aa44'); const endFeature = createPointFeature(trackPoints[trackPoints.length - 1], '#cc3333'); vectorLayer.getSource().addFeature(startFeature); vectorLayer.getSource().addFeature(endFeature);

起点用绿点、终点用红点，这是地图应用里约定俗成的视觉语言。实际项目中，还有人会在起点加一个“出库”图标，在终点加“入库”图标，做法类似，只需把ol.style.Circle换成ol.style.Icon并指定图标资源即可。

4.2 用箭头表达运动方向

轨迹回放类应用里，运动方向是重要信息。如果只用一条线，用户无法判断从A到B还是从B到A。两种常见方案：

方案一：在轨迹中间隔一定距离放置箭头图标。

// 每隔若干点放置一个箭头方向图标 // 以每相邻两个点的角度作为箭头旋转方向，这里给出简化思路 trackPoints.slice(0, -1).forEach((coord, index) => { if (index % 3 !== 0) return; // 每隔3个点放一个箭头，避免太密 const nextCoord = trackPoints[index + 1]; const angle = Math.atan2(nextCoord[1] - coord[1], nextCoord[0] - coord[0]); const arrowFeature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat(coord)) }); arrowFeature.setStyle(new ol.style.Style({ image: new ol.style.Icon({ src: 'arrow.png', rotation: -angle, scale: 0.6, anchor: [0.5, 0.5] }) })); vectorLayer.getSource().addFeature(arrowFeature); });

方案二：用ol.style.Style的renderer自定义绘制。

如果不想依赖外部箭头图片，可以自己写renderer函数，在Canvas上画小三角。这个做法更灵活，但代码量稍大：

function createArrowStyle(angle) { return new ol.style.Style({ geometry: function (feature) { return feature.getGeometry(); }, renderer: function (pixelCoordinates, state) { const ctx = state.context; const x = pixelCoordinates[0]; const y = pixelCoordinates[1]; ctx.save(); ctx.translate(x, y); ctx.rotate(angle); ctx.beginPath(); ctx.moveTo(0, 8); ctx.lineTo(-5, -6); ctx.lineTo(5, -6); ctx.closePath(); ctx.fillStyle = '#3388ff'; ctx.fill(); ctx.restore(); } }); }

我在实际项目里更倾向方案一，因为箭头图标可以由设计师统一美化，视觉一致性更好。但如果只是后台管理的内部系统，方案二够用且不依赖图片资源，也很推荐。

4.3 分段染色：根据属性显示不同颜色

有些场景下，一条轨迹要根据不同路段的属性显示不同颜色。比如物流配送里，正常路线显示蓝色，拥堵路段显示红色。做法是把一条完整轨迹“拆”成多条LineString，每条单独设置样式。

// 假设路况数据 [{ start: index, end: index, status: 'normal' }] function buildSegments(coords, segments) { const features = []; segments.forEach(segment => { const segmentCoords = coords.slice(segment.start, segment.end + 1); const segFeature = new ol.Feature({ geometry: new ol.geom.LineString( segmentCoords.map(c => ol.proj.fromLonLat(c)) ) }); segFeature.setStyle(new ol.style.Style({ stroke: new ol.style.Stroke({ color: segment.status === 'normal' ? '#3388ff' : '#cc3333', width: 4 }) })); features.push(segFeature); }); return features; }

拆线段时要注意相邻两段共用同一个坐标点，否则肉眼能看到断点。上文代码里end + 1就是为了让段与段之间首尾相接。

5. 实测高频踩坑：坐标偏移、跨日期边界与性能优化

画轨迹本身不难，难的是处理真实数据带来的各种意外。这节把我反复遇到过的四类问题展开讲讲，每一类背后都有排查思路可以复用。

5.1 经纬度数组与投影坐标混用导致的不显示或错位

现象：按前面的步骤写了代码，地图上却什么都看不见；或者轨迹线出现在海中、撒哈拉沙漠里。

排查链路：

1. 检查Source里有没有Feature：在浏览器控制台执行vectorLayer.getSource().getFeatures()，看是否返回空数组。
2. 如果有Feature，检查Feature的geometry坐标值：打印lineFeature.getGeometry().getCoordinates()，如果坐标值范围在[116, 39]这个量级，说明坐标还是经纬度，没有经过fromLonLat转换；如果数值是[12958000, 4845000]这样的大数，说明已经是投影坐标，显示位置才对。
3. 检查点顺序：如果坐标都是经度纬度两两相邻，但画出的是Z字形乱线，说明原始数据乱序。

根因：ol.View和矢量图层内部都要求坐标是投影坐标系下的数值，只有少数组件（如Overlay的position）才支持直接传经纬度。开局就把坐标体系搞清，能省下大量排查时间。

5.2 轨迹跨经度180度/日期变更线时的诡异连接线

现象：一条轨迹从东经170度到西经-170度，本来只隔了20度，画出来却横跨大半张地图，连出一条几乎绕地球一圈的长线。

根因：Web Mercator投影在东西方向上没有把跨180度经线的情况做“就近连接”处理。坐标是真实的，但显示上会把经度突变当成真实位移。

缓解方案：在数据预处理阶段做经度连续性判断。如果相邻两点经度差值绝对值大于180度，就把后一个点的经度加上或减去360度，让它跟前一个点保持连续。

function normalizeLongitude(points) { for (let i = 1; i < points.length; i++) { let delta = points[i][0] - points[i - 1][0]; if (delta > 180) { points[i][0] -= 360; } else if (delta < -180) { points[i][0] += 360; } } return points; } const trackPoints = normalizeLongitude([ [170, 10], [-170, 12], [-178, 15] ]);

这个处理只改经度值，不影响实际定位。因为经度加减360度表示的是同一个地理位置。这是在高纬度地区、境内跨境轨迹里特别有用的一个小技巧。

5.3 轨迹点过多时地图卡顿

现象：一次性绘制几千甚至几万个点的轨迹，地图缩放、拖拽时明显掉帧，鼠标滚动缩放有迟滞感。

根因：OpenLayers默认对矢量的渲染方式是逐帧重绘所有点，几千上万个坐标点会让Canvas绘制压力激增。

处理思路（由浅入深）：

1. 抽稀坐标：在服务端用Douglas-Peucker算法抽稀轨迹点；如果必须在前端做，可以用简单的“按距离抽稀”——两点距离小于阈值就跳过。
2. 简单几何体优先：轨迹线本质上是一条1像素宽的线，不需要加载每个点做复杂样式渲染。
3. 用WebGL图层渲染：OpenLayers提供的WebGL点图层对大数据量更友好，但线和复杂样式的支持不如Canvas方便，需要权衡。
4. 分段加载：地图视野范围内只加载可见部分的轨迹，缩放时按LOD策略切换粗细程度。

我在做车辆轨迹回放功能时，曾经拿到过一条包含3万个GPS点的路线，直接绘制卡成PPT。后来在服务端抽稀到2000个点以内，还原度依然很高，交互流畅多了。轨迹显示讲究的是“形状还原”，不是“点全部呈现”。

5.4 轨迹线被底图遮挡看不见

现象：矢量图层加上了，轨迹也在数据源里，但地图上只能看到底图，看不到线条。

排查链路：

• 确认矢量图层的添加顺序：map.addLayer(vectorLayer)在底图初始化之后调用，确保它叠加在底图上。如果先加了矢量图层再添加TileLayer，底图会盖住矢量。
• 确认Feature的Style有stroke配置，且颜色Alpha不为0。
• 确认线坐标确实在视野范围内，可以map.getView().fit(...)强行让视野包含轨迹范围。

这个坑常发生在把多个图层用循环统一添加时，顺序没控制好。解决方式也很简单：一是随时留意添加顺序；二是可以用map.getLayers().setAt(0, vectorLayer)把矢量图层移到最底层之上。不需要去翻阅文档，直接在控制台打印图层顺序就能定位。

6. 更进一步：轨迹回放与动态更新

画一条静态轨迹只是起点。实际业务里更常见的是轨迹回放——让轨迹线按照时间顺序动态延伸，像一笔一画把路径“描”出来。

6.1 动态追加轨迹点

核心思路：用setInterval定时往Source里添加更新后的Feature，或者直接更新已有Feature的geometry。

// 更新已有线要素的几何 function updateLine(feature, allCoords) { const projected = allCoords.map(coord => ol.proj.fromLonLat(coord)); feature.setGeometry(new ol.geom.LineString(projected)); } // 模拟实时追加坐标 let currentIndex = 1; const allTrackPoints = [...]; // 完整轨迹 const timer = setInterval(() => { if (currentIndex >= allTrackPoints.length) { clearInterval(timer); return; } const currentCoords = allTrackPoints.slice(0, currentIndex + 1); updateLine(lineFeature, currentCoords); currentIndex++; }, 500);

效果是轨迹线每隔500毫秒延长一段，直到整个轨迹画完。这就是最简单的轨迹回放雏形。

6.2 配套移动点与视野跟随

轨迹回放通常还要加一个“当前点”标记，并让视野跟着移动。做法很简单：在回放时更新标记点的坐标，并平滑移动View中心。

const movingMarker = createPointFeature(allTrackPoints[0], '#ff8800'); vectorLayer.getSource().addFeature(movingMarker); // 在setInterval内部： const currentCoord = allTrackPoints[currentIndex]; movingMarker.getGeometry().setCoordinates(ol.proj.fromLonLat(currentCoord)); map.getView().animate({ center: ol.proj.fromLonLat(currentCoord), duration: 400 });

setCoordinates更新点要素的几何位置，animate让视野平滑过渡。这种“轨迹线逐步伸长 + 移动点标出当前位置 + 视野跟着走”的组合，已经足够应付多数轨迹回放场景。

6.3 清空轨迹与图层复用的最佳实践

切换不同车辆、不同日期的轨迹时，需要清空旧轨迹再画新轨迹。正确做法不是把整个图层移除重建，而是清空Source里的Features再重新添加。

// 清空矢量图层中的所有要素 vectorLayer.getSource().clear(); // 再次往里面添加新的线要素、点要素 vectorLayer.getSource().addFeature(newLineFeature);

这样做的好处是图层本身还保持着跟地图的连接，样式、事件绑定都不会丢。清空后添加新Feature的方式，无论在React还是Vue项目里都更可控。

7. 写在最后：几件画轨迹时的私藏建议

这节算不上知识体系，纯粹是我自己在多个项目里沉淀下来的一些习惯，写出来给你参考。

第一，所有坐标落库时统一存成WGS84经纬度，不要存投影坐标。投影坐标和特定底图绑定，换底图就乱了；WGS84是全球统一基础坐标系，任何地图平台都能适配。前端展示时再转投影，性能影响很小。

第二，给轨迹线几何加上一个类型标识。比如在Feature上设置trackType: 'mainRoute'之类的属性，后续需要按路线分组、做点击高亮、切换样式时，判断属性比遍历geometry坐标方便得多。

第三，先做一个只有一条轨迹的Demo，再去做列表联动、轨迹回放、分段染色。轨迹绘制虽然代码不多，但涉及坐标系、图层、Feature、Style四个概念，一步到位容易出问题。先把单条轨迹跑通，其他场景都是在这条主线上加戏。

第四，轨迹数据的质量直接影响展示效果。GPS设备在隧道、高架下容易丢星，产生漂移点，直观表现就是轨迹线突然飞出几百米再飞回来。面对这类数据，前端可以做好缓存和过滤，但更稳妥的做法是在服务端清洗漂移点，前端收到的就是一条干净路线。前端的“画”和后端的“洗”，永远是配合关系。

我在真实项目里最常用到的组合，是这条完整链路：服务端下发GPS经纬度序列 → 前端判断是否需要做经度连续性处理 → 转投影坐标 → 构造LineString → 设置样式 → 按需分段着色 → 加终点标记 → 配合地图自适应缩放。把这个链路跑熟，无论以后是接无人机航线、外卖配送轨迹，还是运动App的跑步路径，都能触类旁通。

如果你正在做的项目刚好涉及轨迹相关的功能，欢迎按文中的示例代码先跑通一条线，再对照实际数据调整。遇到画不出来、方向不对、轨迹乱飞的情况，回头看看第5节的内容，大概率能找到突破口。