3D圖層功能

通用功能

圖層顯示

可使用show來控制圖層顯示或隱藏。

[info] 小提示： 隱藏圖層並不會將圖層移除。

layerHandle.show = false; // 設定圖層隱藏

移動至圖層位置

使用goto將攝影機移動至圖層位置。

layerHandle.goto();

無序半透明渲染

使用enableOrderIndependentTransparency選擇是否開啟無序半透明渲染(OIT)。

[info] 小提示： 若沒開啟OIT，則使用預設之高效半透明渲染(PGT)，具有極高的效能，但正確率稍低。

layerHandle.enableOrderIndependentTransparency(true); // 開啟無序半透明渲染

不透明度

使用setOpacity設定圖層 不透明程度 (0~1，預設為1.0)

layerHandle.setOpacity(0.5);

滑鼠滑動特效

使用setAllowHoverEntity選擇是否開啟圖層圖素的滑鼠滑過特效(Hover)。

layerHandle.setAllowHoverEntity(true); // 開啟Hover特效

使用setHoverEntityHighlightColor改變圖層圖素的Hover高亮顏色。

layerHandle.setHoverEntityHighlightColor("#666666");

滑鼠點擊效果

使用setAllowSelectEntity選擇是否開啟滑鼠點擊效果(預設開啟)。

layerHandle.setAllowSelectEntity(false); // 關閉滑鼠點擊效果

使用setSelectedEntityHighlightColor設定圖層圖素的選取顏色。

layerHandle.setSelectedEntityHighlightColor("#666666");

使用setDrawSelectedEntityOutline設定圖層的圖素點擊後是否顯示外框線。

layerHandle.setDrawSelectedEntityOutline(true); // 開啟外框線

使用setOutlineColor設定外框線顏色，第一個參數設定可視範圍顏色，第二個參數設定被阻擋處顏色。

layerHandle.setOutlineColor("#666666","#FFFFFF");

使用setOnClickEntity設定此圖層圖素被點擊時的callback。

layerHandle.setOnClickEntity(function(){

});

圖層移動及旋轉

使用setOffset設定圖層的公尺平移量(目前僅支援PhotogrammetryModel、PointCloud、Model、ModelSet、Pipeline)。

layerHandle.setOffset(x,y,z); // 分別填入xyz軸的偏移量(單位為公尺)。

使用setRotate設定圖層的旋轉量(目前僅支援PhotogrammetryModel、PointCloud、Model、ModelSet、Pipeline)。

layerHandle.setRotate(degree); // 填入旋轉角度。

圖層淡出功能

使用setUseFade選擇是否開啟圖層淡出功能(預設關閉)。

layerHandle.setUseFade(true); // 開啟圖層淡出功能

使用setFadeNearFar設定圖層開始淡出與完全消失的距離。

layerHandle.setFadeNearFar(500,2000); 
// 第一個參數為near，表示開始淡出的距離(公尺)。
// 第二個參數為far，表示完全消失的距離(公尺)。

地形圖層功能

變更地形不透明度

使用terrainAlpha變更地形不透明程度 (0~1，預設為1)。

mapView.terrainAlpha = 0.5;

[info] 動手試試看： 程式碼連結：我是連結

穿越地表

使用throughSurface選擇是否開啟穿越地表功能。

mapView.throughSurface = true;

[info] 動手試試看： 程式碼連結：我是連結

更換地形

使用reloadTerrain重新載入同伺服器的另一個地形場景。

mapView.reloadTerrain(identifier, callback)
// identifier為地形圖層在伺服器上的名稱
// callback為執行重新載入後執行的回呼函式

傾斜攝影圖層功能

傾斜攝影圖層疊加Overlay(披覆功能)

使用setOverlayName設定要疊加在PhotogrammetryModelLayer上的Overlay圖層名稱，需要先自行加Overlay。

PhotogrammetryModel.setOverlayName(layerName); // 參數填入Overlay圖層名稱

[info] 動手試試看： 程式碼連結：我是連結

部分裁切功能

使用addClipPolygon在PhotogrammetryModelLayer上加入要裁切的區域，Bounds裁切，Holes保留原模型。

let polygon;
polygon.Holes.push(new window.GeoPolygon(ret.geo));
polygon.Bounds.push(new window.GeoPolygon(WorldPolygon));
PhotogrammetryModel.addClipPolygon(polygon);

使用getAllClipPolygon取得所有在PhotogrammetryModelLayer上的裁切區域。

PhotogrammetryModel.getAllClipPolygon();

使用removeClipPolygon移除先前在PhotogrammetryModelLayer上的裁切區域。

PhotogrammetryModel.removeClipPolygon();

[info] 動手試試看： 程式碼連結：我是連結

模型圖層功能

模型圖層疊加Overlay(披覆功能)

使用setOverlayName設定要疊加在ModelLayer上的Overlay圖層名稱，需要先自行加Overlay。

model.setOverlayName(layerName);// 參數填入Overlay圖層名稱

模型圖層屬性上色功能

使用setEntityColorFunction設置符合屬性欄位圖素的顏色函數，要注意提供的colorFunction性能。

model.setEntityColorFunction(["Type"], function (id, Attrs, color) {
    if (Attrs[0] == type) {
      color[0] = 255; // R
      color[1] = 0;   // G
      color[2] = 0;   // B
      color[3] = 255; // A
      // 將符合屬性之圖素設定為紅色
      return true; // 回傳值為true則顯示，false則隱藏圖素      
    } else {
      color[0] = 0; // R
      color[1] = 0; // G
      color[2] = 0; // B
      color[3] = 0; // A
      // 不符合的圖素不上色
      return true; // 回傳值為true則顯示，false則隱藏圖素
    }    
});

