GIS Wiki:Rólunk - Laptörténet

Ilyesenikoe: Eltávolította a lap teljes tartalmát

2016-05-10T09:12:32Z

Eltávolította a lap teljes tartalmát

Változtatások megtekintése

Ilyesenikoe: /* Térkép */

2016-05-10T09:08:36Z

‎Térkép

Ilyesenikoe: /* Define lehetőségei */

2016-05-10T09:08:11Z

‎Define lehetőségei

Ilyesenikoe, 2016. május 10., 09:06-n

2016-05-10T09:06:53Z

Ilyesenikoe, 2016. május 10., 08:58-n

2016-05-10T08:58:37Z

Ilyesenikoe, 2016. május 10., 08:56-n

2016-05-10T08:56:43Z

Ilyesenikoe, 2016. május 10., 08:43-n

2016-05-10T08:43:59Z

Ilyesenikoe, 2016. május 10., 08:34-n

2016-05-10T08:34:51Z

Ilyesenikoe, 2016. május 10., 08:30-n

2016-05-10T08:30:24Z

Ilyesenikoe, 2016. május 10., 08:26-n

2016-05-10T08:26:48Z

← Régebbi változat		A lap 2016. május 10., 09:08-kori változata
39. sor:		39. sor:

	Az OpenLayers3 fő komponense a térkép (ol.Map). Egy target típusú elem zárja körül (pl. egy div elem). A térkép minden tulajdonsága beállítható már létrehozása idején, de beállító metódusok is rendelkezésre állnak. (pl. setTarget()).		Az OpenLayers3 fő komponense a térkép (ol.Map). Egy target típusú elem zárja körül (pl. egy div elem). A térkép minden tulajdonsága beállítható már létrehozása idején, de beállító metódusok is rendelkezésre állnak. (pl. setTarget()).
−

	<code>		<code>

@@ 252. sor: / 252. sor: @@
 <code>
-     "ol.ENABLE_DOM=false",
+      "ol.ENABLE_DOM=false",
        "ol.ENABLE_WEBGL=false",
        "ol.ENABLE_PROJ4JS=false",

@@ 1. sor: / 1. sor: @@
-Az OpenLayers egy olyan JavaScipt programcsomag, mely lehetővé teszi geoadatok böngészőben történő megjelenítését. Maga a programcsomag is JavaScriptben íródott, és nyílt forráskódú, BSD2 licensszel rendelkezik.
+Az OpenLayers egy olyan JavaScipt programcsomag, mely lehetővé teszi geo adatok böngészőben történő megjelenítését. Maga a programcsomag is JavaScriptben íródott, és nyílt forráskódú, BSD2 engedéllyel rendelkezik.
 == Bevezetés ==
@@ 47. sor: / 47. sor: @@
 </script>
 </code>
 === Nézet ===
@@ 54. sor: / 53. sor: @@
 <code>
 map.setView(new ol.View({
      center: [0, 0],
      zoom: 2
    }));
 </code>
 A nézet elem rendelkezik a vetületről (projection) is. Meghatározza a középpont koordináta rendszerét, és a lépték mértékét. Ha nincsen külön megadva, akkor az alapból beállított vetület a  Spherical Mercator (EPSG:3857), és a lépték mértékegysége a méter.
 A nagyítás mértéke szorosan összefügg a felbontás nagyságával. Három tulajdonság rögzíti a fontos paramétereket. A maxZoom a rendelkezésre álló nagyítási szintek számát jelöli, alapbeállításban 28. A maxResolution a legnagyobb felbontást jelenti, a 0. nagyítási szint esetén ennyi egység van pixelenként. A további nagyítási szintek úgy állnak elő, hogy az előző szint maxResolution értéke a zoomFactor értékkel lesz osztva. (Alapbeállítás a zoomFactor esetében a 2.)
 === Forrás ===
@@ 105. sor: / 101. sor: @@
 </script>
 </code>
 == Testre-szabott build-ek készítése ==
@@ 162. sor: / 157. sor: @@
+}
 </code>
 Például egy ilyen tartalommal rendelkező állományt ol-custom.json névvel le lehet menteni a node_modulse/openlayers/build mappába.
 ====Exports lehetőségei====
@@ 265. sor: / 258. sor: @@
        "ol.ENABLE_VECTOR=false",
 </code>
 ====Externs lehetőségei====
