新增與移除圖層

地形圖層

[info] 小提示：

程式碼連結：我是連結

地形圖層使用的是TerrainView的函式openTerrain，在使用其他圖層前必須先成功讀入地形圖層，故其他圖層的新增都會在openCallback函式之中。

terrainview.openTerrain({
    url: "http://127.0.0.1:8080",
    identifier: "範例地形圖",
    callback: openCallback,
    urlTemplate: "https://sample.pilotgaea.com.tw/Oview.aspx?{URL}"
});
function openCallback(result) {
    // 新增其他圖層與後續動作都寫在這裡
}

傾斜攝影模型圖層

[info] 小提示：

程式碼連結：我是連結

傾斜攝影使用addPhotogrammetryModelLayer 函式，請將程式碼寫入openCallback函式中，函式後半的callback是讓圖層新增成功時會用console.log顯示圖層名稱與設定變數給圖層。

terrainview.addPhotogrammetryModelLayer({
    url: "http://127.0.0.1:8080",
    identifier: "範例傾斜攝影模型圖",
    urlTemplate: "https://sample.pilotgaea.com.tw/Oview.aspx?{URL}",
    callback: function (success, layer) {
      if (success) {
        // 設定變數給圖層後，goto()直接前往圖層位置
        PhotogrammetryModel = layer;
        PhotogrammetryModel.goto();
      } else {
        console.log("傾斜攝影不成功");
      }
    }
  });

模型圖層

[info] 小提示：

程式碼連結：我是連結

模型圖層使用addModelLayer函式，請將程式碼寫入openCallback函式中，函式後半的callback是讓圖層新增成功時會用console.log顯示圖層名稱與設定變數給圖層。

terrainview.addModelLayer({
    url: "http://127.0.0.1:8080",
    identifier: "範例gml02",
    urlTemplate: "https://sample.pilotgaea.com.tw/Oview.aspx?{URL}",
    callback: function (success, layer) {
      if (success) {
        // 設定變數給圖層後，goto()直接前往圖層位置
        PhotogrammetryModel = layer;
        PhotogrammetryModel.goto();
      } else {
        console.log("模型圖層載入不成功");
      }
    }
  });

BIM模型圖層

[info] 小提示：

程式碼連結：我是連結

BIM模型又稱為建築資訊模型，使用模型圖層的方法加入，名稱設定為”bim_dexi_recycle”。

terrainview.addModelLayer({
    url: "http://127.0.0.1:8080",
    identifier: "bim_dexi_recycle",
    urlTemplate: "https://sample.pilotgaea.com.tw/Oview.aspx?{URL}",
    callback: function (success, layer) {
      if (success) {
        // 設定變數給圖層後，goto()直接前往圖層位置
        model = layer;
        model.goto();
      } else {
        console.log("BIM模型載入不成功");
      }
    }
  });

模型集圖層

[info] 小提示：

程式碼連結：我是連結

模型集圖層使用addModelSetLayer函式，請將程式碼寫入openCallback函式中，函式後半的callback是讓圖層新增成功時會用console.log顯示圖層名稱與設定變數給圖層。

terrainview.addModelSetLayer({
    url: "http://127.0.0.1:8080",
    identifier: "shp_Zhubei",
    urlTemplate: "https://sample.pilotgaea.com.tw/Oview.aspx?{URL}",
    callback: function (success, layer) {
      if (success) {
        // 設定變數給圖層後，goto()直接前往圖層位置
        modelset = layer;
        modelset.goto();
      } else {
        console.log("模型集圖層載入不成功");
      }
    }
});

點雲圖層

[info] 小提示：

程式碼連結：我是連結

點雲圖層使用addPointCloudLayer函式，請將程式碼寫入openCallback函式中，函式後半的callback是讓圖層新增成功時會用console.log顯示圖層名稱與設定變數給圖層。

terrainview.addPointCloudLayer({
    url: "http://127.0.0.1:8080",
    identifier: "CamphorTree",
    urlTemplate: "https://sample.pilotgaea.com.tw/Oview.aspx?{URL}",
    callback: function (success, layer) {
      if (success) {
        // 設定變數給圖層後，goto()直接前往圖層位置
        pointcloud = layer;
        terrainview.gotoCamera(camera, true);
      } else {
        console.log("pointcloud載入不成功");
      }
    }
});

向量圖層

VectorLayer

向量圖層使用addPointCloudLayer函式，請將程式碼寫入openCallback函式中，函式後半的callback是讓圖層新增成功時會用console.log顯示圖層名稱與設定變數給圖層。

terrainview.addVectorLayer({
    url: "http://127.0.0.1:8080",
    identifier: "VectorLayer",
    urlTemplate: "https://sample.pilotgaea.com.tw/Oview.aspx?{URL}",
    callback: function (success, layer) {
      if (success) {
        // 設定變數給圖層後，goto()直接前往圖層位置
        VectorLayer = layer;
        terrainview.gotoCamera(camera, true);
      } else {
        console.log("向量圖層載入不成功");
      }
    }
});

