JavaFX, OpenLayers ja Maa-ameti avalik WMS teenusArvestustöö

I340 - Geoinfosüsteemide alused15.05.2012

Õppejõud: Peep Krusberg

Ülari AinjärvEesti Infotehnoloogia Kolledž

AK12

JavaFX, OpenLayers ja Maa-ameti avalik WMS teenusSisukord

......................................................................................................................................................1. Kokkuvõte" 1..................................................................................................................................2. Tehnoloogiad ja teenus" 1

..............................................................................................................................................3. Kaardirakendus" 1............................................................................................................................................3.1. Kasutamine" 2

..............................................................................................................................................3.2. Lähtekood " 2.......................................................................................................................3.2.1. HTML ja JavaScript" 3

...............................................................................................................................................3.2.2. Java" 4

...............................................................................................................................................3.2.3. CSS" 6..............................................................................................................................................................4. Lisad" 7

1. KokkuvõteArvestustöö teema valik põhineb uudishimul väga “toorete” ja tulevikku suunatud tehnoloogiate ja raamistikega mängimisel.Selle töö tulemusena valmis töötav rakendus, mis laeb Maa-ameti avaliku WMS teenuse kaudu aluskaardi, kuvab selle spetsiaalselt selle projekti käigus loodud JavaFX rakenduses ning loob OpenLayers raamistiku abil selle aluskaardi peale lisakihi mõnede suvaliste punktidega.

