WebGIS智慧公交站点系统：Cesium+OpenLayers+PostGIS三维可视化与空间分析实战

这次我们来看一个比较完整的 WebGIS 业务案例：智慧公交站点系统。这个系统最典型的地方在于它不是单一功能 Demo，而是把“站点数据采集 → 空间数据入库 → 三维可视化展示 → 覆盖范围分析”整条链路串起来了。前端用 Cesium 搭三维大屏，用 OpenLayers 做站点采编，后端用 PostGIS 做空间分析，三套技术栈各负责一段，非常贴近实际生产项目。

从开发者的角度看，最值得关注的有几点：Cesium 负责三维站台、公交线路和覆盖范围的可视化，能直接投到指挥大屏上；OpenLayers 负责二维地图上的站点绘制、编辑和属性录入，适合日常运营维护人员使用；PostGIS 提供空间分析能力，比如站点 500 米覆盖分析、区域站点密度统计，这些不是前端随便写写就能算出来的，必须放到数据库里做空间计算。

硬件门槛不算高，普通开发机就能跑。前端主要依赖 Node.js 环境，后端需要 PostgreSQL 数据库并启用 PostGIS 扩展。如果你做过 WebGIS 开发，这套方案看起来会非常亲切；如果你是刚接触三维 GIS 和空间数据库的读者，这篇文章也会带着你把环境准备、部署启动、功能测试、常见问题都走一遍。下面进入正题。

1. 核心能力速览

这个案例的三个核心模块是互补关系。Cesium 负责“给人看”，OpenLayers 负责“给人编”，PostGIS 负责“给机器算”。很多项目只做了其中一环，比如只做三维展示，但采编环节还停留在手工填表，很容易导致三维场景里的站点位置和实际运营数据对不上。把 Cesium、OpenLayers、PostGIS 串在一起，数据从采编到展示到分析才是闭环的。

2. 系统总体架构与业务流程

2.1 架构分层

整个系统建议按标准的前后端分离方式组织。前端拆分两个页面：三维大屏页使用 Cesium，采编管理页使用 OpenLayers，两者共用一套 Vue 工程。后端负责提供空间数据接口，数据层使用 PostgreSQL + PostGIS 存储站点、线路和区域等空间数据。

前端（Vue 工程） ├── Cesium 三维大屏页 │ ├── 三维场景初始化 │ ├── 站点模型与线路渲染 │ └── 覆盖范围可视化 ├── OpenLayers 采编页 │ ├── 地图初始化 │ ├── 点/线绘制与编辑 │ └── GeoJSON 导入导出 └── 公共接口层 └── 请求后端空间数据 后端（空间数据服务） ├── 站点数据 CRUD 接口 ├── 线路数据 CRUD 接口 ├── GeoJSON 格式转换 └── 空间分析接口 数据层（PostgreSQL + PostGIS） ├── 站点表（点数据） ├── 线路表（线数据） └── 区域表（面数据）

2.2 核心业务流程

业务链路可以拆成四步：

1. 采编入库。运营人员在 OpenLayers 页面上绘制公交站点、公交线路，填写站点名称、所属线路、站点类型等属性，保存后写入 PostgreSQL。
2. 三维展示。Cesium 大屏定期从后端接口读取站点和线路数据，以三维模型、线要素的形式叠加在三维地球上。
3. 覆盖分析。管理员选择某个站点或某条线路，后端通过 PostGIS 生成缓冲区范围，计算出覆盖的小区、商圈或人口范围，把结果返回给前端。
4. 大屏联动。覆盖分析结果以热力图、缓冲区色块、统计面板的方式在大屏上展示，辅助决策。

从开发效率和维护成本来看，前端建议使用 Vue 3 工程，Cesium 和 OpenLayers 分别封装成独立组件。这样三维场景和二维采编互不干扰，后续新增功能也方便扩展。

3. 环境准备与前置条件

3.1 基础环境清单

开发调试这台系统，需要准备以下基础环境，版本以实际项目安装为准：

3.2 PostgreSQL 与 PostGIS 安装检查

PostgreSQL 安装完成后，需要确认 PostGIS 扩展可用。进入数据库命令行，执行以下检查：

-- 查看是否已安装 PostGIS 扩展 SELECT name, default_version, installed_version FROM pg_available_extensions WHERE name = 'postgis';

如果没有安装，需要执行：

CREATE EXTENSION IF NOT EXISTS postgis;

3.3 前端依赖安装

在 Vue 工程中安装 Cesium 和 OpenLayers 的依赖包。

