OpenScales入门教程:第二节 : 创建第一张地图

Navigation

indexOpenScales v1.2 documentation »

第二节 : 创建第一张地图¶

准备工作¶

你需要把第一节给读懂了再开始本章.

例子你能看到什么呢?¶

显示地图的代码¶

<?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" creationComplete="initMap();"> <fx:Declarations> </fx:Declarations> <os:Map id="fxmap" width="500" height="600" zoom="11" center="4.78783,45.68800" x="60" y="50"> <os:Mapnik name="Mapnik" proxy="http://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:PanZoom map="{map}" x="{fxmap.x+10}" y="{fxmap.y+10}"/> <fx:Script> <![CDATA[ import org.openscales.core.Map; import org.openscales.core.feature.PointFeature; import org.openscales.core.layer.FeatureLayer; import org.openscales.core.style.Style; import org.openscales.geometry.Point; import org.openscales.proj4as.ProjProjection; import org.openscales.core.feature.CustomMarker; [Bindable] private var map:Map = null; private function initMap():void { map = fxmap.map; } ]]> </fx:Script> </s:Application>

首先应该编写.mxml文件¶

<?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>

然后增加一个命名空间¶

<?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>

这样,"os"的命名空间就与OpenScales-fx库连接成功了.

然后创建一个地图对象¶

下面的代码将增加一个地图视图.

<os:Map id="fxmap"

width="500"

height="600"

zoom="12"

center="4.83212,45.75781"

x="100"

y="100">

</os:Map>

id 是唯一标示,这儿我们命名为fxmap. width 和 height限制地图的大小. zoom 设置地图开始的缩放等级. center 代表地图居中的坐标.应该与基本层有相同的投影. x 和 y 决定了地图空间在应用程序的位置,如下图所示.

增加一个开放的街道地图(OSM)层¶

街道地图的实例.只需要在  <os:Map>  标签中增加代码.

os:Mapnik name="base"        proxy="http://www.openscales.org/proxy.php?url=" />

其他的街道层还有 : Cycle Map, Osmarender 都可以在地图作为OSM数据,只是他们有其他的渲染规则.

 

<os:Osmarender name="base" proxy="http://www.openscales.org/proxy.php?url=" />

proxy 参数不是必须的,但是可以针对OSM服务器可以阻止安全错误,不合法的跨域操作等.

OGC层的范例: Web Feature Service (WFS)¶

OGC(开放地理空间联盟)定义了类似WFS,WMS等多个协议

你在OpenScales-fx-example中可以找到很多关于OGC层的例子.下面是这个例子提供了网络要素服务作为基本层。你可以用下面的代码替换前两行的代码:

<os:WFS name="Topp States (WFS)" url="http://openscales.org/geoserver/wfs" typename="topp:states" projection="EPSG:4326" version="1.0.0" style="{Style.getDefaultSurfaceStyle()}"/>

注意:想更好的显示这个实例,你需要改变地图中心坐标参数并将缩放等级更改为3.

zoom="3" center="-100.10929,40.48437"

在一个地图中使用多个层¶

实例:增加一个OSM层和一个KML层

<os:Mapnik name="Mapnik" 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()}"/>

KML层没有设置为基本层,所以他讲在OSM层上面.在这个例子里,Mapnik是一个基本层,我们能够看见KML层应该感谢那三个Marker.

安全性:¶

OpenScales允许我们使用安全管理进入一个或者多个层,下面这个实例是关于 法国国家地理学会（IGN的）的门户(http://geoportail.fr).他使用OGC协议:WEP的地图服务-缓存层。

<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" 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"/>

注意:为了更好的观赏这个范例,请如下修改中心位置并将缩放等级改为5.

zoom="5" center="-0.14908,46.99964"

增加显示鼠标所在经纬度¶

下面将显示地图对应的投影的坐标.下面这个例子(增加它在 标签内)这个投影使用的是 EPSG:4326 (http://spatialreference.org/ref/epsg/4326/). x 和 y 暂时地图的像素坐标.

<os:MousePosition x="10" y="{fxmap.height-20}" displayProjection="EPSG:4326"/>

增加鼠标控制¶

以下是可用的鼠标事件:

<os:DragHandler/> <os:ClickHandler/> <os:WheelHandler/> 鼠标滚轮缩放 (WheelHandler) 点击事件 (ClickHandler) 鼠标移动或者拖放事件 (DragHandler)

下面将可以允许你移动地图,点击地图和使用鼠标滚轮缩放地图,把下面的代码放入 标签内即可.后增加下面的代码即可显示这个面板.

增加导航工具¶

你可以在

下面这个实例将增加一个平移工具和缩放条.

<os:PanZoom map="{map}" x="{fxmap.x+10}" y="{fxmap.y+10}"/>

特别注意 :你需要增加一段action 脚本代码:

自定义导航工具脚本¶

在 标签后增加下面代码:

<![CDATA[ import org.openscales.core.Map; [Bindable] private var map:Map = null; private function initMap():void { map = fxmap.map; } ]]>

通过上面的例子我们可以看到:

fxmap: 当你创建地图时标示为Fxmap的地图 初始地图的导航工具

应用程序需要你指定 initMap()函数 :

<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();">

如何启动 Flash 应用程序¶

点击Flash Builder中的类似下面的图标.

根据你的工程属性,在启动窗口中,选择Web程序 或是桌面程序.

结束语¶

现在你已经能够搭建OpenScales地图了!

Table Of Contents

Tutorial 2 : Create your first map Prerequisites What do you obtain with this tutorial? Code to obtain the map The .mxml file at the beginning Add a namespace Create a map Add an Open Street Map (OSM) layer Example with an OGC layer: Web Feature Service (WFS) Use several layers in one single map Security Add the coordinates of the mouse position Add mouse controls Add navigation tools Add the needed Action Script code for the navigation tools How to launch the Flash application Here you are

This Page

Show Source

Quick search

Enter search terms or a module, class or function name.

Navigation

index OpenScales v1.2 documentation »

© Copyright 2010, openscales.org. Created using Sphinx 1.0.4.