開啟3D圖層

範例展示

原始碼

copy
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>開啟3D圖層 - Map8 Platform Documentation</title>
    <link rel="stylesheet" href="https://api.map8.zone/css/gomp.css?key=[YOUR_KEY_HERE]" />
    <style>
        #map{
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script type="text/javascript" src="https://api.map8.zone/maps/js/gomp.js?key=[YOUR_KEY_HERE]"></script>
    <script type="text/javascript">
        gomp.accessToken = '[YOUR_KEY_HERE]';
        var map = new gomp.Map({
            container: 'map', // 地圖容器 ID
            style: 'https://api.map8.zone/styles/go-life-maps-tw-style-std/style.json', // 地圖樣式檔案位置
            maxBounds: [[105, 15], [138.45858, 33.4]], // 台灣地圖區域
            center: [121.54885, 25.03625], // 初始中心座標，格式為 [lng, lat]
            zoom: 16, // 初始 ZOOM LEVEL; [0-20, 0 為最小 (遠), 20 ;最大 (近)]
            minZoom: 6, // 限制地圖可縮放之最小等級, 可省略, [0-19.99]
            maxZoom: 19.99, // 限制地圖可縮放之最大等級, 可省略 [0-19.99]
            pitch: 50, // 攝影機仰角, 可省略, [0-60]
            bearing: 0, // 地圖角度, 可省略, [-180 ~ 180; 0 為正北朝上, 180 為正南朝上]
            speedLoad: false,
            attributionControl: false
        }).addControl(new gomp.AttributionControl({
            compact: false
        }));
            
    map.on('load', function () {
      handleOnegeoTag()
    });
    map.on('zoom', function () {
      handleOnegeoTag()
    });

    function handleOnegeoTag() {
      let mapZoom = map.getZoom()
      if (mapZoom >= 15) {
        const container = document.querySelector('.gomp-ctrl-attrib-inner');
        if (container && !container.querySelector('a[href="https://onegeo.co/"]')) {
          container.insertAdjacentHTML(
            'beforeend',
            ` | © ONEGEO !`
          );
        }

        map.setLayoutProperty("3d-buildings-footprint", "visibility", "visible");
      } else {
        const container = document.querySelector('.gomp-ctrl-attrib-inner');
        const onegeoLink = container?.querySelector('a[href="https://onegeo.co/"]');

        if (onegeoLink) {
          // 移除前面的 |
          const prevTextNode = onegeoLink.previousSibling;
          if (prevTextNode && prevTextNode.nodeType === 3 && prevTextNode.textContent.includes('|')) {
            prevTextNode.remove(); // 移除 " | "
          }
          onegeoLink.remove();
        }

        map.setLayoutProperty("3d-buildings-footprint", "visibility", "none");
      }

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