3D測量線

此範例示範如何建立 3D 測量線，包含以下功能：
建立水平或斜向測量線：使用 map.three.add3dMeasureLine 方法，建立不同方向的 3D 測量線
info
詳細使用說明請參考「add3dMeasureLine」。
<!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.564267045142, 25.0345249633834],
          zoom: 15.75,
          bearing: 30,
          pitch: 60,
        });

        map.on("style.load", () => {
          /* ════════════════════════════════════════════════════════════════════════
          * 建立水平或斜向測量線：
          - 可調整 start/end 的 Z 值，更換座標高度。
          - 可調整 lineColor ，更換線條顏色。
          - 可調整 labelColor/labelFontSize，更換標籤顏色/字型大小。
          ════════════════════════════════════════════════════════════════════════ */
          // 斜向紅色線條
          map.three.add3dMeasureLine({
            // 起點三維座標
            start: [121.5639240226798, 25.039737443822304, 200],

            // 終點三維座標
            end: [121.5639240226798, 25.030737443822304, 0],

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

            // 標籤顏色
            labelColor: "#BB0000",

            // 標籤字型大小
            labelFontSize: "20px",
          });
          
          // 斜向藍色線條
          map.three.add3dMeasureLine({
            start: [121.5605240226798, 25.033737443822304, 50],
            end: [121.5647240226798, 25.033737443822304, 300],
            lineColor: "#000099",
            labelColor: "#0000BB",
            labelFontSize: "20px",
          });
          
          // 水平綠色線條
          map.three.add3dMeasureLine({
            start: [121.5667240226798, 25.031737443822304, 50],
            end: [121.5647240226798, 25.033737443822304, 50],
            lineColor: "#009900",
            labelColor: "#00BB00",
            labelFontSize: "20px",
          });
        });

      </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.564267045142, 25.0345249633834],
    zoom: 15.75,
    bearing: 30,
    pitch: 60,
  });

  map.on("style.load", () => {
    /* ════════════════════════════════════════════════════════════════════════
    * 建立水平或斜向測量線：
    - 可調整 start/end 的 Z 值，更換座標高度。
    - 可調整 lineColor ，更換線條顏色。
    - 可調整 labelColor/labelFontSize，更換標籤顏色/字型大小。
    ════════════════════════════════════════════════════════════════════════ */
    // 斜向紅色線條
    map.three.add3dMeasureLine({
      // 起點三維座標
      start: [121.5639240226798, 25.039737443822304, 200],

      // 終點三維座標
      end: [121.5639240226798, 25.030737443822304, 0],

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

      // 標籤顏色
      labelColor: "#BB0000",

      // 標籤字型大小
      labelFontSize: "20px",
    });

    // 斜向藍色線條
    map.three.add3dMeasureLine({
      start: [121.5605240226798, 25.033737443822304, 50],
      end: [121.5647240226798, 25.033737443822304, 300],
      lineColor: "#000099",
      labelColor: "#0000BB",
      labelFontSize: "20px",
    });

    // 水平綠色線條
    map.three.add3dMeasureLine({
      start: [121.5667240226798, 25.031737443822304, 50],
      end: [121.5647240226798, 25.033737443822304, 50],
      lineColor: "#009900",
      labelColor: "#00BB00",
      labelFontSize: "20px",
    });
  });

</script>

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