2-18 簡易建物套疊Widget

[info] 小提示：

程式碼連結：https://doc-3dgdp.colife.org.tw/samplecode/#src/testweb/widget-buildingoverlay-sample/

[info] 小提示：

構成本Widget使用之Function：
ov.TerrainView.addTerrainWMTSOverlay
ov.TerrainView.layers
ov.ModelSetLayer.setOverlayName

注意!!

此處 proxy URL 為 https://landgis.p.colife.org.tw/Site/Oview.aspx?

Widget初始化須依賴核心生成的div，所以需要寫在地形開啟後的CallBack中。

這裡先撰寫一個最基本的圖台，並帶有圖層選單。

index.html：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>BuildingOverlay</title>
        <script src="PGWeb3D.min.js"></script>
        <link href="PGWeb3D.css" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>
    <body>
        <div id="MyMap" style="width:100%;height:100%;"></div>
        <script src="main.js"></script>
    </body>
</html>

main.js：

var terrainview = new ov.TerrainView("MyMap");
var buildingOverlay = null; //後面會補上widget
function openCallback (result) {
    //設定底圖
    terrainview.setBaseLayer({
        url: "BING_MAP",
        identifier: "IMAGE",
        urlTemplate: "{URL}"
    });   
}
terrainview.openTerrain(
    {
        url: "http://127.0.0.1:8080",
        identifier: "terrain",
        urlTemplate: "oview.aspx?{URL}"
        callback: openCallback,
    }
);

再來我們要把Widget初始化加進我們撰寫好的main.js中，並加入測試建物。

main.js：

var terrainview = new ov.TerrainView("MyMap");
var buildingOverlay = null; //後面會補上widget
function openCallback (result) {
    //設定預設底圖
    terrainview.setBaseLayer({
        url: "BING_MAP",
        identifier: "IMAGE",
        urlTemplate: "{URL}"
    });   

    terrainview.addModelSetLayer({
        url: "http://127.0.0.1:8080",
        identifier: "building",
        urlTemplate: "https://landgis.p.colife.org.tw/Site/Oview.aspx?{URL}",
    });

    buildingOverlay = new ov.Widget.BuildingOverlay({
        view: terrainview,
        urlTemplate: "{URL}"
    });
}
terrainview.openTerrain(
    {
        url: "http://127.0.0.1:8080",
        identifier: "terrain",
        urlTemplate: "oview.aspx?{URL}"
        callback: openCallback,
    }
);

到目前為止，我們已經成功將圖資套疊簡易建物功能加入圖台中。

圖資套疊簡易建物 Widget使用教學

初始化Widget