使用removeEntityColorFunction清除所有圖素的顏色函數。

model.removeEntityColorFunction();

[info] 動手試試看： 程式碼連結：我是連結

模型集圖層功能

模型集圖層疊加Overlay(披覆功能)

使用setOverlayName設定要疊加在ModelLayer上的Overlay圖層名稱，需要先自行加Overlay。

modelSet.setOverlayName(layerName);// 參數填入Overlay圖層名稱

[info] 動手試試看： 程式碼連結：我是連結

作畫模式

使用setDrawMode對指定建物類型設定作畫模式。

modelSet.setDrawMode(meshType, drawMode);
// 第一個參數為建物類型：
// 0(ov.MODEL_TYPE.NO_TEXTURE_MODEL)為無模型建物
// 1(ov.MODEL_TYPE.TEXTURE_MODEL)為有模型建物
// ----------------------------------------------------------
// 第二個參數為作畫模式：
// 0(ov.MODEL_DRAWMODE.FLOOR_FLOORNUM)為樓層(依據樓層數分層)
// 1(ov.MODEL_DRAWMODE.FLOOR_HEIGHT)為樓層(依據樓高分層)
// 2(ov.MODEL_DRAWMODE.PUREWHITE)為全白
// 3(ov.MODEL_DRAWMODE.TEXTURE)為原模型貼圖(不適用於無模型建物)

[info] 動手試試看： 程式碼連結：我是連結

隱藏建物

使用resetAllHideEntityID重設所有建物隱藏狀態。

modelset.resetAllHideEntityID(); // 重設所有建物隱藏狀態

[info] 動手試試看： 程式碼連結：我是連結

模型集圖層屬性上色功能

使用setEntityColorFunction設置符合屬性欄位圖素的顏色函數，要注意提供的colorFunction性能。

modelset.setEntityColorFunction(["Type"], function (id, Attrs, color) {
    if (Attrs[0] == type) {
      color[0] = 255; // R
      color[1] = 0;   // G
      color[2] = 0;   // B
      color[3] = 255; // A
      // 將符合屬性之圖素設定為紅色
      return true; // 回傳值為true則顯示，false則隱藏圖素      
    } else {
      color[0] = 0; // R
      color[1] = 0; // G
      color[2] = 0; // B
      color[3] = 0; // A
      // 不符合的圖素不上色
      return true; // 回傳值為true則顯示，false則隱藏圖素
    }    
});

點雲圖層功能

高度著色功能

使用setColorSet設定高度分層與顏色，並使用enableAltitudeMode開啟高度著色功能，可使用enableColorBlend設定是否使用漸層(預設開)。

[info] 小提示： 可使用getAltitude取得點雲資料的高度上下界。

var altitude = pointcloud.getAltitude();
var gap = (altitude.altitudeMax - altitude.altitudeMin)/4;
var color = [0.0, 0.0 , 0 , 255,
             0.0, 50 , 50 , 255,
             0.0, 150 , 150 , 255,
             0.0, 200 , 200 , 255,
             0.0, 255 , 255 , 255];
var height = [altitude.altitudeMax, 
              altitude.altitudeMax - gap, 
              altitude.altitudeMax - gap2, 
              altitude.altitudeMax - gap3, 
              altitude.altitudeMax - gap*4];
pointcloud.setColorSet(color, height);

// altitude.altitudeMax為點雲資料上界，altitude.altitudeMin為點雲資料下界。
// color陣列存放顏色資訊(RGBA)，並照順序排放。
// height陣列存放高度分層資訊。

pointcloud.enableAltitudeMode(true); // 開啟高度著色功能。
pointcloud.enableColorBlend(true);   // 開啟漸層，如若關閉，則不會有兩個顏色中的內插補色。

[info] 動手試試看： 程式碼連結：我是連結

邊界增強功能

使用enableEDL開啟邊界增強效果，並使用edlStrength調整邊界增強效果強度。

[info] 小提示： 可使用isSupportEDL檢查瀏覽器是否支援邊界增強效果。

pointcloud.enableEDL(true);
pointcloud.edlStrength = 1000;

[info] 動手試試看： 程式碼連結：我是連結

管線圖層功能

流向功能

使用setDrawAllFlow設定開啟流向全畫功能。

[info] 小提示：

如果要指定單一管線開啟流向，則使用setEntityFlow(entityId, isDrawFlow)。

第一個參數指定管線Id，第二個參數設定是否畫出流向。

使用setFlowColorWeight設定流向箭頭顏色權重(0~1之間)。

使用setFlowSpeed設定流向速度(預設1)。

使用setFlowUseTexture設定流向是否使用箭頭圖片(預設開)。

pipeline.setDrawAllFlow(true);
pipeline.setFlowColorWeight(1, 0, 0);
pipeline.setFlowSpeed(0.5);
pipeline.setFlowUseTexture(false);

[info] 動手試試看： 程式碼連結：我是連結

變更管線顏色

使用setEntityColor設定指定管線顏色。

pipeline.setEntityColor(entityId, color, mix);
// 第一個參數為要指定的管線ID。
// 第二個參數為指定的顏色。
// 第三個參數為指定的混色比例。
pipelineLayer.setEntityColor(1234, "#FFFFFF", 1.0);    // 管線顏色變白色
pipelineLayer.setEntityColor(1234, "#FFFFFF", 0.5);    // 管線顏色變原本的顏色與白色各半混色，管線看起來會有高光的感覺
pipelineLayer.setEntityColor(1234, null);              // 清除管線的顏色設定
pipelineLayer.setEntityColor(-1);                      // 清除整張圖層的顏色設定
Copyright © PilotGaea 2022 Version：13.0 all right reserved，powered by Gitbook修訂時間： 2024-01-31 11:40:34