一、請(qǐng)求優(yōu)化

1.1 多子域

? ? ? ?由于瀏覽器對(duì)同一個(gè)域名服務(wù)的并發(fā)請(qǐng)求數(shù)量有限制，是6個(gè)，所以運(yùn)行大場(chǎng)景三維需要用到多子域。通過(guò)Nginx 服務(wù)搭建多個(gè)子域名，加大向SuperMap iServer 發(fā)送數(shù)據(jù)請(qǐng)求的并發(fā)量，從而達(dá)到提升加載速度的目的。

描述：利用Nginx客戶端，映射不同的端口地址來(lái)對(duì)SuperMap iServer進(jìn)行訪問(wèn)，搭建子域環(huán)境，提升性能。

應(yīng)用場(chǎng)景：充分利用SuperMap iServer機(jī)器的硬件性能，加大并發(fā)量，提升加載速度。

Nginx 服務(wù)如何搭建多個(gè)子域名請(qǐng)?jiān)斠?jiàn)博客：Nginx服務(wù)搭建多個(gè)子域名

SuperMap iClient3D for Cesium支持多子域加載地形、影像、S3M以及MVT，關(guān)鍵接口是subdomains（獲取或者設(shè)置子域名稱。通過(guò)該接口可以向指定的子域請(qǐng)求數(shù)據(jù)），具體代碼如下：

1.1.1 scene.open()打開(kāi)場(chǎng)景

var promise = scene.open("http://{s}/iserver/services/3D-CBD/rest/realspace",undefined,{
                subdomains:['localhost:8090','localhost:8092']
            });
            viewer.flyTo(promise);

1.1.2 加載地形

var viewer = new Cesium.Viewer('cesiumContainer',{
            terrainProvider:new Cesium.CesiumTerrainProvider({
                url:'http://{s}/iserver/services/3D-SiChuanDiXingYingXiang/rest/realspace/datas/DatasetDEM',
                isSct : true,//是否為iServer發(fā)布的TIN地形服務(wù),stk地形設(shè)置為false。
                subdomains:['localhost:8081','localhost:8082','localhost:8083'],//獲取或者設(shè)置子域名稱。通過(guò)該接口可以向指定的子域請(qǐng)求數(shù)據(jù)。
                invisibility:true//是否開(kāi)啟設(shè)置地形顯隱的功能,默認(rèn)為false。
            })
        });

1.1.3 加載影像

var imageLayer = viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
                url:"http://{s}/iserver/services/3D-SiChuanDiXingYingXiang/rest/realspace/datas/MosaicResult",
                subdomains:['localhost:8081','localhost:8082','localhost:8083']
            }));
            viewer.flyTo(imageLayer);

1.1.4 加載S3M

 var config = {
            subdomainConfig: {
                urlScheme: " http://{s}/iserver/services/3D-CBD/rest/realspace",
                subdomains: ['localhost:8081', 'localhost:8082', 'localhost:8083']//設(shè)置子域
            },
            name: "building"
        };

        var promise = viewer.scene.addS3MTilesLayerByScp('http://localhost:8090/iserver/services/3D-CBD/rest/realspace/datas/building/config', config);
        Cesium.when(promise, function (layer) {
            viewer.flyTo(promise);
        })

1.1.5 加載MVT

var mvtMap = scene.addVectorTilesMap({
               url:"http://{s}/iserver/services/map-mvt-GLDZJSYDSPDKBZD/restjsr/v1/vectortile/maps/GL_DZ_JSYDSP_DKB_ZD",
               subdomains:['localhost:8081','localhost:8082','localhost:8083'],
               canvasWidth:512,
               name:'testMVT',
               viewer:viewer
            });

加載效果：從網(wǎng)絡(luò)請(qǐng)求里看是否有不同端口的請(qǐng)求，比如'localhost:8081', 'localhost:8082', 'localhost:8083'。

1.2 批量請(qǐng)求

批量請(qǐng)求可以加快圖層的下載請(qǐng)求速度，地形和影像圖層支持批量請(qǐng)求。

1.2.1 地形

如果是 10.1 之前的SuperMap iDesktop版本，TIN 地形要生成緊湊存儲(chǔ)類型，在前端開(kāi)啟批量請(qǐng)求，也能體驗(yàn) 10.1 版本塊存儲(chǔ)的加載效果，塊存儲(chǔ)的數(shù)據(jù)不需要再加 packingRequest:1 這行代碼。

var provider_terrain=new Cesium.CesiumTerrainProvider({
url :'url',
isSct : true,//地形服務(wù)源自SuperMap iServer發(fā)布時(shí)需設(shè)置isSct為true
packingRequest:1//批量請(qǐng)求
})

1.2.2 影像

為了加快影像的下載速度，使周邊切片一次請(qǐng)求下來(lái)，需要用到批量請(qǐng)求packingRequest:1 這行代碼。

var provider= new Cesium.SuperMapImageryProvider({
					url: 'url', 
					packingRequest: 1//批量請(qǐng)求
				});"

二、內(nèi)存優(yōu)化

2.1 根節(jié)點(diǎn)駐留內(nèi)存

根節(jié)點(diǎn)駐留內(nèi)存residentRootTile是為了屏幕區(qū)域外不清除根節(jié)點(diǎn)內(nèi)存。而這個(gè)前提還需要設(shè)置保存根節(jié)點(diǎn)indexedDBSetting.isGeoTilesRootNodeSave，這個(gè)是為了將緩存根節(jié)點(diǎn)下載保存到本地，根節(jié)點(diǎn)不需要重復(fù)下載。當(dāng)清除瀏覽器緩存后，本地緩存也將被清除掉。所以當(dāng)請(qǐng)適當(dāng)選擇清楚瀏覽器緩存

var layer = scene.layers.find('Config');//打開(kāi)傾斜數(shù)據(jù)的Config圖層
layer.indexedDBSetting.isGeoTilesRootNodeSave = true;//設(shè)置是否保存根節(jié)點(diǎn)
layer.residentRootTile=true;//設(shè)置根節(jié)點(diǎn)是否駐留內(nèi)存不刪除

2.2 自動(dòng)釋放緩存

S3MTilesLayer.clearMemoryImmediately是否及時(shí)釋放內(nèi)存，默認(rèn)值為true。其表現(xiàn)在加載傾斜或者其他S3M圖層完全加載到了客戶端，但是一轉(zhuǎn)動(dòng)視角，不在視野范圍內(nèi)的模型消失(這是默認(rèn)的渲染機(jī)制，為了保證性能)，再把視角轉(zhuǎn)回來(lái)，它會(huì)繼續(xù)加載(按說(shuō)數(shù)據(jù)已經(jīng)加載過(guò)了)。

S3MTilesLayer.clearMemoryImmediately=true;//及時(shí)釋放內(nèi)存（默認(rèn)）

當(dāng)然，上述這種不在視野范圍內(nèi)模型就消失的情況，也有項(xiàng)目不滿足這種需要，他們希望模型一直都在，這時(shí)就需要將clearMemoryImmediately設(shè)置為false，則還需要設(shè)置緩存空間的大小setCacheSize，不然瀏覽器內(nèi)存不夠會(huì)造成頁(yè)面崩潰。

S3MTilesLayer.clearMemoryImmediately=false;//不及時(shí)釋放內(nèi)存
Cesium.MemoryManager.setCacheSize(4096);//設(shè)置緩存空間的大小,單位為MB

2.3 內(nèi)存管理

