2-16 多視窗模式Widget

[info] 小提示：

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

[info] 小提示：

構成本Widget使用之Function：
ov.TerrainView.Open

注意!!

在本範例使用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");
  whiteList.Add("https://wmts.nlsc.gov.tw");  // 本範例必要的proxy URL，已經存在的可以不用再加一次
  whiteList.Add("https://i3s.nlsc.gov.tw");  // 本範例必要的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://i3s.nlsc.gov.tw");之後新增proxy URL。

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

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

index.html：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>MultiWidget</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:100vh;"></div>
        <div style="position: absolute; width: 100px; top:20%; right: 5%; color: white; background-color: gray; z-index: 10;">
            <ul>
            　<li><a onclick="baseNLSCPhoto2()">正射影像</a></li>
            　<li><a onclick="baseNLSCEMap5()">電子地圖</a></li>
            　<li><a onclick="modelSetTaipei()">台北市</a></li>
            　<li><a onclick="overlayLandUsed()">國土利用調查現況成果圖</a></li>
            　<li><a onclick="overlayGeology()">地質敏感(山崩與地滑)</a></li>
            　<li><a onclick="overlaySchoolRegion()">各級學校範圍圖</a></li>
            </ul>
        </div>
        <script src="main.js"></script>
    </body>
</html>

main.js：

var terrainview = new window.ov.TerrainView("MyMap");
var currentview = terrainview; //圖層點擊時要操作的目標
var multiWindow = 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",
        callback: openCallback,
        urlTemplate: "oview.aspx?{URL}"
    }
);

再來我們要把其他新增圖層函式也加進我們撰寫好的main.js中。

function baseNLSCPhoto2() {
 currentview.setBaseLayer({
  url: "https://wmts.nlsc.gov.tw/wmts",
  identifier: "PHOTO2",
  urlTemplate: "oviewTLS12.aspx?{URL}"
 });
}
function baseNLSCEMap5() {
 currentview.setBaseLayer({
  url: "https://wmts.nlsc.gov.tw/wmts",
  identifier: "EMAP5",
  urlTemplate: "oviewTLS12.aspx?{URL}"
 });
}
function modelSetTaipei() {
 currentview.addOGCI3SLayer({
  url: "https://i3s.nlsc.gov.tw/building/i3s/SceneServer/layers/0",
  urlTemplate: "oviewTLS12.aspx?{URL}"
 });
}
function overlayLandUsed() {
 currentview.addTerrainWMTSOverlay({
  url: "https://wmts.nlsc.gov.tw/wmts",
  identifier: "LUIMAP",
  urlTemplate: "oviewTLS12.aspx?{URL}"
 });
}
function overlayGeology() {
 currentview.addTerrainWMTSOverlay({
  url: "https://wmts.nlsc.gov.tw/wmts",
  identifier: "GeoSensitive2",
  urlTemplate: "oviewTLS12.aspx?{URL}"
 });
}
function overlaySchoolRegion() {
 currentview.addTerrainWMTSOverlay({
  url: "https://wmts.nlsc.gov.tw/wmts",
  identifier: "SCHOOL",
  urlTemplate: "oviewTLS12.aspx?{URL}"
 });
}

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

main.js：

var terrainview = new window.ov.TerrainView("MyMap");
var currentview = terrainview;
var multiWindow = new window.ov.Widget.MultiWindow({view: terrainview});
function openCallback (result) {
    //設定預設底圖
    terrainview.setBaseLayer({
        url: "BING_MAP",
        identifier: "IMAGE",
        urlTemplate: "{URL}"
    });   

    //多視窗初始化時設定底圖
    multiWindow.addEventListener("load", (index) => {
        let view = multiWindow.getSubTerrainView(index);
        let url = "https://wmts.nlsc.gov.tw/wmts";
        let identifier = "PHOTO2";
        switch(index) {
        case 1:
            identifier = "EMAP5";
            break;
        case 2:
            identifier = "PHOTO2";
            break;
        case 3:
            identifier = "EMAP5";
            break;
        }

        view.setBaseLayer({
            url: url,
            identifier: identifier,
            urlTemplate: "oviewTLS12.aspx?{URL}"
        });
    });

    //多視窗得到焦點時，將其設定為當前目標
    multiWindow.addEventListener("focus", (index) => {
        let view = multiWindow.getSubTerrainView(index);
        currentview = view;
    });
}
terrainview.openTerrain(
    {
        url: "http://127.0.0.1:8080",
        identifier: "terrain",
        callback: openCallback,
        urlTemplate: "oview.aspx?{URL}"
    }
);

到目前為止，我們已經成功將多視窗功能加入圖台中。

多視窗 Widget使用教學

初始化Widget