P1高效易用

，

SuperMapWebGIS客戶端開發(fā)平臺介紹文心雨超圖軟件平臺產(chǎn)品線產(chǎn)品工程師2025年6月25日SuperMap

GIS2025云邊端產(chǎn)品體系

云?SuperMapiPortal?SuperMapiManager?SuperMapOnline?

SuperMapImageXEnterprise?SuperMapAgentX

Server(Beta)組件端GIS?

SuperMapiObjectsC++/Java/.NET?

SuperMapiObjectsPython?

SuperMapiObjectsfor

Spark?

SuperMapHi-Fi3D

SDKforUnreal?

SuperMapHi-Fi3D

SDKforUnity桌面端GIS?

SuperMapiDesktopX?

SuperMapiExplorer3D?

SuperMapiMaritimeEditor?

SuperMapImageXPro?

SuperMap

TransformX

new移動端GIS?

SuperMapiMobileforAndroid/iOS?

SuperMapiMobileLiteforAndroid/iOS?

SuperMapiClientJavaScript?

SuperMapiClient3DforWebGL?

SuperMapiClient3DforWebGPU?

SuperMapiClient3DforCesiumWebGIS客戶端開發(fā)平臺前端可視化與交互云GIS服務(wù)器?SuperMapiServer邊緣GIS服務(wù)器?SuperMapiEdge邊緣Web端GIS端neSuperMapiClientJavaScript功能價值組件化開發(fā)提供可復(fù)用的GIS組件

，像搭積木一樣定制GIS應(yīng)用開源開放核心庫完全開源

，根據(jù)需求定制開發(fā)

，節(jié)省開發(fā)成本專業(yè)GIS分析空間分析、處理、計算兼具服務(wù)端/客戶端分析Web可視化多樣可視化類型高效率樣式渲染P3?

組件化開發(fā)

|豐富可視化效果

|Web視頻可視化

|高性能客戶端計算

|

FlatGeobuf格式...總結(jié)與回顧報告摘要?

地圖開發(fā)庫

|組件庫

|模板庫技術(shù)亮點剖析?

核心價值

|源碼地址

|在線技術(shù)支持

…開發(fā)能力詳解P401

開發(fā)能力詳解P5L1

：Web

GIS基礎(chǔ)庫（

Libraries）for

LeafletforOpenLayersfor

MapboxGLfor

MaplibreGLClassicWebGIS基礎(chǔ)庫WebGIS技術(shù)層次結(jié)構(gòu)圖L4

：Web

GIS應(yīng)用（WebApps）

地圖工作室

處理自動化建模

SuperMap

i

Portal

門戶定制

L3

：Web

GIS模板庫（

Templates）自然資源模板交通模板生態(tài)環(huán)境模板氣象模板園區(qū)模板地產(chǎn)模板…L2

：Web

GIS組件庫（

Components）React

VUE

Ht

m

l

5

三維地理設(shè)計forWebGPUforWebGLfor

Cesium

數(shù)據(jù)洞察

數(shù)據(jù)上圖地圖大屏三維地球AI助理?

輕量化、插件豐富

，制作簡單交互式地圖?

專業(yè)GIS功能、HTML5、OL-Cesium?

地圖顯示效果佳、支持MVT矢量瓦片?

地圖顯示效果佳、支持MVT矢量瓦片?

穩(wěn)定性高WebGIS

基礎(chǔ)庫for

MapLibreGLfor

Leafletfor

MapboxGLiClientClassic

OpenLayersforOpenLayersP7WebGIS

基礎(chǔ)庫提供的開發(fā)能力?????????SuperMap

i

Server圖層SuperMap

i

Portal圖層Arc*

VectorTile

圖層newvOGC圖層FGB圖層互聯(lián)網(wǎng)圖層矢量瓦片圖層update海圖...?

客戶端計算?

數(shù)據(jù)流?

分布式分析?

交通換乘分析?網(wǎng)絡(luò)分析?

