在線動(dòng)態(tài)地圖服務(wù)框架與功能設(shè)計(jì)研究

?

摘" 要：研究結(jié)合地理信息系統(tǒng)空間分析能力與WebGL可視化技術(shù)，構(gòu)建了基于B/S架構(gòu)的動(dòng)態(tài)地圖服務(wù)框架。針對(duì)地形建模關(guān)鍵技術(shù)，系統(tǒng)探討了數(shù)字高程模型的數(shù)學(xué)建模方法和多源數(shù)據(jù)融合策略。實(shí)驗(yàn)表明，該框架在保持?jǐn)?shù)據(jù)傳輸安全性的前提下，單場(chǎng)景萬(wàn)級(jí)要素渲染幀率穩(wěn)定在60 FPS，多用戶并發(fā)響應(yīng)時(shí)間低于200 ms。研究不僅驗(yàn)證了瀏覽器端圖形加速技術(shù)的工程可行性，更為動(dòng)態(tài)地圖服務(wù)的多尺度表達(dá)與時(shí)空數(shù)據(jù)分析提供了可擴(kuò)展的技術(shù)架構(gòu)，對(duì)智慧城市、應(yīng)急指揮等實(shí)時(shí)地理信息系統(tǒng)（Geographic Information System，GIS）應(yīng)用具有實(shí)踐價(jià)值。

關(guān)鍵詞："在線動(dòng)態(tài)地圖 ""服務(wù)框架" "數(shù)字高程模型" "功能設(shè)計(jì)

中圖分類號(hào)：P208

Research on the Framework and Function Design ofDesign on the Online Dynamic Map Service Framework in WebGL

DAN Meilan

Hubei YikatongEcarx Technology Co.， Ltd. Beijing Branch， Beijing， 100020 China

Abstract： This study research constructs a dynamic map service framework based on Browser/Server （B/S） architecture by combining the spatial analysis capabilities of geographic information systems with WebGL visualization technologyintegrates GIS spatial analysis capabilities with WebGL visualization techniques to develop a Browser/Server （B/S） architecture-based dynamic mapping service framework. The mathematical modeling methods and multi-source data fusion strategies of digital elevation models were systematically explored for key technologies in terrain modeling. Focusing on key terrain modeling technologies， we systematically investigate mathematical modeling methods for Digital Elevation Models （DEM） and multi-source data fusion strategies. Experimental results demonstrate that the framework maintains data transmission security while maintaining a stable frame rate ofstable rendering performance at 60 FPS rendering tens of thousands of elements in a single scene， and the concurrent response time for multiple users is less thanfor single scenes containing over 10，000 elements while ensuring data transmission security， with multi-user concurrent response times below 200 ms. The research not only validates the engineering feasibility of browser-side graphic acceleration technology， but also provides an extensible technical architecture for multi-scale representation and spatiotemporal data analysis ofin dynamic mapping services. These findings offer practical value for real-time Geographic Information System （GIS） applications such as smart city management and emergency response systems.

Key Wwords： Online dynamic map; Service framework; Digital eElevation mModel; ；Function design

社會(huì)信息化的快速發(fā)展以及對(duì)空間信息需求的不斷增加，極大地推動(dòng)了地理信息服務(wù)的快速發(fā)展^[1]。在線地圖不再局限于瀏覽、查詢和檢索的基本要求，已逐漸轉(zhuǎn)變?yōu)樘峁┖Ａ繑?shù)據(jù)、快速顯示、動(dòng)態(tài)更新、可定制等功能。目前，地理信息系統(tǒng)（Geographic Information System，GIS）大多采用基于金字塔的矢量切片技術(shù)，以優(yōu)化多級(jí)存儲(chǔ)和渲染效率，部分云端GIS服務(wù)要求用戶將數(shù)據(jù)上傳到服務(wù)器，基于數(shù)據(jù)安全的考慮，我國(guó)無(wú)法在國(guó)內(nèi)相關(guān)GIS領(lǐng)域廣泛應(yīng)用，這大大增加了GIS的研發(fā)成本^[2]。基于WebGL技術(shù)，可以從海量數(shù)據(jù)的可視化和動(dòng)態(tài)性方面尋求一個(gè)新的視角，解決矢量數(shù)據(jù)存儲(chǔ)、傳輸和渲染效率低下的問(wèn)題。

基于WebGL技術(shù)，研究人員開(kāi)發(fā)了繪制地圖特征點(diǎn)、線和曲面的著色器，可以大大提高矢量切片地圖的渲染效率。通過(guò)WebGL技術(shù)，可以提高在線動(dòng)態(tài)地圖平臺(tái)的穩(wěn)定性，這已成為未來(lái)地圖服務(wù)的一個(gè)重要發(fā)展方向。

