3D線條

此範例示範如何建立 3D 線條，包含以下功能：
新增 3D 線條（指定座標 Z 值）：使用 map.three.add3dLine 方法，並直接於座標中指定 Z 值建立 3D 線條
新增 3D 線條（統一固定高度）：使用 map.three.add3dLine 方法，並透過 zCoordinate 套用整條線條高度
info
詳細使用說明請參考「add3dLine」。
<!DOCTYPE html>

<html>
  <head>
      <meta charset=utf-8 />
      <title>3D線條</title>
      <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
      <script src="https://kw3dmap.localking.com.tw/openapi/loader/mapThree-1.3.9.loader.js" crossorigin="anonymous" referrerpolicy="origin"></script>
      <style>
        body { margin: 0; padding: 0; }
        #map { width: 100vw; height: 100vh; }
      </style>
  </head>

  <body>
      <div id="map"></div>

      <script type="module">
        const map = await new mapThree(document.getElementById("map"), {
          accessKey: 'get_your_key',
          accessToken: 'get_your_token',
          style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',
          center: [121.564, 25.0385],
          pitch: 60,
          zoom: 15,
        });

        map.on("style.load", () => {
          /* ════════════════════════════════════════════════════════════════════════
          * 新增 3D 線條（指定座標 Z 值）：
          - 可調整個別座標中的 Z 值，設定為不同高度。
          - 可調整 color/width，更換線條顏色/寬度。
          ════════════════════════════════════════════════════════════════════════ */
          map.three.add3dLine({
            coordinates: [
              [121.56, 25.033, 200], // 第三個參數為 Z 值
              [121.56, 25.036, 400],
              [121.566, 25.036, 400],
              [121.566, 25.033, 200],
            ],

            // 線條顏色
            color: "#990000",

            // 線條寬度
            width: 8,
          });


          /* ════════════════════════════════════════════════════════════════════════
          * 新增 3D 線條（統一固定高度）：
          - 可調整 zCoordinate，統一設定固定高度。
          ════════════════════════════════════════════════════════════════════════ */
          map.three.add3dLine({
            coordinates: [
              [121.562, 25.037],
              [121.562, 25.034],
              [121.568, 25.034],
              [121.568, 25.037],
            ],
            // 統一固定高度
            zCoordinate: 300, 
            color: "#000099",
            width: 8,
          });
        });

      </script>
  </body>
</html>

<script src="https://kw3dmap.localking.com.tw/openapi/loader/mapThree-1.3.9.loader.js" crossorigin="anonymous" referrerpolicy="origin"></script>

<script type="module">
  const map = await new mapThree(document.getElementById("map"), {
    accessKey: 'get_your_key',
    accessToken: 'get_your_token',
    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',
    center: [121.564, 25.0385],
    pitch: 60,
    zoom: 15,
  });

  map.on("style.load", () => {
    /* ════════════════════════════════════════════════════════════════════════
    * 新增 3D 線條（指定座標 Z 值）：
    - 可調整個別座標中的 Z 值，設定為不同高度。
    - 可調整 color/width，更換線條顏色/寬度。
    ════════════════════════════════════════════════════════════════════════ */
    map.three.add3dLine({
      coordinates: [
        [121.56, 25.033, 200], // 第三個參數為 Z 值
        [121.56, 25.036, 400],
        [121.566, 25.036, 400],
        [121.566, 25.033, 200],
      ],

      // 線條顏色
      color: "#990000",

      // 線條寬度
      width: 8,
    });


    /* ════════════════════════════════════════════════════════════════════════
    * 新增 3D 線條（統一固定高度）：
    - 可調整 zCoordinate，統一設定固定高度。
    ════════════════════════════════════════════════════════════════════════ */
    map.three.add3dLine({
      coordinates: [
        [121.562, 25.037],
        [121.562, 25.034],
        [121.568, 25.034],
        [121.568, 25.037],
      ],
      // 統一固定高度
      zCoordinate: 300, 
      color: "#000099",
      width: 8,
    });
  });

</script>

<style>
  body { margin: 0; padding: 0; }
  #map { width: 100vw; height: 100vh; }
</style>