系統(tǒng)：Cesium+OpenLayers+PostGIS三維可視化與空間分析實(shí)戰(zhàn))
這次我們來看一個(gè)比較完整的 WebGIS 業(yè)務(wù)案例智慧公交站點(diǎn)系統(tǒng)。這個(gè)系統(tǒng)最典型的地方在于它不是單一功能 Demo而是把“站點(diǎn)數(shù)據(jù)采集 → 空間數(shù)據(jù)入庫 → 三維可視化展示 → 覆蓋范圍分析”整條鏈路串起來了。前端用 Cesium 搭三維大屏用 OpenLayers 做站點(diǎn)采編后端用 PostGIS 做空間分析三套技術(shù)棧各負(fù)責(zé)一段非常貼近實(shí)際生產(chǎn)項(xiàng)目。從開發(fā)者的角度看最值得關(guān)注的有幾點(diǎn)Cesium 負(fù)責(zé)三維站臺(tái)、公交線路和覆蓋范圍的可視化能直接投到指揮大屏上OpenLayers 負(fù)責(zé)二維地圖上的站點(diǎn)繪制、編輯和屬性錄入適合日常運(yùn)營(yíng)維護(hù)人員使用PostGIS 提供空間分析能力比如站點(diǎn) 500 米覆蓋分析、區(qū)域站點(diǎn)密度統(tǒng)計(jì)這些不是前端隨便寫寫就能算出來的必須放到數(shù)據(jù)庫里做空間計(jì)算。硬件門檻不算高普通開發(fā)機(jī)就能跑。前端主要依賴 Node.js 環(huán)境后端需要 PostgreSQL 數(shù)據(jù)庫并啟用 PostGIS 擴(kuò)展。如果你做過 WebGIS 開發(fā)這套方案看起來會(huì)非常親切如果你是剛接觸三維 GIS 和空間數(shù)據(jù)庫的讀者這篇文章也會(huì)帶著你把環(huán)境準(zhǔn)備、部署啟動(dòng)、功能測(cè)試、常見問題都走一遍。下面進(jìn)入正題。1. 核心能力速覽能力項(xiàng)說明項(xiàng)目類型WebGIS 智慧公交站點(diǎn)系統(tǒng)案例核心技術(shù)棧Cesium、OpenLayers、PostGIS、Vue、GeoJSON主要功能三維大屏展示、站點(diǎn)采編、覆蓋范圍分析、空間查詢推薦硬件普通開發(fā)機(jī)即可獨(dú)立顯卡可提升三維渲染流暢度支持平臺(tái)Web 端跨瀏覽器啟動(dòng)方式前端 npm 啟動(dòng)后端需自行配置空間數(shù)據(jù)服務(wù)是否支持 API支持后端可提供 GeoJSON 格式的空間數(shù)據(jù)接口是否支持批量任務(wù)采編模塊支持 GeoJSON 批量導(dǎo)入導(dǎo)出適合場(chǎng)景智慧公交、智慧交通、城市三維可視化、空間分析類項(xiàng)目這個(gè)案例的三個(gè)核心模塊是互補(bǔ)關(guān)系。Cesium 負(fù)責(zé)“給人看”O(jiān)penLayers 負(fù)責(zé)“給人編”PostGIS 負(fù)責(zé)“給機(jī)器算”。很多項(xiàng)目只做了其中一環(huán)比如只做三維展示但采編環(huán)節(jié)還停留在手工填表很容易導(dǎo)致三維場(chǎng)景里的站點(diǎn)位置和實(shí)際運(yùn)營(yíng)數(shù)據(jù)對(duì)不上。把 Cesium、OpenLayers、PostGIS 串在一起數(shù)據(jù)從采編到展示到分析才是閉環(huán)的。2. 系統(tǒng)總體架構(gòu)與業(yè)務(wù)流程2.1 架構(gòu)分層整個(gè)系統(tǒng)建議按標(biāo)準(zhǔn)的前后端分離方式組織。前端拆分兩個(gè)頁面三維大屏頁使用 Cesium采編管理頁使用 OpenLayers兩者共用一套 Vue 工程。后端負(fù)責(zé)提供空間數(shù)據(jù)接口數(shù)據(jù)層使用 PostgreSQL PostGIS 存儲(chǔ)站點(diǎn)、線路和區(qū)域等空間數(shù)據(jù)。前端Vue 工程 ├── Cesium 三維大屏頁 │ ├── 三維場(chǎng)景初始化 │ ├── 站點(diǎn)模型與線路渲染 │ └── 覆蓋范圍可視化 ├── OpenLayers 采編頁 │ ├── 地圖初始化 │ ├── 點(diǎn)/線繪制與編輯 │ └── GeoJSON 導(dǎo)入導(dǎo)出 └── 公共接口層 └── 請(qǐng)求后端空間數(shù)據(jù) 后端空間數(shù)據(jù)服務(wù) ├── 站點(diǎn)數(shù)據(jù) CRUD 接口 ├── 線路數(shù)據(jù) CRUD 接口 ├── GeoJSON 格式轉(zhuǎn)換 └── 空間分析接口 數(shù)據(jù)層PostgreSQL PostGIS ├── 站點(diǎn)表點(diǎn)數(shù)據(jù) ├── 線路表線數(shù)據(jù) └── 區(qū)域表面數(shù)據(jù)2.2 核心業(yè)務(wù)流程業(yè)務(wù)鏈路可以拆成四步采編入庫。運(yùn)營(yíng)人員在 OpenLayers 頁面上繪制公交站點(diǎn)、公交線路填寫站點(diǎn)名稱、所屬線路、站點(diǎn)類型等屬性保存后寫入 PostgreSQL。三維展示。Cesium 大屏定期從后端接口讀取站點(diǎn)和線路數(shù)據(jù)以三維模型、線要素的形式疊加在三維地球上。覆蓋分析。管理員選擇某個(gè)站點(diǎn)或某條線路后端通過 PostGIS 生成緩沖區(qū)范圍計(jì)算出覆蓋的小區(qū)、商圈或人口范圍把結(jié)果返回給前端。大屏聯(lián)動(dòng)。覆蓋分析結(jié)果以熱力圖、緩沖區(qū)色塊、統(tǒng)計(jì)面板的方式在大屏上展示輔助決策。從開發(fā)效率和維護(hù)成本來看前端建議使用 Vue 3 工程Cesium 和 OpenLayers 分別封裝成獨(dú)立組件。這樣三維場(chǎng)景和二維采編互不干擾后續(xù)新增功能也方便擴(kuò)展。3. 環(huán)境準(zhǔn)備與前置條件3.1 基礎(chǔ)環(huán)境清單開發(fā)調(diào)試這臺(tái)系統(tǒng)需要準(zhǔn)備以下基礎(chǔ)環(huán)境版本以實(shí)際項(xiàng)目安裝為準(zhǔn)依賴項(xiàng)用途備注Node.js前端工程運(yùn)行需要可用的 npm 或 yarnPostgreSQL后端數(shù)據(jù)庫建議安裝開源版本PostGIS 擴(kuò)展空間數(shù)據(jù)存儲(chǔ)與分析需要在數(shù)據(jù)庫中啟用瀏覽器訪問三維大屏和采編頁面建議使用 Chrome/EdgeCesium 離子令牌Cesium 全球影像和地形離線環(huán)境可使用本地瓦片替代3.2 PostgreSQL 與 PostGIS 安裝檢查PostgreSQL 安裝完成后需要確認(rèn) PostGIS 擴(kuò)展可用。進(jìn)入數(shù)據(jù)庫命令行執(zhí)行以下檢查-- 查看是否已安裝 PostGIS 擴(kuò)展 SELECT name, default_version, installed_version FROM pg_available_extensions WHERE name postgis;如果沒有安裝需要執(zhí)行CREATE EXTENSION IF NOT EXISTS postgis;3.3 前端依賴安裝在 Vue 工程中安裝 Cesium 和 OpenLayers 的依賴包。# 進(jìn)入前端工程目錄 npm install cesium npm install olCesium 在國內(nèi)網(wǎng)絡(luò)環(huán)境下加載默認(rèn)影像服務(wù)可能會(huì)比較慢。建議先申請(qǐng)官方 Cesium Ion 令牌方便在開發(fā)階段快速看到全球影像和地形效果。如果是內(nèi)網(wǎng)離線環(huán)境可以通過配置 ImageryProvider 加載本地瓦片不影響開發(fā)流程。硬件方面普通 i5 處理器 8GB 內(nèi)存的機(jī)器可以跑通整條鏈路。Cesium 三維場(chǎng)景在旋轉(zhuǎn)、縮放時(shí)會(huì)比較吃 GPU如果要做大屏展示建議使用帶獨(dú)立顯卡的機(jī)器OpenLayers 采編對(duì)硬件要求不高辦公電腦即可。4. Cesium 三維大屏實(shí)現(xiàn)4.1 初始化三維場(chǎng)景Cesium 大屏第一個(gè)步驟是初始化 Viewer。這里以一個(gè) Vue 組件為例創(chuàng)建一個(gè)包含地形、全球影像和坐標(biāo)軸提示的三維場(chǎng)景。// CesiumViewer.vue 關(guān)鍵代碼 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, // 如果沒有申請(qǐng) Cesium Ion這里可以換成本地瓦片地址 imageryProvider: new Cesium.ArcGisMapServerImageryProvider({ url: https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer, }), terrainProvider: Cesium.createWorldTerrainAsync(), }); // 調(diào)整相機(jī)初始視角 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(); });這里建議關(guān)閉默認(rèn)的 animation、timeline、geocoder 等控件大屏頁面只需要一個(gè)干凈的地球左上角的版權(quán)和控件列表會(huì)干擾視覺效果。4.2 加載公交站點(diǎn)與線路站點(diǎn)數(shù)據(jù)從后端接口獲取后前端需要把點(diǎn)數(shù)據(jù)轉(zhuǎn)換為 Cesium Entity 或 Primitive。站點(diǎn)數(shù)量少用 Entity 足夠數(shù)量多建議用 LabelCollection 和 PointPrimitiveCollection 提升渲染性能。// 加載站點(diǎn)數(shù)據(jù) 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做出發(fā)光效果公交車輛運(yùn)行方向可以用圖片模型按時(shí)間軸移動(dòng)實(shí)現(xiàn)。項(xiàng)目做到后期還可以添加雷達(dá)掃描、動(dòng)態(tài)光照、GPU 局部雨效果等特效這些技術(shù)在中文社區(qū)的資料比較多但優(yōu)先級(jí)要排在核心業(yè)務(wù)之后。4.3 大屏布局與數(shù)據(jù)聯(lián)動(dòng)三維大屏頁一般分為三個(gè)區(qū)域中間是 Cesium 三維場(chǎng)景左右兩側(cè)是統(tǒng)計(jì)面板和業(yè)務(wù)面板。統(tǒng)計(jì)面板的數(shù)據(jù)來源可以走后端聚合接口也可以前端實(shí)時(shí)計(jì)算關(guān)鍵是要和三維場(chǎng)景聯(lián)動(dòng)。推薦的做法是Cesium 的點(diǎn)擊事件負(fù)責(zé)選中站點(diǎn)右側(cè)面板展示站點(diǎn)詳情左側(cè)面板展示線路車輛、覆蓋統(tǒng)計(jì)等數(shù)據(jù)。點(diǎn)擊站點(diǎn)時(shí)同步更新統(tǒng)計(jì)面板這樣大屏交互起來才有“智慧”的感覺。// 點(diǎn)擊事件拾取站點(diǎn) 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 采編功能實(shí)現(xiàn)OpenLayers 在智慧公交系統(tǒng)里承擔(dān)的是數(shù)據(jù)采編職責(zé)。運(yùn)營(yíng)人員需要在地圖上繪制站點(diǎn)、調(diào)整站點(diǎn)位置、填寫屬性、批量導(dǎo)入 GeoJSON。這個(gè)模塊最好用也最容易出問題因?yàn)樯婕暗浇换顟B(tài)管理。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, }), });如果公司有內(nèi)網(wǎng)地圖服務(wù)可以把 OSM 換成自有瓦片地址。采編頁面建議同時(shí)保留底圖切換功能方便對(duì)比不同底圖的參考價(jià)值。5.2 繪制站點(diǎn)與線路繪制功能使用 OpenLayers 的Draw交互。這里要注意區(qū)分“繪制點(diǎn)”和“繪制線”兩種狀態(tài)通過按鈕切換工具欄狀態(tài)。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(); // 獲取經(jīng)緯度坐標(biāo)方便存儲(chǔ)到 PostGIS const lonLat geometry.getCoordinates(); console.log(站點(diǎn)坐標(biāo), lonLat); // 調(diào)起屬性錄入表單 openStopForm(lonLat); }); }坐標(biāo)獲取時(shí)要特別留意投影轉(zhuǎn)換。OpenLayers 默認(rèn)使用 Web MercatorEPSG:3857PostGIS 中常用的空間參考是 WGS84EPSG:4326。存儲(chǔ)前必須把坐標(biāo)從3857轉(zhuǎn)成4326否則會(huì)出現(xiàn)位置偏移。5.3 GoeJSON 導(dǎo)入導(dǎo)出采編數(shù)據(jù)的導(dǎo)入導(dǎo)出建議統(tǒng)一使用 GeoJSON 格式。GeoJSON 是 WebGIS 生態(tài)的標(biāo)準(zhǔn)交換格式Cesium、OpenLayers、PostGIS 都支持不需要額外轉(zhuǎn)換。import GeoJSON from ol/format/GeoJSON.js; // 導(dǎo)出 GeoJSON function exportGeoJSON() { const features vectorSource.getFeatures(); const geojson new GeoJSON().writeFeatures(features, { featureProjection: EPSG:3857, dataProjection: EPSG:4326, }); // 觸發(fā)下載 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(); } // 導(dǎo)入 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); }屬性編輯這里不建議用瀏覽器自帶彈窗會(huì)讓交互顯得非常不專業(yè)。可以做一個(gè)側(cè)邊抽屜點(diǎn)擊要素后顯示屬性表單修改站點(diǎn)名稱、線路編號(hào)、所屬區(qū)域等信息保存后更新要素屬性。6. PostGIS 覆蓋分析實(shí)現(xiàn)PostGIS 是這套系統(tǒng)里最容易被低估的部分。很多前端開發(fā)習(xí)慣在瀏覽器里做空間判斷但數(shù)據(jù)量一大前端根本算不動(dòng)。PostGIS 在數(shù)據(jù)庫層面完成空間計(jì)算效率高索引完善還方便和后端接口做聚合統(tǒng)計(jì)。6.1 空間數(shù)據(jù)建表站點(diǎn)和線路建議分別建表空間字段統(tǒng)一使用geometry。站點(diǎn)表存儲(chǔ)點(diǎn)要素線路表存儲(chǔ)線要素。-- 公交站點(diǎn)表 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);空間數(shù)據(jù)類型和 SRID 建議統(tǒng)一使用 4326 或 3857不要混用。如果項(xiàng)目里有其他坐標(biāo)系的數(shù)據(jù)在建表時(shí)就要做好轉(zhuǎn)換計(jì)劃否則跨圖層疊加時(shí)位置會(huì)漂移。6.2 緩沖區(qū)覆蓋分析覆蓋分析最常見的場(chǎng)景是給定一個(gè)站點(diǎn)計(jì)算它周圍 500 米范圍內(nèi)的區(qū)域。-- 生成站點(diǎn) 500 米緩沖區(qū)并與區(qū)域表做相交統(tǒng)計(jì) 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類型做真實(shí)的球面距離緩沖區(qū)ST_Buffer以米為單位生成緩沖區(qū)是符合業(yè)務(wù)直覺的。如果直接用投影坐標(biāo)的ST_Buffer(geom, 500)500 這個(gè)數(shù)字的含義取決于坐標(biāo)系很容易算錯(cuò)。如果想簡(jiǎn)化查詢也可以統(tǒng)一把幾何轉(zhuǎn)成投影坐標(biāo)系再計(jì)算。6.3 站點(diǎn)密度分析公交線路規(guī)劃中經(jīng)常要評(píng)估某個(gè)區(qū)域是否站點(diǎn)覆蓋不足。這個(gè)時(shí)候可以統(tǒng)計(jì)每個(gè)片區(qū)內(nèi)的站點(diǎn)數(shù)量。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;分析結(jié)果可以返回給前端大屏用柱狀圖或熱力圖展示站點(diǎn)覆蓋薄弱區(qū)域。這一步可以和 Cesium 的覆蓋范圍色塊結(jié)合形成“哪里缺站、哪里多站”的直觀判斷。6.4 查詢結(jié)果返回前端PostGIS 查詢結(jié)果建議統(tǒng)一封裝成 GeoJSON 返回前端。這樣 Cesium 和 OpenLayers 都可以直接消費(fèi)不需要前端手工拼接。后端節(jié)點(diǎn)返回 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. 前后端聯(lián)調(diào)與數(shù)據(jù)流轉(zhuǎn)7.1 接口返回結(jié)構(gòu)約定前端兩個(gè)頁面使用的是同一份站點(diǎn)數(shù)據(jù)接口最好統(tǒng)一返回 GeoJSON FeatureCollection。這樣 Cesium 大屏和 OpenLayers 采編頁都能在拿到數(shù)據(jù)后直接渲染不需要寫兩套轉(zhuǎn)換邏輯。{ 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 加載接口數(shù)據(jù)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統(tǒng)一設(shè)置樣式運(yùn)行時(shí)修改站點(diǎn)顏色也非常方便。7.3 OpenLayers 提交編輯數(shù)據(jù)OpenLayers 采編頁保存站點(diǎn)時(shí)需要把 Geometry 坐標(biāo)做投影轉(zhuǎn)換。提交給后端的數(shù)據(jù)盡量統(tǒng)一成 WGS84 經(jīng)緯度。const feature selectedFeature; const geometry feature.getGeometry().clone(); geometry.transform(EPSG:3857, EPSG:4326); const payload { stop_name: 新增站點(diǎn), 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 數(shù)據(jù)更新流程數(shù)據(jù)更新建議遵循“編輯 → 校驗(yàn) → 提交 → 緩存清理”的順序。采編頁保存成功后Cesium 大屏可以通過 WebSocket 或輪詢接口刷新數(shù)據(jù)。項(xiàng)目早期用輪詢就夠了每 30 秒拉一次站點(diǎn)數(shù)據(jù)不會(huì)對(duì)后端造成壓力。等業(yè)務(wù)量上來后再升級(jí)為 WebSocket 推送。8. 性能觀察與常見問題排查8.1 三維大屏性能觀察Cesium 項(xiàng)目上線前重點(diǎn)觀察兩個(gè)指標(biāo)。第一個(gè)是幀率大屏交互旋轉(zhuǎn)是否流暢?？梢杂脼g覽器開發(fā)者工具的 Performance 面板錄制一段操作記錄看 Cesium 渲染線程是不是成了瓶頸。第二個(gè)是內(nèi)存占用。站點(diǎn)數(shù)量多、紋理豐富的場(chǎng)景內(nèi)存增長(zhǎng)會(huì)比較明顯。如果長(zhǎng)時(shí)間運(yùn)行后內(nèi)存只漲不降要排查是否有 Entity 或數(shù)據(jù)源泄漏。站點(diǎn)展示優(yōu)化建議站點(diǎn)數(shù)量少于 500 個(gè)直接用 Entity 渲染代碼最簡(jiǎn)單。站點(diǎn)數(shù)量 500 到 2000改用 PointPrimitiveCollection 和 LabelCollection減少 Entity 開銷。站點(diǎn)數(shù)量超過 2000抽稀顯示或使用 3D Tiles 加載站點(diǎn)模型按層級(jí)切換顯示粒度。8.2 常見問題排查問題現(xiàn)象可能原因排查方式解決方案Cesium 頁面黑屏或地球不顯示Cesium 離子令牌無效、網(wǎng)絡(luò)無法訪問全球影像服務(wù)打開瀏覽器 Network 面板檢查請(qǐng)求是否報(bào)錯(cuò)申請(qǐng)有效令牌或配置本地瓦片源三維場(chǎng)景里站點(diǎn)位置和底圖對(duì)不上坐標(biāo)參考不一致站點(diǎn)經(jīng)緯度寫錯(cuò)單位或坐標(biāo)系打印 Cesium 位置坐標(biāo)和原始數(shù)據(jù)比對(duì)統(tǒng)一存儲(chǔ) WGS84 經(jīng)緯度避免前端二次轉(zhuǎn)換OpenLayers 繪制后坐標(biāo)偏了沒有做 EPSG:3857 轉(zhuǎn) EPSG:4326 的轉(zhuǎn)換打印geometry.getCoordinates()和實(shí)際經(jīng)緯度保存前統(tǒng)一執(zhí)行 transform 轉(zhuǎn)換OpenLayers 頁面訪問空白依賴包版本沖突或者容器高度為 0檢查瀏覽器 Console 報(bào)錯(cuò)檢查地圖容器是否有高度給地圖容器設(shè)置固定高度重新安裝依賴PostGIS 查詢特別慢沒有建空間索引或者使用了不支持索引的函數(shù)寫法EXPLAIN ANALYZE查看查詢計(jì)劃添加 GIST 索引改寫 SQL 避免全表掃描ST_Buffer計(jì)算結(jié)果和預(yù)期差很遠(yuǎn)直接在 4326 坐標(biāo)系上使用經(jīng)緯度單位做半徑檢查 SQL 中緩沖半徑的單位使用geography類型或先投影再緩沖Cesium 大屏內(nèi)存一直漲Entity 沒有銷毀或請(qǐng)求沒有釋放切換頁面后用 Performance Memory 觀察在組件卸載時(shí) destroy Viewer及時(shí)清理數(shù)據(jù)源單位/量綱不一致導(dǎo)致覆蓋分析錯(cuò)誤前端和后端使用不同坐標(biāo)系或單位對(duì)比前端顯示和數(shù)據(jù)庫查詢的結(jié)果統(tǒng)一坐標(biāo)系并在接口層約束單位8.3 降低性能壓力的實(shí)踐第一次跑通系統(tǒng)后先小批量測(cè)試。只插入 100 個(gè)站點(diǎn)、5 條線路觀察三維大屏和采編頁的交互效果。數(shù)據(jù)量改成 5000 個(gè)站點(diǎn)后再對(duì)比幀率和接口響應(yīng)時(shí)間。這樣可以快速定位問題是在渲染層、數(shù)據(jù)層還是網(wǎng)絡(luò)層。批量導(dǎo)入站點(diǎn)時(shí)建議使用 PostGIS 的COPY命令或批量插入逐條插入會(huì)導(dǎo)致數(shù)據(jù)庫連接壓力很大。-- 使用批量插入代替逐條插入 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. 最佳實(shí)踐與使用建議9.1 數(shù)據(jù)管理建議站點(diǎn)數(shù)據(jù)、線路數(shù)據(jù)、區(qū)域數(shù)據(jù)分開建表不要放在一張表里。雖然查詢時(shí)可以關(guān)聯(lián)但后續(xù)維護(hù)邊界會(huì)模糊。站點(diǎn)表和線路表的空間字段都建議建 GIST 索引覆蓋分析和高頻空間查詢都依賴索引才能跑得快。原始坐標(biāo)和業(yè)務(wù)屬性分離。站點(diǎn)表的geom字段只存坐標(biāo)業(yè)務(wù)信息如站點(diǎn)名稱、運(yùn)營(yíng)時(shí)間、負(fù)責(zé)人放在普通字段。這樣既方便空間查詢也方便業(yè)務(wù)模塊擴(kuò)展。9.2 開發(fā)調(diào)試建議前端工程建議把 Cesium 和 OpenLayers 封裝成獨(dú)立組件不要在頁面里直接寫大段初始化和交互邏輯。Cesium 的Viewer被多次創(chuàng)建銷毀是最容易導(dǎo)致內(nèi)存溢出的操作組件化可以在onUnmounted中統(tǒng)一清理。開發(fā)時(shí)使用本地瓦片或離線地形能提升效率不受外網(wǎng)波動(dòng)影響。特別是展示給客戶看大屏效果的時(shí)候離線環(huán)境能避免突然出現(xiàn)灰色地球的尷尬。Cesium 加載站點(diǎn)模型時(shí)注意版權(quán)和授權(quán)問題。如果使用第三方 3D 模型要確認(rèn)模型的授權(quán)范圍不要隨意使用來源不明的素材。9.3 功能擴(kuò)展方向這個(gè)案例跑通后可以繼續(xù)擴(kuò)展的能力包括Cesium 可視域分析、天際線分析用于評(píng)估站點(diǎn)周邊遮擋情況。動(dòng)態(tài)光照效果和三維水面渲染增強(qiáng)大屏視覺表現(xiàn)力。站點(diǎn)覆蓋熱力圖把覆蓋分析結(jié)果按區(qū)域聚合按色階展示。車輛運(yùn)行軌跡回放把實(shí)時(shí)車輛位置寫成時(shí)間軸數(shù)據(jù)Cesium 中按時(shí)間推進(jìn)展示。與移動(dòng)端采集端聯(lián)動(dòng)外勤人員在移動(dòng)端上報(bào)新站點(diǎn)采編頁審核后入庫再同步到三維大屏。9.4 合規(guī)提醒如果項(xiàng)目中涉及真實(shí)公交站點(diǎn)、真實(shí)線路、人流數(shù)據(jù)務(wù)必確認(rèn)數(shù)據(jù)來源合法。站點(diǎn) POI 數(shù)據(jù)可能包含版權(quán)信息建議使用通過正規(guī)授權(quán)獲取的數(shù)據(jù)。涉及乘客流量、運(yùn)營(yíng)數(shù)據(jù)的分析和展示要遵守公交運(yùn)營(yíng)單位的保密要求。純演示和測(cè)試環(huán)境使用虛構(gòu)數(shù)據(jù)即可不要將未授權(quán)的真實(shí)業(yè)務(wù)數(shù)據(jù)直接放到外網(wǎng)。10. 總結(jié)與下一步這個(gè)智慧公交站點(diǎn)系統(tǒng)的技術(shù)方案核心是三件事Cesium 管三維大屏展示OpenLayers 管數(shù)據(jù)采編PostGIS 管空間分析。每一層技術(shù)都有明確的邊界組合起來就是一個(gè)完整可交付的業(yè)務(wù)系統(tǒng)。最值得優(yōu)先驗(yàn)證的是 PostGIS 覆蓋分析這條鏈路先用 SQL 把站點(diǎn)緩沖區(qū)和區(qū)域相交算出來再在 Cesium 里對(duì)結(jié)果做可視化會(huì)發(fā)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)決策比前端寫死可視化效果可靠得多。最容易踩的坑集中在坐標(biāo)系和緩沖區(qū)單位上。開發(fā)時(shí)先統(tǒng)一坐標(biāo)參考再做功能開發(fā)能省去大量排查時(shí)間。下一步建議先在本地把 PostgreSQL PostGIS 環(huán)境跑起來造 200 個(gè)模擬站點(diǎn)和幾條線路然后依次驗(yàn)證 OpenLayers 采編保存、Cesium 數(shù)據(jù)加載、PostGIS 覆蓋分析。這條鏈路走通后再考慮增加車輛軌跡、實(shí)時(shí)數(shù)據(jù)推送和更多三維特效。整體來說這套方案的技術(shù)選型都是行業(yè)主流方案可復(fù)用性高直接復(fù)制到智慧園區(qū)、智慧管廊、城市網(wǎng)格管理等項(xiàng)目中也只是換套數(shù)據(jù)模型的問題。 WebGIS智慧公交站點(diǎn)系統(tǒng)：Cesium+OpenLayers+PostGIS三維可視化與空間分析實(shí)戰(zhàn)
這次我們來看一個(gè)比較完整的 WebGIS 業(yè)務(wù)案例智慧公交站點(diǎn)系統(tǒng)。這個(gè)系統(tǒng)最典型的地方在于它不是單一功能 Demo而是把“站點(diǎn)數(shù)據(jù)采集 → 空間數(shù)據(jù)入庫 → 三維可視化展示 → 覆蓋范圍分析”整條鏈路串起來了。前端用 Cesium 搭三維大屏用 OpenLayers 做站點(diǎn)采編后端用 PostGIS 做空間分析三套技術(shù)棧各負(fù)責(zé)一段非常貼近實(shí)際生產(chǎn)項(xiàng)目。從開發(fā)者的角度看最值得關(guān)注的有幾點(diǎn)Cesium 負(fù)責(zé)三維站臺(tái)、公交線路和覆蓋范圍的可視化能直接投到指揮大屏上OpenLayers 負(fù)責(zé)二維地圖上的站點(diǎn)繪制、編輯和屬性錄入適合日常運(yùn)營(yíng)維護(hù)人員使用PostGIS 提供空間分析能力比如站點(diǎn) 500 米覆蓋分析、區(qū)域站點(diǎn)密度統(tǒng)計(jì)這些不是前端隨便寫寫就能算出來的必須放到數(shù)據(jù)庫里做空間計(jì)算。硬件門檻不算高普通開發(fā)機(jī)就能跑。前端主要依賴 Node.js 環(huán)境后端需要 PostgreSQL 數(shù)據(jù)庫并啟用 PostGIS 擴(kuò)展。如果你做過 WebGIS 開發(fā)這套方案看起來會(huì)非常親切如果你是剛接觸三維 GIS 和空間數(shù)據(jù)庫的讀者這篇文章也會(huì)帶著你把環(huán)境準(zhǔn)備、部署啟動(dòng)、功能測(cè)試、常見問題都走一遍。下面進(jìn)入正題。1. 核心能力速覽能力項(xiàng)說明項(xiàng)目類型WebGIS 智慧公交站點(diǎn)系統(tǒng)案例核心技術(shù)棧Cesium、OpenLayers、PostGIS、Vue、GeoJSON主要功能三維大屏展示、站點(diǎn)采編、覆蓋范圍分析、空間查詢推薦硬件普通開發(fā)機(jī)即可獨(dú)立顯卡可提升三維渲染流暢度支持平臺(tái)Web 端跨瀏覽器啟動(dòng)方式前端 npm 啟動(dòng)后端需自行配置空間數(shù)據(jù)服務(wù)是否支持 API支持后端可提供 GeoJSON 格式的空間數(shù)據(jù)接口是否支持批量任務(wù)采編模塊支持 GeoJSON 批量導(dǎo)入導(dǎo)出適合場(chǎng)景智慧公交、智慧交通、城市三維可視化、空間分析類項(xiàng)目這個(gè)案例的三個(gè)核心模塊是互補(bǔ)關(guān)系。Cesium 負(fù)責(zé)“給人看”O(jiān)penLayers 負(fù)責(zé)“給人編”PostGIS 負(fù)責(zé)“給機(jī)器算”。很多項(xiàng)目只做了其中一環(huán)比如只做三維展示但采編環(huán)節(jié)還停留在手工填表很容易導(dǎo)致三維場(chǎng)景里的站點(diǎn)位置和實(shí)際運(yùn)營(yíng)數(shù)據(jù)對(duì)不上。把 Cesium、OpenLayers、PostGIS 串在一起數(shù)據(jù)從采編到展示到分析才是閉環(huán)的。2. 系統(tǒng)總體架構(gòu)與業(yè)務(wù)流程2.1 架構(gòu)分層整個(gè)系統(tǒng)建議按標(biāo)準(zhǔn)的前后端分離方式組織。前端拆分兩個(gè)頁面三維大屏頁使用 Cesium采編管理頁使用 OpenLayers兩者共用一套 Vue 工程。后端負(fù)責(zé)提供空間數(shù)據(jù)接口數(shù)據(jù)層使用 PostgreSQL PostGIS 存儲(chǔ)站點(diǎn)、線路和區(qū)域等空間數(shù)據(jù)。前端Vue 工程 ├── Cesium 三維大屏頁 │ ├── 三維場(chǎng)景初始化 │ ├── 站點(diǎn)模型與線路渲染 │ └── 覆蓋范圍可視化 ├── OpenLayers 采編頁 │ ├── 地圖初始化 │ ├── 點(diǎn)/線繪制與編輯 │ └── GeoJSON 導(dǎo)入導(dǎo)出 └── 公共接口層 └── 請(qǐng)求后端空間數(shù)據(jù) 后端空間數(shù)據(jù)服務(wù) ├── 站點(diǎn)數(shù)據(jù) CRUD 接口 ├── 線路數(shù)據(jù) CRUD 接口 ├── GeoJSON 格式轉(zhuǎn)換 └── 空間分析接口 數(shù)據(jù)層PostgreSQL PostGIS ├── 站點(diǎn)表點(diǎn)數(shù)據(jù) ├── 線路表線數(shù)據(jù) └── 區(qū)域表面數(shù)據(jù)2.2 核心業(yè)務(wù)流程業(yè)務(wù)鏈路可以拆成四步采編入庫。運(yùn)營(yíng)人員在 OpenLayers 頁面上繪制公交站點(diǎn)、公交線路填寫站點(diǎn)名稱、所屬線路、站點(diǎn)類型等屬性保存后寫入 PostgreSQL。三維展示。Cesium 大屏定期從后端接口讀取站點(diǎn)和線路數(shù)據(jù)以三維模型、線要素的形式疊加在三維地球上。覆蓋分析。管理員選擇某個(gè)站點(diǎn)或某條線路后端通過 PostGIS 生成緩沖區(qū)范圍計(jì)算出覆蓋的小區(qū)、商圈或人口范圍把結(jié)果返回給前端。大屏聯(lián)動(dòng)。覆蓋分析結(jié)果以熱力圖、緩沖區(qū)色塊、統(tǒng)計(jì)面板的方式在大屏上展示輔助決策。從開發(fā)效率和維護(hù)成本來看前端建議使用 Vue 3 工程Cesium 和 OpenLayers 分別封裝成獨(dú)立組件。這樣三維場(chǎng)景和二維采編互不干擾后續(xù)新增功能也方便擴(kuò)展。3. 環(huán)境準(zhǔn)備與前置條件3.1 基礎(chǔ)環(huán)境清單開發(fā)調(diào)試這臺(tái)系統(tǒng)需要準(zhǔn)備以下基礎(chǔ)環(huán)境版本以實(shí)際項(xiàng)目安裝為準(zhǔn)依賴項(xiàng)用途備注Node.js前端工程運(yùn)行需要可用的 npm 或 yarnPostgreSQL后端數(shù)據(jù)庫建議安裝開源版本PostGIS 擴(kuò)展空間數(shù)據(jù)存儲(chǔ)與分析需要在數(shù)據(jù)庫中啟用瀏覽器訪問三維大屏和采編頁面建議使用 Chrome/EdgeCesium 離子令牌Cesium 全球影像和地形離線環(huán)境可使用本地瓦片替代3.2 PostgreSQL 與 PostGIS 安裝檢查PostgreSQL 安裝完成后需要確認(rèn) PostGIS 擴(kuò)展可用。進(jìn)入數(shù)據(jù)庫命令行執(zhí)行以下檢查-- 查看是否已安裝 PostGIS 擴(kuò)展 SELECT name, default_version, installed_version FROM pg_available_extensions WHERE name postgis;如果沒有安裝需要執(zhí)行CREATE EXTENSION IF NOT EXISTS postgis;3.3 前端依賴安裝在 Vue 工程中安裝 Cesium 和 OpenLayers 的依賴包。# 進(jìn)入前端工程目錄 npm install cesium npm install olCesium 在國內(nèi)網(wǎng)絡(luò)環(huán)境下加載默認(rèn)影像服務(wù)可能會(huì)比較慢。建議先申請(qǐng)官方 Cesium Ion 令牌方便在開發(fā)階段快速看到全球影像和地形效果。如果是內(nèi)網(wǎng)離線環(huán)境可以通過配置 ImageryProvider 加載本地瓦片不影響開發(fā)流程。硬件方面普通 i5 處理器 8GB 內(nèi)存的機(jī)器可以跑通整條鏈路。Cesium 三維場(chǎng)景在旋轉(zhuǎn)、縮放時(shí)會(huì)比較吃 GPU如果要做大屏展示建議使用帶獨(dú)立顯卡的機(jī)器OpenLayers 采編對(duì)硬件要求不高辦公電腦即可。4. Cesium 三維大屏實(shí)現(xiàn)4.1 初始化三維場(chǎng)景Cesium 大屏第一個(gè)步驟是初始化 Viewer。這里以一個(gè) Vue 組件為例創(chuàng)建一個(gè)包含地形、全球影像和坐標(biāo)軸提示的三維場(chǎng)景。// CesiumViewer.vue 關(guān)鍵代碼 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, // 如果沒有申請(qǐng) Cesium Ion這里可以換成本地瓦片地址 imageryProvider: new Cesium.ArcGisMapServerImageryProvider({ url: https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer, }), terrainProvider: Cesium.createWorldTerrainAsync(), }); // 調(diào)整相機(jī)初始視角 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(); });這里建議關(guān)閉默認(rèn)的 animation、timeline、geocoder 等控件大屏頁面只需要一個(gè)干凈的地球左上角的版權(quán)和控件列表會(huì)干擾視覺效果。4.2 加載公交站點(diǎn)與線路站點(diǎn)數(shù)據(jù)從后端接口獲取后前端需要把點(diǎn)數(shù)據(jù)轉(zhuǎn)換為 Cesium Entity 或 Primitive。站點(diǎn)數(shù)量少用 Entity 足夠數(shù)量多建議用 LabelCollection 和 PointPrimitiveCollection 提升渲染性能。// 加載站點(diǎn)數(shù)據(jù) 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做出發(fā)光效果公交車輛運(yùn)行方向可以用圖片模型按時(shí)間軸移動(dòng)實(shí)現(xiàn)。項(xiàng)目做到后期還可以添加雷達(dá)掃描、動(dòng)態(tài)光照、GPU 局部雨效果等特效這些技術(shù)在中文社區(qū)的資料比較多但優(yōu)先級(jí)要排在核心業(yè)務(wù)之后。4.3 大屏布局與數(shù)據(jù)聯(lián)動(dòng)三維大屏頁一般分為三個(gè)區(qū)域中間是 Cesium 三維場(chǎng)景左右兩側(cè)是統(tǒng)計(jì)面板和業(yè)務(wù)面板。統(tǒng)計(jì)面板的數(shù)據(jù)來源可以走后端聚合接口也可以前端實(shí)時(shí)計(jì)算關(guān)鍵是要和三維場(chǎng)景聯(lián)動(dòng)。推薦的做法是Cesium 的點(diǎn)擊事件負(fù)責(zé)選中站點(diǎn)右側(cè)面板展示站點(diǎn)詳情左側(cè)面板展示線路車輛、覆蓋統(tǒng)計(jì)等數(shù)據(jù)。點(diǎn)擊站點(diǎn)時(shí)同步更新統(tǒng)計(jì)面板這樣大屏交互起來才有“智慧”的感覺。// 點(diǎn)擊事件拾取站點(diǎn) 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 采編功能實(shí)現(xiàn)OpenLayers 在智慧公交系統(tǒng)里承擔(dān)的是數(shù)據(jù)采編職責(zé)。運(yùn)營(yíng)人員需要在地圖上繪制站點(diǎn)、調(diào)整站點(diǎn)位置、填寫屬性、批量導(dǎo)入 GeoJSON。這個(gè)模塊最好用也最容易出問題因?yàn)樯婕暗浇换顟B(tài)管理。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, }), });如果公司有內(nèi)網(wǎng)地圖服務(wù)可以把 OSM 換成自有瓦片地址。采編頁面建議同時(shí)保留底圖切換功能方便對(duì)比不同底圖的參考價(jià)值。5.2 繪制站點(diǎn)與線路繪制功能使用 OpenLayers 的Draw交互。這里要注意區(qū)分“繪制點(diǎn)”和“繪制線”兩種狀態(tài)通過按鈕切換工具欄狀態(tài)。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(); // 獲取經(jīng)緯度坐標(biāo)方便存儲(chǔ)到 PostGIS const lonLat geometry.getCoordinates(); console.log(站點(diǎn)坐標(biāo), lonLat); // 調(diào)起屬性錄入表單 openStopForm(lonLat); }); }坐標(biāo)獲取時(shí)要特別留意投影轉(zhuǎn)換。OpenLayers 默認(rèn)使用 Web MercatorEPSG:3857PostGIS 中常用的空間參考是 WGS84EPSG:4326。存儲(chǔ)前必須把坐標(biāo)從3857轉(zhuǎn)成4326否則會(huì)出現(xiàn)位置偏移。5.3 GoeJSON 導(dǎo)入導(dǎo)出采編數(shù)據(jù)的導(dǎo)入導(dǎo)出建議統(tǒng)一使用 GeoJSON 格式。GeoJSON 是 WebGIS 生態(tài)的標(biāo)準(zhǔn)交換格式Cesium、OpenLayers、PostGIS 都支持不需要額外轉(zhuǎn)換。import GeoJSON from ol/format/GeoJSON.js; // 導(dǎo)出 GeoJSON function exportGeoJSON() { const features vectorSource.getFeatures(); const geojson new GeoJSON().writeFeatures(features, { featureProjection: EPSG:3857, dataProjection: EPSG:4326, }); // 觸發(fā)下載 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(); } // 導(dǎo)入 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); }屬性編輯這里不建議用瀏覽器自帶彈窗會(huì)讓交互顯得非常不專業(yè)。可以做一個(gè)側(cè)邊抽屜點(diǎn)擊要素后顯示屬性表單修改站點(diǎn)名稱、線路編號(hào)、所屬區(qū)域等信息保存后更新要素屬性。6. PostGIS 覆蓋分析實(shí)現(xiàn)PostGIS 是這套系統(tǒng)里最容易被低估的部分。很多前端開發(fā)習(xí)慣在瀏覽器里做空間判斷但數(shù)據(jù)量一大前端根本算不動(dòng)。PostGIS 在數(shù)據(jù)庫層面完成空間計(jì)算效率高索引完善還方便和后端接口做聚合統(tǒng)計(jì)。6.1 空間數(shù)據(jù)建表站點(diǎn)和線路建議分別建表空間字段統(tǒng)一使用geometry。站點(diǎn)表存儲(chǔ)點(diǎn)要素線路表存儲(chǔ)線要素。-- 公交站點(diǎn)表 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);空間數(shù)據(jù)類型和 SRID 建議統(tǒng)一使用 4326 或 3857不要混用。如果項(xiàng)目里有其他坐標(biāo)系的數(shù)據(jù)在建表時(shí)就要做好轉(zhuǎn)換計(jì)劃否則跨圖層疊加時(shí)位置會(huì)漂移。6.2 緩沖區(qū)覆蓋分析覆蓋分析最常見的場(chǎng)景是給定一個(gè)站點(diǎn)計(jì)算它周圍 500 米范圍內(nèi)的區(qū)域。-- 生成站點(diǎn) 500 米緩沖區(qū)并與區(qū)域表做相交統(tǒng)計(jì) 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類型做真實(shí)的球面距離緩沖區(qū)ST_Buffer以米為單位生成緩沖區(qū)是符合業(yè)務(wù)直覺的。如果直接用投影坐標(biāo)的ST_Buffer(geom, 500)500 這個(gè)數(shù)字的含義取決于坐標(biāo)系很容易算錯(cuò)。如果想簡(jiǎn)化查詢也可以統(tǒng)一把幾何轉(zhuǎn)成投影坐標(biāo)系再計(jì)算。6.3 站點(diǎn)密度分析公交線路規(guī)劃中經(jīng)常要評(píng)估某個(gè)區(qū)域是否站點(diǎn)覆蓋不足。這個(gè)時(shí)候可以統(tǒng)計(jì)每個(gè)片區(qū)內(nèi)的站點(diǎn)數(shù)量。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;分析結(jié)果可以返回給前端大屏用柱狀圖或熱力圖展示站點(diǎn)覆蓋薄弱區(qū)域。這一步可以和 Cesium 的覆蓋范圍色塊結(jié)合形成“哪里缺站、哪里多站”的直觀判斷。6.4 查詢結(jié)果返回前端PostGIS 查詢結(jié)果建議統(tǒng)一封裝成 GeoJSON 返回前端。這樣 Cesium 和 OpenLayers 都可以直接消費(fèi)不需要前端手工拼接。后端節(jié)點(diǎn)返回 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. 前后端聯(lián)調(diào)與數(shù)據(jù)流轉(zhuǎn)7.1 接口返回結(jié)構(gòu)約定前端兩個(gè)頁面使用的是同一份站點(diǎn)數(shù)據(jù)接口最好統(tǒng)一返回 GeoJSON FeatureCollection。這樣 Cesium 大屏和 OpenLayers 采編頁都能在拿到數(shù)據(jù)后直接渲染不需要寫兩套轉(zhuǎn)換邏輯。{ 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 加載接口數(shù)據(jù)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統(tǒng)一設(shè)置樣式運(yùn)行時(shí)修改站點(diǎn)顏色也非常方便。7.3 OpenLayers 提交編輯數(shù)據(jù)OpenLayers 采編頁保存站點(diǎn)時(shí)需要把 Geometry 坐標(biāo)做投影轉(zhuǎn)換。提交給后端的數(shù)據(jù)盡量統(tǒng)一成 WGS84 經(jīng)緯度。const feature selectedFeature; const geometry feature.getGeometry().clone(); geometry.transform(EPSG:3857, EPSG:4326); const payload { stop_name: 新增站點(diǎn), 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 數(shù)據(jù)更新流程數(shù)據(jù)更新建議遵循“編輯 → 校驗(yàn) → 提交 → 緩存清理”的順序。采編頁保存成功后Cesium 大屏可以通過 WebSocket 或輪詢接口刷新數(shù)據(jù)。項(xiàng)目早期用輪詢就夠了每 30 秒拉一次站點(diǎn)數(shù)據(jù)不會(huì)對(duì)后端造成壓力。等業(yè)務(wù)量上來后再升級(jí)為 WebSocket 推送。8. 性能觀察與常見問題排查8.1 三維大屏性能觀察Cesium 項(xiàng)目上線前重點(diǎn)觀察兩個(gè)指標(biāo)。第一個(gè)是幀率大屏交互旋轉(zhuǎn)是否流暢?？梢杂脼g覽器開發(fā)者工具的 Performance 面板錄制一段操作記錄看 Cesium 渲染線程是不是成了瓶頸。第二個(gè)是內(nèi)存占用。站點(diǎn)數(shù)量多、紋理豐富的場(chǎng)景內(nèi)存增長(zhǎng)會(huì)比較明顯。如果長(zhǎng)時(shí)間運(yùn)行后內(nèi)存只漲不降要排查是否有 Entity 或數(shù)據(jù)源泄漏。站點(diǎn)展示優(yōu)化建議站點(diǎn)數(shù)量少于 500 個(gè)直接用 Entity 渲染代碼最簡(jiǎn)單。站點(diǎn)數(shù)量 500 到 2000改用 PointPrimitiveCollection 和 LabelCollection減少 Entity 開銷。站點(diǎn)數(shù)量超過 2000抽稀顯示或使用 3D Tiles 加載站點(diǎn)模型按層級(jí)切換顯示粒度。8.2 常見問題排查問題現(xiàn)象可能原因排查方式解決方案Cesium 頁面黑屏或地球不顯示Cesium 離子令牌無效、網(wǎng)絡(luò)無法訪問全球影像服務(wù)打開瀏覽器 Network 面板檢查請(qǐng)求是否報(bào)錯(cuò)申請(qǐng)有效令牌或配置本地瓦片源三維場(chǎng)景里站點(diǎn)位置和底圖對(duì)不上坐標(biāo)參考不一致站點(diǎn)經(jīng)緯度寫錯(cuò)單位或坐標(biāo)系打印 Cesium 位置坐標(biāo)和原始數(shù)據(jù)比對(duì)統(tǒng)一存儲(chǔ) WGS84 經(jīng)緯度避免前端二次轉(zhuǎn)換OpenLayers 繪制后坐標(biāo)偏了沒有做 EPSG:3857 轉(zhuǎn) EPSG:4326 的轉(zhuǎn)換打印geometry.getCoordinates()和實(shí)際經(jīng)緯度保存前統(tǒng)一執(zhí)行 transform 轉(zhuǎn)換OpenLayers 頁面訪問空白依賴包版本沖突或者容器高度為 0檢查瀏覽器 Console 報(bào)錯(cuò)檢查地圖容器是否有高度給地圖容器設(shè)置固定高度重新安裝依賴PostGIS 查詢特別慢沒有建空間索引或者使用了不支持索引的函數(shù)寫法EXPLAIN ANALYZE查看查詢計(jì)劃添加 GIST 索引改寫 SQL 避免全表掃描ST_Buffer計(jì)算結(jié)果和預(yù)期差很遠(yuǎn)直接在 4326 坐標(biāo)系上使用經(jīng)緯度單位做半徑檢查 SQL 中緩沖半徑的單位使用geography類型或先投影再緩沖Cesium 大屏內(nèi)存一直漲Entity 沒有銷毀或請(qǐng)求沒有釋放切換頁面后用 Performance Memory 觀察在組件卸載時(shí) destroy Viewer及時(shí)清理數(shù)據(jù)源單位/量綱不一致導(dǎo)致覆蓋分析錯(cuò)誤前端和后端使用不同坐標(biāo)系或單位對(duì)比前端顯示和數(shù)據(jù)庫查詢的結(jié)果統(tǒng)一坐標(biāo)系并在接口層約束單位8.3 降低性能壓力的實(shí)踐第一次跑通系統(tǒng)后先小批量測(cè)試。只插入 100 個(gè)站點(diǎn)、5 條線路觀察三維大屏和采編頁的交互效果。數(shù)據(jù)量改成 5000 個(gè)站點(diǎn)后再對(duì)比幀率和接口響應(yīng)時(shí)間。這樣可以快速定位問題是在渲染層、數(shù)據(jù)層還是網(wǎng)絡(luò)層。批量導(dǎo)入站點(diǎn)時(shí)建議使用 PostGIS 的COPY命令或批量插入逐條插入會(huì)導(dǎo)致數(shù)據(jù)庫連接壓力很大。-- 使用批量插入代替逐條插入 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. 最佳實(shí)踐與使用建議9.1 數(shù)據(jù)管理建議站點(diǎn)數(shù)據(jù)、線路數(shù)據(jù)、區(qū)域數(shù)據(jù)分開建表不要放在一張表里。雖然查詢時(shí)可以關(guān)聯(lián)但后續(xù)維護(hù)邊界會(huì)模糊。站點(diǎn)表和線路表的空間字段都建議建 GIST 索引覆蓋分析和高頻空間查詢都依賴索引才能跑得快。原始坐標(biāo)和業(yè)務(wù)屬性分離。站點(diǎn)表的geom字段只存坐標(biāo)業(yè)務(wù)信息如站點(diǎn)名稱、運(yùn)營(yíng)時(shí)間、負(fù)責(zé)人放在普通字段。這樣既方便空間查詢也方便業(yè)務(wù)模塊擴(kuò)展。9.2 開發(fā)調(diào)試建議前端工程建議把 Cesium 和 OpenLayers 封裝成獨(dú)立組件不要在頁面里直接寫大段初始化和交互邏輯。Cesium 的Viewer被多次創(chuàng)建銷毀是最容易導(dǎo)致內(nèi)存溢出的操作組件化可以在onUnmounted中統(tǒng)一清理。開發(fā)時(shí)使用本地瓦片或離線地形能提升效率不受外網(wǎng)波動(dòng)影響。特別是展示給客戶看大屏效果的時(shí)候離線環(huán)境能避免突然出現(xiàn)灰色地球的尷尬。Cesium 加載站點(diǎn)模型時(shí)注意版權(quán)和授權(quán)問題。如果使用第三方 3D 模型要確認(rèn)模型的授權(quán)范圍不要隨意使用來源不明的素材。9.3 功能擴(kuò)展方向這個(gè)案例跑通后可以繼續(xù)擴(kuò)展的能力包括Cesium 可視域分析、天際線分析用于評(píng)估站點(diǎn)周邊遮擋情況。動(dòng)態(tài)光照效果和三維水面渲染增強(qiáng)大屏視覺表現(xiàn)力。站點(diǎn)覆蓋熱力圖把覆蓋分析結(jié)果按區(qū)域聚合按色階展示。車輛運(yùn)行軌跡回放把實(shí)時(shí)車輛位置寫成時(shí)間軸數(shù)據(jù)Cesium 中按時(shí)間推進(jìn)展示。與移動(dòng)端采集端聯(lián)動(dòng)外勤人員在移動(dòng)端上報(bào)新站點(diǎn)采編頁審核后入庫再同步到三維大屏。9.4 合規(guī)提醒如果項(xiàng)目中涉及真實(shí)公交站點(diǎn)、真實(shí)線路、人流數(shù)據(jù)務(wù)必確認(rèn)數(shù)據(jù)來源合法。站點(diǎn) POI 數(shù)據(jù)可能包含版權(quán)信息建議使用通過正規(guī)授權(quán)獲取的數(shù)據(jù)。涉及乘客流量、運(yùn)營(yíng)數(shù)據(jù)的分析和展示要遵守公交運(yùn)營(yíng)單位的保密要求。純演示和測(cè)試環(huán)境使用虛構(gòu)數(shù)據(jù)即可不要將未授權(quán)的真實(shí)業(yè)務(wù)數(shù)據(jù)直接放到外網(wǎng)。10. 總結(jié)與下一步這個(gè)智慧公交站點(diǎn)系統(tǒng)的技術(shù)方案核心是三件事Cesium 管三維大屏展示OpenLayers 管數(shù)據(jù)采編PostGIS 管空間分析。每一層技術(shù)都有明確的邊界組合起來就是一個(gè)完整可交付的業(yè)務(wù)系統(tǒng)。最值得優(yōu)先驗(yàn)證的是 PostGIS 覆蓋分析這條鏈路先用 SQL 把站點(diǎn)緩沖區(qū)和區(qū)域相交算出來再在 Cesium 里對(duì)結(jié)果做可視化會(huì)發(fā)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)決策比前端寫死可視化效果可靠得多。最容易踩的坑集中在坐標(biāo)系和緩沖區(qū)單位上。開發(fā)時(shí)先統(tǒng)一坐標(biāo)參考再做功能開發(fā)能省去大量排查時(shí)間。下一步建議先在本地把 PostgreSQL PostGIS 環(huán)境跑起來造 200 個(gè)模擬站點(diǎn)和幾條線路然后依次驗(yàn)證 OpenLayers 采編保存、Cesium 數(shù)據(jù)加載、PostGIS 覆蓋分析。這條鏈路走通后再考慮增加車輛軌跡、實(shí)時(shí)數(shù)據(jù)推送和更多三維特效。整體來說這套方案的技術(shù)選型都是行業(yè)主流方案可復(fù)用性高直接復(fù)制到智慧園區(qū)、智慧管廊、城市網(wǎng)格管理等項(xiàng)目中也只是換套數(shù)據(jù)模型的問題。