@@ 280. sor: / 272. sor: @@
 A kód karbantartása érdekében, ha a Node csomag által telepítjük az OpenLayer-st, akkor az npm használható a legújabb verzióra frissítéshez. Ha a Github repo volt klónozva, nem biztos, hogy elég a pull a legújabb verzióra, mert néhány  használt csomag, mint például a fordító, lehet, hogy kíván upgrade-et is. Ezt érdemes npm install paranccsal kiváltani, nem pedig npm update-tel.
 == Saját kód és OL3 kód együttes fordítása ==

@@ 2. sor: / 2. sor: @@
 Az OpenLayers egy olyan JavaScipt programcsomag, mely lehetővé teszi geoadatok böngészőben történő megjelenítését. Maga a programcsomag is JavaScriptben íródott, és nyílt forráskódú, BSD2 licensszel rendelkezik.
-== Főbb funkcionalitások ==
+== Bevezetés ==
 Az OpenLayers 3 (OL3) alapvetően az OpenLayers webes térkép megjelenítő, kezelő csomag újratervezése. A második verzióját is széles kőrben használták, de mivel az korábbi Javascript elemeken alapult, most már újra korszerűsítésre volt igény. Az OL3 alapoktól újra volt építve modern tervezési minták alkalmazásával.
@@ 12. sor: / 13. sor: @@
 Úgy van megtervezve az alkalmazás, hogy a főbb új irányzatokkal bővíthető legyen a következő kiadást. (pl. 3D térképek megjelenítése, WebGL használata nagyméretű vektoradatok megjelenítéséhez.)
-== Felépítés ==
+=== Felépítés ===
 Az OL3 nagy mértékben épül a Google Closure eszköztárára, nagy mértékben él a Closure könyvtár (Closure Library) nyújtotta segítséggel – például a DOM vagy az esemény kezelés résznél. Ez lehetővé teszi, hogy a fejlesztők a térképészeti funkciókra koncentrálhassanak, tudva, hogy az alá épült szoftver megbízható, jól tesztelt, böngésző szinten egyezményesített. A Closure Library sajátos tervezésének előnye, hogy a Closure fordító (Clusure Compiler) optimalizálni tudja, ráadásul olyan mértékben tömörítve, hogy az messzemenően meghaladja az jelenlegi kínálatokat. Az OL3-nak is nagy előnye származik ebből.
@@ 28. sor: / 29. sor: @@
 Az OL3 azt a konvenciót követi, hogy a privát tulajdonságok és metódusok, vagyis amelyek nem részei az API-nak, alul-vonásban végződnek. Általában a példány típusú tulajdonságok privátok, és elérésük erre célzott függvényekkel lehetséges.
-== Teljes build, testre-szabott build ==
+=== Teljes build, testre-szabott build ===
 Azt a fordítás, mely minden exportálható nevet tartalmaz, teljes build-nek (full build) nevezik. Egy befogadó verzió ebből elérhető, mely minden alkalmazás számára használható.