空間分析?

影像服務(wù)?

地圖打印?

知識圖譜?…

GIS分析計算

?

客戶端專題圖?

三維建筑圖?

視頻圖?

流向圖?

軌跡圖?

蜂巢圖?熱力圖?

三維專題圖?

特效渲染?...

Web可視化 SuperMap

iClient

for

JavaScript

多源地圖接入updateupdateP8L3

：Web

GIS模板庫（

Templates）自然資源模板交通模板生態(tài)環(huán)境模板氣象模板園區(qū)模板地產(chǎn)React

VUE

Ht

m

l

5L2

：Web

GIS組件庫（

Components）WebGIS組件庫WebGIS技術(shù)層次結(jié)構(gòu)圖L1

：Web

GIS基礎(chǔ)庫（

Libraries）for

LeafletforOpenLayersfor

MapboxGLfor

MaplibreGLClassicL4

：Web

GIS應(yīng)用（WebApps）

地圖工作室

處理自動化建模

SuperMap

i

Portal

門戶定制

三維地理設(shè)計forWebGPUforWebGLfor

Cesium

數(shù)據(jù)洞察

數(shù)據(jù)上圖地圖大屏三維地球AI助理WebGIS

組件庫Web

MapVM.tsChartsVM.tsGeoJsonModel.tsDatasetModel.tsCharts.vue

圖表組件Web

Map.vue地圖組件 React…

H5…www

3D-Web

GL

…兼容Vue、

React、Angular以及原生H5開發(fā)，

降低GIS開發(fā)門檻

，支持靈活定制View視圖組件化的WebGIS開發(fā)體系M/VM模型/視圖模型Web

MapInfoModel.tsFileModel.tsWebScene.vue

場景組件WebScene.jsxWebScene.jsWeb

Map.jsxCharts.jsxVis.vue

可視化組件Charts.jsWeb

Map.jsUI庫基礎(chǔ)庫QueryVM.ts

V

isVM.tsVis.jsxVis.jsVueWebSceneVM.tsInsights

VM.ts…www…P10…www?矢量瓦片支持、動態(tài)樣式實時更新、大數(shù)據(jù)量渲染?

實時交通數(shù)據(jù)可視化、環(huán)境監(jiān)測系統(tǒng)?

輕量級解決方案

，快速搭建2D地圖應(yīng)用?

社區(qū)治理平臺、

電力巡檢系統(tǒng)?動態(tài)渲染、

大數(shù)據(jù)量渲染?

交通大數(shù)據(jù)監(jiān)控平臺、災(zāi)害應(yīng)急系統(tǒng)WebGIS

組件庫+Vue

Leaflet組件庫+Vue

MapboxGL組件庫React

MapboxGL組件庫+P11L3

：Web

GIS模板庫（

Templates）自然資源模板交通模板生態(tài)環(huán)境模板氣象模板園區(qū)模板地產(chǎn)模板…WebGIS模板庫WebGIS技術(shù)層次結(jié)構(gòu)圖L1

：Web

GIS基礎(chǔ)庫（

Libraries）for

LeafletforOpenLayersfor

MapboxGLfor

MaplibreGLClassicL4

：Web

GIS應(yīng)用（WebApps）

地圖工作室

處理自動化建模

SuperMap

i

Portal

門戶定制

L2

：Web

GIS組件庫（

Components）React

VUE

Ht

m

l

5

三維地理設(shè)計forWebGPUfor

CesiumforWebGL

數(shù)據(jù)洞察

數(shù)據(jù)上圖地圖大屏三維地球AI助理https://uxd.supermap.io/WebGIS

模板庫關(guān)注數(shù)據(jù)本身

，提高開發(fā)效率

行業(yè)模板庫/

設(shè)計系統(tǒng)P13滿足多種設(shè)備終端的開發(fā)需求開發(fā)Web端應(yīng)用P14開發(fā)移動端應(yīng)用滿足多種設(shè)備終端的開發(fā)需求Web

