KML / Leaflet Maps

KML (Keyhole Markup Language) on XML-põhine failivorming, mida kasutatakse geograafilise teabe salvestamiseks: punktid, jooned, polügoonid, marsruudid, kirjeldused jne.

Kasutamise näited:

  • Huvipunktide kuvamine kaardil (kodu, kool, töökoht).
  • Marsruutide loomine (nt koolist koju).
  • Alade visualiseerimine (parkide, piirkondade piirid).

KML-faili saab avada Google Mapsis, Google Earthis ja muudes kaarditeenustes, samuti kasutada veebilehtedel koos Leaflet, OpenLayers või muude JS-raamatukogudega kaartide jaoks

KML-faili loomine ja kodukoha näitamine:
Kirjelda, kuidas saab luua KML-faili ja lisada sinna oma kodukoht:

Google My Mapsi kaudu

1.Mine Google My Mapsi

2.Loo uus kaart.

3.Leia oma aadress ja aseta märk (punkt).

4.Et näidata marsruuti koolist koju:

Vali tööriist „Lisa marsruut” (Draw a line → Add driving/walking route).

Ühenda punktid: kool → kodu.

Kodukoha tähistamine kujundiga:

5.Salvesta kaart ja ekspordi KML-vormingus:

Vajuta „Kolm punkti” → „Ekspordi KML/KMZ-vormingus”.

Vali, mida ekspordida: kogu kaart või eraldi kihid.

Google My Mapsi kaudu

Ava Google Earth

Loon uus kaart

Lisan kodu ja kooli aadressid

Lisan tee

Lisan kujund

Ekspordi uuendatud projekt KML-vormingusse

Kaardi lisamine veebilehele

Loon uus projekt index.html failiga ja kml failiga

index.html (Leaflet)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8" />
    <title>KML-kaart Leafletis</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-omnivore@0.3.2/leaflet-omnivore.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <style>
        #map { height: 800px; width: 1200px; margin: 0 auto; %; }
    </style>
</head>
<body>
<nav class="menu">
    <ul>
        <li><a href="index.html">Leaflet</a></li>
        <li><a href="openlayers.html"ml>OpenLayers</a></li>
    </ul>
</nav>
<div id="map"></div>
<script>
    var map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);
    var kmlLayer = omnivore.kml('route.kml')
        .on('ready', function() {
            map.fitBounds(kmlLayer.getBounds());
        })
        .addTo(map);
</script>
</body>
</html>

openlayers.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8" />
    <title>KML-kaart OpenLayersis</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.2.1/ol.css">
    <script src="https://cdn.jsdelivr.net/npm/ol@v10.2.1/dist/ol.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="menu">
    <ul>
        <li><a href="index.html">Leaflet</a></li>
        <li><a href="openlayers.html"ml>OpenLayers</a></li>
    </ul>
</nav>
<div id="map"></div>
<script>
    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([-0.09, 51.505]),
            zoom: 13
        })
    });

    var vectorSource = new ol.source.Vector({
        url: 'route.kml',
        format: new ol.format.KML()
    });

    var vectorLayer = new ol.layer.Vector({
        source: vectorSource
    });
    map.addLayer(vectorLayer);

    vectorSource.once('featuresloadend', function() {
        var extent = vectorSource.getExtent();
        if (extent.every(isFinite)) {
            map.getView().fit(extent, { padding: [20, 20, 20, 20] });
        }
    });
</script>
</body>
</html>

Link veebilehele: https://antonivanov23.thkit.ee/leaflet-kml-veebileht/index.html

Kokkuvõte

KML on fail, mis näitab kaardil kohti ja jooni (näiteks kodukohta ja teekonda koolist koju). Selle saab teha Google My Mapsis või Google Earthis. Faili saab panna Leaflet või OpenLayers kaardile, et näidata oma asukohta veebilehel. Leaflet on lihtsam ja sobib tavakasutajale, OpenLayers on keerulisem, aga sobib professionaalsemateks kaartideks.

Scroll to Top