← Régebbi változat		A lap 2016. május 10., 08:56-kori változata
279. sor:		279. sor:

	A kód karbantartása érdekében, ha a Node csomag által telepítjük az OpenLayer-st, akkor az npm használható a legújabb verzióra frissítéshez. Ha a Github repo volt klónozva, nem biztos, hogy elég a pull a legújabb verzióra, mert néhány használt csomag, mint például a fordító, lehet, hogy kíván upgrade-et is. Ezt érdemes npm install paranccsal kiváltani, nem pedig npm update-tel.		A kód karbantartása érdekében, ha a Node csomag által telepítjük az OpenLayer-st, akkor az npm használható a legújabb verzióra frissítéshez. Ha a Github repo volt klónozva, nem biztos, hogy elég a pull a legújabb verzióra, mert néhány használt csomag, mint például a fordító, lehet, hogy kíván upgrade-et is. Ezt érdemes npm install paranccsal kiváltani, nem pedig npm update-tel.
		+
		+
		+	== Saját kód és OL3 kód együttes fordítása ==
		+
		+	Egy alternatíva testre-szabott build-ek készítésére a saját kód OpenLayers 3-mal együtt történő fordítása a Closure fordító segítségével. Ennek a módszernek előnye az, hogy a Closure fordító kiszűri azokat a kódokat, melyeket az alkalmazás nem használ, és ehhez nem szükséges egy „exports” lista írása és karbantartása. Ugyanakkor lehetővé teszi olyan OpenLayers 3 függvények és objektumok használatát, melyek nem részei az OpenLayers 3 API-nak. Ez kissé kockázatos is lehet, de szerencsére a fordító szól, ha olyan függvényeket és objektumokat használnánk, melyek már nem az OpenLayers 3 API részei. (A módszerről részletesebben: [http://openlayers.org/en/v3.15.1/doc/tutorials/closure.html itt] olvasható.)
		+
		+	== Eltérő koordináta rendszerek esete ==
		+
		+	Az OpenLayers 3 képes megjeleníteni raszteres adatot WMS, WMTS, statikus kép típusú és sok más forrásból a szervertől kapott koordináta rendszertől eltérően. A koordináták transzformálása a web böngészőben történik. A nézet minden Proj4js támogató koordináta referencia rendszerben lehetséges, és előzetesen inkompatibilis rétegek ma már kombinálhatóak. Az alábbi példa során látható, hogy a forrás és a nézet koordináta rendszere eltérő, az átszámítás megtörténik viszont automatikusan.
		+
		+	<code>
		+	var map = new ol.Map({
		+	target: 'map',
		+	view: new ol.View({
		+	projection: 'EPSG:3857', //HERE IS THE VIEW PROJECTION
		+	center: [0, 0],
		+	zoom: 2
		+	}),
		+	layers: [
		+	new ol.layer.Tile({
		+	source: new ol.source.TileWMS({
		+	projection: 'EPSG:4326', //HERE IS THE DATA SOURCE PROJECTION
		+	url: 'http://demo.boundlessgeo.com/geoserver/wms',
		+	params: {
		+	'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
		+	}
		+	})
		+	})
		+	]
		+	});
		+	</code>
		+
		+	== Érdekes és látványos példák ==
		+
		+	* [http://openlayers.org/en/v3.15.1/examples/animation.html Animációk térképen (View Animation)]
		+	* [http://openlayers.org/en/v3.15.1/examples/box-selection.html Ország, országok kijelölése (Box Selection) ]
		+	* [http://openlayers.org/en/v3.15.1/examples/earthquake-clusters.html Földrengések és mértékének megjelenítése (Eartquake Clusters)]
		+	* [http://openlayers.org/en/v3.15.1/examples/export-pdf.html Exportálás pdf-be]
		+	* [http://openlayers.org/en/v3.15.1/examples/flight-animation.html Repülő animáció (Flight Animation)]
		+	* [http://openlayers.org/en/v3.15.1/examples/kml-timezones.html Időzónák KML-lel (Timezones in KML)]
		+	* [http://openlayers.org/en/v3.15.1/examples/measure.html Terület felmérés (Measure)]
		+
		+	== Források ==
		+	* Open Layers 3 hivatalos oldala: http://openlayers.org/
		+	* FOSSGIS Konferencia - 2015 Münster- Andreas Hocevar, Bart van den Eijnden, Marc Jansen előadása – OpenLayers 3 : https://www.youtube.com/watch?v=U3ByMIIsA_Y

← Régebbi változat		A lap 2016. május 10., 08:43-kori változata
250. sor:		250. sor:
	</html>		</html>
	</code>		</code>
		+
		+	====Define lehetőségei====
		+
		+	A konfigurációs állományban a define használata a Clusre-hoz kötődik, mely engedi olyan konstansok definiálását, melyek fordítási időben beállíthatóak. A fentebbi példa négy goog tulajdonságot állít be a Closure library számára. Az OpenLayers 3 kód rendelkezik definiált értékekkel is, melyek beállíthatóak.
		+	Néhányat ezek közül hamisra (false) állítva azt érjük el, hogy azok a kódrészletek melyek ezekhez a beállításokhoz kötődnek „halottak” lesznek, vagyis sosem lesznek végrehajtva. Mivel a Closure fordító előrehaladottabb módja eltávolítja a halott kódokat, az előrehaladottabb fordítóval létrehozott kód jóval kisebb méretű lesz.
		+	Észrevehető, hogy az előbbi folyamat során készült build állomány látványosan kisebb, mint a teljes build, de még ennél kisebbre is szorítható. Ez azért van, mert alapból mindhárom interpreter és minden réteg típus bele van vonva. Mivel csak egy interpreterre volt szükségünk, és csak a csempe rétegre, a többit ki is zárhatjuk a tulajdonság listában hamisra állítva őket. A következő kóddal kell kiegészíteni a konfigurációs állomány define részét, és újra kell futtatni a build szkriptet – majd újra láthatjuk, hogy kisebb lett a build mérete.
		+
		+	<code>
		+	"ol.ENABLE_DOM=false",
		+	"ol.ENABLE_WEBGL=false",
		+	"ol.ENABLE_PROJ4JS=false",
		+	"ol.ENABLE_IMAGE=false",
		+	"ol.ENABLE_VECTOR=false",
		+	</code>
		+
		+
		+	====Externs lehetőségei====
		+
		+	Az externs alatt olyan külsős dolgok nevei szerepelnek, melyek használva vannak a fordított kódban. A fordító include-olja az externs mappába mindazokat a külsős állományokat, melyeket a könyvtár valamely részében használni fog. Például, ha használjuk a Bing Maps-et, akkor be kell include-olni az konfigurációs állomány externs részénél.
		+	Az oli.js és az olx.js külső állományok az OpenLayers 3 API-hoz. Pédául az olx.js külső definíciókat tartalmaz az OpenLayers 3 konstruktor lehetőségeihez. Ezt a két állományt mindig használni érdemes extern-ként testre-szabott build esetén.
		+
		+	====Egyéb lehetőségek====
		+
		+	Vannak egyébb fordítási lehetőségek a konfigurációs állományban. Például a manage_closure_dependencies mindig használandó. Minden más fordítási opció is beállítható itt, a closure-util-ban látható az összes, listázott formában.
		+	Több információ a build szkriptekről, és a tulajdonságokról, melyeket a konfigurációs állományokban állítani lehet [https://github.com/openlayers/ol3/blob/master/tasks/readme.md itt] található.
		+
		+	===Kód karbantartás===
		+
		+	A kód karbantartása érdekében, ha a Node csomag által telepítjük az OpenLayer-st, akkor az npm használható a legújabb verzióra frissítéshez. Ha a Github repo volt klónozva, nem biztos, hogy elég a pull a legújabb verzióra, mert néhány használt csomag, mint például a fordító, lehet, hogy kíván upgrade-et is. Ezt érdemes npm install paranccsal kiváltani, nem pedig npm update-tel.

← Régebbi változat		A lap 2016. május 10., 08:34-kori változata
164. sor:		164. sor:

	Például egy ilyen tartalommal rendelkező állományt ol-custom.json névvel le lehet menteni a node_modulse/openlayers/build mappába.		Például egy ilyen tartalommal rendelkező állományt ol-custom.json névvel le lehet menteni a node_modulse/openlayers/build mappába.
		+
		+
		+	====Exports lehetőségei====
		+
		+	A legszámottevőbb része ennek a konfigurációs állománynak az „exports” tömb. Ez a tömb deklarálja azokat a függvényeket/konstruktorokat, melyeket a JavaScript kódban használni lehet majd. Például az előbbi konfigurációs állomány alkalmas az előző fejezetben bemutatott javascript esetén. (Alap komponensek/Összefoglaló példa)
		+	Most már minden elő van készítve a OpenLayers 3 build –hez. A következő parancsok következnek.
		+
		+	<code>
		+	$ cd node_modules/openlayers
		+	$ node tasks/build.js build/ol-custom.json build/ol-custom.js
		+	</code>
		+
		+	A build felvehet egy kis időt, de végül a console-on a következő jelenik meg:
		+	<code>
		+	info ol Parsing dependencies
		+	info ol Compiling 364 sources
		+	</code>
		+
		+	Ennek a parancsnak a nyomán létre kellett jöjjön az ol-custom.js állomány a node_module/openlayers/build mappában. Ellenőrizhető és megnyitható. Tesztként használhatjuk a következő HTML állományt, hogy lássuk, a testre-szabott build-ünk az elvártaknak megfelelően működik.
		+
		+	<code>
		+	<!DOCTYPE html>
		+	<html>
		+	<head>
		+	<meta charset="utf-8" />
		+	<title>OpenLayers 3 example</title>
		+	<link rel="stylesheet" href="node_modules/openlayers/css/ol.css" />
		+	<style>
		+	#map {
		+	width: 600px;
		+	height: 400px;
		+	}
		+	</style>
		+	</head>
		+	<body>
		+	<div id="map"></div>
		+	<script src="node_modules/openlayers/build/ol-custom.js"></script>
		+	<script>
		+	var map = new ol.Map({
		+	target: 'map',
		+	layers: [
		+	new ol.layer.Tile({
		+	source: new ol.source.OSM()
		+	})
		+	],
		+	view: new ol.View({
		+	center: [0, 0],
		+	zoom: 4
		+	})
		+	});
		+	</script>
		+	</body>
		+	</html>
		+	<!DOCTYPE html>
		+	<html>
		+	<head>
		+	<meta charset="utf-8" />
		+	<title>OpenLayers 3 example</title>
		+	<link rel="stylesheet" href="node_modules/openlayers/css/ol.css" />
		+	<style>
		+	#map {
		+	width: 600px;
		+	height: 400px;
		+	}
		+	</style>
		+	</head>
		+	<body>
		+	<div id="map"></div>
		+	<script src="node_modules/openlayers/build/ol-custom.js"></script>
		+	<script>
		+	var map = new ol.Map({
		+	target: 'map',
		+	layers: [
		+	new ol.layer.Tile({
		+	source: new ol.source.OSM()
		+	})
		+	],
		+	view: new ol.View({
		+	center: [0, 0],
		+	zoom: 4
		+	})
		+	});
		+	</script>
		+	</body>
		+	</html>
		+	</code>

← Régebbi változat		A lap 2016. május 10., 08:30-kori változata
125. sor:		125. sor:

	Ezen műveleteket követően mindenünk biztosítva van a testre-szabott build elkészítéséhez.		Ezen műveleteket követően mindenünk biztosítva van a testre-szabott build elkészítéséhez.
		+
		+	=== Konfigurációs állomány készítése ===
		+
		+	A következő lépés egy build konfigurációs állomány létrehozása. Ennek formátuma JSON kell legyen. Egy példa build konfigurációs állományra:
		+
		+	<code>
		+	{
		+	"exports": [
		+	"ol.Map",
		+	"ol.View",
		+	"ol.control.defaults",
		+	"ol.layer.Tile",
		+	"ol.source.OSM"
		+	],
		+	"compile": {
		+	"externs": [
		+	"externs/bingmaps.js",
		+	"externs/closure-compiler.js",
		+	"externs/geojson.js",
		+	"externs/oli.js",
		+	"externs/olx.js",
		+	"externs/proj4js.js",
		+	"externs/tilejson.js",
		+	"externs/topojson.js"
		+	],
		+	"define": [
		+	"goog.DEBUG=false"
		+	],
		+	"extra_annotation_name": [
		+	"api", "observable"
		+	],
		+	"compilation_level": "ADVANCED",
		+	"manage_closure_dependencies": true
		+	}
		+	}
		+	</code>
		+
		+
		+	Például egy ilyen tartalommal rendelkező állományt ol-custom.json névvel le lehet menteni a node_modulse/openlayers/build mappába.

← Régebbi változat		A lap 2016. május 10., 08:26-kori változata
104. sor:		104. sor:
	</script>		</script>
	</code>		</code>
		+
		+
		+	== Testre-szabott build-ek készítése ==
		+
		+	Az OpenLayers 3 fordítói eszközök használják a Node-ot és a Java-t, tehát ezek fel kell legyenek telepítve a fejlesztő gépén. A node –version, java –version parancsok segítségével ellenőrizhető, hogy a Java és a Node fel van-e telepítve, a fejlesztői útmutató (developer guide) a minimum verziót is rögzíti.
		+	Következő lépésként le kell tölteni az OpenLayers 3-at, hiszen a testre-szabott build-hez szükség van a forrás állományokra és sajátos build szkriptekre. Ezek beszerzése több módon lehetséges: az ol3 repository klónozásával, vagy valamelyik OL3 közzététel archiv csomagjának letöltésével. Letölthető az openLayres Node csomagja is az NPM (Node Package Manager) segítségével. A következőkben ezt a módszert mutatjuk be:
		+
		+	* 1. Létrehozunk egy új mappát:
		+	<code>
		+	$ mkdir openlayers
		+	</code>
		+
		+	* 2. Letöltünk egy OpenLayers 3 disztribúciót az NPM használatával:
		+	<code>
		+	$ npm install openlayers
		+	</code>
		+
		+	Ez mindig az OpenLayers 3 legfrissebb stabil verzióját tölti le, és a node_modules alá telepíti. Ezt követően ellenőrizhető az „openlayers” mappa jelenléte a node_modules listázásával. A node_modules/openlayers/node_modules
		+	mappának például tartalmaznia kell a closure-utilt is, hiszen az OL3 rá épül.
		+
		+	Ezen műveleteket követően mindenünk biztosítva van a testre-szabott build elkészítéséhez.