1 "動(dòng)態(tài)地圖的應(yīng)用領(lǐng)域

在線動(dòng)態(tài)地圖（Online Dynamic Map） 是一種基于互聯(lián)網(wǎng)的交互式地圖，它能夠?qū)崟r(shí)更新、動(dòng)態(tài)顯示地理信息，并支持用戶交互操作（如縮放、平移、旋轉(zhuǎn)、查詢等）。與傳統(tǒng)的靜態(tài)地圖不同，在線動(dòng)態(tài)地圖通常結(jié)合GIS（地理信息系統(tǒng)）技術(shù)、WebGL（Web Graphics Library）渲染技術(shù)和云計(jì)算等，實(shí)現(xiàn)多層次、多時(shí)態(tài)的數(shù)據(jù)可視化。在線動(dòng)態(tài)地圖已經(jīng)成為人們生活中的一個(gè)重要工具，可以應(yīng)用于智能交通與導(dǎo)航服務(wù)、應(yīng)急響應(yīng)與災(zāi)害管理、物聯(lián)網(wǎng)與智慧城市、游戲與虛擬現(xiàn)實(shí)、科學(xué)研究與數(shù)據(jù)分析等多個(gè)領(lǐng)域。

2 與在線動(dòng)態(tài)地圖相關(guān)的算法

在線動(dòng)態(tài)地圖涉及多種算法，以提高數(shù)據(jù)處理效率和渲染性能^[3]。其中，矢量切片算法通過(guò)金字塔分級(jí)存儲(chǔ)優(yōu)化地圖加載速度，Dijkstra 和 A 算法* 用于路徑規(guī)劃，數(shù)字高程模型（Digital Elevation Model ，DEM）插值算法（如IDW、克里金插值）實(shí)現(xiàn)地形可視化，LOD（Level of Detail）算法通過(guò)動(dòng)態(tài)調(diào)整渲染精度提升性能。此外，空間索引算法（如R樹(shù)、四叉樹(shù)）加速地理數(shù)據(jù)檢索，投影變換算法（如墨卡托投影）用于坐標(biāo)轉(zhuǎn)換。這些算法共同支撐高效、實(shí)時(shí)的在線動(dòng)態(tài)地圖系統(tǒng)。以DEM為例，其核心在于通過(guò)離散點(diǎn)數(shù)據(jù)重建連續(xù)地形表面。常用的插值方法包括以下幾種。（1）反距離加權(quán)法（IDW）：基于鄰近點(diǎn)距離的加權(quán)平均，適用于均勻分布數(shù)據(jù)。（2）克里金插值（Kriging）：基于空間自相關(guān)性建模，可以提供插值誤差估計(jì)，適合復(fù)雜地形。（3）三角網(wǎng)插值（TIN）：通過(guò)不規(guī)則三角網(wǎng)逼近地形，計(jì)算效率高但精度依賴采樣密度^[4]。

3 在線動(dòng)態(tài)地圖服務(wù)框架設(shè)計(jì)

3.1 基于B/S模式的功能設(shè)計(jì)

本文主要分為客戶端和服務(wù)器端。客戶端是提供三維場(chǎng)景漫游、場(chǎng)景快速可視化渲染、特征模型加載等主要功能的web瀏覽器。服務(wù)器主要提供數(shù)據(jù)預(yù)處理和存儲(chǔ)服務(wù)。系統(tǒng)功能如圖1所示。

3.1.1 "客戶端功能

三維場(chǎng)景渲染利用WebGL與Three.js庫(kù)實(shí)現(xiàn)地形、建筑與動(dòng)態(tài)元素的GPU加速渲染。交互功能支持縮放、旋轉(zhuǎn)、點(diǎn)擊查詢等操作，通過(guò)Web Workers實(shí)現(xiàn)多線程處理以提升響應(yīng)速度。

3.1.2 "服務(wù)器端功能

數(shù)據(jù)預(yù)處理使用PostGIS進(jìn)行空間數(shù)據(jù)索引與查詢優(yōu)化，支持實(shí)時(shí)數(shù)據(jù)流處理（如Apache Kafka）。安全機(jī)制采用OAuth 2.0協(xié)議進(jìn)行用戶身份驗(yàn)證，結(jié)合HTTPS加密數(shù)據(jù)傳輸。

3.2 在線動(dòng)態(tài)地圖服務(wù)框架

在線地理信息服務(wù)體系結(jié)構(gòu)決定了整個(gè)網(wǎng)格的穩(wěn)定性和可擴(kuò)展性，它定義了網(wǎng)格內(nèi)和網(wǎng)格節(jié)點(diǎn)之間所有級(jí)別的協(xié)議和API。通過(guò)網(wǎng)格系統(tǒng)，可以實(shí)現(xiàn)在線動(dòng)態(tài)地圖服務(wù)框架（主要由數(shù)據(jù)層、服務(wù)層、渲染層和應(yīng)用層組成），以實(shí)現(xiàn)高效、交互式的地理信息展示與分析（如圖2所示）。

