Nhảy tới nội dung

Animate as marker

Tạo hiệu ứng di chuyển (animate) marker

Mô tả​

Bạn có thể tạo hiệu ứng di chuyển (animate) marker trong @openmapvn/openmapvn-gl bằng cách cập nhật vị trí

Cách sử dụng​

Để tạo hiệu ứng di chuyển (animate) marker bạn cần phải thêm code snippet dưới đây trong tệp HTML của bạn. Code snippet này sẽ tạo hiệu ứng di chuyển (animate) marker trên bản đồ của bạn

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Openmap.vn Demo Map</title>
    <meta
      property="og:description"
      content="Initialize a map in an HTML element with OpenmapVN GL."
    />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/@openmapvn/openmapvn-gl@latest/dist/maplibre-gl.css"
    />
    <script src="https://unpkg.com/@openmapvn/openmapvn-gl@latest/dist/maplibre-gl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const map = new maplibregl.Map({
        container: "map",
        style:
          "https://maptiles.openmap.vn/styles/day-v1/style.json?apikey=YOUR_API_KEY",
        center: [105.85237, 21.03024],
        zoom: 15,
        maplibreLogo: true
      });

      const marker = new maplibregl.Marker();

      function animateMarker(timestamp) {
        const radius = 20;

        // Update the data to a new position based on the animation timestamp. The
        // divisor in the expression `timestamp / 1000` controls the animation speed.
        marker.setLngLat([
          Math.cos(timestamp / 1000) * radius,
          Math.sin(timestamp / 1000) * radius
        ]);

        // Ensure it's added to the map. This is safe to call if it's already added.
        marker.addTo(map);

        // Request the next frame of the animation.
        requestAnimationFrame(animateMarker);
      }

      // Start the animation.
      requestAnimationFrame(animateMarker);
    </script>
  </body>
</html>
thông tin

Để biết thêm thông tin của thư viện @openmapvn/openmapvn-gl bạn có thể tham khảo tại Openmap.vn GL JS documentation.