Components+P15滿足多種設(shè)備終端的開發(fā)需求Web

Components+開發(fā)桌面應(yīng)用P16開發(fā)者文檔助力快速上手提高開發(fā)效率降低學(xué)習(xí)門檻助力快速上手

開發(fā)指南

示例程序

技術(shù)專題

API文檔P1702

技術(shù)亮點剖析P18SuperMap

i

Client技術(shù)亮點

高性能

FlatGeobuf格式 Web

GIS組件化開發(fā)能力2豐富地理可視化效果4

高性能客戶端計算3

Web

GIS視頻可視化P19亮點1Web

GIS組件化開發(fā)能力WebGIS

組件化開發(fā)能力邊框面包屑按鈕卡片多選框折疊面板日期選擇框全局提示圖標(biāo)圖片指標(biāo)滑動輸入條文本列表布局時間選擇框?qū)υ捒蛲ㄖ嵝芽蛞曨l播放器文本選擇器幻燈片穿梭框分頁樹形控件表格標(biāo)簽頁縮放天地圖切換天地圖POI搜索天地圖路線規(guī)劃儀表盤

折線圖

水球餅圖

進度條坐標(biāo)轉(zhuǎn)換

繪制

飛行定位點選查詢量算鷹眼圖打開文件平移POI搜索數(shù)據(jù)查詢柱狀圖頭像Iframe視頻+…雷達圖散點圖地圖和地圖子組件圖表組件基礎(chǔ)組件Web

Map地圖

屬性表圖層顏色圖層列表?

開箱即用的組件庫

，提升開發(fā)效率卷簾

指南針圖例圖層管理時間軸（點）時間軸（段）時間軸（條）…P21…WebGIS

組件化開發(fā)能力?

storybook組件故事庫：以示例形式展示各GIS組件的功能、配置方式及最佳實踐

，幫助開發(fā)者快速掌握組件的使用方法。一個組件

，

多個故事示例附帶完整代碼片段實時調(diào)試并查看效果P22WebGIS

組件化開發(fā)能力?

UXD設(shè)計系統(tǒng)：提供標(biāo)準(zhǔn)化設(shè)計體系

，呈現(xiàn)專業(yè)級視覺效果

，打造一致的用戶體驗SuperMap

GIS

Web-UI

圖標(biāo)庫Sketch

組件包插圖庫P23WebGIS

組件化開發(fā)能力P24亮點2豐富地理可視化效果在瀏覽器中呈現(xiàn)上百種可視化效果?集成

ECharts、

MapV、

Deck.GL、AntV

L7等圖表庫

，呈現(xiàn)上百種酷炫的可視化效果房

價

信

息分

布圖

擬

真

水面人口密

度

格網(wǎng)圖氣

泡圖DECK,GLP26?

通過動態(tài)效果強調(diào)事物變化規(guī)律?適用于氣象、道路分布、人口遷徙數(shù)據(jù)展示地理數(shù)據(jù)動態(tài)可視化

Leaflet

OpenLayer

MapboxGL

MapLibreGL

動態(tài)道路圖●

風(fēng)場圖層P27?

以三維形式展示數(shù)據(jù)

，增強視覺表達能力?

適用于等高線、建筑、三維模型數(shù)據(jù)展示地理數(shù)據(jù)三維可視化

Leaflet

OpenLayer

MapboxGL

MapLibreGL

城市人口分布圖

山體等高線圖P28?

不局限于傳統(tǒng)的地理數(shù)據(jù)?可實現(xiàn)海圖、知識圖譜、三維模型等數(shù)據(jù)展示地理數(shù)據(jù)高級可視化

Leaflet

OpenLayer

MapboxGL

MapLibreGL●

知識圖譜可視化●海圖可視化P29阿爾伯斯投影高斯克呂格投影AntV

L7可視化庫支持坐標(biāo)系：Web墨卡托（

EPSG:3857）SuperMap