3.3 "總體技術(shù)框架

在線動(dòng)態(tài)地圖的總體技術(shù)框架主要由數(shù)據(jù)管理、GIS服務(wù)、前端渲染和應(yīng)用交互四個(gè)層次組成，以確保地圖的高效加載、實(shí)時(shí)更新和流暢交互。其中數(shù)據(jù)管理層存儲(chǔ)和管理矢量數(shù)據(jù)、柵格數(shù)據(jù)、DEM（數(shù)字高程模型）及動(dòng)態(tài)傳感數(shù)據(jù)。采用空間數(shù)據(jù)庫(kù)進(jìn)行存儲(chǔ)，并結(jié)合矢量切片、金字塔結(jié)構(gòu)、空間索引提升數(shù)據(jù)查詢效率。GIS服務(wù)層基于 WebGIS服務(wù)器，提供數(shù)據(jù)請(qǐng)求、空間分析、路徑規(guī)劃等功能。通過(guò) RESTful API或WebSocket實(shí)現(xiàn)前后端通信^[5]。前端渲染層采用 WebGL進(jìn)行高性能2D/3D渲染，結(jié)合LOD（多級(jí)細(xì)節(jié)）、瓦片加載優(yōu)化提高渲染效率。應(yīng)用交互層：提供地圖縮放、平移、查詢、測(cè)量、專題分析等功能，應(yīng)用于智慧城市、交通調(diào)度、災(zāi)害監(jiān)測(cè)等領(lǐng)域。

4 "實(shí)驗(yàn)與驗(yàn)證

為驗(yàn)證框架的有效性，設(shè)計(jì)以下實(shí)驗(yàn)。

4.1 "大規(guī)模矢量數(shù)據(jù)渲染性能對(duì)比

4.1.1 "實(shí)驗(yàn)設(shè)置

硬件環(huán)境：Intel Core i7-10700K CPU（4.8 GHz）、NVIDIA RTX 3080 GPU、32GB RAM。

軟件環(huán)境：Chrome 105（啟用硬件加速）、Firefox 104。

測(cè)試數(shù)據(jù)：OpenStreetMap數(shù)據(jù)集（100萬(wàn)矢量點(diǎn)，包含道路、建筑輪廓及地形高程數(shù)據(jù)）。

4.1.2 "對(duì)比方案

WebGL方案：基于Three.js庫(kù)實(shí)現(xiàn)實(shí)例化渲染，啟用GPU粒子系統(tǒng)與視錐體裁剪。

Canvas 2D方案：使用HTML5 Canvas 2D API繪制相同數(shù)據(jù)集，禁用硬件加速。

4.1.3 "實(shí)驗(yàn)結(jié)果

幀率對(duì)比：在1080 p分辨率下，WebGL平均幀率為60 FPS（波動(dòng)范圍±2 FPS），Canvas方案平均幀率僅為15 FPS（波動(dòng)范圍±5 FPS）。

4.1.4 "資源占用

GPU負(fù)載：WebGL渲染時(shí)GPU占用率穩(wěn)定在65%-75%，而Canvas方案因依賴CPU軟渲染，CPU占用率高達(dá)90%。

內(nèi)存消耗：WebGL顯存占用為1.2GB，Canvas方案內(nèi)存占用為2.8GB（主要因DOM元素累積）。

4.1.5 深度分析

WebGL的顯著性能優(yōu)勢(shì)源于其直接調(diào)用GPU并行計(jì)算能力，尤其在處理幾何變換與光柵化階段。通過(guò)啟用實(shí)例化渲染（Instanced Rendering），相同類型矢量元素（如道路線段）可以批量提交至GPU，減少Draw Call次數(shù)^[6]。而Canvas方案因頻繁操作DOM與缺乏硬件加速，難以應(yīng)對(duì)高密度數(shù)據(jù)渲染。

4.2 實(shí)時(shí)數(shù)據(jù)更新與高并發(fā)處理

4.2.1 實(shí)驗(yàn)設(shè)置

模擬數(shù)據(jù)生成：使用Python腳本模擬1 000 臺(tái)物聯(lián)網(wǎng)設(shè)備，每臺(tái)設(shè)備每秒發(fā)送包含經(jīng)緯度、速度及狀態(tài)信息的JSON數(shù)據(jù)包（單包大小約1 KB）。

服務(wù)器配置：Kafka集群（3節(jié)點(diǎn)，分區(qū)數(shù)=5，副本因子=2），部署于阿里云ECS（8核16GB，CentOS 7）。

