Openscales 入门 (Flex开源gis首选)

  简单介绍  

    OpenScales是一个优秀的前台地图框架,开发者可以用来开发各种网络版、手机版和桌面版的地图程序。

 

  她是基于ActionSctip 3 和 Flex写的,能够支持各种标准的地图服务,比如WMS、WFS、TMS、OSM等。

 

  她是开源的、免费的程序,是基于LGPL协议开源协议的。

 

  她是09年才出道的一个程序,从一开始就极受欢迎,因为与 Google Map Flex API 和 ArcGIS Flex API 等其他基于FLEX的前台地图框架相比,这是开源的,这意味着无限的潜力。

 

OpenScales 提供的主要功能主要有:

能够支持多种图层。

  她能够集成各种基于国际标准的地图服务,这些标准主要是OGC(开放性地图基金会)制定的。因为她对国际标准的高度支持,使得她可以顺利的兼容各种地图服务软件,比如 ArcServer , IServer , GeoServer , MapServer 等。只要你的地图服务软件有提供国际标准,就可以被集成到OpenScales。

 

  如果你没有部署庞大的地图后台服务,也可以用她集成一些轻量级的地图数据。OpenScales也可以在轻量级的地图程序中使用,她可以用一个小小的KML文件,一张完整的电子扫描图片,一包用PhotoShop cs4中zoomify切出来的瓦片地图等。

强大的矢量描绘

  利用FlashPlayer已有的功能,OpenScales 可以提供强大的矢量数据描绘、实时编辑和样式设置。支持的矢量数据格式有点、线、面、多点、多线、多面。

 

  用户可以直接浏览器上通过点击、拖曳来完成专业的地图编辑功能,比如新规划一条马路,新部署一些GPS监测站等,监控车辆的实时状态等。

内置的地图控件

  就像Google Map所提供的那样,地图缩放、拖曳、鹰眼图、比例尺标注这些功能OpenScales都有。而OpenScales要比Google做的多一点,她还提供经纬度跟踪、图层切换、地图编辑等小工具。

多平台支持

  由于OpenScales是基于FlashPlayer的,因此OpenScales可以运行在各个浏览器上(因为浏览器都支持Flash);如果你用户的电脑上安装有Adobe AIR,则OpenScales开发出来的桌面程序也能用上;如果你用户的手机支持Flash,那Mobile程序也可以用OpenScales

 

入门案例

对于开源WebGIS :我首选GeoServer+PostGIS+Openscales

 

 

下面开始Openscales1.2应用的简单入门

 

