簡單介紹
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>
效果如圖：
本例實現了地圖的基本功能包括：導航欄、工具欄、圖層管理器、鷹眼、比例尺、鼠標坐標顯示、標注氣泡顯示等。