KML / Leaflet Maps – Vladislav Kudriašev Portfoolio

Mis on KML?

KML (Keyhole Markup Language) on failiformaat geograafilise info esitamiseks. See on XML-põhine keel, millega saab kirjeldada kaarte, kohti, jooni, alasid, märke ja muud geograafilist infot. Algupäraselt töötas välja Google, kasutatakse näiteks Google Earthis ja muudes kaartide rakendustes. KML-faile kasutatakse, et jagada ja kuvada erinevaid geograafilisi objekte ja kihte.

Mis on Leaflet?

Leaflet on populaarne JavaScripti raamatukogu (library), mis võimaldab luua interaktiivseid veebikaarte. See on kerge, kiire ja lihtne kasutada. Leaflet võimaldab kuvada erinevaid kaardikihti, markereid, jooni, polügoone jne. Tavaliselt kasutatakse koos kaartide teenustega nagu OpenStreetMap või Google Maps. Leaflet on avatud lähtekoodiga ja toetab erinevaid laiendusi (plugin’e), näiteks KML-failide laadimist.

Mis on OpenLayers?

OpenLayers on võimas ja paindlik JavaScripti teek keerukate veebikaartide loomiseks. See sobib ideaalselt GIS-rakenduste, suure andmemahuga projektide, avatud lähtekoodiga algatuste ja offline-kaardilahenduste jaoks. Teek pakub detailset kontrolli kaardi üle, toetab paljusid andmeformaate ja võimaldab kohandatud stiile. Kuigi selle õppimiskõver on järsem kui lihtsamatel teekidel, on OpenLayers parim valik, kui on vaja ulatuslikku funktsionaalsust, avatud standardite tuge ja kohandatavust.

Ava Google My Maps

Looge mõned punktid ja marsruudid

Salvesta KML-ina

Kasutage selle kuvamiseks HTML-i

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>KML</title>
    <!-- Leaflet -->
    <!-- https://leafletjs.com/ -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
      crossorigin=""
    ></script>
    <!-- Leaflet Omnivore -->
    <!-- https://github.com/mapbox/leaflet-omnivore -->
    <script src="//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js"></script>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
      }
      h1 {
        text-align: center;
      }
      #map {
        height: 85vh;
        width: 90%;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <h1>KML marsruudid</h1>
    <div id="map"></div>
    <script>
      var map = L.map("map");
      // https://leafletjs.com/
      L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution:
          '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      }).addTo(map);
      omnivore
        .kml("KML.kml")
        .on("ready", function () {
          map.fitBounds(this.getBounds());
        })
        .addTo(map);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>KML</title>
    <!-- Leaflet -->
    <!-- https://leafletjs.com/ -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
      crossorigin=""
    ></script>
    <!-- Leaflet Omnivore -->
    <!-- https://github.com/mapbox/leaflet-omnivore -->
    <script src="//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js"></script>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
      }
      h1 {
        text-align: center;
      }
      #map {
        height: 85vh;
        width: 90%;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <h1>KML marsruudid</h1>
    <div id="map"></div>
    <script>
      var map = L.map("map");
      // https://leafletjs.com/
      L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution:
          '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      }).addTo(map);
      omnivore
        .kml("KML.kml")
        .on("ready", function () {
          map.fitBounds(this.getBounds());
        })
        .addTo(map);
    </script>
  </body>
</html>

https://vladislavkudriashev23.thkit.ee/KML