KML on XML- põhine märgistuskeel kolmemõõtmeliste georuumiliste andmete esitamiseks Google Earthis
KML-faili loomine ja elukoha kuvamine:
Kirjeldage, kuidas saab luua KML-faili ja lisada sellesse oma elukoha:

Marsruut koolist koju

Kodukoha tähistamine kujundiga

Laadisin alla KML-faili ja lisasin selle 1 kausta koos index.html-failiga
Leafleti ühendamine
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /><br> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script><br> <script src="https://unpkg.com/leaflet-omnivore/leaflet-omnivore.min.js"></script>Leaflet loob interaktiivse kaardi <div>-elemendis määratud keskpunkti ja mõõtkavaga, lisab OpenStreetMapi baaskihi ja KML-kihi Omnivore’i raamatukogu abil. Pärast KML-i laadimist skaalatakse kaart automaatselt, et kogu sisu oleks nähtav.
var map = L.map('leaflet-map').setView([59.4370, 24.7536], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var kmlLayer = omnivore.kml('opiput.kml')
.on('ready', function() { map.fitBounds(kmlLayer.getBounds()); })
.addTo(map);
OpenLayersi ühendamine
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol/ol.css" /><br> <script src="https://cdn.jsdelivr.net/npm/ol/dist/ol.js"></script>OpenLayers loob kaardi eraldi <div>-elemendis, lisab OSM-i baaskihi ja vektorkihi KML-failiga. Kaardi keskpunkt ja mõõtkava määratakse ol.View kaudu ning koordinaadid teisendatakse OpenLayersi projektsiooniks korrektseks kuvamiseks.
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'opiput.kml',
format: new ol.format.KML()
})
});
var olMap = new ol.Map({
target: 'ol-map',
layers: [
new ol.layer.Tile({ source: new ol.source.OSM() }),
vectorLayer
],
view: new ol.View({
center: ol.proj.fromLonLat([24.7536, 59.4370]),
zoom: 13
})
Kokkuvõte:
Leaflet sobib hästi lihtsate veebikaartide jaoks, millel on interaktiivsed punktid ja marsruudid, ning OpenLayers keerukate GIS-andmete ja professionaalse visualiseerimise jaoks.