Nhảy tới nội dung

Mapbox-gl-draw

Sử dụng mapbox-gl-draw để vẽ đa giác và Turf.js để tính diện tích của đa giác theo mét vuông.

Mô tả​

Bạn có thể sử dụng mapbox-gl-draw Turf.js với @openmapvn/openmapvn-gl để vẽ polygon và tính diện tích của polygon.

Cách sử dụng​

Để thực hiện điều này trên bản đồ 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ẽ cho thấy công cụ trên bản đồ dưới góc trái.

Draw a polygon using the draw tools.

<!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%;
      }
      .calculation-box {
        height: 75px;
        width: 150px;
        position: absolute;
        bottom: 40px;
        left: 10px;
        background-color: rgba(255, 255, 255, 0.9);
        padding: 15px;
        text-align: center;
      }
    </style>
    <script src="https://www.unpkg.com/@mapbox/[email protected]/dist/mapbox-gl-draw.js"></script>
    <link
      rel="stylesheet"
      href="https://www.unpkg.com/@mapbox/[email protected]/dist/mapbox-gl-draw.css"
    />
  </head>
  <body>
    <div id="map"></div>
    <div class="calculation-box">
      <p>Draw a polygon using the draw tools.</p>
      <div id="calculated-area"></div>
    </div>
    <script type="module">
      import * as turf from "https://esm.sh/@turf/[email protected]";

      MapboxDraw.constants.classes.CANVAS = "maplibregl-canvas";
      MapboxDraw.constants.classes.CONTROL_BASE = "maplibregl-ctrl";
      MapboxDraw.constants.classes.CONTROL_PREFIX = "maplibregl-ctrl-";
      MapboxDraw.constants.classes.CONTROL_GROUP = "maplibregl-ctrl-group";
      MapboxDraw.constants.classes.ATTRIBUTION = "maplibregl-ctrl-attrib";

      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 draw = new MapboxDraw({
        displayControlsDefault: false,
        controls: {
          polygon: true,
          trash: true
        }
      });
      map.addControl(draw);

      map.on("draw.create", updateArea);
      map.on("draw.delete", updateArea);
      map.on("draw.update", updateArea);

      function updateArea(e) {
        const data = draw.getAll();
        const answer = document.getElementById("calculated-area");
        if (data.features.length > 0) {
          const area = turf.area(data);
          // restrict to area to 2 decimal points
          const roundedArea = Math.round(area * 100) / 100;
          answer.innerHTML = `<p><strong>${roundedArea}</strong></p><p>square meters</p>`;
        } else {
          answer.innerHTML = "";
          if (e.type !== "draw.delete")
            alert("Use the draw tools to draw a polygon!");
        }
      }
    </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.