2-14 社會經濟統計資料展示Widget

[info] 小提示：

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

[info] 小提示：

構成本Widget使用之Function：
ov.Widget.Socioeconomic

環境建置

Widget 功能需要透過 MapServer 的擴充功能來執行。擴充功能環境搭建：
步驟 1. 下載 3dgdp.socioeconomic-widget.resource.zip 解壓縮。

3dgdp.socioeconomic-widget.resource.zip

步驟2. 將資料夾內的SocioeconomicPlugin.dll丟入 C:\Program Files\PilotGaea\TileMap\plugins 資料夾內。
步驟3. 將資料夾內的TOWN_MOI.DB匯入MapServer的二維向量圖層，圖層名稱須取名為TOWN_MOI。
步驟4. 重啟MapServer應用程式即可。

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

這裡先撰寫一個最基本的圖台。

index.html：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>SocioeconomicWidget</title>
        <script src="PGWeb3D.min.js"></script>
    </head>
    <body>
        <div id="MyMap" style="width:100%;height:100%;position:absolute;top:0;left:0"></div>
        <script src="main.js"></script>
    </body>
</html>

main.js：

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

再來我們要把Widget初始化加進我們撰寫好的main.js中。

main.js：

var terrainview = new ov.TerrainView("MyMap");
var widget = null; // 預留一個物件當Widget開啟成功後的手柄。
function openCallback (result) {
    //設定預設底圖
    terrainview.setBaseLayer({
        url: "BING_MAP",
        identifier: "IMAGE",
        urlTemplate: "{URL}"
    });   
        widget = new ov.Widget.Socioeconomic({
            view:terrainview,
            urlTemplate: "oview.aspx?{URL}" // 這邊代理網址可依實際環境需要調整
        }); //選擇要綁定的terrainview並初始化社會經濟統計Widget。
}
terrainview.openTerrain(
    {
        url: "http://127.0.0.1:8080",
        identifier: "terrain",
        callback: openCallback,
        urlTemplate: "oview.aspx?{URL}"
    }
);

function openWidget() {
    widget = new ov.Widget.Socioeconomic({
        view:terrainview,
        urlTemplate: "oview.aspx?{URL}" // 這邊代理網址可依實際環境需要調整
    }); //選擇要綁定的terrainview並初始化社會經濟統計Widget。

    var button = document.getElementById("openWidget");
    button.disabled = true;
    setTimeout(function () {
        button.disabled = false;
    }, 1000);
}

到目前為止，我們已成功將Socioeconomic Widget加入圖台中。

社會經濟統計Widget使用教學

環境建置

初始化Widget