KML Leaflet map

Mis on KML?

KML on failivorming, mida kasutatakse geograafiliste andmete kuvamiseks Earthi brauseris, näiteks Google Earthis. KML kasutab siltidel põhinevat struktuuri pesastatud elementide ja atribuutidega ning põhineb XML-standardil. Kõik sildid on tõstutundlikud ja peavad ilmuma täpselt nii, nagu need on KML-i viites loetletud. Viide näitab, millised sildid on valikulised. Antud elemendi sees peavad sildid ilmuma viites näidatud järjekorras.

KML-faili loomine ja kodukoha näitamine:

Läheme saidile Google my maps, avame logime sisse ja klikkime nuppule loo uus kaart

Search panelˇis saame kirjutada kohat mida sa tahad näha enda kaardi peal

Kohti saame vaadata panelis mis asub vasakul
panelis me saame muuta nime klikides selle peale, muuta värve kohades, nime jne:

Selleks, et lisada teed klikkime olevale nuppule

loome seda sinna kirjutame kohti kust kuhu peab minema meie joon
Saame valida kas autoga, jalgrataga või jalgsi, teisi tranpordi tüüpe valida me ei saa või ma lihtsalt ei leidnud seda

Tulemus:

Selleks, et lisada meie kardile mingeid figuure võime vajutada nuppule lisada tee, sealt valida teha figuure ja lihtsalt lisada neid

Nüüd klikkime kolmele punkitle ja teeme kml export

Läheme teksti redaktorisse ja teeme seal index.html ja lisame sellese projekti meie kml faili

Meie ülem, siint on stylesheet mida me võime vajetada kui me tahame või üldse seda kustutada:

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KML Map</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <link rel="stylesheet" href="styles.css">
</head>

Nüüd me lisame esimesed skriptid ja lisame koordinate mida kus see kaard avab, lisame veel meie pilte: ma lisasin neid lingist aga teie võite selle vahetada kui te tahate või kui nad ei tööta ja seal ma annan kui suured nad peavad olema

HTML
<body>
    <div class="header">
        <h1>KML Map</h1>
    </div>

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

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

    <script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js"></script>

    <script>
        const map = L.map('map').setView([59.4370, 24.7536], 12);

        const osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors',
            maxZoom: 19
        }).addTo(map);

        let kmlLayer;
        let bounds;

        const customIcon = L.icon({
            iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
            shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
            shadowSize: [41, 41]
        });

Selles funktsioonis esmaseks me vahetame faili nime või nimetame ümber meie faili KML_map2.kml
See Funktsioon näitab kõikke mida me tegime üleval mitte rokem kui te tahate, et kaard näitaks rohkem kui te tahate minge leafletjs docs ja lisage mida tahes tahate

HTML
        function loadKML() {
            kmlLayer = omnivore.kml('KML_map2.kml')
                .on('ready', function (layer) {
                    layer.target.eachLayer(function (l) {
                        if (l.feature && l.feature.geometry) {
                            if (l.feature.geometry.type === 'Point') {
                                l.setIcon(customIcon);
                                if (l.feature.properties && l.feature.properties.name) {
                                    l.bindPopup(`<strong>${l.feature.properties.name}</strong>`);
                                }
                            }
                            else if (l.feature.geometry.type === 'LineString') {
                                l.setStyle({
                                    weight: 4,
                                    opacity: 0.8
                                });
                                if (l.feature.properties && l.feature.properties.name) {
                                    l.bindPopup(`<strong>Route:</strong><br>${l.feature.properties.name}`);
                                }
                            }
                            else if (l.feature.geometry.type === 'Polygon') {
                                if (l.feature.properties && l.feature.properties.name) {
                                    l.bindPopup(`<strong>${l.feature.properties.name}</strong>`);
                                }
                                if (l.feature.properties && l.feature.properties.description) {
                                    const name = l.feature.properties.name;
                                    const description = l.feature.properties.description;
                                    l.bindPopup(`<strong>${name}</strong><br>${description}`);
                                }
                            }
                        }
                    });


                })
                .on('error', function (err) {
                    console.error(err);
                })
                .addTo(map);
        }
        document.addEventListener('DOMContentLoaded', function () {
            loadKML();
        });

        L.control.scale({
            position: 'bottomleft',
            metric: true,
            imperial: false
        }).addTo(map);
    </script>
</body>

</html>


Nüüd kui te lugesite absoluutselt kõikke peab tulema mingi selline tulemus:

Kui te tahate seda näha saidi peal siis võite minna minu saidi peale

Leaflet on kerge ja lihtne raamatukogu interaktiivsete kaartide loomiseks. Sobib hästi väiksematele ja keskmise suurusega projektidele, on kiiresti õpitav ja hästi kasutatav mobiilseadmetes. Leafletil on põhifunktsioonid, kuid vajadusel saab seda laiendada pluginatega.

OpenLayers on võimsam ja funktsiooniderohkem tööriist, mis sobib keerukamate GIS-tööde jaoks ning toetab palju erinevaid andmeformaate ja kihte. See on keerulisem õppida, kuid pakub rohkem võimalusi professionaalseks kaarditöötluseks.

Kokkuvõte:
Kui tahad lihtsust ja kiirust, vali Leaflet. Kui vajad võimsust ja paindlikkust, vali OpenLayers.