實(shí)際項(xiàng)目中經(jīng)常會(huì)遇到下圖這種渲染錯(cuò)誤，出現(xiàn)這種報(bào)錯(cuò)需要從很多方面考慮，比如硬件顯卡、瀏覽器內(nèi)存、數(shù)據(jù)等。其中瀏覽器內(nèi)存至關(guān)重要，可以設(shè)置場(chǎng)景總的顯存資源占用閾值，根據(jù)機(jī)器內(nèi)存顯存大小，適當(dāng)調(diào)整這個(gè)值，可以避免因?yàn)橘Y源占滿導(dǎo)致的崩潰，由于用戶機(jī)器差異較大，這個(gè)值在Web端也沒(méi)法獲取到，因此產(chǎn)品包中設(shè)置的默認(rèn)大小4GB，建議您們根據(jù)實(shí)際情況在前端設(shè)置（如果閾值太小會(huì)導(dǎo)致數(shù)據(jù)加載不全的問(wèn)題）。

scene.context.memoryThreshold?=?6;//顯存資源占用閾值,單位是GB。

超過(guò)內(nèi)存，修改設(shè)置最大內(nèi)存，防止內(nèi)存超限導(dǎo)致崩潰。設(shè)置以下這兩個(gè)參數(shù)，出現(xiàn)不加載的情況就會(huì)少了一些。

 Cesium.MemoryManager.showMemoryInfo(true);//顯示內(nèi)存調(diào)用
 Cesium.MemoryManager.setMaxMemory(4096);//設(shè)置最大內(nèi)存

三、圖層優(yōu)化

3.1 LOD

LOD機(jī)制使數(shù)據(jù)擁有不同的精細(xì)層級(jí)，在特定的情境下使用合適精細(xì)層級(jí)可提高數(shù)據(jù)的瀏覽效率，降低場(chǎng)景幀率。在SuperMap iDesktop中，對(duì)模型數(shù)據(jù)集生成緩存時(shí)默認(rèn)構(gòu)建3層LOD。在SuperMap iClient3D for Cesium中，場(chǎng)景通過(guò)數(shù)據(jù)與相機(jī)的直線距離來(lái)調(diào)度顯示不同LOD，每一個(gè)LOD層級(jí)之間的切換距離大約是1000米。

舉個(gè)例子：當(dāng)相機(jī)距離模型3000米以上時(shí)，顯示第一層LOD，當(dāng)相機(jī)距離模型2000米-3000米時(shí)，顯示第二層LOD，當(dāng)相機(jī)距離模型小于1000米時(shí)，顯示第三層LOD。

根據(jù)業(yè)務(wù)需求，SuperMap iClient3D for Cesium中可調(diào)整LOD層級(jí)的切換距離：

S3MTilesLayer.lodRangeScale = 1   //圖層層級(jí)縮放比例系數(shù)

該值默認(rèn)為1，如果想要在遠(yuǎn)距離時(shí)加載精細(xì)層LOD，將該值調(diào)小，同時(shí)會(huì)導(dǎo)致加載數(shù)據(jù)量變大；如果對(duì)場(chǎng)景性能要求高，將該值調(diào)大，同時(shí)會(huì)導(dǎo)致數(shù)據(jù)相對(duì)模糊。

3.2 空間索引

SuperMap iClient3D for Cesium中有4種數(shù)據(jù)加載模式，分為深度優(yōu)先、層優(yōu)先、空間索引、深度優(yōu)先非線性切換。默認(rèn)為深度優(yōu)先。

采用空間索引加載方式，可減少LOD層級(jí)切換，從而提高加載到數(shù)據(jù)精細(xì)層LOD的速度

（ps：需要結(jié)合數(shù)據(jù)使用，SuperMap iDesktop 11i及以后緩存的數(shù)據(jù)可直接使用空間索引，SuperMap iDesktop 11i之前緩存的數(shù)據(jù)，需要用新版本桌面對(duì)緩存圖層右鍵【創(chuàng)建空間索引】）

S3MTilesLayer.LoadingPriority = Cesium.LoadingPriorityMode.UsePagedLodInfo //空間索引加載模式

3.3 控制圖層顯示范圍

控制圖層顯示范圍是指影像加載只顯示指定區(qū)域內(nèi)，其他隱藏。SuperMap iClient3D for Cesium 11i及以后版本支持自定義多邊形范圍裁剪影像圖層。可以前往官網(wǎng)SuperMap技術(shù)資源中心|為您提供全面的在線技術(shù)服務(wù)下載SuperMap iClient3D 11i (2022) SP1 for Cesium包，代碼如下：