i

Client對接后支持絕大多數(shù)地理、投影坐標(biāo)系絕大多數(shù)坐標(biāo)系下的數(shù)據(jù)均能可視化?減少非必要的數(shù)據(jù)轉(zhuǎn)換

，提高了原坐標(biāo)系下的數(shù)據(jù)表達精細(xì)度MapboxGL馬來西亞坐標(biāo)系新疆坐標(biāo)系深圳坐標(biāo)系香港坐標(biāo)系羅賓森投影蘭伯特投影P30overflowTiles=

1繪制超出圖層范圍的瓦片overflowTiles=

0不繪制超出圖層范圍的瓦片l

L.supermap.tiled

MapLayer

，

MapboxGL

raster

source新增overflowTiles

參數(shù)l

控制繪制超出圖層范圍的瓦片圈數(shù)l

實現(xiàn)地圖邊緣要素符號的完整繪制

，保證瓦片顯示的完整性瓦片邊緣渲染效果優(yōu)化新特性MapboxGLLeafletP31亮點3Web

GIS視頻可視化視頻可拉伸

，與實際地理位置貼合高真實感

，

真實空間位置定點攝像頭視頻?對接和可視化SuperMap

i

Server視頻數(shù)據(jù)服務(wù)

，在地圖中展示定點視頻

，如攝像頭拍攝視頻?結(jié)合地圖展示巡檢、

救援、

調(diào)查等業(yè)務(wù)場景中拍攝的視頻

，使視頻具備空間信息地圖數(shù)據(jù)WebGIS視頻可視化

MapboxGLP332025

新增：在

Web

地圖中接入并顯示無人機拍攝視頻newl

將無人機拍攝視頻與地圖融合展示

，提升無人機在交通管控、

水利巡查場景下的視頻展示效果新增支持接入無人機拍攝視頻

MapboxGL在地圖中顯示無人機拍攝的非定點視頻*.mp4格式無人機視頻ne新特性地圖數(shù)據(jù)P34無人機視頻畫面與實際地圖位置一直保持同步新增支持接入無人機拍攝視頻

MapboxGL新特性P35亮點4高性能客戶端計算?iClient集成Turf和webassembly技術(shù)

，將部分地理空間計算任務(wù)從服務(wù)端遷移到客戶端?純客戶端計算

，直接在瀏覽器中執(zhí)行

，減少服務(wù)端壓力

，提升響應(yīng)速度高性能客戶端計算

Leaflet

OpenLayer

MapboxGL

MapLibreGLWebAssembly二進制指令格式

，可用于在現(xiàn)代瀏覽器中高效執(zhí)行代碼Turf.js輕量、可用于瀏覽器環(huán)境的地理空間分析工具P37高性能客戶端計算

Leaflet

OpenLayer

MapboxGL

MapLibreGL建筑層數(shù)

<

3

3-5

5-7

7-10

10-14

>20WebAssembly-實時計算區(qū)域內(nèi)建筑的面積和高度實時交互計算離線環(huán)境下亦可高性能使用P38亮點5高性能FlatGeobuf

格式l

FlatGeobuf格式：包含GIS數(shù)據(jù)的二進制編碼格式l相比GeoJSON格式

，讀取和解析速度更快

，針對大型數(shù)據(jù)集

，更節(jié)省存儲空間5萬面數(shù)據(jù)地圖查詢結(jié)果全量加載FlatGeobuf渲染性能為GeoJSON的

60%3110.5

53.1（單位：秒）7.33.1

1.95千面高性能FlatGeobuf

格式處理時間6050403020100

GeoJSONFlatGeobuf（全量加載）FlatGeobuf（按需加載）OpenLayer1萬面

5萬面LeafletP405521l

隨地圖范圍變化

，即時加載范圍內(nèi)的數(shù)據(jù)

，適用于數(shù)據(jù)量較大的場景

，渲染更高效高性能FlatGeobuf

格式Ope