PilotGaea 3D O'view

O'View WebGL 網頁前端

前置作業

  • 前端圖台需要配合後端的 O'View MapServer 才能正常開啟。
  • 建議架設環境為IIS,可以直接使用 oview.aspx 做代理請求。詳細需求見後端配置。

開啟圖台

1. 建立 html 檔案

先建立一份 html 檔案,以下為範例

<!DOCTYPE html>
<html>
<head>
<!-- 來源可從 pilotgaea-web.js 或 PGWeb3D.min.js 擇一 -->
<script src="pilotgaea-web.js"><script/>
<style>
#map {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<!-- 須提供一個 div 給圖台使用。 -->
<div id="map"></div>
</body>
</html>

2. 建立 TerrainView

const terrainView = new ov.TerrainView("map");

使用 JavaScript 建立 TerrainView,給予 <div>id

3. 開啟地形圖層

// 地形載入後的回呼函式。
const onTerrainLoaded = () => {
// 在這裡插入你想做的事。
};

terrainView.openTerrain({
// O'View MapServer位址,如果在本機上預設為 "http://localhost:8080"
url: "{MapServerURL}",
// O'View MapServer中地形圖層的名稱。
identifier: "{TerrainIdentifier}",
// 設定地形載入後的回呼。
callback: onTerrainLoaded,
});

3D 圖台一定要綁定一個地形才能使用。

onTerrainLoaded 為地形載入後的回呼函式,圖台的絕大多數操作必須要等待地形開啟後才可進行。

恭喜你完成開啟圖台,接下來可以在 onTerrainLoaded 內插入你想做的事。

應用範例

O'View WebGL 範例程式 查看使用範例

後端配置

架設圖台的後端需要以下檔案的 MIME/type 配置

檔案類型 MIME/type 描述
.gltf application/json 模型檔案
.glb model/gltf.binary 模型檔案
.b3dm application/octet-stream
.i3dm application/octet-stream
.pnts application/octet-stream
.cmpt application/octet-stream
.drc application/octet-stream
.gpx application/xml 配合軌跡模組
.kml application/vnd.google-earth.kml+xml 配合KML功能
.kmz application/vnd.google-earth.kmz 配合KML功能

Generated using TypeDoc