CityGML匯出KMZ API開發教學

[info] 小提示：

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

功能說明

本範例文件說明如何在圖台中將modelset匯出成kmz檔

首先將CityGML XML格式的建物轉檔成modelsetlayer放進圖台在點擊左上的"匯出KMZ"按鈕後會呼叫API將該modelsetlayer匯出成kmz檔並自動下載到本機的"下載"資料夾

index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--引入js-->
    <script src="../../PGWebJS/13.0/PGWeb3D.min.js"></script>
    <script src="../../../js/config.js"></script>
    <!--引入css-->
    <link href="../../PGWebJS/13.0/css/PGWeb3D.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div id="MyMap" class="map" style="width:100%;height:100%;position:absolute;top:0;left:0"></div>
    <script src="./js/main.js" type="module"></script>

    <div style="width:13rem;height:11%;position:absolute;top: 0.5rem;left:0.5rem;background-color:black;z-index: 10;padding: 1rem;">
      <div style="color:white;font-size: 1rem;">三維產權模型提供匯出功能。</div>
      <button id="exportbutton" style="background-color:white;color: black;font-size: 1rem;border-radius: 0.4rem;display: flex;align-items: center;justify-content: center;margin-top: 1rem;width: 8rem;height: 2rem;cursor: pointer;">匯出KMZ</button>

    </div>
  </body>
</html>

main.js：

const terrainview = new ov.TerrainView("MyMap");

terrainview.openTerrain(
  {
      url: MAPSERVER.URL,
      identifier: "範例地形圖",
      callback: openCallback
  }
);

/** 地形讀入後的回呼 */
function openCallback() {
  // 設定底圖
  terrainview.setBaseLayer({
    url: "BING_MAP",
    identifier: "IMAGE",
  });

  //設定初始位置
  let initialPos = new GeoPoint(121.2347878442796, 23.427553934089445, 465850.0013822634);
  let initialV = new Geo3DPoint(0, 0, -1);
  let initialUp = new Geo3DPoint(0, 1, 0);
  let initialCamera = new ov.Camera(initialPos, initialV, initialUp);
  terrainview.gotoCamera(initialCamera, false);

  var msl = terrainview.addModelSetLayer({
    url: "http://127.0.0.1:8081",
    identifier: "5CQFFE3L排版",
    urlTemplate: "https://sample.pilotgaea.com.tw/Oview.aspx?{URL}",
    callback: function (success, layer) {
      if (success) {
        layer.goto();
        console.log("開啟成功");
      } else {
        console.log("開啟失敗");
      }
    }
  });

  const exportbutton = document.getElementById("exportbutton");

  exportbutton.addEventListener("click", () => handleclick());

  const handleclick = async () => {
    const apiUrl = 'https://sample.pilotgaea.com.tw:10140/docmd?cmd=GeoDataBasePlugin_ExportModelSetAsKMZ';

    const requestBody = {
      "LayerName": "5CQFFE3L排版"
    };

    try {
      const response = await fetch(apiUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json', 
        },
        body: JSON.stringify(requestBody),
      });

      const data = await response.json();

      const filename = "modelset.kmz";
      downloadBase64(data.Data, filename);

    } catch (error) {
      console.error('Error:', error);
    }
  }

  const downloadBase64 = (dataBase64, fileName) => {
    const downloadLink = document.createElement("a");

    downloadLink.href = `data:application/vnd.google-earth.kmz;base64,${dataBase64}`;

    downloadLink.download = fileName;

    downloadLink.click();

    downloadLink.href = "";
  }

}