2. Tehnoloogiad ja teenusJavaFX (http://www.oracle.com/technetwork/java/javafx/overview/index.html) on Java järgmise põlvkonna tehnoloogia kasutajaliideste valdkonnas, mis järgib “rikka” kasutajaliidese1 kontseptsiooni ühelt poolt ning Java põhimõtet2 “write once, run anywhere” teiselt poolt.OpenLayers (http://openlayers.org) on vabavaraline “õhuke” JavaScript-i teekide kogum, mille abil saab kiiresti ja lihtsalt suvalisele veebilehele kaardikomponente ja nende erinevaid kihte lisada.Maa-ameti avalik WMS teenus (http://geoportaal.maaamet.ee/est/Teenused/Avalik-WMS-teenus-p65.html) on Open Geospatial Consortium (OGC) Web Map Service (WMS) standardil põhinev teenus, mida saab kasutada erinevate aluskaartide laadimiseks GIS rakendustesse nagu ka käesoleva arvestustöö puhul.

3. KaardirakendusAntud arvestustöö käigus valminud kaardirakendus on oma olemuselt “varjatud” veebibrauser, mis tähendab, et kasutatakse JavaFX veebisisu kuvamise komponenti (WebView) kuhu laetakse OpenLayers funktsionaalsusega varustatud kaardileht (kaartide aluskihid laetakse Maa-ameti avaliku WMS teenuse kaudu) ning läbi nende funktsioonide väljakutsete toimub erinevate kaardivaadete kuvamine. Tehniline lahendus baseerub JavaFX poolelt (tööriistariba rakenduse päises Node-ga) kaardilehel realiseeritud JavaScript-i funktsioonide väljakutsetel (vt Joon. 1).

Joon. 1 - “Varjatud” veebibrauseri ülesehitus

1/7Ülari AinjärvAK12

I340 - Geoinfosüsteemide alusedÜlari AinjärvAK12 JavaFX, OpenLayers ja Maa-ameti avalik WMS teenusÜlari AinjärvAK12

15.05.2012

I340 - Arvestustöö - Ülari Ainjärv (AK12).pages

1 RIA - Rich Internet application (http://en.wikipedia.org/wiki/Rich_Internet_application).2 Illustreerimaks Java platvormisõltumatust (http://en.wikipedia.org/wiki/Write_once,_run_anywhere).

3.1. KasutamineSelle arvestustöö tegemise ajal oli JavaFX alles arendamisjärgus ning sellepärast pole garanteeritud, et see läheb tööle kõigil platvormidel nagu tavaliselt Java puhul võiks eeldada. Rakenduse jooksutamiseks sobiliku platvormi3 moodustavad:

• Microsoft Windows 7 Professional Service Pack 1 (64-bit);• Java SE 7u44, sisaldab JavaFX 2.1 (32-bit).

Valmisehitatud ja topelthiire “klõpsuga” avaneva JavaFX5 rakenduse saab vabalt alla laadida aadressilt http://enos.itcollege.ee/~ylari/I340/WebMapFX.jar (lisatud arvestustööle eraldi failina). Kuigi JavaFX rakendused peaksid töötama ka veebibrauseris, siis antud töö koostamise ajal ei õnnestunud seda käima saada.Kaardirakenduse päise moodustab tööriistariba, millel on peamiselt kolm gruppi valikuid (vt Joon. 2). Lisaks Maa-ameti WMS teenusele sai proovitud ka teiste teenusepakkujate (Google jt) kaardiliideseid, aga lõpuni neid selle töö raames ei implementeeritud ning samuti puudub nende puhul OpenLayers funktsionaalsus.

Joon. 2 - Kaardirakendus

3.2. LähtekoodRakenduse lähtekood koosneb kolmest osast: HTML koos JavaScript-ga, JavaFX rakenduse kood ja pisike CSS tööriistariba kujundusega.

2/7Ülari AinjärvAK12

I340 - Geoinfosüsteemide alusedÜlari AinjärvAK12 JavaFX, OpenLayers ja Maa-ameti avalik WMS teenusÜlari AinjärvAK12

15.05.2012

I340 - Arvestustöö - Ülari Ainjärv (AK12).pages

3 Ära on toodud arvestustöö tegemisel kasutatud platvormi kirjeldus. Täpsema ülevaate JavaFX viimastest versioonidest ja sertifitseeritud platvormidest leiab http://www.oracle.com/technetwork/java/javafx/overview/index.html.4 Soovitav on lehelt http://www.oracle.com/technetwork/java/javase/downloads/index.html alla laadida see koos NetBeans IDE-ga (loodud kaardirakenduse projekt on koostatud seda kasutades) ja installeerida kõik korraga.5 JavaFX dokumentatsioon on kättesaadav lehelt http://docs.oracle.com/javafx.

Lähtekoodi projekt, ehitamine ning pakendamine valmis NetBeans IDE abivahendeid kasutades ja projetifaili saab alla laadida aadressilt http://enos.itcollege.ee/~ylari/I340/WebMapFX.zip (lisatud arvestustööle eraldi failina).

3.2.1. HTML ja JavaScriptFail: src/ee/pri/ainjarv/mamap.html<!DOCTYPE html>

<!-- $Id: mamap.html 319 2012-05-14 21:44:18Z ylari $ -->

<html>! <head>! ! <title></title>! ! <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />! ! <style type="text/css">! ! ! html {width: 100%; height: 100%;}! ! ! body {width: 100%; height: 100%; margin: 0px; padding: 0px;}! ! ! #map_canvas {width: 100%; height: 100%; background-color: #666970;}! ! </style>! ! <script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript" charset="utf-8"></script>! ! <script type="text/javascript">! ! ! function initialize() {! ! ! ! var options = {! ! ! ! ! maxExtent: new OpenLayers.Bounds(300000, 6.3e+06, 800000, 6.7e+06),! ! ! ! ! maxResolution: "auto",! ! ! ! ! projection: "EPSG:3301",! ! ! ! ! units: "m",! ! ! ! ! controls: [! ! ! ! ! ! new OpenLayers.Control.Navigation(),! ! ! ! ! ! new OpenLayers.Control.ArgParser(),! ! ! ! ! ! new OpenLayers.Control.Attribution()! ! ! ! ! ]! ! ! ! };! ! ! ! var base = new OpenLayers.Layer.WMS(! ! ! ! ! "base",! ! ! ! ! "http://kaart.maaamet.ee/wms/alus?", {! ! ! ! ! ! "layers": "MA-ALUS",! ! ! ! ! ! "format": "image/png"! ! ! ! ! },! ! ! ! ! options! ! ! ! );! ! ! ! var satellite = new OpenLayers.Layer.WMS(! ! ! ! ! "satellite",! ! ! ! ! "http://kaart.maaamet.ee/wms/fotokaart?", {! ! ! ! ! ! "layers": "foto",! ! ! ! ! ! "format": "image/png"! ! ! ! ! },! ! ! ! ! options! ! ! ! );! ! ! ! var hybrid = new OpenLayers.Layer.WMS(! ! ! ! ! "hybrid",! ! ! ! ! "http://kaart.maaamet.ee/wms/fotokaart?", {! ! ! ! ! ! "layers": "MA-FOTOKAART",! ! ! ! ! ! "format": "image/png"! ! ! ! ! },! ! ! ! ! options! ! ! ! );! ! ! ! document.map = new OpenLayers.Map(document.getElementById("map_canvas"), options);! ! ! ! var points = new OpenLayers.Layer.Vector("Points");! ! ! ! document.map.addLayers([base, satellite, hybrid, points]);! ! ! ! satellite.setVisibility(false);! ! ! ! hybrid.setVisibility(false);! ! ! ! document.map.zoomToMaxExtent();! ! ! ! document.setMapTypeBase = function setMapTypeBase() {! ! ! ! ! document.map.setBaseLayer(base);! ! ! ! ! base.setVisibility(true);! ! ! ! ! satellite.setVisibility(false);! ! ! ! ! hybrid.setVisibility(false);! ! ! ! }! ! ! ! document.setMapTypeSatellite = function setMapTypeSatellite() {! ! ! ! ! document.map.setBaseLayer(satellite);! ! ! ! ! base.setVisibility(false);! ! ! ! ! satellite.setVisibility(true);! ! ! ! ! hybrid.setVisibility(false);! ! ! ! }! ! ! ! document.setMapTypeHybrid = function setMapTypeHybrid() {! ! ! ! ! document.map.setBaseLayer(hybrid);! ! ! ! ! base.setVisibility(false);! ! ! ! ! satellite.setVisibility(false);! ! ! ! ! hybrid.setVisibility(true);! ! ! ! }! ! ! ! document.zoomIn = function zoomIn() {! ! ! ! ! document.map.zoomIn();! ! ! ! }! ! ! ! document.zoomOut = function zoomOut() {! ! ! ! ! document.map.zoomOut();! ! ! ! }! ! ! ! document.addPoint = function addPoint(x, y) {! ! ! ! ! var point = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(x, y));! ! ! ! ! points.addFeatures([point]);! ! ! ! }! ! ! ! document.removePoints = function removePoints() {! ! ! ! ! points.removeAllFeatures();! ! ! ! }! ! ! }! ! </script>! </head>! <body onload="initialize()">! ! <div id="map_canvas"></div>! </body>

3/7Ülari AinjärvAK12

I340 - Geoinfosüsteemide alusedÜlari AinjärvAK12 JavaFX, OpenLayers ja Maa-ameti avalik WMS teenusÜlari AinjärvAK12

15.05.2012

I340 - Arvestustöö - Ülari Ainjärv (AK12).pages

</html>

See osa lähtekoodist initsialiseerib OpenLayers kaardikihid. Neid kihte on ühtekokku neli: kolm neist laetakse Maa-ameti WMS teenuse kaudu kaartide aluskihtideks ning neljas on vektor tüüpi kiht, millele antud arvestustöö käigus valminud rakendus kuvab kaks suvaliselt valitud punkti. Need punktid kirjeldatakse JavaFX poolel ning need joonistatakse vastavale kaardikihile JavaScript-i funktsiooni addPoint(x, y) väljakutsumise teel. Analoogne lähtekood on olemas ka teiste teenusepakkujate jaoks.

3.2.2. JavaFail: src/ee/pri/ainjarv/WebMapFX.java// $Id: WebMapFX.java 323 2012-05-14 21:53:16Z ylari $

package ee.pri.ainjarv;

import java.net.URL;import javafx.application.Application;import javafx.beans.value.ChangeListener;import javafx.beans.value.ObservableValue;import javafx.event.ActionEvent;import javafx.event.EventHandler;import javafx.scene.Node;import javafx.scene.Scene;import javafx.scene.control.*;import javafx.scene.layout.BorderPane;import javafx.scene.layout.HBox;import javafx.scene.layout.Priority;import javafx.scene.layout.Region;import javafx.scene.paint.Color;import javafx.scene.web.WebEngine;import javafx.scene.web.WebView;import javafx.stage.Stage;

/** * Something that you see more and more with client applications at the * moment is embedded map components. This application illustrates how to * embed Maa-amet, Google and other maps in your JavaFX application. * @author <a href="mailto:ylari@ainjarv.pri.ee?subject=WebMapFX: WebMapFX.java ...">Ülari Ainjärv</a> * @version $Revision: 323 $ */public class WebMapFX extends Application {

! /**! * The main entry point for all JavaFX applications. The start method is called! * after the init method has returned, and after the system is ready for the! * application to begin running.! * NOTE: This method is called on the JavaFX Application Thread.! * @param stage the primary stage for this application.! */! @Override! public void start(Stage stage) {! ! final URL url = getClass().getResource("mamap.html");! ! final WebView view = new WebView(); // create web view and engine! ! final WebEngine engine = view.getEngine();! ! engine.load(url.toExternalForm());! ! final ToggleGroup mapTypeGroup = new ToggleGroup(); // create map type buttons! ! final ToggleButton base = new ToggleButton("Põhikaart");! ! base.setToggleGroup(mapTypeGroup);! ! final ToggleButton satellite = new ToggleButton("Ortofoto");! ! satellite.setToggleGroup(mapTypeGroup);! ! final ToggleButton hybrid = new ToggleButton("Hübriid");! ! hybrid.setToggleGroup(mapTypeGroup);! ! final ToggleButton terrain = new ToggleButton("Maastik");! ! terrain.setToggleGroup(mapTypeGroup);! ! mapTypeGroup.selectToggle(base);! ! terrain.setDisable(true);! ! mapTypeGroup.selectedToggleProperty().addListener(new ChangeListener<Toggle>() {! ! ! @Override! ! ! public void changed(ObservableValue<? extends Toggle> observableValue, Toggle toggle, Toggle toggle1) {! ! ! ! if (base.isSelected())! ! ! ! ! engine.executeScript("document.setMapTypeBase()");! ! ! ! else if (satellite.isSelected())! ! ! ! ! engine.executeScript("document.setMapTypeSatellite()");! ! ! ! else if (hybrid.isSelected())! ! ! ! ! engine.executeScript("document.setMapTypeHybrid()");! ! ! ! else if (terrain.isSelected())! ! ! ! ! engine.executeScript("document.setMapTypeTerrain()");! ! ! }! ! });! ! final CheckBox pointBox = new CheckBox("Punktid");! ! pointBox.selectedProperty().addListener(new ChangeListener<Boolean>() {! ! ! @Override! ! ! public void changed(ObservableValue<? extends Boolean> observable, Boolean oldValue, Boolean newValue) {! ! ! ! if (pointBox.isSelected()) {! ! ! ! ! engine.executeScript("document.addPoint('" + 540568.2 + "', '" + 6587576.1 + "')");! ! ! ! ! engine.executeScript("document.addPoint('" + 427639.9 + "', '" + 6540118.7 + "')");! ! ! ! } else! ! ! ! ! engine.executeScript("document.removePoints()");! ! ! }! ! });! ! final Button zoomIn = new Button("Suurenda");! ! zoomIn.setOnAction(new EventHandler<ActionEvent>() {! ! ! @Override! ! ! public void handle(ActionEvent actionEvent) {! ! ! ! engine.executeScript("document.zoomIn()");! ! ! }! ! });! ! final Button zoomOut = new Button("Vähenda");! ! zoomOut.setOnAction(new EventHandler<ActionEvent>() {! ! ! @Override

4/7Ülari AinjärvAK12

I340 - Geoinfosüsteemide alusedÜlari AinjärvAK12 JavaFX, OpenLayers ja Maa-ameti avalik WMS teenusÜlari AinjärvAK12

15.05.2012

I340 - Arvestustöö - Ülari Ainjärv (AK12).pages

! ! ! public void handle(ActionEvent actionEvent) {! ! ! ! engine.executeScript("document.zoomOut()");! ! ! }! ! });! ! ToggleGroup mapSourceGroup = new ToggleGroup(); // add map source toggles! ! final ToggleButton ma = new ToggleButton("Maa-amet");! ! ma.setToggleGroup(mapSourceGroup);! ! final ToggleButton google = new ToggleButton("Google");! ! google.setToggleGroup(mapSourceGroup);! ! final ToggleButton bing = new ToggleButton("Bing");! ! bing.setToggleGroup(mapSourceGroup);! ! final ToggleButton ovi = new ToggleButton("Ovi");! ! ovi.setToggleGroup(mapSourceGroup);! ! mapSourceGroup.selectToggle(ma);! ! mapSourceGroup.selectedToggleProperty().addListener(new ChangeListener<Toggle>() { // listen to selected source! ! ! @Override! ! ! public void changed(ObservableValue<? extends Toggle> observableValue, Toggle toggle, Toggle toggle1) {! ! ! ! if (ma.isSelected()) {! ! ! ! ! engine.load(getClass().getResource("mamap.html").toString());! ! ! ! ! base.setDisable(false);! ! ! ! ! satellite.setDisable(false);! ! ! ! ! hybrid.setDisable(false);! ! ! ! ! terrain.setDisable(true);! ! ! ! ! pointBox.setDisable(false);! ! ! ! ! zoomIn.setDisable(false);! ! ! ! ! zoomOut.setDisable(false);! ! ! ! } else if (google.isSelected()) {! ! ! ! ! engine.load(getClass().getResource("googlemap.html").toString());! ! ! ! ! base.setDisable(false);! ! ! ! ! satellite.setDisable(false);! ! ! ! ! hybrid.setDisable(false);! ! ! ! ! terrain.setDisable(false);! ! ! ! ! pointBox.setDisable(true);! ! ! ! ! zoomIn.setDisable(false);! ! ! ! ! zoomOut.setDisable(false);! ! ! ! } else if (bing.isSelected()) {! ! ! ! ! engine.load(getClass().getResource("bingmap.html").toString());! ! ! ! ! base.setDisable(false);! ! ! ! ! satellite.setDisable(false);! ! ! ! ! hybrid.setDisable(false);! ! ! ! ! terrain.setDisable(false);! ! ! ! ! pointBox.setDisable(true);! ! ! ! ! zoomIn.setDisable(false);! ! ! ! ! zoomOut.setDisable(false);! ! ! ! } else if (ovi.isSelected()) {! ! ! ! ! engine.load(getClass().getResource("ovimap.html").toString());! ! ! ! ! base.setDisable(true);! ! ! ! ! satellite.setDisable(true);! ! ! ! ! hybrid.setDisable(true);! ! ! ! ! terrain.setDisable(true);! ! ! ! ! pointBox.setDisable(true);! ! ! ! ! zoomIn.setDisable(true);! ! ! ! ! zoomOut.setDisable(true);! ! ! ! }! ! ! ! mapTypeGroup.selectToggle(base);! ! ! }! ! });! ! ToolBar toolBar = new ToolBar(); // create toolbar! ! toolBar.getStyleClass().add("map-toolbar");! ! toolBar.getItems().addAll(! ! ! base, satellite, hybrid, terrain,! ! ! createSpacer(),! ! ! ma, google, bing, ovi,! ! ! createSpacer(),! ! ! pointBox,! ! ! createSpacer(),! ! ! zoomIn, zoomOut! ! );! ! BorderPane root = new BorderPane(); // create root! ! root.getStyleClass().add("map");! ! root.setCenter(view);! ! root.setTop(toolBar);! ! stage.setTitle("I340: Arvestustöö, Ülari Ainjärv (AK12)");! ! Scene scene = new Scene(root, 1000, 830, Color.web("#666970"));! ! stage.setScene(scene);! ! scene.getStylesheets().add(getClass().getResource("WebMapFX.css").toExternalForm());! ! stage.show(); // show stage! }

! private Node createSpacer() {! ! Region spacer = new Region();! ! HBox.setHgrow(spacer, Priority.ALWAYS);! ! return spacer;! }

! // use system proxy settings when standalone application! static {! ! System.setProperty("java.net.useSystemProxies", "true");! }

! /**! * Main method (main entry point).! * @param args the command line arguments.! */! public static void main(String[] args) {! ! launch(args);! }

}

Tegemist on siis rakenduse põhikoodiga, kus lisaks veebivaate komponendi loomisele ja tööriistariba funktsionaalsusele on implementeeritud OpenLayers-i kihile kuvatavate punktide loomine. Siinkohal antakse programmaatiliselt koodis ette kaks punkti koordinaatidega 540568.2, 6587576.1 ja 427639.9, 6540118.7

5/7Ülari AinjärvAK12

I340 - Geoinfosüsteemide alusedÜlari AinjärvAK12 JavaFX, OpenLayers ja Maa-ameti avalik WMS teenusÜlari AinjärvAK12

15.05.2012

I340 - Arvestustöö - Ülari Ainjärv (AK12).pages

EPSG:3301 projektsioonis (vt Joon. 3), kuid see on ainult illustreerimaks võimalust suvaliste punktide, kas näiteks pärimisel kusagilt andmebaasist või mingi veebiteenuse vahendusel allalaetud koordinaatidega punktide, lisamiseks OpenLayers-i kaardikihile ehk siis selle arvestustöö üks peamisi eesmärke.Erinevate Maa-ameti WMS teenuse kaudu kättesaadavate kaardikihtide testimiseks ning koodis kasutatud metaandmete leidmiseks kasutati antud töö tegemisel abivahendina gvSIG 6 rakendust. Suvalistele punktidele aitas koordinaadid leida X-GIS7.

Joon. 3 - OpenLayers kiht

3.2.3. CSSFile: src/ee/pri/ainjarv/WebMapFX.css/* $Id: WebMapFX.css 318 2012-05-09 16:02:29Z ylari $ */

/*! A little CSS to style the toolbar and make it look dark! to stand out from the map.*/

.map {! -fx-background-color: #666970;}

.map-toolbar .button, .map-toolbar .toggle-button, .map-toolbar .label {! -fx-text-fill: white;! -fx-background-radius: 0;}

.map-toolbar {! -fx-base: #505359;! -fx-background: #505359;

6/7Ülari AinjärvAK12

I340 - Geoinfosüsteemide alusedÜlari AinjärvAK12 JavaFX, OpenLayers ja Maa-ameti avalik WMS teenusÜlari AinjärvAK12

15.05.2012

I340 - Arvestustöö - Ülari Ainjärv (AK12).pages

6 Täiendav info aadressil http://www.gvsig.org ning samuti Maa-ameti lehel http://geoportaal.maaamet.ee/est/Teenused/Avalik-WMS-teenus/WMS-teenuse-kasutusjuhendid-p122.html.7 Kättesaadav aadressilt http://xgis.maaamet.ee/xGIS/XGis.

! -fx-shadow-highlight-color: transparent;! -fx-spacing: 5;! -fx-padding: 4 4 4 4;! -fx-background-color: linear-gradient(! ! from 0% 0% to 0% 100%,! ! #919398 0%,! ! #919398 4%,! ! #666970 4.1%,! ! #494d53 66%,! ! #3c3f46 94%,! ! #515151 94.1%! );}

Antud ülesandepüstituse seisukohalt vähetähtis osa koodist. Tema ülesandeks on tööriistariba kujundus.

4. Lisad• Töötav rakendus failis WebMapFX.jar (käivituv Java arhiiv);• Rakenduse lähtekood failis WebMapFX.zip (pakkida lahti ning avada NetBeans IDE-ga, sisaldab projekti

metaandmeid).

7/7Ülari AinjärvAK12

I340 - Geoinfosüsteemide alusedÜlari AinjärvAK12 JavaFX, OpenLayers ja Maa-ameti avalik WMS teenusÜlari AinjärvAK12

15.05.2012

I340 - Arvestustöö - Ülari Ainjärv (AK12).pages