FlexApp.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"
      width="100%" height="100%"
      xmlns:os="http://openscales.org"
      creationComplete="initMap();" resize="resizeMap()">
 <fx:Style source="FlexApp.css"/>

 <fx:Declarations>
 </fx:Declarations>
 
 <os:Map id="fxmap" width="100%" height="100%" zoom="5" center="4.833,45.767">
  <os:WMSC name="Nasa" url="http://openscales.org/geoserver/gwc/service/wms" layers="bluemarble"
   format="image/jpeg" maxExtent="-180,-90,180,90"/>
  
  <os:WheelHandler/>
  <!--图层管理器 -->
  <os:ControlPanel title="图层管理器" x="{width - 225}" y="10" width="215">
   <os:LayerManager />
  </os:ControlPanel>
  <!-- 鹰眼-->
  <s:Panel id="miniMapPanel" title="Overview map" x="{width-miniMapPanel.width-10}" y="{height-miniMapPanel.height-10}">
   <s:layout>
    <s:HorizontalLayout/>
   </s:layout>
   <os:OverviewMap id="miniMap" width="100%" height="100%" extentColor="0xFF3300" newExtentColor="0x00FF33">
    <os:CycleMap name="cyclemap" proxy="http://openscales.org/proxy.php?url="/>
   </os:OverviewMap>
  </s:Panel>
  <!-- 比例尺 -->
  <os:ScaleLine x="{10}" y="{height-80}" />

  <!-- 显示鼠标坐标 -->
  <os:MousePosition x="{fxmap.width / 2}"
        y="{fxmap.height-20}"
        displayProjection="EPSG:4326"/>
  <!-- 导航控件1 -->
  <os:PanZoom map="{map}"
     x="{fxmap.x+10}"
     y="{fxmap.y+10}" width="112" height="126"/>
 </os:Map>
 
 <!--导航控件2
 <os:ControlPanel x="10" y="200" width="140" title="Navigation2">
  <os:Pan map="{map}"/>
  <mx:HBox width="100%" paddingLeft="5" paddingRight="5">
   <os:Zoom map="{map}"/>
   <mx:Spacer width="100%" />
   <os:ZoomBox map="{map}" width="32" height="32"/>
  </mx:HBox>
 </os:ControlPanel>
 -->
 
 <!-- 工具栏 -->
 <os:ControlPanel  x="100" height="57" y="10" title="工具栏">
  <os:layout>
   <s:HorizontalLayout/>
  </os:layout>
  <mx:Button id="zoomInBtn" click="doMap('zoomin')" label="放大"/>
  <mx:Button id="zoomOutBtn" click="doMap('zoomout')" label="缩小"/>
  <mx:Button id="fullExtentBtn" click="{map.zoomToMaxExtent()}" label="全屏"/>
  <mx:Button id="panBtn" click="doMap('pan')" label="漫游"/>
  <mx:Button id="prevExtentBtn" click="{navToolbar.zoomToPrevExtent()}" label="前一视图"/>
  <mx:Button id="nextExtentBtn" click="{navToolbar.zoomToNextExtent()}" label="后一视图"/>
 </os:ControlPanel>

 
 <fx:Script>
  <![CDATA[
   import org.openscales.core.Map;
   import org.openscales.core.Trace;
   import org.openscales.core.feature.Marker;
   import org.openscales.core.feature.CustomMarker;
   import org.openscales.core.feature.PointFeature;
   import org.openscales.core.layer.FeatureLayer;
   import org.openscales.core.popup.Anchored;
   import org.openscales.core.style.Style;
   import org.openscales.geometry.Point;
   import org.openscales.geometry.basetypes.Location;
   import org.openscales.proj4as.ProjProjection;
   import toolbars.Navigation;
   
   [Bindable] private var map:Map = null;
   public var markLyon:Marker;
   [Bindable] public var displayTrace:Boolean=false;
   [Bindable] public var displayFirebugTrace:Boolean=false;
   private var navToolbar:Navigation=new Navigation();
   
   private function initMap():void {
    Trace.useFireBugConsole=displayFirebugTrace;
    map = fxmap.map;
    this.navToolbar.map=map;
    
    var markers:FeatureLayer = new FeatureLayer("customMarkerLayer");
    //添加默认标记
    markers.projection = new ProjProjection("EPSG:4326");
    markers.generateResolutions(19);
    markers.style = Style.getDefaultPointStyle();
    var marker:PointFeature = PointFeature.createPointFeature(new Location(-94.49783,40.51800));
    markers.addFeature(marker);
    
    //markers.addFeature(CustomMarker.createUrlBasedMarker("http://earth.google.com/intl/en_uk/outreach/images/add_placemark.png",new Location(-94.49783,40.51800)));

    //添加标记,绑定事件弹出气泡
    var lonlat:Location = new Location(-95.49783,42.51800, ProjProjection.getProjProjection("EPSG:4326"));
    markLyon = new Marker(new org.openscales.geometry.Point(lonlat.lon, lonlat.lat), {popupContentHTML: "This is a popup<br /><b>Bold text</b><br /><u>Link to <a href=\"http://openscales.org\" target=\"_new\">OpenScales</a></u>"});
    markLyon.addEventListener(MouseEvent.CLICK, showPopup);
    markers.addFeature(markLyon);
    
    map.addLayer(markers);
    
    var vect:FeatureLayer = new FeatureLayer("Reprojected vector");
    vect.projection = ProjProjection.getProjProjection("EPSG:4326");
    vect.style = Style.getDefaultPointStyle();
    var p:org.openscales.geometry.Point = new org.openscales.geometry.Point(lonlat.lon, lonlat.lat);
    vect.generateResolutions(19);
    vect.addFeature(new PointFeature(p));
    map.addLayer(vect);
   }
   
   private function doMap(tool:String):void{
    navToolbar.activate(tool);
   }
   
   private function resizeMap():void {
    miniMap.height = 0.2 * this.height;
    miniMap.width = this.width * miniMap.height / this.height;
   }
   
   private function showPopup(e:MouseEvent):void {
    var popup:Anchored = new Anchored();
    popup.feature = markLyon;
    map.addPopup(popup, true);
   }
   
  ]]>
 </fx:Script>
</s:Application>

效果如图:

本例实现了地图的基本功能包括:导航栏、工具栏、图层管理器、鹰眼、比例尺、鼠标坐标显示、标注气泡显示等。

posted @ 2012-03-23 17:34  opengis2012  Views(4416)  Comments(6Edit  收藏  举报
Using GIS to Change the World! www.gis-open-source-ogc.com