KML / Leaflet Maps - Jelizaveta Ostapjuk portfoolio

1. Mis on KML?

KML-fail (Keyhole Markup Language) on XML-põhine formaat geograafiliste andmete kuvamiseks sellistes maapinna brauserites nagu Google Earth, ArcGIS Earth jt. See salvestab geograafilist teavet, nagu punktid, jooned ja hulknurgad, koos nendega seotud teksti, piltide ja linkidega.

1.1 Kuidas KML-faile kasutatakse

Google Earthis: Google Earthis saate luua, üles laadida ja avada KML-faile, et vaadata geograafilisi andmeid.
Muudes geograafilistes rakendustes: tarkvara nagu ArcGIS ja muud geograafilise infosüsteemi (GIS) tööriistad toetavad samuti KML-faile.
Offline-kasutamiseks: kuigi KML-failid ei ole ideaalsed suurte andmekogumite jaoks, pakuvad need lihtsat viisi andmete jagamiseks ja visualiseerimiseks ning neid saab redigeerida või eksportida professionaalsete GIS-tellimustega offline-juurdepääsuks.

1.3 Omadused

XML-põhine: KML on struktureeritud laiendatava märgistuskeele (XML) abil, mis teeb sellest tekstipõhise formaadi.
Standardiseeritud: KML on OGC poolt vastu võetud rahvusvaheline standard, mis tagab erinevate süsteemide vahelise koostalitlusvõime.
Mitmekülgne: üks KML-fail võib sisaldada erinevaid geomeetriatüüpe, sealhulgas nii vektori- kui ka rasterandmeid.

2. KML-faili loomine ja kodukoha näitamine:

Google My Maps abil

Ava Google My Maps
Logi sisse oma Google’i kontoga.
Vali “Loo uus kaart”.

4. Otsi otsinguribalt oma kodukoht (aadress või koordinaadid).

5.Kui õige koht on leitud, klõpsa “Lisa marker” (nupp nõelaga) või “Lisa kaardile”.

6. Kui kaart valmis, vali menüü (kolm täppi → “Ekspordi KML/KMZ”).

7. Märgi, et tahad eksportida kogu kaardi või ainult konkreetse kihi. Fail salvestatakse .kml või .kmz formaadis, mida saab avada Google Earthis.

Google Earth (veebiversioon) abil

Ava Google Earth Web
Logi sisse oma Google’i kontoga.
Vasakult menüüst vali “+Uus” → “Uus kaart”.

4.Otsi otsinguribalt oma kodukoht (aadress või koordinaadid).

5. Klõpsake “Salvesta projektis” ja “Valmis”

6. Kui projekt valmis, vali “Ekspordi kui KML”.

3. Tee koolist koju:

Google Earthi kasutamine:

1.Lisa koolile teine marker

2. Vali see nupp

3. Tulemus

4. Kodukoha tähistamine kujundiga:

1.Vali disaini ikoon

5.Kaardi lisamine veebilehele Leaflet Maps abil

Kood KML-failist kaardi kuvamiseks lisatud funktsioonidega https://leafletjs.com/examples/quick-start

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Leaflet Map with KML and Custom Markers</title>

  <!-- Leaflet CSS -->
  <link 
    rel="stylesheet"
    href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
    crossorigin=""
  />

  <style>
    #map {
      height: 600px;
      width: 100%;
    }
    body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>

  <div id="map"></div>

  <!-- Leaflet JS -->
  <script 
    src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
    crossorigin="">
  </script>

  <!-- https://bojithapiyathilake.medium.com/uploading-a-kml-file-and-displaying-the-coordinates-on-a-leaflet-map-c0d23b495941 -->
  <!-- leaflet-omnivore (KML-i toetamiseks) -->
  <script src="https://unpkg.com/leaflet-omnivore@0.3.4/leaflet-omnivore.min.js"></script>

  <script>
    // Kaardi algseadistamine
    var map = L.map('map').setView([51.505, -0.09], 13);

    // Aluskiht (OpenStreetMap)
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    // Laadi KML-fail  
    var kmlLayer = omnivore.kml('KML_fail.kml')
      .on('ready', function() {
        // Kohanda kaart KML-kihi järgi
        map.fitBounds(kmlLayer.getBounds());
      })
      .addTo(map);

    // Marker
    var marker = L.marker([59.438355, 24.824283]).addTo(map);
    marker.bindPopup("<b>Minu koju</b>").openPopup();

    // Ring
    var circle = L.circle([59.411324, 24.704448], {
      color: 'red',
      fillColor: '#f03',
      fillOpacity: 0.5,
      radius: 200
    }).addTo(map);
    circle.bindPopup("Kool");

    // Kaardi klõpsu interaktsioon
    var clickPopup = L.popup();

    function onMapClick(e) {
      clickPopup
        .setLatLng(e.latlng)
        .setContent("Sa klõpsasid kaardil  " + e.latlng.toString())
        .openOn(map);
    }

    map.on('click', onMapClick);
  </script>
