做课程作业、毕业设计或者参加 WebGIS 比赛的时候，经常绕不开一个问题：需要在网页里展示一段“飞行视角”或者“自动漫游”的效果。有的项目要求从 A 点飞到 B 点，有的要求沿着一条线路把城市模型看一遍，还有的只要求在 2D 地图上平滑移动。这个时候就会出现三款库同时被推荐的场面：OpenLayers、Mapbox、Cesium。很多人第一反应是把三个库都学一遍，其实没必要。先说结论：OpenLayers 适合 2D 地图数据展示，Mapbox GL JS 适合带倾角的地图飞行，CesiumJS 适合真三维场景和模型漫游。三者的“飞行视角”实现思路完全不同，本文会用一套通用示例分别跑通三套方案，并给出代码、部署步骤、常见坑和性能优化建议。
本文不是入门概念科普，而是直接告诉你每个库能做什么、不擅长什么、写出来的代码怎么用。你会看到：
- OpenLayers 如何用
view.animate做 2D 视角移动和路线巡航； - Mapbox GL JS 如何用
flyTo做带倾角和偏航角的飞行切入； - CesiumJS 如何用相机
flyTo、实体轨迹跟踪实现三维漫游； - 三个库在课程设计、毕设和比赛中的选型建议；
- 路由点位、GeoJSON、底图服务、接口封装和批量任务怎么做；
- 常见的空白、偏移、卡顿、动画丢失问题如何排查。
这里没有固定的显存门槛，因为三个都是前端渲染库，跑在浏览器里，主要吃 CPU、GPU 和内存。你的开发机只要能正常开一个 3D 网页，基本都能跑。下面直接进入正文。
1. 核心能力速览
1.1 三件套能力对比
| 能力维度 | OpenLayers | Mapbox GL JS | CesiumJS |
|---|---|---|---|
| 项目定位 | 经典 WebGIS 2D 地图库 | 矢量切片与 3D 倾斜地图 | 三维数字地球与大规模场景 |
| 飞行视角方式 | 平滑移动 center / zoom，非真实透视 | flyTo/easeTo带 pitch、bearing | camera.flyTo/camera.setView/ 实体跟踪 |
| 默认 3D 地形 | 不支持 | 支持栅格地形 DEM 叠加 | 支持全球地形与 3D Tiles |
| 自带底图 | 不内置，需自己接 OSM、天地图等 | 需要 access token，用 Mapbox 样式服务 | 默认 Cesium ion 全球影像，需要 token |
| 主要适用场景 | 图层管理、GeoJSON 展示、坐标量算 | 数据可视化 + 带倾斜的“飞行切入”动效 | 城市级三维场景、建筑模型、模拟飞行 |
| 课程设计友好度 | 高，无账号也能跑 | 中，需 token，但示例很多 | 中，无 token 需要自己准备底图 |
| 扩展能力 | WMS/WMTS/MVT/GeoJSON | 自定义样式、地形、建筑模型 | glTF、3D Tiles、粒子、雷达波等 |
从表格可以看出，三件套并不是竞争关系，而是各自覆盖 WebGIS 开发的不同层次。做“飞行视角-漫游”的时候，应该先想清楚目标是 2D 还是 3D，再决定用哪套。
1.2 飞行视角漫游方案速选
判断逻辑很简单：
- 如果只是地图上两个点之间平滑移动，看不到倾斜和透视效果，选择 OpenLayers。
- 如果要看到“飞机飞过去”的感觉，视角带俯仰角、方向偏转和距离拉近，选择 Mapbox GL JS。
- 如果场景里有建筑模型、3D Tiles、地形夸张、或者要沿着路线进行第一人称 / 第三人称浏览，选择 CesiumJS。
本文的三套示例都采用“多航点连续飞行”这个思路：事先定义一个巡航点数组，每个点包含经纬度、高度、朝向、俯仰角，然后让地图库逐个飞过去。这样既是一个完整的课程演示，也能直接扩展成比赛作品中的“自动巡检”功能。
2. 适用场景与使用边界
2.1 课程设计、毕设、比赛分别怎么选
课程作业更适合 OpenLayers，原因是它不需要 account token，不依赖第三方底图服务，全本地代码就能把地图跑起来。做图层切换、点线面标注、查询定位、简单路径移动时，OpenLayers 是最好交差的方案。
毕设如果做地理信息管理系统，比如校园地图、交通监控、城市设施管理，推荐 Mapbox GL JS。Mapbox 的矢量底图视觉效果好，pitch加bearing的组合能在一屏内展示出类似三维的透视感，代码量又比 Cesium 少很多。用于演示“飞行到某个小区”“飞行到某条路线起点”非常合适。
比赛作品如果是智慧城市、数字孪生、仿真模拟，重点往往在三维效果上，建议直接使用 CesiumJS。Cesium 可以加载倾斜摄影模型、3D Tiles、建筑白模、地形高程，飞行漫游的镜头可控性也最强。缺点是前期学习曲线比前两者陡，需要在数据准备和场景构建上多花时间。
2.2 使用前的合法边界与数据合规
WebGIS 项目里最容易翻车的地方不是代码，而是数据和底图使用边界：
- 公开底图服务都有自己的服务条款，个人学习、课程演示可以用，商用和公开发布前要看清楚授权范围。
- 从其他网站抓取瓦片、复制加密图层、下载离线地图包再分发，都可能涉及数据版权风险，不建议在毕设或比赛作品里这么做。
- 使用带坐标偏移的服务时，不要混用不同坐标系的数据，否则会出现“底图正常，业务点全部偏移”的经典问题。
- 项目里如果使用真实建筑物、道路、影像数据，建议只使用公开合规渠道提供的数据，并在作品文档中注明数据来源与使用许可。
- 发布到公网的应用要注意 token 泄露问题。Mapbox 和 Cesium ion 的 access token 应该做域名白名单限制，不能让密钥被随意复制使用。
这些内容不会直接决定你的功能能不能实现，但会影响你的作品能不能顺利评审、能不能公开演示。
3. 环境准备与基础搭建
3.1 开发环境要求
三个库本质上都是前端 JavaScript 库，因此环境要求非常统一：
| 环境项 | 建议配置 | 说明 |
|---|---|---|
| 操作系统 | Windows 10/11、macOS、Linux 均可 | 无特殊限制 |
| 浏览器 | Chrome / Edge 最新版 | 需要 WebGL 支持 |
| 开发工具 | VS Code + Live Server 或 Vite | 纯 HTML 也可以 |
| Node.js | 建议 LTS 版本 | 使用 npm 安装依赖时需要 |
| 显卡驱动 | 更新到最新版 | 3D 场景渲染异常时先查驱动 |
| 网络 | 能访问底图服务 | 底图加载快慢影响体验 |
不要求很高的 GPU 算力，这三个库的官方示例用集成显卡也能跑。Cesium 加载大型模型时对显存有要求，但这个消耗会根据模型大小动态变化。本文不承诺具体显存数字，你自己运行时可以在任务管理器里观察 GPU 的 Dedicated GPU memory 占用。
3.2 工程创建方式
最简单的验证方式是先用 Vite + Vanilla JS 工程跑通，之后再往项目里整合。命令如下：
npm create vite@latest webgis-flight -- --template vanilla cd webgis-flight npm install npm install ol mapbox-gl cesium安装完成后的目录结构如下：
webgis-flight/ ├── index.html ├── package.json ├── src/ │ ├── main.js │ ├── style.css │ └── ...如果你不想用构建工具，也可以直接在 HTML 文件里引用三个库的 CDN。但 CDN 方式有两个问题：一是版本变化快，代码复制之后可能因为版本不同而报错；二是离线和内网电脑无法运行。因此本文示例以 npm 安装、构建工具运行为主。
3.3 token 准备说明
OpenLayers 不需要 token。Mapbox 需要先到官网注册账号并创建一个 access token，示例代码中需要把mapboxgl.accessToken替换成自己的 token。CesiumJS 也需要 Cesium ion 账号，获取 token 后再设置Cesium.Ion.defaultAccessToken。
作为替代方案，Cesium 可以不依赖 ion 底图，直接使用 OSM 瓦片或者本地准备好的影像服务。代码中会给出两种写法的差异。
3.4 巡航点数据结构设计
为了让后面的代码通用，把巡航点先设计成 JSON 格式。这样课程作业、毕设或者比赛中，只需要修改 JSON 点位，不需要频繁改代码：
[ { "lon": 120.15, "lat": 30.28, "height": 800, "heading": 0, "pitch": -30 }, { "lon": 120.09, "lat": 30.24, "height": 1200, "heading": 45, "pitch": -25 }, { "lon": 120.07, "lat": 30.20, "height": 500, "heading": 120, "pitch": -40 } ]字段说明：
lon/lat：巡航目标点的经纬度；height：镜头高度，单位为米；heading：镜头朝向，0 度表示正北方向；pitch：俯仰角，负数表示向下看。
这段数据显示的是示例轨迹，实际项目中替换成自己业务的线路即可。不同库对经纬度和投影坐标的处理不一样，真正动手开发时要注意坐标转换。
4. 使用 OpenLayers 实现 2D 视角漫游
4.1 初始化 OpenLayers 地图
OpenLayers 默认使用 Web Mercator 投影坐标，因此传入经纬度前要先用fromLonLat转换。创建一个基础地图的代码如下：
import 'ol/ol.css'; import Map from 'ol/Map.js'; import View from 'ol/View.js'; import TileLayer from 'ol/layer/Tile.js'; import OSM from 'ol/source/OSM.js'; import { fromLonLat } from 'ol/proj.js'; const map = new Map({ target: 'map', layers: [ new TileLayer({ source: new OSM() }) ], view: new View({ center: fromLonLat([120.15, 30.28]), zoom: 10 }) });这时页面会出现一个 2D 地图。代码里使用 OSM 底图是为了减少环境依赖，正式项目中可以换成天地图、GeoServer 发布的 WMS 服务或自己的瓦片库。
4.2 使用 view.animate 实现两个点之间的视角切换
OpenLayers 的“飞行视角”，本质是View对象的中心点和缩放级别动画。下面这段代码演示点击地图后，平滑移动到下一个点位：
const waypoints = [ [120.15, 30.28], [120.09, 30.24] ]; let currentIndex = 0; function flyToNext() { if (currentIndex >= waypoints.length) { currentIndex = 0; return; } const next = waypoints[currentIndex]; const view = map.getView(); view.animate({ center: fromLonLat(next), zoom: 14, duration: 2500, easing: function (t) { return t; } }); currentIndex++; } map.on('singleclick', flyToNext);执行后，每次点击地图都会触发一次中心点移动，同时缩放级别提升到 14。看起来像“镜头飞过去”，但因为没有透视变化，只能算 2D 平移动画。
4.3 OpenLayers 多段路线自动巡航
如果要把多个点串成一条航线，可以结合setTimeout循环执行。注意动画执行过程中再次调用animate，OpenLayers 会把它加入动画队列，效果是连续切换目的地：
const route = [ [120.15, 30.28], [120.12, 30.25], [120.09, 30.24], [120.07, 30.20] ]; let routeIndex = 0; let cruising = false; function playCruise() { if (!cruising) return; if (routeIndex >= route.length) { routeIndex = 0; setTimeout(playCruise, 1000); return; } const next = route[routeIndex]; map.getView().animate({ center: fromLonLat(next), zoom: 14, duration: 3000 }); routeIndex++; setTimeout(playCruise, 3200); } function startCruise() { cruising = true; playCruise(); } function stopCruise() { cruising = false; map.getView().cancelAnimations(); } document.getElementById('startBtn').addEventListener('click', startCruise); document.getElementById('stopBtn').addEventListener('click', stopCruise);这里使用cancelAnimations()强制清空动画队列，适合停止巡航时使用。按钮的点击事件需要页面存在对应startBtn和stopBtn元素，如果没有按钮，可以直接换成其他业务逻辑。
4.4 OpenLayers 飞行漫游的边界
OpenLayers 的“飞行”效果是二维坐标变化，视觉上更像“镜头平滑滚动”，没有俯仰角、没有倾斜、也没有地形高度。如果课程设计要求只要能看到点位从一个地方移动到另一个地方，那么 OpenLayers 完全够用。但如果你想做“无人机视角航拍”“沿道路贴地飞行”“模拟驾驶”这类效果，应该选择 Mapbox 或 Cesium。
另外，OpenLayers 的view.animate在连续切换多个点时，要注意setTimeout时间和动画时长之间的协调。如果定时器时间过短，后续动画可能打断前一段动画；如果过长，动画之间会有明显停顿。实际开发中可以根据航线距离动态计算duration。
5. 使用 Mapbox GL JS 实现带倾角的飞行漫游
5.1 初始化带 3D 地形的地图
Mapbox GL JS 的飞行效果接近“摄像机航拍”。初始化时可以先启用pitch和bearing，再叠加一个 DEM 地形源。示例代码如下：
import mapboxgl from 'mapbox-gl'; import 'mapbox-gl/dist/mapbox-gl.css'; mapboxgl.accessToken = '替换成自己的token'; const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/satellite-streets-v12', center: [120.15, 30.28], zoom: 10, pitch: 60, bearing: -30 }); map.on('load', () => { map.addSource('mapbox-dem', { type: 'raster-dem', url: 'mapbox://mapbox.terrain-rgb' }); map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 }); });如果使用的是streets-v12系列样式，地图默认自带一部分三维建筑，叠加地形后画面会更有“飞行”的感觉。若你的版本没有暴露 Terrain API，需要检查mapbox-gl版本和样式配置。
5.2 用 flyTo 实现单点飞行
map.flyTo是 Mapbox 最常用的飞行方法，它可以同时控制视角的终点、缩放级别、俯仰角和偏航角。代码如下：
map.flyTo({ center: [120.09, 30.24], zoom: 15, pitch: 70, bearing: 60, duration: 4000, essential: true });essential设置为true后，即使用户系统开启了“减少动态效果”等辅助功能，系统也会尽量保留这段动画，减少因为系统设置导致动画被禁用的问题。
5.3 Mapbox 连续航线巡航
多个点位的连续巡航，可以在每次flyTo结束后监听moveend事件，再触发下一个点。核心代码：
const route = [ { center: [120.15, 30.28], zoom: 13, pitch: 60, bearing: 0 }, { center: [120.09, 30.24], zoom: 16, pitch: 75, bearing: 120 }, { center: [120.07, 30.20], zoom: 14, pitch: 65, bearing: 240 } ]; let routeIndex = 0; let flying = false; function flyNext() { if (!flying) return; if (routeIndex >= route.length) { routeIndex = 0; setTimeout(flyNext, 800); return; } const target = route[routeIndex]; map.flyTo({ ...target, duration: 3000, essential: true }); routeIndex++; map.once('moveend', () => { if (flying) { setTimeout(flyNext, 600); } }); } function startFlight() { flying = true; flyNext(); } function stopFlight() { flying = false; map.stop(); } document.getElementById('startFlightBtn').addEventListener('click', startFlight); document.getElementById('stopFlightBtn').addEventListener('click', stopFlight);这段代码把每个巡航点都定义成对象，后面的flyNext展开对象传入flyTo。注意在动画结束后必须调用一次map.stop()，否则用户手动拖拽地图时,可能残留原来的动画状态。
5.4 token 使用与安全
Mapbox 的 token 分为公开发布 token 和密钥 token。网页前端会直接暴露 token 字符串，因此需要在 Mapbox 后台设置 URL 白名单，只允许特定域名使用。课程设计和比赛提交的代码如果包含 token，建议同时准备一个空的演示 token 说明文档，避免自己的额度被滥用。
Mapbox 官方样式和服务在中国大陆网络环境下加载速度不稳定，实际部署时要根据目标用户网络环境选择底图服务，不能直接把演示代码当成公网生产代码。如果必须要完全离线部署，建议改用 OpenLayers 加本地瓦片或者 Cesium 加本地底图。
6. 使用 CesiumJS 实现三维飞行视角漫游
6.1 初始化 Cesium 场景
CesiumJS 最适合做“飞行视角-漫游”，因为它有完整的相机对象、时间轴系统和 3D Tiles 支持。先初始化一个基本场景：
import * as Cesium from 'cesium'; import 'cesium/Build/Cesium/Widgets/widgets.css'; Cesium.Ion.defaultAccessToken = '替换成自己的ion token'; const viewer = new Cesium.Viewer('cesiumContainer', { animation: true, timeline: true, baseLayerPicker: true, geocoder: true });如果不希望使用 Cesium ion 底图，可以改成不加载 default 底图，然后手动接入 OSM 瓦片：
const viewer = new Cesium.Viewer('cesiumContainer', { baseLayer: false, baseLayerPicker: false, geocoder: false }); viewer.imageryLayers.addImageryProvider( new Cesium.OpenStreetMapImageryProvider({ url: 'https://tile.openstreetmap.org/' }) );baseLayer: false会在部分 Cesium 版本中生效，你的版本如果提示参数不存在，可以改为imageryProvider: false或使用viewer.imageryLayers.removeAll()后再添加图层。具体以所安装版本的 API 为准。
