既有成屋展示Widget使用教學


[info] 小提示:

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


[info] 測試檔案下載:
下載連結:點擊此處下載


[info] 小提示:

構成本Widget使用之Function:
ov.Widget.ReadilyAvailableHouseDisplay

注意!!

在本範例使用proxy前請先修改oviewTLS12.aspx,如下所示:

private bool ValidateWhiteList(string url)
{
  bool ret = false;
  List<string> whiteList = new List<string>();
  whiteList.Add("http://127.0.0.1:8080");  // 本範例必要的proxy URL,已經存在的可以不用再加一次
  whiteList.Add("https://other.proxy.url");  // 其他proxy的 URL,可依照需求自行增加
  // must validate white list
  foreach (string s in whiteList)
  {
      if (url.ToLower().StartsWith(s.ToLower()))// CompareNoCase
      {
          ret = true;
          break;
      }
  }
  return ret;
}

如果還有需求可以在whiteList.Add("https://api.n2yo.com");之後新增proxy URL。


環境建置

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

3dgdp.readily-available-house-widget.resource.zip

步驟 2. 將資料夾內所有檔案丟入 C:\Program Files\PilotGaea\TileMap\plugins 資料夾內。
步驟 3. 重啟MapServer應用程式即可。

初始化Widget

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

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

index.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>ReadilyAvailableHouseWidget</title>
        <script src="PGWeb3D.min.js"></script>
        <script src="https://widgets.colife.org.tw/widget/3dgdp.readily-available-house-display-widget.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://widgets.colife.org.tw/widget/3dgdp.readily-available-house-display-widget.css" />
    </head>
    <body>
        <div id="MyControl" style="position: absolute;z-index:1;color: white;background-color:black;">
        <button id="openWidget" onclick="openWidget()" style="left: 5px; top: 7px; position: absolute; width: 120px; border-radius: 7px;">開啟Widget</button>
        </div>
        <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: "oview.aspx?{URL}"
    });   
}
terrainview.openTerrain(
  {
     url: 'https://data-3dgdp.colife.org.tw/Sample_src/PGWebJS/13.0/oviewRP.ashx', // 或您自己的O'View MapServer服務
     identifier: "範例地形圖",
     callback: openCallback,
  }
);

再來我們要把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: "oview.aspx?{URL}"
    });
}
terrainview.openTerrain(
  {
     url: 'https://data-3dgdp.colife.org.tw/Sample_src/PGWebJS/13.0/oviewRP.ashx', // 或您自己的O'View MapServer服務
     identifier: "範例地形圖",
     callback: openCallback,
  }
);

function openWidget() {
    widget = new ov.Widget.ReadilyAvailableHouseDisplay({
        view: terrainview,
        urlTemplate: "oview.aspx?{URL}" // 這邊代理網址可依實際環境需要調整
    });//選擇要綁定的terrainview並初始化既有成屋展示Widget

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

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

Copyright © NCHC 2022 Version:13.0 all right reserved,powered by Gitbook修訂時間: 2024-12-03 10:50:40