Leaflet gyorstalpaló ¶

A Leaflet egyJavaScript könyvtár böngésző alapú, mobil barát interaktív térképekhez. Könnyűsúlyú, mégis minden olyan funkcióval rendelkezik, amire a legtöbb fejlesztőnek szüksége van online térképekhez. A Leaflet-et az egyszerűséget, a teljesítményt és a használhatóságot szem előtt tartva készítették.

Tartalom

Leaflet gyorstalpaló

Futtatás ¶

A gyorstalpaló futtatása előtt el kell indítania a MapProxy-t.Az OSGeoLive-on ez a Geospatial\Web Services\MapProxy\Start MapProxy alatt található. Ez szolgáltatja a háttér csempéket, amit ebben a demóban használunk.

A példa megtekintése

Javaslat

Ha nem az OSGeoLive-on olvassa ezt a gyorstalpalót, akkor jobban teszi, ha az eredeti demót olvassa el itt: https://leafletjs.com/examples/quick-start/, mivel ez a demo az OSGeoLive-on a tilestache-t használja.

Az oldal előkészítése ¶

Mielőtt bármilyen kódot írna a térképhez a következő előkészítő lépéseket kell végrehajtani az oldalán:

Vegye be a Leaflet CSS fájlt a dokumentumának fejléc részébe

<link rel="stylesheet" href="/leaflet/leaflet.css" />

Vegye be a Leaflet JavaScript fájlt:

<script src="/leaflet/leaflet.js"></script>

helyezzen el egy div elemet egy egyedi id-vel, ahová a térképét akarja tenni:

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

Győződjön meg arról, hogy a térképet tartalmazó elemnek egy meghatározott magassága van, például a CSS-ben beállítva:

#map { height: 180px; }

Most készen áll a térkép inicializálására és hogy csináljon vele valamit.

A térkép beállítása ¶

Készítsünk Firenze (Olaszország) térképet a 2022-es FOSS4G konferencia megjelölésével. Először inicializáljuk a térképet, és beállítjuk a nézetet a választott földrajzi koordinátákra és egy nagyítási szintre:

var map = L.map('map').setView([43.77913, 11.24938], 15);

Alapértelmezésben minden egér és érintés interakció engedélyezett a térképen (mivel a térkép példány létrehozásánál nem adtunk meg paramétereket), és van vezérlő elem a nagyításhoz és a szerzőkhöz.

Vegye észre, hogy a setView hívás visszaadja a térkép objektumot - a legtöbb Leaflet metódus így működik, amikor nem adnak vissza egy explicit értéket, ez lehetővé teszi a jQuery-hez hasonló kényelmes metódus láncolást.

Ezután egy csemperéteget adunk a térképünkhöz. Ebben az esetben a MapProxy által biztosított csempeképeket fogjuk használni a live dvd-ről. Vegye figyelembe, hogy a szebb háttértérképek, például az openstreetmap használata sokkal jobb felhasználói élményt ad.

Egy csempe réteg létrehozása általában magában foglalja az URL sablon beállítását a csempeképekhez, a készítőkre vonatkozó szöveget és a maximális nagyítási szintet:

L.tileLayer('http://localhost:8011/wmts/mapnik_tile/GLOBAL_WEBMERCATOR/{z}/{x}/{y}.png',{}).addTo(map);

Ha online hozzáférése van, akkor egy szebb csempetérképet használhat háttérként:

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

Győződjön meg róla, hogy minden a kódot a div és a leaflet.js beillesztés után hívjanak meg. Ennyi az egész! Most van egy működő Leaflet térképe.

Érdemes megjegyezni, hogy Leaflet szolgáltató-független, ami azt jelenti, hogy nem kényszeríti ki egy adott szolgáltatók a csempékhez, és még nem tartalmaz egy szolgáltatófüggő kódsort sem, így szabadon használhat más szolgáltatót, ha szüksége van rá.

Szimbólumok, körök és zárt idomok ¶

A csempe rétegek mellett más dolgokat is könnyen hozzáadhat a térképéhez, beleértve a szimbólumokat, törtvonalakat, zárt idomokat és felugró ablakokat. Adjunk hozzá egy szimbólumot:

var marker = L.marker([43.77913, 11.24938]).addTo(map);

Egy kör hozzáadás ugyanígy megy (eltekintve a második argumentumként méterben megadott sugártól), de lehetővé teszi, hogy a kinézetét beállítsa az objektum létrehozásánál utolsóként átadott beállításokkal:

var circle = L.circle([43.777, 11.255], 250, {
   color: 'red',
   fillColor: '#f03',
   fillOpacity: 0.5
}).addTo(map);

Egy zárt idom hozzáadása ilyen könnyű:

var polygon = L.polygon([
    [43.775, 11.247],
    [43.784, 11.240],
    [43.778, 11.238]
]).addTo(map);

Munka a felugró ablakokkal ¶

A felugró ablakokat általában akkor használják, ha néhány információt szeretne csatolni egy adott objektumhoz a térképen. A Leaflet-nek van egy nagyon praktikus megoldása erre:

var popup = L.popup()
   .setLatLng([43.77913, 11.24938])
   .setContent("FOSS4G is here this year!")
   .openOn(map);

Itt az addTo helyett az openOn-t használjuk, mert ez kezeli a korábban megnyitott felugró ablak automatikus lezárását amikor egy újat nyitunk meg, ami jó a használhatósághoz.

Események kezelése ¶

Minden alkalommal, amikor valami történik a Leaflet-ben, pl. a felhasználó egy szimbólumra kattintott vagy a térkép nagyítása megváltozott, a megfelelő objektumot küld egy esemény, amelynek kezeléséhez egy függvényt rendelhet.. Ez lehetővé teszi, hogy a felhasználó műveleteire reagáljon:

function onMapClick(e) {
   alert("You clicked the map at " + e.latlng);
}

map.on('click', onMapClick);

Minden objektumnak van saját esemény készlete - lásd a dokumentációt a részletekért. Az esemény figyelő függvény első argumentuma egy esemény objektum - ez hasznos információkat tartalmaz a bekövetkezett eseményről. Például a térkép kattintás objektumnak (e a fentipéldában) van latlng tulajdonsága, mely a hely ahová kattintottak.

Tökéletesítsük a példánkat az alert helyett használjunk felugró ablakot:

var popup = L.popup();

function onMapClick(e) {
   popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
         .openOn(map);
}

map.on('click', onMapClick);

Próbáljon a térképre kattintani és egy felugró ablakban látja a koordinátákat. A teljes példa megtekintése

Mi a következő?¶

Most megtanulta a Leaflet alapjait és azonnal elkezdheti a térkép alkalmazás készítését! Ne felejtsen el egy pillantást vetni a részletes dokumentációra vagy további példákra.