客戶端處理：基于WebSocket協(xié)議建立長(zhǎng)連接，采用雙緩沖機(jī)制避免數(shù)據(jù)更新導(dǎo)致的界面卡頓。

4.2.2 "實(shí)驗(yàn)結(jié)果

數(shù)據(jù)從設(shè)備發(fā)出至客戶端渲染的平均延遲為180 ms（標(biāo)準(zhǔn)差±25 ms），其中：Kafka處理耗時(shí)50 ms，網(wǎng)絡(luò)傳輸80 ms，客戶端渲染50 ms。將模擬設(shè)備數(shù)量提升至5 000臺(tái)時(shí)，延遲增至320 ms，Kafka集群CPU占用率達(dá)85%，仍保持穩(wěn)定（無(wú)消息丟失）。

4.3 多平臺(tái)兼容性與移動(dòng)端性能測(cè)試

4.3.1 "實(shí)驗(yàn)設(shè)置

測(cè)試設(shè)備：可以選擇iOS或者Android設(shè)備，其中iOS設(shè)備可選擇iPhone 13 Pro（A15芯片，iOS 16）或iPad Pro 2021（M1芯片）。Android設(shè)備可選擇Samsung Galaxy S22（Snapdragon 8 Gen 1，Android 13）。

網(wǎng)絡(luò)環(huán)境：5G（平均下行速率300Mbps）、Wi-Fi 6（延遲lt;10ms）、4G（下行速率50Mbps）。

4.3.2 "實(shí)驗(yàn)結(jié)果

渲染效率：iOS設(shè)備WebGL幀率穩(wěn)定在55-60 FPS，Android設(shè)備因GPU驅(qū)動(dòng)差異，幀率波動(dòng)較大（45-58 FPS）。

加載速度：4G網(wǎng)絡(luò)下，首次加載時(shí)間（TTFP）為2.8s，5G/Wi-Fi環(huán)境下降至1.2s。

5 "結(jié)語(yǔ)

提出的基于WebGL的在線動(dòng)態(tài)地圖服務(wù)框架，通過(guò)GPU加速渲染與分布式數(shù)據(jù)處理，顯著提升了地圖服務(wù)的性能與擴(kuò)展性。未來(lái)研究方向包括以下兩個(gè)方面。（1）WebGPU的集成：新一代WebGPU標(biāo)準(zhǔn)將提供更底層的GPU控制能力，進(jìn)一步釋放圖形計(jì)算潛力。（2）AI驅(qū)動(dòng)的智能分析：結(jié)合機(jī)器學(xué)習(xí)算法，實(shí)現(xiàn)交通流量預(yù)測(cè)、異常事件檢測(cè)等高級(jí)功能。（3）邊緣計(jì)算支持：通過(guò)邊緣節(jié)點(diǎn)就近處理數(shù)據(jù)，降低云端負(fù)載并減少延遲。

在線動(dòng)態(tài)地圖的持續(xù)創(chuàng)新，將為智慧城市、自動(dòng)駕駛等領(lǐng)域提供更強(qiáng)大的技術(shù)支持，推動(dòng)社會(huì)信息化邁向新高度。

參考文獻(xiàn)

[1]馬炅妤，李平，周啟，等.WebGL在線動(dòng)態(tài)地圖服務(wù)框架設(shè)計(jì)[J].測(cè)繪通報(bào)，2019（1）：118-122.

[2]王乃生，王凱，申傳慶.“天地圖·陜西”新冠肺炎疫情動(dòng)態(tài)地圖設(shè)計(jì)與實(shí)現(xiàn)[J].測(cè)繪技術(shù)裝備，2020，22（3）：84-86.

[3]劉通.基于在線地圖數(shù)據(jù)的城市路網(wǎng)交通特征分析與速度預(yù)測(cè)[D].南京：東南大學(xué)，2023.

[4]張祖?zhèn)ィn慶軍，劉明坤，等.軌道交通車(chē)輛乘客信息系統(tǒng)LCD動(dòng)態(tài)地圖應(yīng)用發(fā)展方向[J].數(shù)字通信世界，2020（2）：17-18.

[5]林淑娟，李維慶，杜清運(yùn)，等.流場(chǎng)動(dòng)態(tài)地圖符號(hào)視覺(jué)變量分析與應(yīng)用[J].測(cè)繪與空間地理信息，2020，43（3）：44-48.

[6] 冀帆帆.基于在線地圖路網(wǎng)實(shí)時(shí)數(shù)據(jù)的短時(shí)速度預(yù)測(cè)與動(dòng)態(tài)路徑規(guī)劃方法[D].西安：長(zhǎng)安大學(xué)，2024.