在 SuperMap iClient3D for WebGL 中加載WMTS服務時,參數配置很關鍵!下面我們詳細介紹如何正確填寫參數,確保影像服務完美加載。
一、數據制作
對于上述視頻中的地圖制作,此處不做講述,如有需要可訪問:Online 開發者中心
可視化案例中提供了詳細的代碼、數據下載鏈接及數據制作過程。
二、相關參數對應詳解
三、相關參數說明
參數 | 值 | 說明 |
url | ’http://localhost:8090/iserver/services/map-HeNan/wmts100‘ | WMTS服務的URL地址,指向本地iServer發布的河南省地圖服務 |
layer | '河南省地形圖' | WMTS服務中要加載的圖層名稱 |
style | 'default' | 圖層的樣式,通常使用默認樣式 |
format | 'image/png' | 瓦片圖像的格式,這里使用PNG格式 |
tileMatrixSetID | 'CUSTOM_河南省地形圖' | 瓦片矩陣集的ID,標識特定的瓦片切割方案 |
tileMatrixLabels | ['0', '1', '2', '3'] | 瓦片矩陣級別的標簽,對應不同的縮放級別 |
tilingScheme | SuperMap3D.GeographicTilingScheme 對象 | 定義瓦片切割方案的地理參考系統 |
numberOfLevelZeroTilesX | 3 | 零級(最頂層)X方向的瓦片數量 |
numberOfLevelZeroTilesY | 2 | 零級(最頂層)Y方向的瓦片數量 |
ellipsoid | SuperMap3D.Ellipsoid.CGCS2000 | 使用CGCS2000橢球體(中國大地坐標系2000) |
rectangle | SuperMap3D.Rectangle.fromDegrees(...) | 定義地圖范圍的矩形區域(經度110.19°-116.81°,緯度31.25°-36.51°) |
scaleDenominators | [4367830.187724358, ...] | 各級別的比例尺分母,用于計算地圖比例尺 |
customDPI | SuperMap3D.Cartesian2(90.714..., 90.714...) | 自定義DPI(每英寸點數)設置,X和Y方向的值 |
四、示例完整代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>加載 WMTS 服務</title><link href="../../Build/SuperMap3D/Widgets/widgets.css" rel="stylesheet"><link href="./css/pretty.css" rel="stylesheet"><script src="./js/jquery.min.js"></script><script src="./js/spectrum.js"></script><script src="./js/config.js"></script><script src="./js/tooltip.js"></script><script type="text/javascript" src="../../Build/SuperMap3D/SuperMap3D.js"></script>
</head><body><div id="Container"></div><div id='loadingbar' class="spinner"><div class="spinner-container container1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div></div><script>// 頁面加載完成后執行的函數,初始化 SuperMap3D 地圖function onload(SuperMap3D) {// 通過 config.js 中的 getEngineType 函數,獲取引擎類型(EngineType),用于設置啟動方式let EngineType = getEngineType();// 創建一個 SuperMap3D 的 Viewer 實例,將其顯示在 id 為 'Container' 的容器中let viewer = new SuperMap3D.Viewer('Container', {contextOptions: {// 設置 WebGL 上下文類型,Webgl2 對應值為 2,WebGPU 對應值為 3contextType: Number(EngineType),}});// 當場景加載完成后,調用 init 函數進行初始化操作viewer.scenePromise.then(function (scene) {init(SuperMap3D, scene, viewer);});}// 初始化地圖場景的函數function init(SuperMap3D, scene, viewer) {// 設置地圖的分辨率比例,根據設備的像素比進行調整viewer.resolutionScale = window.devicePixelRatio;$('#loadingbar').remove();// 添加 WMTS 服務let HeNanWMTS = viewer.imageryLayers.addImageryProvider(new SuperMap3D.WebMapTileServiceImageryProvider({url: 'http://localhost:8090/iserver/services/map-HeNan/wmts100',layer: '河南省地形圖',style: 'default',format: "image/png",tileMatrixSetID: "CUSTOM_河南省地形圖",tileMatrixLabels: ['0', '1', '2', '3'],tilingScheme: new SuperMap3D.GeographicTilingScheme({numberOfLevelZeroTilesX: 3,numberOfLevelZeroTilesY: 2,ellipsoid: SuperMap3D.Ellipsoid.CGCS2000,rectangle: SuperMap3D.Rectangle.fromDegrees(110.19027419392319, 31.249054325714976, 116.8093213381059, 36.50948320842994),scaleDenominators: [4367830.187724358, 2183915.093862179, 1091957.5469310896, 545978.7734655448],customDPI: new SuperMap3D.Cartesian2(90.7142857142857, 90.7142857142857),}),}));viewer.flyTo(HeNanWMTS);}// 檢查 SuperMap3D 是否已經定義,如果已經定義則調用 onload 函數進行初始化if (typeof SuperMap3D !== 'undefined') {onload(SuperMap3D);}</script>
</body></html>