viewer.scene.globe.addImageryClipRegions({
    position: positions,
    layers: [imageryLayer],
    name: "test"
})//控制影像圖層顯示范圍

3.4 控制圖層顯隱

在滿足業(yè)務(wù)需求的前提下，減少場(chǎng)景中的模型渲染量，比如，瀏覽地上數(shù)據(jù)時(shí)隱藏地下數(shù)據(jù)，瀏覽地下數(shù)據(jù)時(shí)隱藏地上數(shù)據(jù)，瀏覽室外數(shù)據(jù)時(shí)隱藏室內(nèi)數(shù)據(jù)......

S3MTilesLayer.visible = false  //隱藏圖層

3.5 最大最小高程/距離

在滿足業(yè)務(wù)需求的前提下，減少場(chǎng)景中的模型渲染量，適用于大場(chǎng)景下可以不顯示，相機(jī)拉近再顯示的圖層

S3MTilesLayer.visibleDistanceMax = 1000;  //最大可見(jiàn)距離值，單位為米
S3MTilesLayer.visibleDistanceMin = 100;   //最小可見(jiàn)距離值，單位為米
S3MTilesLayer.maxVisibleAltitude  = 1000;  //最大可見(jiàn)高度值，單位為米
S3MTilesLayer.minVisibleAltitude  = 100;   //最小可見(jiàn)高度值，單位為米

3.6 最大最小層級(jí)

對(duì)于影像數(shù)據(jù)而言，可設(shè)置最大最小請(qǐng)求層級(jí)

var layer = viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
      url: URL_CONFIG.SiChuan_IMG,
      minimumLevel:2,    //最小請(qǐng)求層級(jí)
      maximumLevel:8     //最大請(qǐng)求層級(jí)
    }));

四、屬性優(yōu)化

4.1 開(kāi)啟indexDB

在SuperMap iClient3D for WebGL 10i以及之后版本中，提供了indexedDB緩存功能，通過(guò)設(shè)置S3MTileslayer中的indexDBSetting屬性開(kāi)啟緩存機(jī)制，開(kāi)啟之后首次訪問(wèn)下載的s3m文件將被寫(xiě)入indexedDB數(shù)據(jù)庫(kù)中，再訪問(wèn)時(shí)將從indexedDB中直接讀取，極大提高二次瀏覽性能。同時(shí)indexedDB也支持大量數(shù)據(jù)的存儲(chǔ)，以及索引查詢。

indexDBSetting獲取或者設(shè)置indexedDB屬性信息(IE瀏覽器不支持)。其中，在設(shè)置indexeDB屬性時(shí)， 有三個(gè)布爾類型的分支屬性：isGeoTilesSave——是否保存切片； isAttributesSave--是否保存屬性；isGeoTilesRootNodeSave--是否保存根節(jié)點(diǎn)。

開(kāi)啟indexedDB之后的客戶端緩存，這些緩存的文件都在瀏覽器的安裝目錄下，一般是在C:\Users\CYKJ\AppData\Local\Google\Chrome\User Data\Default\IndexedDB目錄下。

開(kāi)啟代碼：

 var layer = scene.layers.find('Config');
 layer.indexedDBSetting.isGeoTilesRootNodeSave=true;

4.2 專題圖

4.2.1 字段專題圖

? ? ? ?前端項(xiàng)目中用戶往往有對(duì)s3m圖層（這里指線、面和白模數(shù)據(jù)）根據(jù)屬性信息賦予不同顏色的需求。雖然咱們前端可以支持SQL查詢獲取屬性對(duì)象信息，實(shí)現(xiàn)上面需求思路是根據(jù)不同字段屬性查出對(duì)應(yīng)圖元ID數(shù)組，再根據(jù)圖元ID數(shù)組用接口setObjsColor(ids, color)來(lái)設(shè)置對(duì)應(yīng)的顏色。這種流程可以走下來(lái)，但是往往查詢渲染起來(lái)特別慢，這時(shí)我們就可以用前端做字段專題圖的方法來(lái)提升它的性能。

