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

Navigation

• index
• OpenScales 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.