# 进入前端工程目录 npm install cesium npm install ol

Cesium 在国内网络环境下加载默认影像服务可能会比较慢。建议先申请官方 Cesium Ion 令牌，方便在开发阶段快速看到全球影像和地形效果。如果是内网离线环境，可以通过配置 ImageryProvider 加载本地瓦片，不影响开发流程。

硬件方面，普通 i5 处理器 + 8GB 内存的机器可以跑通整条链路。Cesium 三维场景在旋转、缩放时会比较吃 GPU，如果要做大屏展示，建议使用带独立显卡的机器；OpenLayers 采编对硬件要求不高，办公电脑即可。

4. Cesium 三维大屏实现

4.1 初始化三维场景

Cesium 大屏第一个步骤是初始化 Viewer。这里以一个 Vue 组件为例，创建一个包含地形、全球影像和坐标轴提示的三维场景。

// CesiumViewer.vue 关键代码 import * as Cesium from "cesium"; import { onMounted, onUnmounted, ref } from "vue"; const viewerEl = ref(null); let viewer = null; onMounted(() => { viewer = new Cesium.Viewer(viewerEl.value, { animation: false, timeline: false, baseLayerPicker: false, geocoder: false, homeButton: false, sceneModePicker: false, navigationHelpButton: false, infoBox: false, // 如果没有申请 Cesium Ion，这里可以换成本地瓦片地址 imageryProvider: new Cesium.ArcGisMapServerImageryProvider({ url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer", }), terrainProvider: Cesium.createWorldTerrainAsync(), }); // 调整相机初始视角 viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(116.397, 39.908, 10000), orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-45), roll: 0, }, }); }); onUnmounted(() => { viewer?.destroy(); });

这里建议关闭默认的 animation、timeline、geocoder 等控件，大屏页面只需要一个干净的地球，左上角的版权和控件列表会干扰视觉效果。

4.2 加载公交站点与线路

站点数据从后端接口获取后，前端需要把点数据转换为 Cesium Entity 或 Primitive。站点数量少用 Entity 足够，数量多建议用 LabelCollection 和 PointPrimitiveCollection 提升渲染性能。

// 加载站点数据 async function loadStops(stopList) { if (!viewer) return; stopList.forEach((stop) => { viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(stop.lng, stop.lat), point: { pixelSize: 12, color: stop.isHub ? Cesium.Color.RED : Cesium.Color.AQUA, }, label: { text: stop.name, font: "14px sans-serif", pixelOffset: new Cesium.Cartesian2(0, -20), fillColor: Cesium.Color.WHITE, outlineColor: Cesium.Color.BLACK, outlineWidth: 2, style: Cesium.LabelStyle.FILL_AND_OUTLINE, }, }); }); } // 加载公交线路 function loadRoute(points, routeName) { viewer.entities.add({ polyline: { positions: Cesium.Cartesian3.fromDegreesArray(points.map(p => [p.lng, p.lat]).flat()), width: 4, material: new Cesium.PolylineGlowMaterialProperty({ glowPower: 0.2, color: Cesium.Color.DODGERBLUE, }), }, }); }

Cesium 中线路可以用PolylineGlowMaterialProperty做出发光效果，公交车辆运行方向可以用图片模型按时间轴移动实现。项目做到后期还可以添加雷达扫描、动态光照、GPU 局部雨效果等特效，这些技术在中文社区的资料比较多，但优先级要排在核心业务之后。

4.3 大屏布局与数据联动

三维大屏页一般分为三个区域：中间是 Cesium 三维场景，左右两侧是统计面板和业务面板。统计面板的数据来源可以走后端聚合接口，也可以前端实时计算，关键是要和三维场景联动。

推荐的做法是：Cesium 的点击事件负责选中站点，右侧面板展示站点详情；左侧面板展示线路车辆、覆盖统计等数据。点击站点时同步更新统计面板，这样大屏交互起来才有“智慧”的感觉。

// 点击事件拾取站点 viewer.screenSpaceEventHandler.setInputAction((clickEvent) => { const pickedEntity = viewer.pick(clickEvent.position); if (pickedEntity && pickedEntity.id) { const stopData = pickedEntity.id._stopData; updatePanel(stopData); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

5. OpenLayers 采编功能实现

OpenLayers 在智慧公交系统里承担的是数据采编职责。运营人员需要在地图上绘制站点、调整站点位置、填写属性、批量导入 GeoJSON。这个模块最好用，也最容易出问题，因为涉及到交互状态管理。

