平時(shí)做智慧城市相關(guān)項(xiàng)目時(shí)三維可視化大屏、地圖數(shù)據(jù)采集編輯、空間分析這三塊需求經(jīng)常是綁在一起的。拿公交站點(diǎn)這個(gè)場(chǎng)景來(lái)說(shuō)業(yè)務(wù)上既要有一張能直觀看到站點(diǎn)分布、線路走向的三維大屏又要有讓業(yè)務(wù)人員可以日常維護(hù)站點(diǎn)位置的采編工具還要能回答“某個(gè)片區(qū)的公交覆蓋率到底夠不夠”“新增一個(gè)站點(diǎn)能覆蓋多少小區(qū)”這類空間分析問題。我最近梳理了一套比較完整的落地案例技術(shù)棧選的是 Cesium OpenLayers PostGIS。這套組合在 GIS 項(xiàng)目里很常見但很多資料只講了單個(gè)點(diǎn)很少有人把“采編 - 存儲(chǔ)分析 - 三維展示”整條鏈路串起來(lái)。這篇文章就把完整方案拆開講清楚從數(shù)據(jù)庫(kù)設(shè)計(jì)到前端采編再到三維大屏展示和覆蓋分析全部給出可復(fù)制的代碼和配置適合正在做智慧交通、智慧城市大屏項(xiàng)目的開發(fā)者參考。1. 項(xiàng)目背景與整體架構(gòu)1.1 這個(gè)系統(tǒng)到底要解決什么問題先看業(yè)務(wù)場(chǎng)景。一個(gè)中大型城市的公交集團(tuán)每天要管理幾百條線路、幾千個(gè)站點(diǎn)。傳統(tǒng)管理方式通常依賴 Excel 表格或者簡(jiǎn)單的 Web 管理系統(tǒng)站點(diǎn)位置靠人工錄入經(jīng)緯度時(shí)間一長(zhǎng)就容易出現(xiàn)以下問題站點(diǎn)坐標(biāo)與實(shí)地位置偏差大因?yàn)樵缙跀?shù)據(jù)可能是人工粗略標(biāo)注的。線路調(diào)整后站點(diǎn)數(shù)據(jù)更新不及時(shí)導(dǎo)致地圖展示和實(shí)際運(yùn)營(yíng)脫節(jié)。規(guī)劃新線路時(shí)無(wú)法快速評(píng)估站點(diǎn)覆蓋率也不知道哪些區(qū)域存在公交盲區(qū)。管理層匯報(bào)時(shí)缺少直觀的三維可視化大屏展示效果單薄。所以這個(gè)智慧公交站點(diǎn)系統(tǒng)的核心目標(biāo)有三個(gè)數(shù)據(jù)采編提供一個(gè)地圖交互界面業(yè)務(wù)人員可以在地圖上新增、修改、刪除站點(diǎn)不需要懂 GIS 軟件?？臻g分析基于站點(diǎn)坐標(biāo)做緩沖區(qū)分析、覆蓋范圍計(jì)算、盲區(qū)識(shí)別。三維展示將站點(diǎn)、線路、覆蓋范圍搬到三維地球或者三維場(chǎng)景中用于大屏展示和指揮調(diào)度。1.2 為什么選擇 Cesium OpenLayers PostGIS這套技術(shù)棧不是“為了炫技”而是每個(gè)組件都承擔(dān)了不可替代的職責(zé)。先說(shuō)OpenLayers。它是開源 WebGIS 客戶端的成熟方案基于 JavaScript 開發(fā)兼容性好API 豐富。在采編場(chǎng)景中我們需要在地圖上繪制點(diǎn)、線、面需要編輯要素需要和 GeoJSON 格式無(wú)縫交互OpenLayers 做這些非常順手。它不依賴商業(yè)授權(quán)項(xiàng)目中可以自由使用。然后是PostGIS。它是 PostgreSQL 的空間擴(kuò)展把數(shù)據(jù)庫(kù)升級(jí)成了真正的空間數(shù)據(jù)庫(kù)。空間數(shù)據(jù)點(diǎn)、線、面可以像普通數(shù)據(jù)一樣存儲(chǔ)、查詢、索引。更關(guān)鍵的是PostGIS 內(nèi)置了大量空間分析函數(shù)比如ST_Buffer緩沖區(qū)分析、ST_Contains包含判斷、ST_Distance距離計(jì)算。這些分析如果在前端硬算數(shù)據(jù)量大時(shí)性能會(huì)很差放到數(shù)據(jù)庫(kù)里執(zhí)行則高效得多。最后是Cesium。它擅長(zhǎng)三維地球和三維場(chǎng)景渲染支持加載地形、影像、3D Tiles、GeoJSON 等多種數(shù)據(jù)。在智慧公交大屏場(chǎng)景中可以用 Cesium 展示城市建筑白模、公交站點(diǎn)標(biāo)記、線路軌跡、輻射范圍。Cesium 本身也支持創(chuàng)建動(dòng)態(tài)雷達(dá)掃描效果、流動(dòng)線效果這對(duì)大屏展示很有價(jià)值。1.3 系統(tǒng)架構(gòu)總覽整個(gè)系統(tǒng)的調(diào)用鏈路并不復(fù)雜可以用下面這張表來(lái)表示層級(jí)技術(shù)組件職責(zé)說(shuō)明前端大屏Cesium Vue三維場(chǎng)景展示、站點(diǎn)標(biāo)牌、線路軌跡、雷達(dá)掃描特效前端采編OpenLayers Vue地圖數(shù)據(jù)采集、站點(diǎn)編輯、屬性錄入服務(wù)端Spring Boot / Node.js提供站點(diǎn)增刪改查接口、空間分析接口數(shù)據(jù)層PostgreSQL PostGIS存儲(chǔ)空間數(shù)據(jù)、執(zhí)行空間分析 SQL我在做技術(shù)選型時(shí)還考慮過(guò) Leaflet Turf.js 的方案但最后放棄了。原因很簡(jiǎn)單Turf.js 雖然能做客戶端空間分析但大數(shù)據(jù)量下性能不穩(wěn)定而且分析邏輯散落在前端代碼里不利于維護(hù)。PostGIS 把所有分析能力集中在數(shù)據(jù)庫(kù)前端只需要調(diào)用接口傳參代碼結(jié)構(gòu)清晰很多。2. 環(huán)境準(zhǔn)備與版本說(shuō)明2.1 基礎(chǔ)環(huán)境本文示例使用的環(huán)境如下具體版本需要根據(jù)你的項(xiàng)目實(shí)際情況調(diào)整操作系統(tǒng)Windows 10 / Ubuntu 20.04 均可。數(shù)據(jù)庫(kù)PostgreSQL 14 及以上安裝 postgis 擴(kuò)展。后端框架Spring Boot 2.7 或 Node.js Express本文示例用 Spring Boot。前端框架Vue 3 Vite。GIS 庫(kù)OpenLayers 7.xCesium 1.10x 版本系列。構(gòu)建工具npm / pnpm。注意Cesium 版本更新很快不同版本的 API 可能會(huì)有調(diào)整本文示例以常見版本為準(zhǔn)如果遇到 API 不一致優(yōu)先查閱對(duì)應(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)建一個(gè)專門的空間數(shù)據(jù)庫(kù)sudo -u postgres createdb bus_db sudo -u postgres psql -d bus_db -c CREATE EXTENSION IF NOT EXISTS postgis;創(chuàng)建擴(kuò)展后可以用下面的 SQL 驗(yàn)證SELECT postgis_version();如果能看到類似3.3 USE_GEOS1 USE_PROJ1 USE_STATS1的輸出說(shuō)明 PostGIS 安裝成功。2.3 Cesium 與 OpenLayers 的安裝方式前端項(xiàng)目建議使用 Vite 創(chuàng)建npm create vitelatest smart-bus-front -- --template vue cd smart-bus-front npm install然后分別安裝 Cesium 和 OpenLayersnpm install cesium openlayersCesium 使用時(shí)需要處理靜態(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)資源會(huì)自動(dòng)處理避免手動(dòng)配置CESIUM_BASE_URL。3. 數(shù)據(jù)庫(kù)設(shè)計(jì)與 PostGIS 空間分析基礎(chǔ)3.1 公交站點(diǎn)相關(guān)表結(jié)構(gòu)設(shè)計(jì)設(shè)計(jì)數(shù)據(jù)庫(kù)表之前先梳理業(yè)務(wù)實(shí)體。這個(gè)項(xiàng)目中核心的實(shí)體有站點(diǎn)點(diǎn)數(shù)據(jù)包含站點(diǎn)名稱、站點(diǎn)編碼、所在區(qū)域、經(jīng)緯度。線路線數(shù)據(jù)包含線路名稱、線路編碼、途經(jīng)站點(diǎn)順序。線路站點(diǎn)關(guān)聯(lián)記錄某條線路經(jīng)過(guò)哪些站點(diǎn)以及站點(diǎn)的順序。空間字段統(tǒng)一使用geometry(Point, 4326)坐標(biāo)系使用 WGS84 經(jīng)緯度。這里有一個(gè)很重要的經(jīng)驗(yàn)存儲(chǔ)時(shí)統(tǒng)一用 4326 經(jīng)緯度坐標(biāo)系展示時(shí)由前端進(jìn)行投影轉(zhuǎn)換。這樣可以避免坐標(biāo)系混亂。創(chuàng)建站點(diǎn)表的 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);線路站點(diǎn)關(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 的空間查詢?cè)跀?shù)據(jù)量大時(shí)如果沒有 GIST 索引會(huì)做全表掃描性能下降嚴(yán)重。凡是參與空間查詢的幾何字段都應(yīng)該建立 GIST 索引。3.2 PostGIS 常用空間函數(shù)PostGIS 的核心價(jià)值在空間分析函數(shù)。這里先介紹幾個(gè)本項(xiàng)目會(huì)用到的函數(shù)方便后面實(shí)戰(zhàn)代碼理解。ST_GeomFromText / ST_SetSRID用于從 WKT 文本構(gòu)建空間對(duì)象并指定坐標(biāo)系。SELECT ST_GeomFromText(POINT(116.4074 39.9042), 4326);ST_Buffer 緩沖區(qū)分析ST_Buffer(geom, distance)計(jì)算幾何對(duì)象周圍指定距離的緩沖區(qū)。注意4326 坐標(biāo)系單位是度直接使用米為單位計(jì)算緩沖區(qū)是不正確的。解決方法是在計(jì)算時(shí)使用地理坐標(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)判斷判斷點(diǎn)與點(diǎn)、點(diǎn)與面的距離是否在指定范圍內(nèi)常用于“某個(gè)坐標(biāo)點(diǎn)是否在站點(diǎn)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用于判斷幾何對(duì)象之間的包含、相交關(guān)系覆蓋分析中非常常用。3.3 初始化示例數(shù)據(jù)為了方便演示先插入一些測(cè)試數(shù)據(jù)INSERT INTO bus_station (station_code, station_name, district, geom) VALUES (S001, 人民廣場(chǎng)站, 中心區(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, 文化廣場(chǎng)站, 中心區(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路公交, 人民廣場(chǎng)站, 文化廣場(chǎng)站, 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 采編模塊實(shí)戰(zhàn)4.1 采編模塊的功能拆分OpenLayers 采編模塊的思路很直接核心就是兩件事一是地圖展示二是要素編輯。對(duì)于地圖展示需要一個(gè)底圖。如果是內(nèi)網(wǎng)離線環(huán)境可以使用本地瓦片服務(wù)如果有外網(wǎng)條件可以使用常見的在線瓦片。這里為了示例簡(jiǎn)單使用 OpenStreetMap 免費(fèi)瓦片。實(shí)際生產(chǎn)項(xiàng)目中優(yōu)先考慮合規(guī)的商用地圖服務(wù)或自建瓦片服務(wù)。對(duì)于要素編輯OpenLayers 提供了Draw和Modify兩個(gè)交互類。Draw用于繪制點(diǎn)、線、面Modify用于修改已有要素坐標(biāo)。采編模塊最核心的流程是從后端加載已有站點(diǎn)數(shù)據(jù)渲染到地圖上。用戶點(diǎn)擊“新增站點(diǎn)”進(jìn)入繪制模式在地圖上點(diǎn)擊放置站點(diǎn)。用戶點(diǎn)擊“編輯站點(diǎn)”進(jìn)入修改模式可以拖動(dòng)站點(diǎn)位置。保存時(shí)將 GeoJSON 數(shù)據(jù)提交到后端。4.2 初始化 OpenLayers 地圖在 Vue 組件中創(chuàng)建一個(gè)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 }) }) } // 站點(diǎn)樣式 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這段代碼有兩點(diǎn)需要說(shuō)明第一地圖視圖的投影默認(rèn)是EPSG:3857也就是 Web 墨卡托投影而站點(diǎn)數(shù)據(jù)是EPSG:4326經(jīng)緯度。在加載 GeoJSON 時(shí)必須通過(guò)dataProjection和featureProjection參數(shù)做轉(zhuǎn)換否則站點(diǎn)位置會(huì)嚴(yán)重偏移。第二站點(diǎn)的樣式包括圓形圖標(biāo)和文字標(biāo)注。實(shí)際項(xiàng)目中文字標(biāo)注可以顯示站點(diǎn)名稱這里為了通用先留空。如果想顯示站點(diǎn)名需要在Text的text字段中動(dòng)態(tài)傳入。4.3 新增站點(diǎn)與編輯站點(diǎn)核心交互邏輯如下// 開始繪制站點(diǎn) 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()) // 將新站點(diǎn)坐標(biāo)傳給后端 saveStation(null, lonLat[0], lonLat[1]) }) } // 開始編輯站點(diǎn) 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]) }) }) }注意繪制和修改交互只能同時(shí)存在一個(gè)。如果用戶點(diǎn)“新增”時(shí)已經(jīng)開啟了“編輯”需要先把modifyInteraction移除否則會(huì)互相沖突。保存站點(diǎn)的接口調(diào)用可以這樣實(shí)現(xiàn)const saveStation async (id, lng, lat) { const payload { id: id, stationName: 新增站點(diǎn), 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)緯度存儲(chǔ)到 PostGIS 表里。用 Spring Boot 實(shí)現(xiàn)時(shí)核心邏輯大致如下RestController RequestMapping(/api/stations) public class StationController { Autowired private JdbcTemplate jdbcTemplate; PostMapping public void save(RequestBody StationDto dto) { if (dto.getId() null) { // 新增站點(diǎn) 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 { // 更新站點(diǎn) 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)直接生成一個(gè)點(diǎn)配合ST_SetSRID指定坐標(biāo)系。值得提醒的是ST_MakePoint的參數(shù)順序是經(jīng)度在前、緯度在后如果傳反了站點(diǎn)會(huì)落到完全不同的位置。5. PostGIS 覆蓋分析與盲區(qū)識(shí)別5.1 站點(diǎn)覆蓋率計(jì)算業(yè)務(wù)需求通常是這樣的以每個(gè)公交站點(diǎn)為中心按 500 米半徑做緩沖區(qū)計(jì)算該區(qū)域覆蓋了多少面積、多少小區(qū)、多少人口。PostGIS 計(jì)算每個(gè)站點(diǎn)緩沖區(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)換是因?yàn)樵?4326 坐標(biāo)系下直接ST_Buffer(geom, 500)會(huì)把 500 當(dāng)作“度”而不是“米”這樣結(jié)果完全錯(cuò)誤。轉(zhuǎn)換為 geography 類型后緩沖區(qū)計(jì)算以米為單位。5.2 計(jì)算公交盲區(qū)盲區(qū)識(shí)別的思路是先求出所有站點(diǎn) 500 米緩沖區(qū)的并集然后用整個(gè)城市的研究區(qū)域減去這個(gè)并集剩下的部分就是公交盲區(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;這個(gè) SQL 中有幾個(gè)細(xì)節(jié)ST_Union是聚合函數(shù)將多個(gè)多邊形合并成一個(gè)多邊形用來(lái)表示所有站點(diǎn)的覆蓋范圍并集。ST_Difference從城市區(qū)域中減去覆蓋范圍剩下的是盲區(qū)多邊形。由于 geography 類型不支持所有空間運(yùn)算所以計(jì)算時(shí)先把緩沖區(qū)結(jié)果 cast 回 geometry最后再處理。5.3 新增站點(diǎn)的最佳位置推薦當(dāng)業(yè)務(wù)人員想新增站點(diǎn)時(shí)可以用空間查詢找出“距離現(xiàn)有站點(diǎn)超過(guò) 500 米、且周邊人口密集的區(qū)域”。這里需要結(jié)合人口點(diǎn)數(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) );這個(gè)查詢返回所有距離最近站點(diǎn)超過(guò) 500 米的人口點(diǎn)這些點(diǎn)附近的區(qū)域可以作為新增站點(diǎn)的候選位置。這種 SQL 分析思路也可以在規(guī)劃新線路時(shí)提供參考。6. Cesium 三維大屏展示6.1 創(chuàng)建 Cesium 三維場(chǎng)景Cesium 大屏部分的目標(biāo)是加載三維地球或城市模型將站點(diǎn)以圖標(biāo)形式展示將線路以軌跡線形式展示并添加一些動(dòng)態(tài)特效。先看最基礎(chǔ)的 Cesium 初始化。在 Vue 組件中創(chuàng)建一個(gè)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)項(xiàng)目建議替換為自建瓦片 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初始化時(shí)關(guān)閉了很多默認(rèn)控件是因?yàn)榇笃另?yè)面通常只需要展示地圖內(nèi)容不需要用戶進(jìn)行復(fù)雜的視圖切換和操作。如果項(xiàng)目使用離線環(huán)境沒有外網(wǎng)訪問 Cesium 的在線影像源需要自行搭建瓦片服務(wù)然后通過(guò)WebMapServiceImageryProvider或UrlTemplateImageryProvider加載本地瓦片。6.2 加載公交站點(diǎn)標(biāo)牌將站點(diǎn)數(shù)據(jù)從后端接口拉取后在 Cesium 中加載。最簡(jiǎn)單的方式是使用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è)置站點(diǎn)圖標(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是將站點(diǎn)標(biāo)記貼合到地面上避免因?yàn)榈匦纹鸱鼘?dǎo)致標(biāo)注懸浮或陷入地下。對(duì)于大屏展示來(lái)說(shuō)標(biāo)注是否貼地直接影響視覺效果。如果不想使用 GeoJSON 加載也可以直接使用viewer.entities.add手動(dòng)添加實(shí)體。兩種方式的區(qū)別在于GeoJsonDataSource適合批量加載手動(dòng)添加適合單個(gè)或少量實(shí)體。6.3 公交線路軌跡動(dòng)態(tài)展示公交線路在三維大屏上一般有兩種展示方式靜態(tài)的線路軌跡線和動(dòng)態(tài)的流動(dòng)效果。靜態(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) }) } }) }動(dòng)態(tài)流動(dòng)效果稍微復(fù)雜一點(diǎn)需要定時(shí)更新材質(zhì)偏移量或者使用PolylineTrailLinkMaterialProperty。網(wǎng)上有各種自定義材質(zhì)實(shí)現(xiàn)核心原理是給 Polyline 材質(zhì)傳入一個(gè)隨時(shí)間變化的time參數(shù)。最簡(jiǎn)單的實(shí)現(xiàn)方式是啟動(dòng)一個(gè)requestAnimationFrame循環(huán)不斷更新材質(zhì)屬性。不過(guò)要提醒一下動(dòng)態(tài)特效對(duì)渲染性能有一定消耗。如果大屏上有幾十條線路同時(shí)播放流動(dòng)效果需要在效果與性能之間做權(quán)衡。實(shí)際項(xiàng)目中可以只對(duì)重點(diǎn)線路啟用流動(dòng)效果其他線路使用靜態(tài)樣式。6.4 站點(diǎn)覆蓋范圍三維可視化PostGIS 分析出來(lái)的覆蓋范圍也就是站點(diǎn) 500 米緩沖區(qū)也可以在 Cesium 中疊加展示。這種面數(shù)據(jù)通常以 GeoJSON 形式輸出加載方式和站點(diǎn)類似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ù)量很大比如一個(gè)城市幾千個(gè)站點(diǎn)全部用GeoJsonDataSource加載到三維場(chǎng)景中渲染壓力會(huì)很大。這時(shí)候需要考慮聚合展示或者分級(jí)加載方案。6.5 雷達(dá)掃描特效Cesium 雷達(dá)掃描效果是社區(qū)里比較熱門的特效常用于大屏頁(yè)面突出某個(gè)重點(diǎn)區(qū)域。實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圓形雷達(dá)掃描效果可以通過(guò)繪制多個(gè)半徑遞增的圓環(huán)并控制透明度和旋轉(zhuǎn)來(lái)實(shí)現(xiàn)。網(wǎng)上常見的方案有兩種使用CallbackProperty動(dòng)態(tài)修改多邊形參數(shù)。使用自定義材質(zhì)PolylineDashMaterialProperty或Cesium.Material擴(kuò)展。下面給一個(gè)使用簡(jiǎn)單方式實(shí)現(xiàn)雷達(dá)波紋的示例const addRadarEffect (longitude, latitude, radius) { const center Cesium.Cartesian3.fromDegrees(longitude, latitude) const positions [] // 生成圓形邊緣點(diǎn) 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)計(jì)算圓形邊緣位置。更精細(xì)的雷達(dá)掃描效果會(huì)涉及橢圓、旋轉(zhuǎn)、透明度動(dòng)畫核心代碼量更大本文先給出基礎(chǔ)版本。7. 前后端聯(lián)調(diào)與接口設(shè)計(jì)7.1 接口清單整個(gè)系統(tǒng)涉及三塊主要接口這里統(tǒng)一整理接口方法說(shuō)明/api/stationsGET獲取全部站點(diǎn)OpenLayers 采編使用/api/stationsPOST新增或更新站點(diǎn)/api/stations/{id}DELETE刪除站點(diǎn)/api/stations/geojsonGET返回 GeoJSON 格式站點(diǎn)數(shù)據(jù)Cesium 使用/api/stations/buffer-geojsonGET返回站點(diǎn)緩沖區(qū) GeoJSON/api/analysis/blind-areaGET返回公交盲區(qū)面數(shù)據(jù)7.2 站點(diǎn) GeoJSON 接口示例先看 Cesium 需要的 GeoJSON 接口。后端可以這樣實(shí)現(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 幾何對(duì)象直接轉(zhuǎn)換成 GeoJSON 格式字符串省去了手工拼接坐標(biāo)的麻煩。注意實(shí)際項(xiàng)目中建議使用 Jackson 等 JSON 庫(kù)構(gòu)建避免字符串拼接出錯(cuò)。7.3 緩沖區(qū)分析接口示例緩沖區(qū)分析接口需要接收兩個(gè)參數(shù)radius半徑值以及可選的stationId指定某個(gè)站點(diǎn)。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的作用是合并所有站點(diǎn)的緩沖區(qū)。如果每個(gè)站點(diǎn)獨(dú)立展示不合并可以改成按站點(diǎn)點(diǎn) ID 分組輸出多個(gè) feature。8. 常見問題與排查思路8.1 常見報(bào)錯(cuò)清單問題現(xiàn)象常見原因解決思路Extension postgis not availablePostgreSQL 版本與 PostGIS 插件不匹配檢查 PostgreSQL 版本安裝對(duì)應(yīng)版本 postgis 包站點(diǎn)位置偏移嚴(yán)重坐標(biāo)系轉(zhuǎn)換錯(cuò)誤檢查前端dataProjection是否設(shè)置為EPSG:4326ST_MakePoint后點(diǎn)位置錯(cuò)誤經(jīng)緯度參數(shù)傳反確認(rèn)ST_MakePoint(lng, lat)順序緩沖區(qū)面積異常大在 4326 坐標(biāo)系直接用米做單位改用::geography類型或投影坐標(biāo)系Cesium 加載 GeoJSON 不顯示數(shù)據(jù)格式錯(cuò)誤或缺少clampToGround打開瀏覽器控制臺(tái)查看 JSON 解析報(bào)錯(cuò)OpenLayers 繪制后無(wú)法保存缺少toLonLat轉(zhuǎn)換繪制坐標(biāo)是投影坐標(biāo)需要轉(zhuǎn)經(jīng)緯度再提交動(dòng)態(tài)流動(dòng)線路卡頓線路過(guò)多或材質(zhì)更新頻率過(guò)高減少動(dòng)態(tài)線路數(shù)量使用靜態(tài)材質(zhì)替代8.2 OpenLayers 坐標(biāo)轉(zhuǎn)換問題詳解OpenLayers 地圖默認(rèn)使用 Web 墨卡托投影EPSG:3857所以通過(guò)Draw交互獲取的坐標(biāo)點(diǎn)是投影坐標(biāo)。如果直接把這個(gè)坐標(biāo)傳給后端存入 PostGIS數(shù)據(jù)庫(kù)會(huì)把它當(dāng)作經(jīng)緯度處理結(jié)果站點(diǎn)位置就會(huì)亂掉。正確做法是保存時(shí)用toLonLat轉(zhuǎn)回EPSG:4326import { toLonLat } from ol/proj const lonLat toLonLat(geometry.getCoordinates())加載數(shù)據(jù)時(shí)反過(guò)來(lái)用fromLonLat將經(jīng)緯度轉(zhuǎn)成投影坐標(biāo)import { fromLonLat } from ol/proj map.getView().setCenter(fromLonLat([116.4074, 39.9042]))如果你是通過(guò)GeoJSON格式讀寫數(shù)據(jù)則不需要手動(dòng)轉(zhuǎn)換只要在readFeatures時(shí)設(shè)置好dataProjection和featureProjection即可。8.3 Cesium 瓦片離線部署說(shuō)明很多政務(wù)項(xiàng)目運(yùn)行在內(nèi)網(wǎng)環(huán)境無(wú)法訪問外部在線影像服務(wù)。這種情況下Cesium 場(chǎng)景中的影像底圖需要自行解決。常見方案有兩種使用本地的傳統(tǒng) Web 地圖瓦片通過(guò)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)影像加載失敗時(shí)會(huì)一直等待。9. 最佳實(shí)踐與工程建議9.1 坐標(biāo)系統(tǒng)一規(guī)范這是整個(gè)項(xiàng)目最基礎(chǔ)也最重要的規(guī)范。在智慧公交系統(tǒng)中涉及多個(gè)環(huán)節(jié)的數(shù)據(jù)交換只要有一個(gè)環(huán)節(jié)坐標(biāo)系不一致站點(diǎn)位置就會(huì)偏移。我的建議是數(shù)據(jù)庫(kù)存儲(chǔ)層統(tǒng)一使用EPSG:4326幾何類型使用geometry(Point, 4326)。后端交換格式統(tǒng)一使用 GeoJSONGeoJSON 規(guī)范中坐標(biāo)就是EPSG:4326經(jīng)緯度。OpenLayers 展示層地圖控件使用EPSG:3857在讀寫接口時(shí)轉(zhuǎn)換。Cesium 展示層直接使用EPSG:4326經(jīng)緯度內(nèi)部自動(dòng)處理。9.2 空間索引和性能優(yōu)化PostGIS 表必須為空間字段建立 GIST 索引。隨著站點(diǎn)數(shù)量增長(zhǎng)不帶索引的ST_DWithin查詢會(huì)從毫秒級(jí)惡化到秒級(jí)甚至更慢。建立索引的 SQLCREATE INDEX idx_bus_station_geom ON bus_station USING GIST (geom);另外ST_Buffer這種計(jì)算量較大的分析不建議在每次請(qǐng)求時(shí)實(shí)時(shí)計(jì)算整個(gè)城市的所有站點(diǎn)?？梢蕴崆巴ㄟ^(guò)定時(shí)任務(wù)計(jì)算好結(jié)果存入獨(dú)立的分析結(jié)果表前端請(qǐng)求時(shí)直接讀取。9.3 大屏前端性能優(yōu)化Cesium 大屏渲染性能是重點(diǎn)。建議從以下幾點(diǎn)入手站點(diǎn)數(shù)據(jù)量超過(guò)幾千個(gè)時(shí)使用Cesium.PrimitiveCollection替代單個(gè) Entity或者使用 3D Tiles 批量渲染。動(dòng)態(tài)特效數(shù)量控制。雷達(dá)掃描、流動(dòng)線路這類動(dòng)態(tài)效果非常消耗 GPU建議最多只保留 5 到 10 個(gè)。頁(yè)面使用懶加載。大屏進(jìn)入時(shí)先加載底圖和基礎(chǔ)站點(diǎn)用戶點(diǎn)擊線路詳情后再加載該線路的軌跡和動(dòng)態(tài)效果。如果項(xiàng)目開發(fā)了“前端頁(yè)面數(shù)據(jù)實(shí)時(shí)刷新”考慮使用 WebSocket 推送增量更新而不是整表刷新。9.4 數(shù)據(jù)備份與權(quán)限管理生產(chǎn)環(huán)境中空間數(shù)據(jù)是最重要的資產(chǎn)。建議定期執(zhí)行pg_dump備份腳本至少保留最近 7 天的備份。使用 Flyway 等數(shù)據(jù)庫(kù)遷移工具管理表結(jié)構(gòu)變更避免手工執(zhí)行 SQL 導(dǎo)致生產(chǎn)環(huán)境不一致。編輯接口必須做權(quán)限校驗(yàn)只有授權(quán)用戶才能新增和修改站點(diǎn)。大屏展示接口可以放行只讀權(quán)限。刪除站點(diǎn)操作建議采用邏輯刪除增加deleted字段而不是物理刪除避免誤操作導(dǎo)致歷史數(shù)據(jù)丟失。9.5 多版本 Cesium 之間的差異Cesium 的版本迭代速度很快比如viewer.entities.add這種方式雖然兼容性很好但部分 API 在新版本中會(huì)被標(biāo)記為廢棄。比如較新的 Cesium 版本對(duì)GeoJsonDataSource的樣式設(shè)置方式有調(diào)整。如果你直接復(fù)制網(wǎng)上舊代碼到新版本環(huán)境很可能會(huì)遇到BillboardGraphics參數(shù)不生效或者樣式不一致的問題。建議在項(xiàng)目中鎖定 Cesium 的具體版本npm install cesium1.103.0 --save-exact鎖定版本后再升級(jí)時(shí)單獨(dú)處理。10. 總結(jié)智慧公交站點(diǎn)系統(tǒng)是典型的“WebGIS 空間分析 三維可視化”綜合項(xiàng)目。它用 OpenLayers 解決了數(shù)據(jù)采編的交互問題用 PostGIS 解決了空間分析的計(jì)算問題用 Cesium 解決了大屏展示的視覺問題。三個(gè)技術(shù)點(diǎn)各司其職組合在一起就能形成一個(gè)完整可落地的業(yè)務(wù)閉環(huán)。整套方案中最值得關(guān)注的點(diǎn)有三個(gè)第一PostGIS 是項(xiàng)目的數(shù)據(jù)中樞所有的空間計(jì)算都圍繞它展開包括緩沖區(qū)分析、盲區(qū)識(shí)別、覆蓋分析。把分析邏輯下沉到數(shù)據(jù)庫(kù)層比在前端用第三方庫(kù)硬算更可靠、更高效。第二坐標(biāo)系一致性和轉(zhuǎn)換貫穿了整個(gè)項(xiàng)目OpenLayers 的投影坐標(biāo)、GeoJSON 的經(jīng)緯度、PostGIS 的 4326 坐標(biāo)系任何一個(gè)環(huán)節(jié)不加注意都會(huì)導(dǎo)致位置錯(cuò)誤。第三Cesium 大屏展示的重點(diǎn)不只是“能顯示”而是要在大量數(shù)據(jù)和動(dòng)態(tài)效果之間找到性能平衡點(diǎn)。如果你正在規(guī)劃類似項(xiàng)目可以先從站點(diǎn)的 CRUD 和 PostGIS 空間查詢開始把數(shù)據(jù)鏈路跑通再逐步加上 OpenLayers 的繪制編輯和 Cesium 的三維展示。每一步都可以獨(dú)立測(cè)試風(fēng)險(xiǎn)可控。后續(xù)還可以擴(kuò)展的方向包括站點(diǎn)客流熱力圖、基于站點(diǎn)覆蓋范圍的人口統(tǒng)計(jì)、線路運(yùn)行軌跡回放、與 Three.js 結(jié)合做更復(fù)雜的 3D 場(chǎng)景特效?？臻g數(shù)據(jù)可視化這條路線可以深入探索的點(diǎn)還有很多。