下面是前端制作字段專題圖的關(guān)鍵代碼：

 //生成緩存時(shí)需要在桌面軟件中把“屬性存儲(chǔ)類型”改為“ATTRIBUTE”在web端會(huì)根據(jù)指定屬性字段設(shè)置專題圖。
        var infos = [
            {
                url: 'http://www.supermapol.com/realspace/services/3D-bjBaiMo/rest/realspace/datas/bjBaiMo3/config',
                cullEnabled: true,
                queryFieldNames: ['name']
            }
        ];
        
//默認(rèn)是layer.indexedDBSetting.isAttributesSave=true，會(huì)開(kāi)啟圖層的全部屬性字段下載，數(shù)據(jù)量大會(huì)影響性能
S3MTilesLayer.queryFieldNames = ['name'];//指定僅下載需要的屬性字段，提升性能；桌面緩存生成時(shí)，‘屬性存屬類型’需要選擇ATTRIBUTE才支持
S3MTilesLayer.themeStyle = new Cesium.Cesium3DTileStyle({
							color: {
								conditions: [//根據(jù)字段的不同屬性值賦予不同顏色
									['${name} === "北京"', 'color("purple")'],
									['${name} === "上海"', 'color("yellow")'],
									['${name} === "成都"', 'color("green")'],
									['false', 'color("blue")']//當(dāng)屬性值不符合上述條件時(shí)，設(shè)置該顏色
								]
							},
							//show: '${name} === "成都"',//只顯示字段符合該屬性值的對(duì)象，其它不滿足的會(huì)被過(guò)濾掉
						});

4.2.2 標(biāo)簽專題圖

? ? ? ?在GIS項(xiàng)目中將標(biāo)簽、圖標(biāo)在SuperMap iDesktop中做好后生成場(chǎng)景緩存，在SuperMap iServer發(fā)布三維服務(wù)，在前端代碼加載會(huì)出現(xiàn)下圖這種圖標(biāo)和標(biāo)簽密密麻麻的現(xiàn)象，這種可視效果差而且還影響性能。

那我們可以同時(shí)開(kāi)啟圖標(biāo)和標(biāo)簽避讓，來(lái)達(dá)到視覺(jué)美觀和提升性能的效果。具體代碼見(jiàn)下圖：

var iconlayer = scene.layers.find('BusPoint@RealspaceSample');//圖標(biāo)圖層
var textlayer = scene.layers.find('BusPoint@RealspaceSample#1');//文字圖層
iconlayer.isOverlapDisplayed = false;//開(kāi)啟圖標(biāo)避讓
textlayer.isOverlapDisplayed = false;//開(kāi)啟標(biāo)簽避讓
iconlayer.iconRelatedTextLayerID = textlayer.id;//圖標(biāo)隨著文字避讓而避讓

效果如下：

4.3 屬性查詢

SuperMap官網(wǎng)WebGL范例里對(duì)模型進(jìn)行屬性查詢，用到三種方法：

（1）模型數(shù)據(jù)集發(fā)布數(shù)據(jù)服務(wù)進(jìn)行查詢；

（2）模型數(shù)據(jù)集轉(zhuǎn)成二維面數(shù)據(jù)集或者屬性表，對(duì)二維面或者屬性表發(fā)布數(shù)據(jù)服務(wù)進(jìn)行查詢；

（3）通過(guò)模型緩存進(jìn)行屬性查詢。

上述查詢方法各有優(yōu)缺點(diǎn),小編整理了根據(jù)不同數(shù)據(jù)類型發(fā)布服務(wù)在前端進(jìn)行查詢的功能對(duì)比，如下圖所示：

可以根據(jù)自己的項(xiàng)目需求選擇適合自己的屬性查詢方式。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-823459.html