Upload
sebastien-deleuze
View
746
Download
0
Tags:
Embed Size (px)
Citation preview
CREATE YOUR FIRST MAP USING OPENSCALES 1.2
Tutorial 2
Marine Jourdain
2
Prerequisites
This tutorial begins where ”Configure your first project using OpenScales” (tutorial 1) left off.
3
What you obtain with this tutorial
4
Code to obtain
the map
<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:os="http://openscales.org"> <fx:Declarations> </fx:Declarations> <os:Map id="fxmap" width="500" height="600" zoom="12" centerLonLat="4.83212,45.75781" x="100" y="100"> <os:Mapnik name="base" isBaseLayer="true" proxy="http://www.openscales.org/proxy.php?url=" /> <os:MousePosition x="10" y="{fxmap.height-20}" displayProjection="EPSG:4326"/> <os:DragHandler/> <os:ClickHandler/> <os:WheelHandler/> </os:Map> <os:ControlPanel x="110" y="110" width="140" title="Navigation"> <os:PanComponent map="{map}"/> <mx:HBox width="100%" paddingLeft="5" paddingRight="5"> <os:ZoomComponent map="{map}"/> <mx:Spacer width="100%"/> <os:ZoomBoxComponent map="{map}" width="32" height="32"/> </mx:HBox> </os:ControlPanel> <fx:Script> <![CDATA[ import org.openscales.core.Map; [Bindable] private var map:Map = null; private function initMap():void { map = fxmap.map; } ]]> </fx:Script> </s:Application>
5
The .mxml file at the beginning<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> </fx:Declarations></s:Application>
6
Add a namespace
Now, “os” namespace is linked to the OpenScales-fx library.
<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:os="http://openscales.org"> <fx:Declarations> </fx:Declarations></s:Application>
7
Create a map
The following source
code adds a map to your
application.
id is the unique identifier of the FxMap (here: fxmap) width and height restrict the size of the map zoom sets the zoom level when the application starts centerLonLat represents the coordinates where the map will be
centered to. They should be in the same projection as the base layer.
x and y determine the position of the map in the application
In the following page you will see a graphic explanation of those parameters
<os:Map id="fxmap" width="500" height="600" zoom="12" centerLonLat="4.83212,45.75781" x="100" y="100"> </os:Map>
8
Create a map
centerLonLat
coordinates
Application width
Map width
Mapheight
Application height
y
x
9
An example of an OSM layer: Mapnik. Just add this code into the <os:Map> tag
Others OSM layers exists : Cycle Map, Osmarender which are maps based on OSM datas but with other rendering rules.
isBaseLayer parameter tells if the layer should be used as the base layer. A map should at least have one base layer.
proxy parameter is not mandatory but may prevent security errors due to non valid crossdomain policy on the targeted server which is the case with OSM servers.
Add an Open Street Map (OSM) layer
<os:Mapnik name="base" isBaseLayer="true" proxy="http://www.openscales.org/proxy.php?url=" />
10
Example with an OGC layer: Web Feature Service (WFS)
The Open Geospatial Consortium defines several protocols like WFS, WMS…
You can find many examples with OGC layer in OpenScales-fx-example sources. Here is an example that provides a Web Feature Service layer as a base layer.
Note: to well visualise the example, change
the coordinates of the centerLonLat Map
parameter (centered on the USA) and set the zoom to 3.
<os:WFS name="Topp States (WFS)" url="http://openscales.org/geoserver/wfs" typename="topp:states" projection="EPSG:4326" version="1.0.0" isBaseLayer="true" style="{Style.getDefaultSurfaceStyle()}"> </os:WFS>
zoom="3"centerLonLat="-100.10929,40.48437"
11
<os:Mapnik name="Mapnik" isBaseLayer="true" proxy="http://openscales.org/proxy.php?url="/>
<os:KML url="http://code.google.com/intl/fr/apis/kml/documentation/KML_Samples.kml" proxy="http://openscales.org/proxy.php?url=" numZoomLevels="20" style="{Style.getDefaultLineStyle()}"/>
Use several layers in one single map
Example : add an OSM base layer and a KML layer
The KML layer is not set as a base layer so
that it will come over the OSM layer.
On the example, Mapnik is the baselayer, and
the KML layer is visible thanks to the 3 markers.
12
Security OpenScales allows you to use security manager to
access one or more layers. Here is an example with a layer from the French National
Geographic Institute (IGN) portal (http://geoportail.fr). It uses an OGC protocol: Wep Map Service – Cached layer
<os:IGNGeoRMSecurity key="xxxxxxxx" layers="ORTHOPHOTOS" proxy="http://openscales.org/proxy.php?url="/>
<os:WMSC id="ortho" name="ORTHOPHOTOS" url="http://wxs.ign.fr/geoportail/wmsc" layers="ORTHOIMAGERY.ORTHOPHOTOS" format="image/jpeg" isBaseLayer="true"
resolutions="39135.75,19567.875,9783.9375,4891.96875,2445.984375,2048,1024,512,256,128,64,32,16,8,4,2,1,0.5,0.25,0.125,0.0625" projection="IGNF:GEOPORTALFXX" minZoomLevel="5" maxZoomLevel="17" maxExtent="-1048576,3670016,2097152,6815744" exceptions="text/xml"/>
13
Add the coordinates of the mouse position
Coordinates are displayed in the specific system of projection that you want to use. In the following example (add it into the <os:Map> tag) the projection used is the EPSG:4326 (http://spatialreference.org/ref/epsg/4326/).
x and y are the position (in pixel) where
the coordinates will be displayed on the map.
<os:MousePosition x="10" y="{fxmap.height-20}" displayProjection="EPSG:4326"/>
Fxmap.height
14
Add mouse controls
Several mouse controls are available:zoom using mouse wheel (WheelHandler)various controls with the click (ClickHandler)Move the map using drag and drop
(DragHandler)…
This will allow you to move the map, clic, zoom with the mouse wheel. It should be inserted into <os:Map> tag. <os:DragHandler/> <os:ClickHandler/> <os:WheelHandler/>
15
Add a control panel To display a panel, you have to insert the
following code after the </os:Map> tag. This example adds a panel containing a pan
component, a zoom component and a zoom box component.
Warning : this requires a small Action Script code. See the following slide.
<os:ControlPanel x="110" y="110" width="140" title="Navigation"> <os:PanComponent map="{map}"/> <mx:HBox width="100%" paddingLeft="5" paddingRight="5"> <os:ZoomComponent map="{map}"/> <mx:Spacer width="100%"/> <os:ZoomBoxComponent map="{map}" width="32" height="32"/> </mx:HBox> </os:ControlPanel>
width
16
Add the needed Action Script code for the control panel After the </os:ControlPanel> tag, add:
We find: fxmap: the identifier of the FxMap seen when you create a map The initialization of map for the control panel
You also have to specify that initMap() have to be called when the application is ready:
<fx:Script> <![CDATA[ import org.openscales.core.Map; [Bindable] private var map:Map = null; private function initMap():void { map = fxmap.map; } ]]> </fx:Script>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:os="http://openscales.org" creationComplete="initMap();">
<os:Map id="fxmap"
<os:PanComponent map="{map}"/>
17
How to launch the Flash application
Click on the icon of your flash builder environment to launch your application.
In the Run as window, choose Web application or Desktop
Application, depending on
what you choose when
you configured your project.
18
Here you are
Right now, you’re able to start building your OpenScales maps.
Find sources on: http://www.openscales.org/tutorials/