5.1 初始化采编地图

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([116.397, 39.908]), zoom: 12, }), });

如果公司有内网地图服务，可以把 OSM 换成自有瓦片地址。采编页面建议同时保留底图切换功能，方便对比不同底图的参考价值。

5.2 绘制站点与线路

绘制功能使用 OpenLayers 的Draw交互。这里要注意区分“绘制点”和“绘制线”两种状态，通过按钮切换工具栏状态。

import Draw from "ol/interaction/Draw.js"; import VectorSource from "ol/source/Vector.js"; import VectorLayer from "ol/layer/Vector.js"; const vectorSource = new VectorSource(); const vectorLayer = new VectorLayer({ source: vectorSource }); map.addLayer(vectorLayer); let drawInteraction = null; function startDraw(type) { // 先移除上一次的绘制交互 if (drawInteraction) { map.removeInteraction(drawInteraction); } drawInteraction = new Draw({ source: vectorSource, type: type, // 'Point' 或 'LineString' }); map.addInteraction(drawInteraction); drawInteraction.on("drawend", (evt) => { const geometry = evt.feature.getGeometry(); // 获取经纬度坐标，方便存储到 PostGIS const lonLat = geometry.getCoordinates(); console.log("站点坐标", lonLat); // 调起属性录入表单 openStopForm(lonLat); }); }

坐标获取时要特别留意投影转换。OpenLayers 默认使用 Web Mercator（EPSG:3857），PostGIS 中常用的空间参考是 WGS84（EPSG:4326）。存储前必须把坐标从3857转成4326，否则会出现位置偏移。

5.3 GoeJSON 导入导出

采编数据的导入导出建议统一使用 GeoJSON 格式。GeoJSON 是 WebGIS 生态的标准交换格式，Cesium、OpenLayers、PostGIS 都支持，不需要额外转换。

import GeoJSON from "ol/format/GeoJSON.js"; // 导出 GeoJSON function exportGeoJSON() { const features = vectorSource.getFeatures(); const geojson = new GeoJSON().writeFeatures(features, { featureProjection: "EPSG:3857", dataProjection: "EPSG:4326", }); // 触发下载 const blob = new Blob([geojson], { type: "application/geo+json" }); const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = "bus_stops.geojson"; link.click(); } // 导入 GeoJSON function importGeoJSON(file) { const reader = new FileReader(); reader.onload = (e) => { const geojson = e.target.result; const features = new GeoJSON().readFeatures(geojson, { featureProjection: "EPSG:3857", dataProjection: "EPSG:4326", }); vectorSource.addFeatures(features); }; reader.readAsText(file); }

属性编辑这里不建议用浏览器自带弹窗，会让交互显得非常不专业。可以做一个侧边抽屉：点击要素后显示属性表单，修改站点名称、线路编号、所属区域等信息，保存后更新要素属性。

6. PostGIS 覆盖分析实现

PostGIS 是这套系统里最容易被低估的部分。很多前端开发习惯在浏览器里做空间判断，但数据量一大，前端根本算不动。PostGIS 在数据库层面完成空间计算，效率高，索引完善，还方便和后端接口做聚合统计。

6.1 空间数据建表

站点和线路建议分别建表，空间字段统一使用geometry。站点表存储点要素，线路表存储线要素。

-- 公交站点表 CREATE TABLE bus_stop ( id SERIAL PRIMARY KEY, stop_name VARCHAR(100) NOT NULL, route_code VARCHAR(50), stop_type VARCHAR(20), geom GEOMETRY(Point, 4326) ); -- 公交线路表 CREATE TABLE bus_route ( id SERIAL PRIMARY KEY, route_name VARCHAR(100) NOT NULL, geom GEOMETRY(LineString, 4326) ); -- 空间索引是必须的 CREATE INDEX idx_bus_stop_geom ON bus_stop USING GIST(geom); CREATE INDEX idx_bus_route_geom ON bus_route USING GIST(geom);

空间数据类型和 SRID 建议统一使用 4326 或 3857，不要混用。如果项目里有其他坐标系的数据，在建表时就要做好转换计划，否则跨图层叠加时位置会漂移。

6.2 缓冲区覆盖分析

覆盖分析最常见的场景是：给定一个站点，计算它周围 500 米范围内的区域。

-- 生成站点 500 米缓冲区，并与区域表做相交统计 SELECT bs.id AS stop_id, bs.stop_name, ST_Area( ST_Transform( ST_Buffer(bs.geom::geography, 500)::geometry, 32650 ) ) AS buffer_area_m2, count(DISTINCT r.id) AS covered_region_count FROM bus_stop bs LEFT JOIN region r ON ST_Intersects( ST_Buffer(bs.geom::geography, 500)::geometry, r.geom ) GROUP BY bs.id, bs.stop_name, bs.geom;

注意这里用了::geography类型做真实的球面距离缓冲区，ST_Buffer以米为单位生成缓冲区，是符合业务直觉的。如果直接用投影坐标的ST_Buffer(geom, 500)，500 这个数字的含义取决于坐标系，很容易算错。如果想简化查询，也可以统一把几何转成投影坐标系再计算。

6.3 站点密度分析

公交线路规划中经常要评估某个区域是否站点覆盖不足。这个时候可以统计每个片区内的站点数量。

SELECT r.id AS region_id, r.region_name, count(bs.id) AS stop_count, array_agg(bs.stop_name) AS stop_list FROM region r LEFT JOIN bus_stop bs ON ST_Contains(r.geom, bs.geom) GROUP BY r.id, r.region_name ORDER BY stop_count ASC;

分析结果可以返回给前端大屏，用柱状图或热力图展示站点覆盖薄弱区域。这一步可以和 Cesium 的覆盖范围色块结合，形成“哪里缺站、哪里多站”的直观判断。

6.4 查询结果返回前端

PostGIS 查询结果建议统一封装成 GeoJSON 返回前端。这样 Cesium 和 OpenLayers 都可以直接消费，不需要前端手工拼接。

后端节点返回 GeoJSON 的核心逻辑可以这样：

// Node.js + pg 示例 const { Client } = require("pg"); const client = new Client({ connectionString: "postgres://user:pass@localhost/db" }); app.get("/api/stop/coverage", async (req, res) => { const stopId = req.query.stop_id; const result = await client.query( ` SELECT ST_AsGeoJSON( ST_Buffer(geom::geography, 500)::geometry ) AS geojson, stop_name FROM bus_stop WHERE id = $1 `, [stopId] ); res.json({ type: "Feature", geometry: JSON.parse(result.rows[0].geojson), properties: { stop_name: result.rows[0].stop_name, }, }); });

7. 前后端联调与数据流转

7.1 接口返回结构约定

前端两个页面使用的是同一份站点数据，接口最好统一返回 GeoJSON FeatureCollection。这样 Cesium 大屏和 OpenLayers 采编页都能在拿到数据后直接渲染，不需要写两套转换逻辑。

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [116.397, 39.908] }, "properties": { "id": 1, "stop_name": "公交枢纽站", "route_code": "B1", "stop_type": "hub" } } ] }

