flex4.6 + openscales2.2 + geoserver2.02基本地图显示（坐标定位、初始比例、空间数据库配置及加载）

标题：flex4.6 + openscales2.2 + geoserver2.02基本地图显示（坐标定位、初始比例、空间数据库配置及加载）

要求：要具备在flex中能配置好openscale运行环境。

接下来就直接上代码了，flex中的主程序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"
               xmlns:gis="http://openscales.org"
               creationComplete="initmap()"
               >
    
    <fx:Declarations>
    </fx:Declarations>
    
    <gis:Map
                id="map1"
                width="100%"
                height="100%"
                >
        <gis:WMS
                id="wms1"
                name="Topp States (WmS)"
                url="http://localhost:8080/geoserver/wms"
            
                layers="topp:states"
                projection="EPSG:4326"
                version="1.0.0"
                />
        <gis:Zoom  />
        <gis:WheelHandler />
        <gis:DragHandler />
    </gis:Map>

    <fx:Script>
        <![CDATA[
            import flash.trace.Trace;
            
            import org.openscales.geometry.basetypes.Bounds;
            import org.openscales.geometry.basetypes.Location;
            
            function initmap()
            {
                loadmap_usa();
                //loadmap_postgis();
            }
            
            //加载geoserver自带的地图。美国的州地图。
            function loadmap_usa()
            {
                //设置地图的中心点
                //...通过geoserver的预览图层页面观察，找到中心点。
                var lo:Location=new Location(-98.1,40.8);
                map1.map.center=lo;
                //修改地图加载后的默认显示比例（通过范围控制）。
                //...通过geoserver的浏览页面观察(你想显示图层范围)的左下，右上坐标点
                var bds:Bounds=new Bounds(-123.8,26.33,-66.96,48.8,"EPSG:4326");
                map1.map.zoomToExtent(bds);
                //加载图层
                //...图层名称格式为：(geoserver空间名:图层名)。
                //...也可以是复合图层，格式为：复合图层名称(图层组名称)。
                wms1.layers="topp:states";  //在gegoserver预览图层时，可以看到该名称。
                wms1.url="http://localhost:8080/geoserver/wms";  //wms服务地址
                wms1.projection="EPSG:4326";  //坐标系
                wms1.version="1.0.0";            
            }
            
            //加载空间地图。
            //flex中加载空间数据库地图方法与加载美国地图没有多大区别，只是geoserver中的配置有较大不同。
            //...空间地图配置方法可参考如下：
            //...A.自己导入到postgis数据库中的两个表。
            //......利用geoserver的shp2pgsql将shp文件生成sql文件，
            //......然后到postgis数据库中运行，将shp导入到postgis，有些表有错，最好导入示例图层。
            //......如nyc下的poi和tiger_roads图层。
            //...B.然后在geoserver配置界面设置数据源
            //...1.geoserver workspace:  nyc  http://localhost:8080/nyc
            //...2.geoserver store, data source:  ds_nyc   dbtype:postgis  host:localhost  port:5432  
            //......database:postgis  user:postgres  pwd:admin
            //...3.geoserver layer, 设置poi,tiger_roads图层的范围等信息。可以利用预览图层查看坐标。
            //...4.layer group，建立nyc_tt图层组，添加poi,tiger_roads两个图层，然后预览图层组。
            //...5.预览没有问题，将来在felx中就可以直接调用nyc_tt复合图层了。
            function loadmap_postgis()
            {
                //设置地图的中心点
                //...通过geoserver的预览图层页面观察，找到中心点。
                var lo:Location=new Location(-73.97,40.77);
                map1.map.center=lo;
                //修改地图加载后的默认显示比例（通过范围控制）。
                //...通过geoserver的浏览页面观察(你想显示图层范围)的左下，右上坐标点
                var bds:Bounds=new Bounds(-74.04,40.68,-73.87,40.88,"EPSG:4326");
                map1.map.zoomToExtent(bds);
                //加载图层
                //...图层名称格式为：(geoserver空间名:图层名)。
                //...也可以是复合图层，格式为：复合图层名称(图层组名称)。
                wms1.layers="nyc_tt";  //图层
                wms1.url="http://localhost:8080/geoserver/wms";  //wms服务地址
                wms1.projection="EPSG:4326";  //坐标系
                wms1.version="1.0.0";            
            }            
        ]]>
    </fx:Script>
    

</s:Application>

效果图片：