管線圖層

[info] 小提示：

程式碼連結：我是連結

管線圖層使用addPipelineLayer函式，請將程式碼寫入openCallback函式中，函式後半的callback是讓圖層新增成功時會用console.log顯示圖層名稱與設定變數給圖層。管線一般在地表下，所以需要把terrain及overlay圖層設成半透明才能看見。

terrainview.addPipelineLayer({
    url: "http://127.0.0.1:8080",
    identifier: "Pipeline_taichungline",
    urlTemplate: "https://sample.pilotgaea.com.tw/Oview.aspx?{URL}",
    callback: function (success, layer) {
      if (success) {
        // 設定變數給圖層後，goto()直接前往圖層位置
        pipeline = layer;
        pipeline.goto();
      } else {
        console.log("管線開啟不成功");
      }
    }
});

自畫圖層

CustomLayer

可以自繪任意圖形、文字與模型。

以下列表僅列出較常用的函式，詳細函式及用法請參見3D Web Reference。

功能 對應函式
點 addPointEntity
聚合線 addPolylineEntity
地表帶洞多邊形 addSurfacePolygonSetEntity
文字 addTextEntity
正多邊形柱 addBarEntity
多邊形柱 addPolygonPrismEntity
圓錐 addConeEntity
圖釘 addPushpinEntity
叢集 addClusterEntity
GLTF模型 addGLTFEntity

[info] 小提示： 此處包含程式碼數量眾多，詳細用法與demo請參見Sample Code網站 ➜ 圖層 ➜ 自畫圖層 頁面。

自畫疊加圖層

TerrainCustomLayer

可以自繪任意圖形、文字。字畫疊加圖層與自畫圖層不同的地方在於此圖層會參考地形繪製，能緊密貼合地形。

以下列表僅列出較常用的函式，詳細函式及用法請參見3D Web Reference。

功能 對應函式
點 addPointEntity
聚合線 addPolylineEntity
多邊形 addPolygonEntity
文字 addTextEntity

[info] 小提示： 此處包含程式碼數量眾多，詳細用法與demo請參見Sample Code網站 ➜ 圖層 ➜ 自畫疊加圖層 頁面。

可視化資料網格圖層

[info] 小提示：

程式碼連結：我是連結

可視化資料網格圖層將後端資料(例如：JSON)經過前端canvas做前置處理後，使用addTerrainVisualizedDataGridOverlay函式繪製於圖台上。

[info] 小提示： 此處包含程式碼數量眾多，詳細用法與demo請參見上方DEMO或Sample Code網站 ➜ 圖層 ➜ 可視化資料網格 頁面。

OGC I3S圖層

[info] 小提示：

程式碼連結：我是連結

OGC I3S圖層使用addOGCI3SLayer函式，請將程式碼寫入openCallback函式中，函式後半的callback是讓圖層新增成功時會用console.log顯示圖層名稱與設定變數給圖層。

var url ="http://127.0.0.1:8080/i3s/rest/services/I3S_1/SceneServer/layers/0";
terrainview.addOGCI3SLayer({
  url: url,
  urlTemplate: "https://sample.pilotgaea.com.tw/Oview.aspx?{URL}",
  callback: function (success, layer) {
    if (success) {
      // 設定變數給圖層後，goto()直接前往圖層位置
      OGCi3s = layer;
      OGCi3s.goto();
    } else {
      console.log("OGCI3S載入不成功");
    }
  }
});

OGC 3DTiles圖層

[info] 小提示：

程式碼連結：我是連結

OGC 3DTiles圖層使用addOGC3DTilesLayer函式，請將程式碼寫入openCallback函式中，函式後半的callback是讓圖層新增成功時會用console.log顯示圖層名稱與設定變數給圖層。

let url ="https://sample.pilotgaea.com.tw/demo/index/src/testweb/3dtiles/3DTiles/tileset.json";
terrainview.addOGC3DTilesLayer({
  url: url,
  urlTemplate: "https://sample.pilotgaea.com.tw/Oview.aspx?{URL}",
  callback: function (success, layer) {
    if (success) {
      // 設定變數給圖層後，goto()直接前往圖層位置
      OGC3dtiles = layer;
      OGC3dtiles.goto();
    } else {
      console.log("OGC3DTiles載入不成功");
    }
  }
});

移除圖層

可使用開啟圖層後保存的圖層手柄來移除圖層。

terrainview.removeLayer(modelset);

或是使用findLayer以圖層名稱來找到圖層並移除。

var layer = terrainview.findLayer("範例模型集圖");
terrainview.removeLayer(layer);

也可以經由terrainview.layers去找到當前所有的圖層，自行決定條件去移除圖層。

var layerArray = terrainview.layers;
terrainview.removeLayer(layerArray[0]);
Copyright © PilotGaea 2022 Version：13.0 all right reserved，powered by Gitbook修訂時間： 2024-01-31 11:27:18