7.2 Cesium 加载接口数据

Cesium 拿到 GeoJSON 后，用Cesium.GeoJsonDataSource可以直接加载。

const dataSource = await Cesium.GeoJsonDataSource.load(geojsonUrl, { stroke: Cesium.Color.DODGERBLUE, fill: Cesium.Color.fromAlpha(Cesium.Color.DODGERBLUE, 0.3), markerSymbol: "bus", }); viewer.dataSources.add(dataSource);

GeoJSON 加载后，可以使用dataSource.entities.values统一设置样式，运行时修改站点颜色也非常方便。

7.3 OpenLayers 提交编辑数据

OpenLayers 采编页保存站点时，需要把 Geometry 坐标做投影转换。提交给后端的数据尽量统一成 WGS84 经纬度。

const feature = selectedFeature; const geometry = feature.getGeometry().clone(); geometry.transform("EPSG:3857", "EPSG:4326"); const payload = { stop_name: "新增站点", route_code: "B12", lng: geometry.getCoordinates()[0], lat: geometry.getCoordinates()[1], }; fetch("/api/stop/save", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload), });

7.4 数据更新流程

数据更新建议遵循“编辑 → 校验 → 提交 → 缓存清理”的顺序。采编页保存成功后，Cesium 大屏可以通过 WebSocket 或轮询接口刷新数据。项目早期用轮询就够了，每 30 秒拉一次站点数据，不会对后端造成压力。等业务量上来后再升级为 WebSocket 推送。

8. 性能观察与常见问题排查

8.1 三维大屏性能观察

Cesium 项目上线前，重点观察两个指标。

第一个是帧率，大屏交互旋转是否流畅。可以用浏览器开发者工具的 Performance 面板录制一段操作记录，看 Cesium 渲染线程是不是成了瓶颈。

第二个是内存占用。站点数量多、纹理丰富的场景，内存增长会比较明显。如果长时间运行后内存只涨不降，要排查是否有 Entity 或数据源泄漏。

