Nhảy tới nội dung

GeoJSON polygon

Hiển thị vùng đa giác (polygon) trên bản đồ

Mô tả​

@openmapvn/openmapvn-gl cho phép bạn hiển thị một vùng đa giác (polygon) trên bản đồ

Cách sử dụng​

Để hiển thị vùng đa giác (polygon) 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 một vùng được đánh dấu 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
      });

      map.on("load", () => {
        map.addSource("polygon-source", {
          type: "geojson",
          data: {
            type: "Feature",
            geometry: {
              type: "Polygon",
              coordinates: [
                [
                  [105.852, 21.031],
                  [105.853, 21.032],
                  [105.854, 21.031],
                  [105.853, 21.03],
                  [105.852, 21.031]
                ]
              ]
            },
            properties: {}
          }
        });

        map.addLayer({
          id: "polygon-layer",
          type: "fill",
          source: "polygon-source",
          layout: {},
          paint: {
            "fill-color": "#088",
            "fill-opacity": 0.8
          }
        });
      });
    </script>
  </body>
</html>
thông tin

More information about the @openmapvn/openmapvn-gl library can be found in the Openmap.vn GL JS documentation.