Veebi API funktsioonid:
Protokollid: kasutab andmeedastuseks HTTP/HTTPS.
Andmevormingud: enamasti edastatakse andmeid JSON- või XML-vormingus
REST ja SOAP: veebi API-des kasutatavad arhitektuuristiilid
KML
(Keyhole Markup Language) on XML-põhine failivorming, mida kasutatakse geograafilise teabe salvestamiseks ja edastamiseks. KML-failid on tavaliselt seotud maakaardirakendustega, nagu Google Earth ja Google Maps. Need võimaldavad kasutajatel luua ja jagada kaardipunkte, teid, polügoone ja muid geograafilisi andmeid.
KML-i mõisted
- Punkt: Määrab kindla geograafilise koha kaardil, näiteks koduaadress.
- Polügoon: Aitab kujutada alasid, näiteks hooneid või maapiirkondi.
- Liin: Võimaldab joonistada teid või muid jooni kaardil.
- Stiil: KML-is saab määrata, kuidas punktid, jooned ja polügoonid kaardil välja näevad (nt värvid, paksus jne).
Leaflet´i ja Openlayers omadused
| Omadus | Leaflet | OpenLayers |
|---|---|---|
| Kaal | Kerge (~40 KB) | Raskem (~500 KB) |
| Lihtsus | Väga lihtne | Keerulisem, palju API-d |
| Andmevormingud | Põhilised + pluginad | Kõik, professionaalne |
| Suured andmed | Mitte väga mugav | Suurepärane |
| Kogukond/pluginad | Väga palju | Vähem |
| Millal kasutada | Lihtsad kaardid veebis | GIS/analüütika |
Kui vajad lihtsalt KML-i kuvamist, markereid, marsruute ja ilusat veebilehte — vali Leaflet. Kui aga on tarvis professionaalset GIS-i koos projektioonide, analüüsi ja suurte andmehulkadega — vali OpenLayers.
KML-faili loomine ja kodukoha näitamine
Esimeseks on vaja avada link Google My Maps
Teiseks valite “Luua uus kaart”
Loome uus tee (must nool)
Kirjutate otsingus adressid
Ja siis meie tulemus on
Marsruudi loomiseks valime, millega tahame kohale jõuda, ja kohandame marsruuti endale sobivaks.
Mõlema asukoha märkimiseks klõpsame kolme rea kujul oleval nupul, valime oma rea ja tõstame esile. Samuti kirjutad asukohale alla ja tõstad selle oma värviga esile.
Järgmisena ekspordime faili kml-resolutsioonis.
index.html
<!DOCTYPE html>
<html lang="et">
<head>
<meta charset="utf-8"/>
<title>KML kaardil</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
<link rel="stylesheet" href="style.css"/>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-omnivore/leaflet-omnivore.min.js"></script>
</head>
<body>
<header>
<h1>KML kaart</h1>
</header>
<div id="map"></div>
<script>
const homeCoordinates = [59.441656, 24.692083];
const map = L.map('map').setView(homeCoordinates, 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker(homeCoordinates)
.addTo(map)
.bindPopup("Minu kodu")
.openPopup();
omnivore.kml('teeOma.kml')
.on('ready', function() {
map.fitBounds(this.getBounds());
})
.on('error', function(e) {
console.error("viga KML:", e);
})
.addTo(map);
</script>
</body>
</html>
omatee.kml näide
<Style id="line-1267FF-5000-nodesc-normal">
<LineStyle>
<color>ffff6712</color>
<width>5</width>
</LineStyle>
<BalloonStyle>
<text><![CDATA[<h3>$[name]</h3>]]></text>
</BalloonStyle>
</Style>
<Style id="line-1267FF-5000-nodesc-highlight">
<LineStyle>
<color>ffff6712</color>
<width>7.5</width>
</LineStyle>
<BalloonStyle>
<text><![CDATA[<h3>$[name]</h3>]]></text>
</BalloonStyle>
</Style>
<StyleMap id="line-1267FF-5000-nodesc">
<Pair>
<key>normal</key>
<styleUrl>#line-1267FF-5000-nodesc-normal</styleUrl>
</Pair>
<Pair>
<key>highlight</key>
<styleUrl>#line-1267FF-5000-nodesc-highlight</styleUrl>
</Pair>
</StyleMap>style.css
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 90%;
}
header {
text-align: center;
padding: 10px 0;
background-color: #f2f2f2;
font-family: Arial, sans-serif;
font-size: 24px;
font-weight: bold;
}
Link