</body>
</html>

Kasuta OpenLayers kaarti ja näita kaardil sama KML faili sisu.

OpenLayersi kood

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>OpenLayers KML Example</title>

  <!-- OpenLayers CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css">

  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
    }
    #map {
      height: 100%;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>


  <!-- https://openlayers.org/en/latest/examples/kml.html -->
   <!-- https://chatgpt.com/ -->
  <!-- OpenLayers JS -->
  <script src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>

  <script>
    // Aluskaardi kiht (OpenStreetMap)
    const osmLayer = new ol.layer.Tile({
      source: new ol.source.OSM()
    });

    // KML kiht
    const kmlLayer = new ol.layer.Vector({
      source: new ol.source.Vector({
        url: 'KML_fail.kml',
        format: new ol.format.KML()
      })
    });

    // Loo kaart
    const map = new ol.Map({
      target: 'map',
      layers: [osmLayer, kmlLayer],
      view: new ol.View({
        center: ol.proj.fromLonLat([24.7536, 59.4370]),
        zoom: 10
      })
    });


    // https://www.youtube.com/watch?v=eusybY8qAac
    // https://stackoverflow.com/questions/33983525/trouble-to-set-coordinates-in-openlayers-when-using-long-and-lat-from-googlemaps
    const marker = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [
                new ol.Feature({
                    geometry: new ol.geom.Point(
                        ol.proj.fromLonLat([24.824283, 59.438355])
                    )
                })
            ],
        }),
        style: new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [0.5, 1],
                src: 'icon.png',
                scale: 0.1
            })
        })
    })
    const marker2 = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [
                new ol.Feature({
                    geometry: new ol.geom.Point(
                        ol.proj.fromLonLat([24.70404, 59.41154])
                    )
                })
            ],
        }),
        style: new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [0.5, 1],
                src: 'icon.png',
                scale: 0.1
            })
        })
    })

    map.addLayer(marker)
    map.addLayer(marker2)
  </script>
</body>
</html>

Link zone.ee-le: https://jelizavetaostapjuk23.thkit.ee/KMLmap/index.html

Kokkuvõte

Milline kaarditeek sobib kõige paremini erinevates olukordades?

Leaflet

Parim: lihtsate ja kergesti integreeritavate veebikaartide jaoks

Eelised:

Väga kerge ja lihtne õppida.
Hea töökindlus ja dokumentatsioon.
Sobib hästi, kui vajad vaid:
1.Markerid, jooned, polügoonid
2.Kihid (tileLayer, WMS, KML, GeoJSON)
3.Lihtsaid interaktsioone (zoom, klikk, popup)
Suur pluginavalik (nt leaflet-omnivore, leaflet-draw, leaflet.markercluster).

Puudused:

Ei toeta hästi 3D või väga keerukaid vektorandmeid.
Ei paku loomulikult sujuvat WebGL-renderdust.
Väiksem jõudlus väga suurte andmemahtude korral.

Kasuta kui:

Teed lihtsat interaktiivset kaarti (nt ettevõtte asukohad, matkateed, väike GIS).
Soovid kiiresti tulemusi ilma keerukate konfiguratsioonideta.

OpenLayers

Parim: professionaalsete GIS-rakenduste ja keerukate ruumiandmete kuvamiseks

Eelised:

Väga võimas ja paindlik.
Toetab:
1.KML, GeoJSON, WMS, WMTS, WFS, GML jne.
2.Koordinaatsüsteemide teisendamist (EPSG:4326 ↔ 3857).
3.Stiilide ja interaktsioonide täielikku kohandamist.
Hea jõudlus suurte andmehulkadega.

Puudused:

Õppimiskõver on järsem.
API on mahukas ja mõnikord detailirohke.
Vähem kogukonnapõhiseid pluginaid kui Leafletil.

Kasuta kui:

Teed GIS-laadset süsteemi (nt ruumiandmete kuvamine, analüüs, kihihaldus).
Vajad tuge WMS/WFS teenustele (nt Maa-ameti kihid).
Tahad täielikku kontrolli kaardi stiilide ja andmete üle.