站点展示优化建议：

• 站点数量少于 500 个：直接用 Entity 渲染，代码最简单。
• 站点数量 500 到 2000：改用 PointPrimitiveCollection 和 LabelCollection，减少 Entity 开销。
• 站点数量超过 2000：抽稀显示，或使用 3D Tiles 加载站点模型，按层级切换显示粒度。

8.2 常见问题排查

8.3 降低性能压力的实践

第一次跑通系统后，先小批量测试。只插入 100 个站点、5 条线路，观察三维大屏和采编页的交互效果。数据量改成 5000 个站点后，再对比帧率和接口响应时间。这样可以快速定位问题是在渲染层、数据层还是网络层。

批量导入站点时，建议使用 PostGIS 的COPY命令或批量插入，逐条插入会导致数据库连接压力很大。

-- 使用批量插入代替逐条插入 INSERT INTO bus_stop (stop_name, route_code, stop_type, geom) SELECT tmp.stop_name, tmp.route_code, tmp.stop_type, ST_SetSRID(ST_MakePoint(tmp.lng, tmp.lat), 4326) FROM json_to_recordset($1) AS tmp( stop_name text, route_code text, stop_type text, lng float, lat float );

9. 最佳实践与使用建议

9.1 数据管理建议

站点数据、线路数据、区域数据分开建表，不要放在一张表里。虽然查询时可以关联，但后续维护边界会模糊。站点表和线路表的空间字段都建议建 GIST 索引，覆盖分析和高频空间查询都依赖索引才能跑得快。

原始坐标和业务属性分离。站点表的geom字段只存坐标，业务信息如站点名称、运营时间、负责人放在普通字段。这样既方便空间查询，也方便业务模块扩展。

9.2 开发调试建议

前端工程建议把 Cesium 和 OpenLayers 封装成独立组件，不要在页面里直接写大段初始化和交互逻辑。Cesium 的Viewer被多次创建销毁是最容易导致内存溢出的操作，组件化可以在onUnmounted中统一清理。

开发时使用本地瓦片或离线地形能提升效率，不受外网波动影响。特别是展示给客户看大屏效果的时候，离线环境能避免突然出现灰色地球的尴尬。

Cesium 加载站点模型时注意版权和授权问题。如果使用第三方 3D 模型，要确认模型的授权范围，不要随意使用来源不明的素材。

9.3 功能扩展方向

这个案例跑通后，可以继续扩展的能力包括：

• Cesium 可视域分析、天际线分析，用于评估站点周边遮挡情况。
• 动态光照效果和三维水面渲染，增强大屏视觉表现力。
• 站点覆盖热力图，把覆盖分析结果按区域聚合，按色阶展示。
• 车辆运行轨迹回放，把实时车辆位置写成时间轴数据，Cesium 中按时间推进展示。
• 与移动端采集端联动，外勤人员在移动端上报新站点，采编页审核后入库，再同步到三维大屏。

9.4 合规提醒

如果项目中涉及真实公交站点、真实线路、人流数据，务必确认数据来源合法。站点 POI 数据可能包含版权信息，建议使用通过正规授权获取的数据。涉及乘客流量、运营数据的分析和展示，要遵守公交运营单位的保密要求。纯演示和测试环境使用虚构数据即可，不要将未授权的真实业务数据直接放到外网。

10. 总结与下一步

这个智慧公交站点系统的技术方案核心是三件事：Cesium 管三维大屏展示，OpenLayers 管数据采编，PostGIS 管空间分析。每一层技术都有明确的边界，组合起来就是一个完整可交付的业务系统。最值得优先验证的是 PostGIS 覆盖分析这条链路，先用 SQL 把站点缓冲区和区域相交算出来，再在 Cesium 里对结果做可视化，会发现数据驱动决策比前端写死可视化效果可靠得多。

最容易踩的坑集中在坐标系和缓冲区单位上。开发时先统一坐标参考，再做功能开发，能省去大量排查时间。

下一步建议先在本地把 PostgreSQL + PostGIS 环境跑起来，造 200 个模拟站点和几条线路，然后依次验证 OpenLayers 采编保存、Cesium 数据加载、PostGIS 覆盖分析。这条链路走通后，再考虑增加车辆轨迹、实时数据推送和更多三维特效。整体来说，这套方案的技术选型都是行业主流方案，可复用性高，直接复制到智慧园区、智慧管廊、城市网格管理等项目中也只是换套数据模型的问题。