這次我們來看一個比較完整的 WebGIS 業務案例智慧公交站點系統。這個系統最典型的地方在于它不是單一功能 Demo而是把“站點數據采集 → 空間數據入庫 → 三維可視化展示 → 覆蓋范圍分析”整條鏈路串起來了。前端用 Cesium 搭三維大屏用 OpenLayers 做站點采編后端用 PostGIS 做空間分析三套技術棧各負責一段非常貼近實際生產項目。從開發者的角度看最值得關注的有幾點Cesium 負責三維站臺、公交線路和覆蓋范圍的可視化能直接投到指揮大屏上OpenLayers 負責二維地圖上的站點繪制、編輯和屬性錄入適合日常運營維護人員使用PostGIS 提供空間分析能力比如站點 500 米覆蓋分析、區域站點密度統計這些不是前端隨便寫寫就能算出來的必須放到數據庫里做空間計算。硬件門檻不算高普通開發機就能跑。前端主要依賴 Node.js 環境后端需要 PostgreSQL 數據庫并啟用 PostGIS 擴展。如果你做過 WebGIS 開發這套方案看起來會非常親切如果你是剛接觸三維 GIS 和空間數據庫的讀者這篇文章也會帶著你把環境準備、部署啟動、功能測試、常見問題都走一遍。下面進入正題。1. 核心能力速覽能力項說明項目類型WebGIS 智慧公交站點系統案例核心技術棧Cesium、OpenLayers、PostGIS、Vue、GeoJSON主要功能三維大屏展示、站點采編、覆蓋范圍分析、空間查詢推薦硬件普通開發機即可獨立顯卡可提升三維渲染流暢度支持平臺Web 端跨瀏覽器啟動方式前端 npm 啟動后端需自行配置空間數據服務是否支持 API支持后端可提供 GeoJSON 格式的空間數據接口是否支持批量任務采編模塊支持 GeoJSON 批量導入導出適合場景智慧公交、智慧交通、城市三維可視化、空間分析類項目這個案例的三個核心模塊是互補關系。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 核心業務流程業務鏈路可以拆成四步采編入庫。運營人員在 OpenLayers 頁面上繪制公交站點、公交線路填寫站點名稱、所屬線路、站點類型等屬性保存后寫入 PostgreSQL。三維展示。Cesium 大屏定期從后端接口讀取站點和線路數據以三維模型、線要素的形式疊加在三維地球上。覆蓋分析。管理員選擇某個站點或某條線路后端通過 PostGIS 生成緩沖區范圍計算出覆蓋的小區、商圈或人口范圍把結果返回給前端。大屏聯動。覆蓋分析結果以熱力圖、緩沖區色塊、統計面板的方式在大屏上展示輔助決策。從開發效率和維護成本來看前端建議使用 Vue 3 工程Cesium 和 OpenLayers 分別封裝成獨立組件。這樣三維場景和二維采編互不干擾后續新增功能也方便擴展。3. 環境準備與前置條件3.1 基礎環境清單開發調試這臺系統需要準備以下基礎環境版本以實際項目安裝為準依賴項用途備注Node.js前端工程運行需要可用的 npm 或 yarnPostgreSQL后端數據庫建議安裝開源版本PostGIS 擴展空間數據存儲與分析需要在數據庫中啟用瀏覽器訪問三維大屏和采編頁面建議使用 Chrome/EdgeCesium 離子令牌Cesium 全球影像和地形離線環境可使用本地瓦片替代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 olCesium 在國內網絡環境下加載默認影像服務可能會比較慢。建議先申請官方 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 MercatorEPSG:3857PostGIS 中常用的空間參考是 WGS84EPSG: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/geojson }); 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:passlocalhost/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 常見問題排查問題現象可能原因排查方式解決方案Cesium 頁面黑屏或地球不顯示Cesium 離子令牌無效、網絡無法訪問全球影像服務打開瀏覽器 Network 面板檢查請求是否報錯申請有效令牌或配置本地瓦片源三維場景里站點位置和底圖對不上坐標參考不一致站點經緯度寫錯單位或坐標系打印 Cesium 位置坐標和原始數據比對統一存儲 WGS84 經緯度避免前端二次轉換OpenLayers 繪制后坐標偏了沒有做 EPSG:3857 轉 EPSG:4326 的轉換打印geometry.getCoordinates()和實際經緯度保存前統一執行 transform 轉換OpenLayers 頁面訪問空白依賴包版本沖突或者容器高度為 0檢查瀏覽器 Console 報錯檢查地圖容器是否有高度給地圖容器設置固定高度重新安裝依賴PostGIS 查詢特別慢沒有建空間索引或者使用了不支持索引的函數寫法EXPLAIN ANALYZE查看查詢計劃添加 GIST 索引改寫 SQL 避免全表掃描ST_Buffer計算結果和預期差很遠直接在 4326 坐標系上使用經緯度單位做半徑檢查 SQL 中緩沖半徑的單位使用geography類型或先投影再緩沖Cesium 大屏內存一直漲Entity 沒有銷毀或請求沒有釋放切換頁面后用 Performance Memory 觀察在組件卸載時 destroy Viewer及時清理數據源單位/量綱不一致導致覆蓋分析錯誤前端和后端使用不同坐標系或單位對比前端顯示和數據庫查詢的結果統一坐標系并在接口層約束單位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 覆蓋分析。這條鏈路走通后再考慮增加車輛軌跡、實時數據推送和更多三維特效。整體來說這套方案的技術選型都是行業主流方案可復用性高直接復制到智慧園區、智慧管廊、城市網格管理等項目中也只是換套數據模型的問題。