平時做智慧城市相關(guān)項目時三維可視化大屏、地圖數(shù)據(jù)采集編輯、空間分析這三塊需求經(jīng)常是綁在一起的。拿公交站點這個場景來說業(yè)務(wù)上既要有一張能直觀看到站點分布、線路走向的三維大屏又要有讓業(yè)務(wù)人員可以日常維護(hù)站點位置的采編工具還要能回答“某個片區(qū)的公交覆蓋率到底夠不夠”“新增一個站點能覆蓋多少小區(qū)”這類空間分析問題。我最近梳理了一套比較完整的落地案例技術(shù)棧選的是 Cesium OpenLayers PostGIS。這套組合在 GIS 項目里很常見但很多資料只講了單個點很少有人把“采編 - 存儲分析 - 三維展示”整條鏈路串起來。這篇文章就把完整方案拆開講清楚從數(shù)據(jù)庫設(shè)計到前端采編再到三維大屏展示和覆蓋分析全部給出可復(fù)制的代碼和配置適合正在做智慧交通、智慧城市大屏項目的開發(fā)者參考。1. 項目背景與整體架構(gòu)1.1 這個系統(tǒng)到底要解決什么問題先看業(yè)務(wù)場景。一個中大型城市的公交集團(tuán)每天要管理幾百條線路、幾千個站點。傳統(tǒng)管理方式通常依賴 Excel 表格或者簡單的 Web 管理系統(tǒng)站點位置靠人工錄入經(jīng)緯度時間一長就容易出現(xiàn)以下問題站點坐標(biāo)與實地位置偏差大因為早期數(shù)據(jù)可能是人工粗略標(biāo)注的。線路調(diào)整后站點數(shù)據(jù)更新不及時導(dǎo)致地圖展示和實際運營脫節(jié)。規(guī)劃新線路時無法快速評估站點覆蓋率也不知道哪些區(qū)域存在公交盲區(qū)。管理層匯報時缺少直觀的三維可視化大屏展示效果單薄。所以這個智慧公交站點系統(tǒng)的核心目標(biāo)有三個數(shù)據(jù)采編提供一個地圖交互界面業(yè)務(wù)人員可以在地圖上新增、修改、刪除站點不需要懂 GIS 軟件?？臻g分析基于站點坐標(biāo)做緩沖區(qū)分析、覆蓋范圍計算、盲區(qū)識別。三維展示將站點、線路、覆蓋范圍搬到三維地球或者三維場景中用于大屏展示和指揮調(diào)度。1.2 為什么選擇 Cesium OpenLayers PostGIS這套技術(shù)棧不是“為了炫技”而是每個組件都承擔(dān)了不可替代的職責(zé)。先說OpenLayers。它是開源 WebGIS 客戶端的成熟方案基于 JavaScript 開發(fā)兼容性好API 豐富。在采編場景中我們需要在地圖上繪制點、線、面需要編輯要素需要和 GeoJSON 格式無縫交互OpenLayers 做這些非常順手。它不依賴商業(yè)授權(quán)項目中可以自由使用。然后是PostGIS。它是 PostgreSQL 的空間擴(kuò)展把數(shù)據(jù)庫升級成了真正的空間數(shù)據(jù)庫。空間數(shù)據(jù)點、線、面可以像普通數(shù)據(jù)一樣存儲、查詢、索引。更關(guān)鍵的是PostGIS 內(nèi)置了大量空間分析函數(shù)比如ST_Buffer緩沖區(qū)分析、ST_Contains包含判斷、ST_Distance距離計算。這些分析如果在前端硬算數(shù)據(jù)量大時性能會很差放到數(shù)據(jù)庫里執(zhí)行則高效得多。最后是Cesium。它擅長三維地球和三維場景渲染支持加載地形、影像、3D Tiles、GeoJSON 等多種數(shù)據(jù)。在智慧公交大屏場景中可以用 Cesium 展示城市建筑白模、公交站點標(biāo)記、線路軌跡、輻射范圍。Cesium 本身也支持創(chuàng)建動態(tài)雷達(dá)掃描效果、流動線效果這對大屏展示很有價值。1.3 系統(tǒng)架構(gòu)總覽整個系統(tǒng)的調(diào)用鏈路并不復(fù)雜可以用下面這張表來表示層級技術(shù)組件職責(zé)說明前端大屏Cesium Vue三維場景展示、站點標(biāo)牌、線路軌跡、雷達(dá)掃描特效前端采編OpenLayers Vue地圖數(shù)據(jù)采集、站點編輯、屬性錄入服務(wù)端Spring Boot / Node.js提供站點增刪改查接口、空間分析接口數(shù)據(jù)層PostgreSQL PostGIS存儲空間數(shù)據(jù)、執(zhí)行空間分析 SQL我在做技術(shù)選型時還考慮過 Leaflet Turf.js 的方案但最后放棄了。原因很簡單Turf.js 雖然能做客戶端空間分析但大數(shù)據(jù)量下性能不穩(wěn)定而且分析邏輯散落在前端代碼里不利于維護(hù)。PostGIS 把所有分析能力集中在數(shù)據(jù)庫前端只需要調(diào)用接口傳參代碼結(jié)構(gòu)清晰很多。2. 環(huán)境準(zhǔn)備與版本說明2.1 基礎(chǔ)環(huán)境本文示例使用的環(huán)境如下具體版本需要根據(jù)你的項目實際情況調(diào)整操作系統(tǒng)Windows 10 / Ubuntu 20.04 均可。數(shù)據(jù)庫PostgreSQL 14 及以上安裝 postgis 擴(kuò)展。后端框架Spring Boot 2.7 或 Node.js Express本文示例用 Spring Boot。前端框架Vue 3 Vite。GIS 庫OpenLayers 7.xCesium 1.10x 版本系列。構(gòu)建工具npm / pnpm。注意Cesium 版本更新很快不同版本的 API 可能會有調(diào)整本文示例以常見版本為準(zhǔn)如果遇到 API 不一致優(yōu)先查閱對應(yīng)版本文檔。2.2 安裝 PostGIS在 Ubuntu 環(huán)境下的安裝命令如下sudo apt update sudo apt install postgresql postgresql-contrib sudo apt install postgis postgresql-14-postgis-3安裝完成后創(chuàng)建一個專門的空間數(shù)據(jù)庫sudo -u postgres createdb bus_db sudo -u postgres psql -d bus_db -c CREATE EXTENSION IF NOT EXISTS postgis;創(chuàng)建擴(kuò)展后可以用下面的 SQL 驗證SELECT postgis_version();如果能看到類似3.3 USE_GEOS1 USE_PROJ1 USE_STATS1的輸出說明 PostGIS 安裝成功。2.3 Cesium 與 OpenLayers 的安裝方式前端項目建議使用 Vite 創(chuàng)建npm create vitelatest smart-bus-front -- --template vue cd smart-bus-front npm install然后分別安裝 Cesium 和 OpenLayersnpm install cesium openlayersCesium 使用時需要處理靜態(tài)資源。在 Vite 中可以在vite.config.js中配置import { defineConfig } from vite import vue from vitejs/plugin-vue import cesium from vite-plugin-cesium export default defineConfig({ plugins: [vue(), cesium()] })安裝vite-plugin-cesium插件后Cesium 的靜態(tài)資源會自動處理避免手動配置CESIUM_BASE_URL。3. 數(shù)據(jù)庫設(shè)計與 PostGIS 空間分析基礎(chǔ)3.1 公交站點相關(guān)表結(jié)構(gòu)設(shè)計設(shè)計數(shù)據(jù)庫表之前先梳理業(yè)務(wù)實體。這個項目中核心的實體有站點點數(shù)據(jù)包含站點名稱、站點編碼、所在區(qū)域、經(jīng)緯度。線路線數(shù)據(jù)包含線路名稱、線路編碼、途經(jīng)站點順序。線路站點關(guān)聯(lián)記錄某條線路經(jīng)過哪些站點以及站點的順序?？臻g字段統(tǒng)一使用geometry(Point, 4326)坐標(biāo)系使用 WGS84 經(jīng)緯度。這里有一個很重要的經(jīng)驗存儲時統(tǒng)一用 4326 經(jīng)緯度坐標(biāo)系展示時由前端進(jìn)行投影轉(zhuǎn)換。這樣可以避免坐標(biāo)系混亂。創(chuàng)建站點表的 SQL 如下CREATE TABLE bus_station ( id SERIAL PRIMARY KEY, station_code VARCHAR(50) UNIQUE NOT NULL, station_name VARCHAR(100) NOT NULL, district VARCHAR(50), address VARCHAR(200), geom geometry(Point, 4326) NOT NULL, created_at TIMESTAMP DEFAULT NOW(), updated_at TIMESTAMP DEFAULT NOW() ); CREATE INDEX idx_bus_station_geom ON bus_station USING GIST (geom);線路表CREATE TABLE bus_line ( id SERIAL PRIMARY KEY, line_code VARCHAR(50) UNIQUE NOT NULL, line_name VARCHAR(100) NOT NULL, start_station VARCHAR(100), end_station VARCHAR(100), geom geometry(LineString, 4326), created_at TIMESTAMP DEFAULT NOW() ); CREATE INDEX idx_bus_line_geom ON bus_line USING GIST (geom);線路站點關(guān)聯(lián)表CREATE TABLE bus_line_station ( id SERIAL PRIMARY KEY, line_id INT NOT NULL REFERENCES bus_line(id), station_id INT NOT NULL REFERENCES bus_station(id), station_order INT NOT NULL );這里使用 GIST 索引至關(guān)重要。PostGIS 的空間查詢在數(shù)據(jù)量大時如果沒有 GIST 索引會做全表掃描性能下降嚴(yán)重。凡是參與空間查詢的幾何字段都應(yīng)該建立 GIST 索引。3.2 PostGIS 常用空間函數(shù)PostGIS 的核心價值在空間分析函數(shù)。這里先介紹幾個本項目會用到的函數(shù)方便后面實戰(zhàn)代碼理解。ST_GeomFromText / ST_SetSRID用于從 WKT 文本構(gòu)建空間對象并指定坐標(biāo)系。SELECT ST_GeomFromText(POINT(116.4074 39.9042), 4326);ST_Buffer 緩沖區(qū)分析ST_Buffer(geom, distance)計算幾何對象周圍指定距離的緩沖區(qū)。注意4326 坐標(biāo)系單位是度直接使用米為單位計算緩沖區(qū)是不正確的。解決方法是在計算時使用地理坐標(biāo)系類型的函數(shù)ST_Buffer(geography(geom), 500)或者先投影到合適的分帶投影坐標(biāo)系。為了方便可以使用地理類型SELECT station_name, ST_Buffer(geom::geography, 500) AS buffer_geom FROM bus_station;ST_DWithin 距離范圍內(nèi)判斷判斷點與點、點與面的距離是否在指定范圍內(nèi)常用于“某個坐標(biāo)點是否在站點500米范圍內(nèi)”這種查詢。SELECT * FROM bus_station WHERE ST_DWithin(geom::geography, ST_SetSRID(ST_MakePoint(116.4074, 39.9042), 4326)::geography, 500);ST_Contains / ST_Intersects用于判斷幾何對象之間的包含、相交關(guān)系覆蓋分析中非常常用。3.3 初始化示例數(shù)據(jù)為了方便演示先插入一些測試數(shù)據(jù)INSERT INTO bus_station (station_code, station_name, district, geom) VALUES (S001, 人民廣場站, 中心區(qū), ST_SetSRID(ST_MakePoint(116.4074, 39.9042), 4326)), (S002, 科技園站, 高新區(qū), ST_SetSRID(ST_MakePoint(116.4128, 39.9167), 4326)), (S003, 火車站, 中心區(qū), ST_SetSRID(ST_MakePoint(116.4200, 39.9000), 4326)), (S004, 市政府站, 政務(wù)區(qū), ST_SetSRID(ST_MakePoint(116.4300, 39.9200), 4326)), (S005, 文化廣場站, 中心區(qū), ST_SetSRID(ST_MakePoint(116.3980, 39.9100), 4326));線路示例數(shù)據(jù)INSERT INTO bus_line (line_code, line_name, start_station, end_station, geom) VALUES (L001, 1路公交, 人民廣場站, 文化廣場站, ST_SetSRID(ST_MakeLine( ARRAY[ ST_MakePoint(116.4074, 39.9042), ST_MakePoint(116.4128, 39.9167), ST_MakePoint(116.4300, 39.9200), ST_MakePoint(116.3980, 39.9100) ] ), 4326));4. OpenLayers 采編模塊實戰(zhàn)4.1 采編模塊的功能拆分OpenLayers 采編模塊的思路很直接核心就是兩件事一是地圖展示二是要素編輯。對于地圖展示需要一個底圖。如果是內(nèi)網(wǎng)離線環(huán)境可以使用本地瓦片服務(wù)如果有外網(wǎng)條件可以使用常見的在線瓦片。這里為了示例簡單使用 OpenStreetMap 免費瓦片。實際生產(chǎn)項目中優(yōu)先考慮合規(guī)的商用地圖服務(wù)或自建瓦片服務(wù)。對于要素編輯OpenLayers 提供了Draw和Modify兩個交互類。Draw用于繪制點、線、面Modify用于修改已有要素坐標(biāo)。采編模塊最核心的流程是從后端加載已有站點數(shù)據(jù)渲染到地圖上。用戶點擊“新增站點”進(jìn)入繪制模式在地圖上點擊放置站點。用戶點擊“編輯站點”進(jìn)入修改模式可以拖動站點位置。保存時將 GeoJSON 數(shù)據(jù)提交到后端。4.2 初始化 OpenLayers 地圖在 Vue 組件中創(chuàng)建一個StationEdit.vue核心代碼框架如下template div idol-map classmap-container/div /template script setup import { onMounted, onUnmounted, ref } from vue import Map from ol/Map import View from ol/View import TileLayer from ol/layer/Tile import OSM from ol/source/OSM import VectorLayer from ol/layer/Vector import VectorSource from ol/source/Vector import { Draw, Modify, Snap } from ol/interaction import GeoJSON from ol/format/GeoJSON import { Style, Circle as CircleStyle, Fill, Stroke, Text } from ol/style import { fromLonLat, toLonLat } from ol/proj const map ref(null) const vectorSource ref(new VectorSource()) let drawInteraction null let modifyInteraction null // 初始化地圖 const initMap () { map.value new Map({ target: ol-map, layers: [ new TileLayer({ source: new OSM() }), new VectorLayer({ source: vectorSource.value, style: stationStyle }) ], view: new View({ center: fromLonLat([116.4074, 39.9042]), zoom: 13 }) }) } // 站點樣式 const stationStyle new Style({ image: new CircleStyle({ radius: 8, fill: new Fill({ color: #409eff }), stroke: new Stroke({ color: #ffffff, width: 2 }) }), text: new Text({ text: , offsetY: -20, fill: new Fill({ color: #333333 }), font: 14px sans-serif }) }) const loadStations async () { const response await fetch(/api/stations) const data await response.json() const geojson { type: FeatureCollection, features: data.map(item ({ type: Feature, properties: { id: item.id, stationName: item.stationName, stationCode: item.stationCode }, geometry: { type: Point, coordinates: [item.lng, item.lat] } })) } vectorSource.value.clear() const features new GeoJSON().readFeatures(geojson, { dataProjection: EPSG:4326, featureProjection: map.value.getView().getProjection() }) vectorSource.value.addFeatures(features) } /script這段代碼有兩點需要說明第一地圖視圖的投影默認(rèn)是EPSG:3857也就是 Web 墨卡托投影而站點數(shù)據(jù)是EPSG:4326經(jīng)緯度。在加載 GeoJSON 時必須通過dataProjection和featureProjection參數(shù)做轉(zhuǎn)換否則站點位置會嚴(yán)重偏移。第二站點的樣式包括圓形圖標(biāo)和文字標(biāo)注。實際項目中文字標(biāo)注可以顯示站點名稱這里為了通用先留空。如果想顯示站點名需要在Text的text字段中動態(tài)傳入。4.3 新增站點與編輯站點核心交互邏輯如下// 開始繪制站點 const startAddStation () { drawInteraction new Draw({ source: vectorSource.value, type: Point }) map.value.addInteraction(drawInteraction) drawInteraction.on(drawend, (evt) { const feature evt.feature const geometry feature.getGeometry() const lonLat toLonLat(geometry.getCoordinates()) // 將新站點坐標(biāo)傳給后端 saveStation(null, lonLat[0], lonLat[1]) }) } // 開始編輯站點 const startEditStation () { modifyInteraction new Modify({ source: vectorSource.value }) map.value.addInteraction(modifyInteraction) modifyInteraction.on(modifyend, (evt) { const features evt.features features.forEach(feature { const id feature.getProperties().id const geometry feature.getGeometry() const lonLat toLonLat(geometry.getCoordinates()) updateStation(id, lonLat[0], lonLat[1]) }) }) }注意繪制和修改交互只能同時存在一個。如果用戶點“新增”時已經(jīng)開啟了“編輯”需要先把modifyInteraction移除否則會互相沖突。保存站點的接口調(diào)用可以這樣實現(xiàn)const saveStation async (id, lng, lat) { const payload { id: id, stationName: 新增站點, lng: lng, lat: lat } const response await fetch(/api/stations, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify(payload) }) if (response.ok) { loadStations() } }4.4 后端保存接口后端接口的作用是接收 OpenLayers 前端提交的經(jīng)緯度存儲到 PostGIS 表里。用 Spring Boot 實現(xiàn)時核心邏輯大致如下RestController RequestMapping(/api/stations) public class StationController { Autowired private JdbcTemplate jdbcTemplate; PostMapping public void save(RequestBody StationDto dto) { if (dto.getId() null) { // 新增站點 String sql INSERT INTO bus_station (station_code, station_name, district, geom) VALUES (?, ?, ?, ST_SetSRID(ST_MakePoint(?, ?), 4326)); jdbcTemplate.update(sql, dto.getStationCode(), dto.getStationName(), dto.getDistrict(), dto.getLng(), dto.getLat()); } else { // 更新站點 String sql UPDATE bus_station SET station_name ?, geom ST_SetSRID(ST_MakePoint(?, ?), 4326) WHERE id ?; jdbcTemplate.update(sql, dto.getStationName(), dto.getLng(), dto.getLat(), dto.getId()); } } }這里ST_MakePoint(lng, lat)直接生成一個點配合ST_SetSRID指定坐標(biāo)系。值得提醒的是ST_MakePoint的參數(shù)順序是經(jīng)度在前、緯度在后如果傳反了站點會落到完全不同的位置。5. PostGIS 覆蓋分析與盲區(qū)識別5.1 站點覆蓋率計算業(yè)務(wù)需求通常是這樣的以每個公交站點為中心按 500 米半徑做緩沖區(qū)計算該區(qū)域覆蓋了多少面積、多少小區(qū)、多少人口。PostGIS 計算每個站點緩沖區(qū)的 SQLSELECT station_id, station_name, ST_Area(buffer_geom::geography) AS buffer_area FROM ( SELECT id AS station_id, station_name, ST_Buffer(geom::geography, 500) AS buffer_geom FROM bus_station ) t;這里使用::geography轉(zhuǎn)換是因為在 4326 坐標(biāo)系下直接ST_Buffer(geom, 500)會把 500 當(dāng)作“度”而不是“米”這樣結(jié)果完全錯誤。轉(zhuǎn)換為 geography 類型后緩沖區(qū)計算以米為單位。5.2 計算公交盲區(qū)盲區(qū)識別的思路是先求出所有站點 500 米緩沖區(qū)的并集然后用整個城市的研究區(qū)域減去這個并集剩下的部分就是公交盲區(qū)。SQL 如下WITH buffer_union AS ( SELECT ST_Union(ST_Buffer(geom::geography, 500)::geometry) AS geom FROM bus_station ), city_area AS ( SELECT geom FROM city_boundary WHERE city_name 示例城市 ) SELECT ST_Difference(city_area.geom, buffer_union.geom) AS blind_area FROM city_area, buffer_union;這個 SQL 中有幾個細(xì)節(jié)ST_Union是聚合函數(shù)將多個多邊形合并成一個多邊形用來表示所有站點的覆蓋范圍并集。ST_Difference從城市區(qū)域中減去覆蓋范圍剩下的是盲區(qū)多邊形。由于 geography 類型不支持所有空間運算所以計算時先把緩沖區(qū)結(jié)果 cast 回 geometry最后再處理。5.3 新增站點的最佳位置推薦當(dāng)業(yè)務(wù)人員想新增站點時可以用空間查詢找出“距離現(xiàn)有站點超過 500 米、且周邊人口密集的區(qū)域”。這里需要結(jié)合人口點數(shù)據(jù)表SELECT p.id, p.name, p.geom FROM population_points p WHERE NOT EXISTS ( SELECT 1 FROM bus_station s WHERE ST_DWithin(p.geom::geography, s.geom::geography, 500) );這個查詢返回所有距離最近站點超過 500 米的人口點這些點附近的區(qū)域可以作為新增站點的候選位置。這種 SQL 分析思路也可以在規(guī)劃新線路時提供參考。6. Cesium 三維大屏展示6.1 創(chuàng)建 Cesium 三維場景Cesium 大屏部分的目標(biāo)是加載三維地球或城市模型將站點以圖標(biāo)形式展示將線路以軌跡線形式展示并添加一些動態(tài)特效。先看最基礎(chǔ)的 Cesium 初始化。在 Vue 組件中創(chuàng)建一個BusBigScreen.vuetemplate div idcesium-container classcesium-container/div /template script setup import { onMounted, ref } from vue import * as Cesium from cesium import cesium/Build/Cesium/Widgets/widgets.css const viewer ref(null) onMounted(() { // 如果使用離線環(huán)境需要配置本地影像服務(wù)地址 // 這里使用默認(rèn)的 Bing 影像生產(chǎn)項目建議替換為自建瓦片 viewer.value new Cesium.Viewer(cesium-container, { animation: false, baseLayerPicker: false, geocoder: false, timeline: false, sceneModePicker: false, navigationHelpButton: false, infoBox: false, fullscreenButton: false, selectionIndicator: false }) }) /script style scoped .cesium-container { width: 100%; height: 100vh; } /style初始化時關(guān)閉了很多默認(rèn)控件是因為大屏頁面通常只需要展示地圖內(nèi)容不需要用戶進(jìn)行復(fù)雜的視圖切換和操作。如果項目使用離線環(huán)境沒有外網(wǎng)訪問 Cesium 的在線影像源需要自行搭建瓦片服務(wù)然后通過WebMapServiceImageryProvider或UrlTemplateImageryProvider加載本地瓦片。6.2 加載公交站點標(biāo)牌將站點數(shù)據(jù)從后端接口拉取后在 Cesium 中加載。最簡單的方式是使用Cesium.GeoJsonDataSource直接加載 GeoJSON 數(shù)據(jù)const loadStationEntity async () { const response await fetch(/api/stations/geojson) const geojson await response.json() const dataSource await Cesium.GeoJsonDataSource.load(geojson, { clampToGround: true }) dataSource.entities.values.forEach(entity { // 設(shè)置站點圖標(biāo)樣式可以換成自己的圖標(biāo)資源 entity.billboard new Cesium.BillboardGraphics({ image: /images/bus_stop.png, width: 32, height: 32, verticalOrigin: Cesium.VerticalOrigin.BOTTOM }) entity.label new Cesium.LabelGraphics({ text: entity.properties.stationName?.getValue() || , font: 14px sans-serif, fillColor: Cesium.Color.WHITE, outlineColor: Cesium.Color.BLACK, outlineWidth: 3, style: Cesium.LabelStyle.FILL_AND_OUTLINE, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, pixelOffset: new Cesium.Cartesian2(0, -34) }) }) viewer.value.dataSources.add(dataSource) }clampToGround: true是將站點標(biāo)記貼合到地面上避免因為地形起伏導(dǎo)致標(biāo)注懸浮或陷入地下。對于大屏展示來說標(biāo)注是否貼地直接影響視覺效果。如果不想使用 GeoJSON 加載也可以直接使用viewer.entities.add手動添加實體。兩種方式的區(qū)別在于GeoJsonDataSource適合批量加載手動添加適合單個或少量實體。6.3 公交線路軌跡動態(tài)展示公交線路在三維大屏上一般有兩種展示方式靜態(tài)的線路軌跡線和動態(tài)的流動效果。靜態(tài)線路用PolylineGraphics即可const addBusLine (lineGeom, lineName) { // lineGeom 是線坐標(biāo)數(shù)組格式為 [[lng, lat], [lng, lat], ...] const positions lineGeom.map(coord Cesium.Cartesian3.fromDegrees(coord[0], coord[1])) viewer.value.entities.add({ name: lineName, polyline: { positions: positions, width: 4, material: new Cesium.PolylineGlowMaterialProperty({ glowPower: 0.2, color: Cesium.Color.fromCssColorString(#00d4ff) }) } }) }動態(tài)流動效果稍微復(fù)雜一點需要定時更新材質(zhì)偏移量或者使用PolylineTrailLinkMaterialProperty。網(wǎng)上有各種自定義材質(zhì)實現(xiàn)核心原理是給 Polyline 材質(zhì)傳入一個隨時間變化的time參數(shù)。最簡單的實現(xiàn)方式是啟動一個requestAnimationFrame循環(huán)不斷更新材質(zhì)屬性。不過要提醒一下動態(tài)特效對渲染性能有一定消耗。如果大屏上有幾十條線路同時播放流動效果需要在效果與性能之間做權(quán)衡。實際項目中可以只對重點線路啟用流動效果其他線路使用靜態(tài)樣式。6.4 站點覆蓋范圍三維可視化PostGIS 分析出來的覆蓋范圍也就是站點 500 米緩沖區(qū)也可以在 Cesium 中疊加展示。這種面數(shù)據(jù)通常以 GeoJSON 形式輸出加載方式和站點類似const loadBufferOverlay async () { const response await fetch(/api/stations/buffer-geojson?radius500) const geojson await response.json() const dataSource await Cesium.GeoJsonDataSource.load(geojson, { clampToGround: true }) dataSource.entities.values.forEach(entity { entity.polygon new Cesium.PolygonGraphics({ material: Cesium.Color.fromCssColorString(#00d4ff).withAlpha(0.3), outline: true, outlineColor: Cesium.Color.WHITE }) }) viewer.value.dataSources.add(dataSource) }需要注意的是如果緩沖區(qū)數(shù)據(jù)量很大比如一個城市幾千個站點全部用GeoJsonDataSource加載到三維場景中渲染壓力會很大。這時候需要考慮聚合展示或者分級加載方案。6.5 雷達(dá)掃描特效Cesium 雷達(dá)掃描效果是社區(qū)里比較熱門的特效常用于大屏頁面突出某個重點區(qū)域。實現(xiàn)一個簡單的圓形雷達(dá)掃描效果可以通過繪制多個半徑遞增的圓環(huán)并控制透明度和旋轉(zhuǎn)來實現(xiàn)。網(wǎng)上常見的方案有兩種使用CallbackProperty動態(tài)修改多邊形參數(shù)。使用自定義材質(zhì)PolylineDashMaterialProperty或Cesium.Material擴(kuò)展。下面給一個使用簡單方式實現(xiàn)雷達(dá)波紋的示例const addRadarEffect (longitude, latitude, radius) { const center Cesium.Cartesian3.fromDegrees(longitude, latitude) const positions [] // 生成圓形邊緣點 for (let i 0; i 360; i 3) { const angle Cesium.Math.toRadians(i) const x radius * Math.cos(angle) const y radius * Math.sin(angle) positions.push(new Cesium.Cartesian3(center.x x, center.y y, center.z)) } viewer.value.entities.add({ polyline: { positions: positions, width: 4, material: new Cesium.ColorMaterialProperty(Cesium.Color.CYAN.withAlpha(0.6)) } }) }這里的思路是直接以 Cartesian3 坐標(biāo)計算圓形邊緣位置。更精細(xì)的雷達(dá)掃描效果會涉及橢圓、旋轉(zhuǎn)、透明度動畫核心代碼量更大本文先給出基礎(chǔ)版本。7. 前后端聯(lián)調(diào)與接口設(shè)計7.1 接口清單整個系統(tǒng)涉及三塊主要接口這里統(tǒng)一整理接口方法說明/api/stationsGET獲取全部站點OpenLayers 采編使用/api/stationsPOST新增或更新站點/api/stations/{id}DELETE刪除站點/api/stations/geojsonGET返回 GeoJSON 格式站點數(shù)據(jù)Cesium 使用/api/stations/buffer-geojsonGET返回站點緩沖區(qū) GeoJSON/api/analysis/blind-areaGET返回公交盲區(qū)面數(shù)據(jù)7.2 站點 GeoJSON 接口示例先看 Cesium 需要的 GeoJSON 接口。后端可以這樣實現(xiàn)GetMapping(/geojson) public String getStationsGeoJson() { String sql SELECT id, station_name, station_code, ST_AsGeoJSON(geom) AS geojson FROM bus_station; ListMapString, Object rows jdbcTemplate.queryForList(sql); StringBuilder sb new StringBuilder(); sb.append({\type\:\FeatureCollection\,\features\:[); for (int i 0; i rows.size(); i) { MapString, Object row rows.get(i); sb.append({\type\:\Feature\,\properties\:{); sb.append(\id\:\).append(row.get(id)).append(\,); sb.append(\stationName\:\).append(row.get(station_name)).append(\,); sb.append(\stationCode\:\).append(row.get(station_code)).append(\); sb.append(},\geometry\:).append(row.get(geojson)); sb.append(}); if (i rows.size() - 1) { sb.append(,); } } sb.append(]}); return sb.toString(); }這里使用ST_AsGeoJSON將 PostGIS 幾何對象直接轉(zhuǎn)換成 GeoJSON 格式字符串省去了手工拼接坐標(biāo)的麻煩。注意實際項目中建議使用 Jackson 等 JSON 庫構(gòu)建避免字符串拼接出錯。7.3 緩沖區(qū)分析接口示例緩沖區(qū)分析接口需要接收兩個參數(shù)radius半徑值以及可選的stationId指定某個站點。GetMapping(/buffer-geojson) public String getBufferGeoJson(RequestParam(defaultValue 500) double radius) { String sql SELECT ST_AsGeoJSON(ST_Union(ST_Buffer(geom::geography, ?)::geometry)) AS geojson FROM bus_station; String geojson jdbcTemplate.queryForObject(sql, String.class, radius); return {\type\:\FeatureCollection\,\features\:[{\type\:\Feature\,\properties\:{}, \geometry\: geojson }]}; }ST_Union的作用是合并所有站點的緩沖區(qū)。如果每個站點獨立展示不合并可以改成按站點點 ID 分組輸出多個 feature。8. 常見問題與排查思路8.1 常見報錯清單問題現(xiàn)象常見原因解決思路Extension postgis not availablePostgreSQL 版本與 PostGIS 插件不匹配檢查 PostgreSQL 版本安裝對應(yīng)版本 postgis 包站點位置偏移嚴(yán)重坐標(biāo)系轉(zhuǎn)換錯誤檢查前端dataProjection是否設(shè)置為EPSG:4326ST_MakePoint后點位置錯誤經(jīng)緯度參數(shù)傳反確認(rèn)ST_MakePoint(lng, lat)順序緩沖區(qū)面積異常大在 4326 坐標(biāo)系直接用米做單位改用::geography類型或投影坐標(biāo)系Cesium 加載 GeoJSON 不顯示數(shù)據(jù)格式錯誤或缺少clampToGround打開瀏覽器控制臺查看 JSON 解析報錯OpenLayers 繪制后無法保存缺少toLonLat轉(zhuǎn)換繪制坐標(biāo)是投影坐標(biāo)需要轉(zhuǎn)經(jīng)緯度再提交動態(tài)流動線路卡頓線路過多或材質(zhì)更新頻率過高減少動態(tài)線路數(shù)量使用靜態(tài)材質(zhì)替代8.2 OpenLayers 坐標(biāo)轉(zhuǎn)換問題詳解OpenLayers 地圖默認(rèn)使用 Web 墨卡托投影EPSG:3857所以通過Draw交互獲取的坐標(biāo)點是投影坐標(biāo)。如果直接把這個坐標(biāo)傳給后端存入 PostGIS數(shù)據(jù)庫會把它當(dāng)作經(jīng)緯度處理結(jié)果站點位置就會亂掉。正確做法是保存時用toLonLat轉(zhuǎn)回EPSG:4326import { toLonLat } from ol/proj const lonLat toLonLat(geometry.getCoordinates())加載數(shù)據(jù)時反過來用fromLonLat將經(jīng)緯度轉(zhuǎn)成投影坐標(biāo)import { fromLonLat } from ol/proj map.getView().setCenter(fromLonLat([116.4074, 39.9042]))如果你是通過GeoJSON格式讀寫數(shù)據(jù)則不需要手動轉(zhuǎn)換只要在readFeatures時設(shè)置好dataProjection和featureProjection即可。8.3 Cesium 瓦片離線部署說明很多政務(wù)項目運行在內(nèi)網(wǎng)環(huán)境無法訪問外部在線影像服務(wù)。這種情況下Cesium 場景中的影像底圖需要自行解決。常見方案有兩種使用本地的傳統(tǒng) Web 地圖瓦片通過UrlTemplateImageryProvider加載。使用單張靜態(tài)影像圖疊加SingleTileImageryProvider。示例const imageryProvider new Cesium.UrlTemplateImageryProvider({ url: http://your-tile-server/tiles/{z}/{x}/{y}.png, maximumLevel: 18 }) viewer.value.imageryLayers.addImageryProvider(imageryProvider)注意如果使用本地瓦片Cesium 初始化代碼中需要把默認(rèn)的影像圖層移除否則外網(wǎng)影像加載失敗時會一直等待。9. 最佳實踐與工程建議9.1 坐標(biāo)系統(tǒng)一規(guī)范這是整個項目最基礎(chǔ)也最重要的規(guī)范。在智慧公交系統(tǒng)中涉及多個環(huán)節(jié)的數(shù)據(jù)交換只要有一個環(huán)節(jié)坐標(biāo)系不一致站點位置就會偏移。我的建議是數(shù)據(jù)庫存儲層統(tǒng)一使用EPSG:4326幾何類型使用geometry(Point, 4326)。后端交換格式統(tǒng)一使用 GeoJSONGeoJSON 規(guī)范中坐標(biāo)就是EPSG:4326經(jīng)緯度。OpenLayers 展示層地圖控件使用EPSG:3857在讀寫接口時轉(zhuǎn)換。Cesium 展示層直接使用EPSG:4326經(jīng)緯度內(nèi)部自動處理。9.2 空間索引和性能優(yōu)化PostGIS 表必須為空間字段建立 GIST 索引。隨著站點數(shù)量增長不帶索引的ST_DWithin查詢會從毫秒級惡化到秒級甚至更慢。建立索引的 SQLCREATE INDEX idx_bus_station_geom ON bus_station USING GIST (geom);另外ST_Buffer這種計算量較大的分析不建議在每次請求時實時計算整個城市的所有站點?？梢蕴崆巴ㄟ^定時任務(wù)計算好結(jié)果存入獨立的分析結(jié)果表前端請求時直接讀取。9.3 大屏前端性能優(yōu)化Cesium 大屏渲染性能是重點。建議從以下幾點入手站點數(shù)據(jù)量超過幾千個時使用Cesium.PrimitiveCollection替代單個 Entity或者使用 3D Tiles 批量渲染。動態(tài)特效數(shù)量控制。雷達(dá)掃描、流動線路這類動態(tài)效果非常消耗 GPU建議最多只保留 5 到 10 個。頁面使用懶加載。大屏進(jìn)入時先加載底圖和基礎(chǔ)站點用戶點擊線路詳情后再加載該線路的軌跡和動態(tài)效果。如果項目開發(fā)了“前端頁面數(shù)據(jù)實時刷新”考慮使用 WebSocket 推送增量更新而不是整表刷新。9.4 數(shù)據(jù)備份與權(quán)限管理生產(chǎn)環(huán)境中空間數(shù)據(jù)是最重要的資產(chǎn)。建議定期執(zhí)行pg_dump備份腳本至少保留最近 7 天的備份。使用 Flyway 等數(shù)據(jù)庫遷移工具管理表結(jié)構(gòu)變更避免手工執(zhí)行 SQL 導(dǎo)致生產(chǎn)環(huán)境不一致。編輯接口必須做權(quán)限校驗只有授權(quán)用戶才能新增和修改站點。大屏展示接口可以放行只讀權(quán)限。刪除站點操作建議采用邏輯刪除增加deleted字段而不是物理刪除避免誤操作導(dǎo)致歷史數(shù)據(jù)丟失。9.5 多版本 Cesium 之間的差異Cesium 的版本迭代速度很快比如viewer.entities.add這種方式雖然兼容性很好但部分 API 在新版本中會被標(biāo)記為廢棄。比如較新的 Cesium 版本對GeoJsonDataSource的樣式設(shè)置方式有調(diào)整。如果你直接復(fù)制網(wǎng)上舊代碼到新版本環(huán)境很可能會遇到BillboardGraphics參數(shù)不生效或者樣式不一致的問題。建議在項目中鎖定 Cesium 的具體版本npm install cesium1.103.0 --save-exact鎖定版本后再升級時單獨處理。10. 總結(jié)智慧公交站點系統(tǒng)是典型的“WebGIS 空間分析 三維可視化”綜合項目。它用 OpenLayers 解決了數(shù)據(jù)采編的交互問題用 PostGIS 解決了空間分析的計算問題用 Cesium 解決了大屏展示的視覺問題。三個技術(shù)點各司其職組合在一起就能形成一個完整可落地的業(yè)務(wù)閉環(huán)。整套方案中最值得關(guān)注的點有三個第一PostGIS 是項目的數(shù)據(jù)中樞所有的空間計算都圍繞它展開包括緩沖區(qū)分析、盲區(qū)識別、覆蓋分析。把分析邏輯下沉到數(shù)據(jù)庫層比在前端用第三方庫硬算更可靠、更高效。第二坐標(biāo)系一致性和轉(zhuǎn)換貫穿了整個項目OpenLayers 的投影坐標(biāo)、GeoJSON 的經(jīng)緯度、PostGIS 的 4326 坐標(biāo)系任何一個環(huán)節(jié)不加注意都會導(dǎo)致位置錯誤。第三Cesium 大屏展示的重點不只是“能顯示”而是要在大量數(shù)據(jù)和動態(tài)效果之間找到性能平衡點。如果你正在規(guī)劃類似項目可以先從站點的 CRUD 和 PostGIS 空間查詢開始把數(shù)據(jù)鏈路跑通再逐步加上 OpenLayers 的繪制編輯和 Cesium 的三維展示。每一步都可以獨立測試風(fēng)險可控。后續(xù)還可以擴(kuò)展的方向包括站點客流熱力圖、基于站點覆蓋范圍的人口統(tǒng)計、線路運行軌跡回放、與 Three.js 結(jié)合做更復(fù)雜的 3D 場景特效?？臻g數(shù)據(jù)可視化這條路線可以深入探索的點還有很多。