标题: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>
效果图片: