Geomajas

Innen: GIS Wiki
A lap korábbi változatát látod, amilyen Jmdtdy (vitalap | szerkesztései) 2017. április 16., 06:29-kor történt szerkesztése után volt. (→‎Javascript API)

Áttekintés

A Geomajas (http://www.geomajas.org/) egy Java nyelven íródott Open Source Web Mapping Framework. Mind szerver, mind kliensoldali komponenseket kínál. Szerveroldalon Java, Javascript, míg kliensoldalon Java (GWT) és Javascript nyelven tesz megvalósításokat elérhetővé.

Előkészületek

A mintaprogramok fordításához és futtatásához Maven-t használnak (https://maven.apache.org/). Ahhoz, hogy futtatni és fordítani tudjuk a github-os projekteket, a Maven telepítési könyvtárában a settings.xml-ben (HOME/.m2/settings.xml) fel kell venni néhány dependency-t, ez az xml a github-os gwt kliensnél megtalálható. (https://github.com/geomajas/geomajas-project-client-gwt2)

Kezdésként a GWT-s standalone applicationt indítsuk el. (https://github.com/geomajas/geomajas-gwt2-quickstart-application) Fordítsuk le a Mavennel a projektet, majd futtassuk.

mvn install

mvn jetty: run

Ezután látogassunk el a http://localhost:8080/-ra, ahol megtekinthető az eredmény.

A GWT quickstart application

A GWT-s projekt általában egy gyökér könyvtárbeli szerver és kliens oldali csomagból áll. A kliens oldali belépési pontot az Application.java fájl tartalmazza, ami a következő helyen található: ..\geomajas-gwt2-quickstart-application-master\src\main\java\org\geomajas\quickstart\gwt2\client.

Ez megvalósítja a com.google.gwt.core.client.EntryPoint interfészt, így implementálni kell az onModuleLoad metódust. A kód egyszerű: létrejön egy ApplicationLayout, majd hozzáadódik a megjelenítéshez. 

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootLayoutPanel;

public class Application implements EntryPoint {

	@Override
	public void onModuleLoad() {
		ApplicationLayout layout = new ApplicationLayout();
		RootLayoutPanel.get().add(layout);
	}
}

Az ApplicationLayout geomajas specifikus layout, a következő módon keletkezik: 

public ApplicationLayout() {
		initWidget(UIBINDER.createAndBindUi(this));
		ApplicationResource.INSTANCE.css().ensureInjected();

		mapPresenter = GeomajasImpl.getInstance().createMapPresenter();
		mapPresenter.getEventBus().addMapInitializationHandler(new MyMapInitializationHandler());

		GeomajasServerExtension.getInstance().initializeMap(mapPresenter, "app", "mapMain");

		mapLayoutPanel = new MapLayoutPanel();
		mapLayoutPanel.setPresenter(mapPresenter);
		mapPanel.add(mapLayoutPanel);

		appService = ApplicationService.getInstance();
		appService.setMapPresenter(mapPresenter);
		appService.setMapLayoutPanel(mapLayoutPanel);

		appService.getMapPresenter().getEventBus().addHandler(FeatureMouseOverHandler.TYPE, new MyFeatureMouseOverHandler());

	}

Miután betöltődik a kontextusthoz szükséges GWT-s modul, létrejön egy MapPresenter, majd hozzá egy default inicializáló. Ezután a szerverkódból inicializáljuk ezt. Ezt követi a Layout beállítása, hozzáadása a megjelenítéshez, valamint egy ApplicationService létrehozása, amely kiszolgálja a ezt a Layert. Ezután hozzáadásra kerül egy egyedi eseménykezelő.

Javascript API

A Client Javascript API a Client GWT-t használja. A Javascriptes projektnél a javadoc-os résznél elakad a maven, így csak az API és a gwt2 projekt fordíthat le egyenként. A gwt2 projekt tartalma egy javascript api-t használó mintaalkalmazás, az API ennek a részeként is lefordul, így elég csak ezt lefordítani.

A Githubról a Javascript project (https://github.com/geomajas/geomajas-project-javascript)letöltése után, lefordíthatjuk a gwt2-es projektet, ami legenerálja a szükséges javascript fájlokat és létrehozza a megfelelő index.html-eket, mind szerver mind kliens oldalon. Az eredmény ideiglenesen a http://people.inf.elte.hu/bagtaai címen elérhető.

A map betöltéséhez ez a modul egy onGeomajasLoad függvényt használ, ami lényegében az inicializációt hajtja végre. Az alábbi kódrészlet mutatja a legenerált index.html-ben szereplő példát. 

<script type="text/javascript">
	var map;
	var WMS_BASE_URL = "http://apps.geomajas.org/geoserver/demo_world/ows";
	var wmsVersion = "1.3.0"; //default value


	function onGeomajasLoad() {
		var mapConfig = new gm.MapConfiguration();
		mapConfig.setCrs("EPSG:4326", "DEGREES");
		mapConfig.setMinimumResolution(2.1457672119140625E-5)
		mapConfig.setMaxBounds(new gm.Bbox(-180, -90, 360, 180));

		// Map létrehozása és inicializálása
			
		map = new gm.Map("js-map-element", mapConfig);

		// Kiürítjük a map-et
		map.getLayersModel().clear();
		
		var tileConfig = new gm.layer.TileConfiguration(256, 256, new gm.Coordinate(-180, -90),
				map.getViewPort());
		var layerConfig = new gm.WmsLayerConfiguration();

		layerConfig.setBaseUrl(WMS_BASE_URL);
		layerConfig.setFormat("image/png");
		layerConfig.setVersion(wmsVersion);
		layerConfig.setLayers("demo_world:simplified_country_borders");
		layerConfig.setMinimumResolution(2.1457672119140625E-5);
		layerConfig.setMaximumResolution(Number.MAX_VALUE);

		// Létrehozunk egy WMS Layert és hozzáadjuk a maphez:

		var wmsLayer = new gm.WmsLayer("Blue Marble", map, layerConfig, tileConfig);
		wmsLayer.setMaxBounds(new gm.Bbox(-180, -90, 360, 360));
		map.getLayersModel().addLayer(wmsLayer);		
	}
</script>

A térkép objektumhoz hozzárendelhetők események: az inicializációhoz, a térkép megszűnéséhez, vagy a térkép betöltéséhez. 

    //Maphez hozzárendelhető események
    map.getEventBus().addLayerAddedHandler(function(event) {
        // custom code; event contains the added layer
        alert('layer added: ' + event.getAddedLayer().getTitle());
    });
    map.getEventBus().addLayerRemovedHandler(function(event) {
        // custom code; event contains the removed layer
	alert('layer removed: ' + event.getRemovedLayer().getTitle());
    });
    map.getEventBus().addMapInitializationHandler(function(event) {
        // custom code
	alert('map fully initialized');
    });

A térkép objektumhoz hozzárendelhetők eseménykezelők, ezek közül az előre definiáltak:

  • 'navigation'-el elérhető a NavigationController,
  • 'zoomToRectangle'-el elérhető a ZoomToRectangleController,
  • 'featureSelectionDrag'-al a FeatureSelectionController érhető el a SelectionMethod.CLICK_AND_DRAG-el együtt,
  • 'featureSelectionSingle'-el elérhető a FeatureSelectionController a SelectionMethod.SINGLE_SELECTION-el.

Hozzáadni az alábbi módon tudunk: 

map.setMapController(gm.MapControllerFactory.createMapController("default_kontroller_neve"));

Van lehetőség saját MapController létrehozására is: 

// Üres kontroller létrehozása
var customMapController = gm.MapControllerFactory.createMapController();

// Egyedi egérmozgás kezelő:
customMapController.setMouseMoveHandler(function(event) {
  
   var screenLocation = mapController.getLocation(event, "screen");
   var worldLocation = mapController.getLocation(event, "world");
   var screenLocationAsText = "Screen: " + screenLocation.getX() + ", " + screenLocation.getY();
   var worldLocationAsText = "World: " + worldLocation.getX() + ", " + worldLocation.getY();
   
});
// Egyéb események, amelyek:
//setMouseOverHandler
//setMouseOutHandler
//setDownHandler
//setUpHandler
//setDragHandler
//setDoubleClickHandler

// Kontrollerre köthető események (activation, deactivation):
customMapController.setActivationHandler(function() {
   
   alert('Custom controller activated!')
});
//setDeactivationHandler

// MapController hozzáadása a térképhez:
map.setMapController(customMapController);

A layerekhez különböző funkciók társíthatóak, amelyek a FeatureSearchService segítségével érhetőek el. 

var service = map.getFeatureSearchService();
// A layer egy specifikus műveletének lekérése
service.searchById(layer, [id], function(featureHolder){
   var feature = featureHolder.getFeatures()[0];
   alert("Feature found: " + feature.getLabel());
});
// összes művelet megkeresése
service.searchInBounds(layer, bounds, function(features) {
   // custom code; the featureHolder contains the features
   alert("Features found: " + featureHolder.getFeatures().size());
});

Hibák

A Quickstart application, mavenes fordítása és futtatása probléma nélkül megtörtént, azonban a client-gwt2, és a szerveroldali projekt fordítása korántsem volt zökkenőmentes. A javascriptes projekt a javadoc generálásánál elszáll, de egyenként fordítható az api és a gwt2 projekt.

Checkstyle

A checkstyle egy kódformázó plugin, amit a régebbi eclipsekben használtak, azonban az újakban már eleve benne van. Kezdetben a plugin (https://maven.apache.org/plugins/maven-checkstyle-plugin/) verzióját nem találta meg a maven, ezt orvosolta a fejlesztők levelezéséből kiderített client-gwt2 projektben található settings.xml megfelelő helyre történő átmozgatása.

FirefoxBinary

A kliensoldali kód azonban így sem fordult le, a tesztek futtatásakor a selenium (http://www.seleniumhq.org/) plugin nem tudta elérni a FirefoxBinary-t és nem tudta lefuttatni a hozzá tartozó részeket. Ezt orvosolta a mvn install -DskipTests utasítás, ami a teszteket kihagyva képes sikeres fordítást produkálni.

Javadoc

Valamilyen oknál fogva a java, a régebbi javadocos kódrészleteket nem tudja értelmezni a maven a projekteken belül és fordításnál szintaktikai hibát eredményez. A projektek szükséges részei egyenként is lefordíthatóak.

Forrás, Linkek

A wiki oldal megírásához az alábbi oldalakat használtam:

A lap eredeti címe: „http://gis.inf.elte.hu/giswiki/index.php?title=Geomajas&oldid=349”