OpenScales+Geoserver搭建轻量级WebGIS

Geoserver的安装方式请看我的另外一篇文章《Ubuntu Server 9.10 安装 Geoserver2.0 》

下面讲下怎么使用OpenScales

1、下载OpenScales包

2、建立Flex工程，将下载的swc文件复制到libs目录下

3、Flex应用程序代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="absolute">
    <mx:Canvas xmlns="*"
               xmlns:mx="http://www.adobe.com/2006/mxml"
               xmlns:os="http://openscales.org"
               creationComplete="initMap();"
               width="100%"
               height="100%">
        <os:Map id="fxmap"
                height="100%"
                width="100%">
            <os:WMS name="Germany"
                    url="http://172.16.1.142:8180/geoserver/wms?request=GetMap"
                    layers="nurc:Img_Sample"
                    width="660"
                    height="330"
                    format="image/jpeg"
                    isBaseLayer="true"/>

            <os:Spinner id="spinner"
                        x="{width / 2}"
                        y="{height / 2}"/>
            <os:MousePosition x="10"
                              y="{height-20}"
                              displayProjection="EPSG:4326"/>

            <os:DragHandler/>
            <os:WheelHandler/>

        </os:Map>
        <os:ControlPanel x="10"
                         y="10"
                         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>

        <mx:Script>
            <![CDATA[
                import org.openscales.core.Map;
                import org.openscales.core.Trace;

                [Bindable]
                private var map:Map=null;
                [Bindable]
                public var displayTrace:Boolean=false;
                [Bindable]
                public var displayFirebugTrace:Boolean=false;

                private function initMap():void
                {
                    Trace.useFireBugConsole=displayFirebugTrace;
                    map=fxmap.map;
                }
            ]]>
        </mx:Script>

    </mx:Canvas>

</mx:Application>
4、运行即可看到效果