Térképes megjelenítések: OpenLayer API használata

OpenLayer api használata:

A szabály itt is azonos a header részben be kell tölteni az js és css könyvtárakat. A web lap betöltési eseményéhez kötve indítani kell a térkép réteg aktiválását. Induló pozíciót és a nagyítás mértékét meg kell adni. A képernyő pont pozicióját attributumait és esemény kezelőjét be kell állítani.

És már működik is.

Map / Térkép |-> ol.Map

A térkép az OpenLayers egy alapkomponense. Egy térkép megjelenítéséhez egy view, egy vagy több réteg és egy cél konténer szükséges.

View / nézet | -> ol.View

A view határozza meg, hogyan jelenítjük meg a térképet. Arra használjuk, hogy beállítsuk a felbontást, a középpont helyét, stb.

Layers / rétegek |-> ol.layer

Rétegek egymás alá/fölé helyezve adhatók a térképhez. A réteg vagy raszter réteg (képek | ol.layer.Tile ) vagy vektor réteg (pontok/vonalak/felületek | ol.layer.Vector ) lehet.

Source / forrás |-> ol.source

Minden rétegnek van egy forrása, mely tudja hogyan kell a réteg tartalmát betölteni (pl.: ol.source.OSM).
A Vektor rétegek esetén a forrás a *format osztályt használva olvassa be az adatokat (például GeoJSON vagy KML) és mint a térképi elemek (features) halmazát szolgáltatja a réteget.

Features / térképelemek |-> ol.Feature(point)

A térképi elemek a világban megjelenő dolgokat reprezentálnak és különböző geometria*ként (mint pont, vonal vagy felület) jeleníthetjük meg őket, egy adott *stílus használatával, mely a kinézetüket határozza meg (vonalvastagság, kitöltési szín, stb.).

pl:

//--- pont objektumlétrehozása
var point = new ol.geom.Point(
ol.proj.transform([3,50], 'EPSG:4326', 'EPSG:3857') //--- beállítás
);

);
//--- Features objektum létrehozása
var pointFeature = new ol.Feature(point);

//--- source objektum létrehozása
var vectorSource = new ol.source.Vector({
projection: 'EPSG:4326'
});

//--- Vektor forrás tulajdonság összerendelés
vectorSource.addFeatures([pointFeature]);

//--- Vector layer objektum létrehozása

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

// vektor réteg térkép objektumhoz hozzáadása
map.addLayer(vectorLayer);

Egy OpenLayers térképet egy HTML DOM elemhez kapcsolnunk, ezért létrehoztunk egy <div> elemet, a map azonosítóval (id) |-> <div id="map" class="map" tabindex="0">.

A térképeket az olMap osztály reprezentálja. A DOM elemet, melyben a térképet megjelentjük a target tulajdonság beállításával adjuk meg |-> target: 'map',

A vektor rétegeket az ol.layer.Vector osztály reprezentálja és a vektor formátum olvasására alkalmas forrást kell használnia mint például ol.source.GeoJSON, ol.source.KML vagy ol.source.TopoJSON.

pl:

var vectorLayer = new ol.layer.Vector({ --- vektor objektum létrehozása
source: new ol.source.GeoJSON({ --- source objektum létrehozása és beállítása
url: 'kl_minta.json'
})
});

map.addLayer(vectorLayer); //--- Térképhez a vektor réteg hozzá kapcsolása

A vektor réteg térképi elemeinek stílusát is beállíthatjuk. |-> ol.style.Style

A stílust a megjelenített rajzi objektum tulajdonságai határozza meg, úgy mint : kitöltés, a vonalvastagság, szöveg és kép, ezek mind opcionálisak.

A stílust alkalmazhatjuk akár a teljes rétegre, így ez meghatározza az összes tartalmazott térképi elem stílusát, vagy egyes térképi elemekre.

pl:

var limitsLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'kl_minta.json',
format: new ol.format.TopoJSON(),
projection: 'EPSG:3857'
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(135, 75, 42, 0.3)'
})
})
});

Komplex minta:

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Openlayer Map</title>

<script src="./ol.js"></script>
<link rel="stylesheet" href="./ol.css" />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id="map" class="map" tabindex="0"></div>
<script>
//var budapest = ol.proj.transform([47.245943, 19.438089], 'EPSG:4326', 'EPSG:3857');
var budapest = new ol.geom.Point([19.438089, 47.245943]).transform('EPSG:4326', 'EPSG:3857').getCoordinates()
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: budapest,
zoom: 13
})
});

</script>
</body>
</html>

Link:

https://mierdekel.hu/ol/

Térképes megjelenítések

2020. november 5., csütörtök

OpenLayer API használata