OpenScales是一个优秀的前台地图框架,可以用它开发各个版本的地图程序,她是基于ActionScript 3 和 Flex写的,能够支持各种标准的地图服务,比如WMS、WFS、TMS、OSM等。
搭建OpenScales首先要它的包,可以在openscales官网下载,我使用的是1.2.1的版本
步骤:
1.创建Flex项目,并把相应的openscales包放在libs里面
2.如果用自己的图层先将geoserver开好,服务器配置好
3.编写代码
<?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:os="http://openscales.org"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="initMap()">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<!--创建一个地图-->
<os:Map id="fxmap" width="100%"
height="100%" zoom="5" center="103,30">
<!--加载图层-->
<os:Mapnik name="Mapnik"/>
<!--使用自己的GEOServer图层-->
<!--<os:WMS name="Germany"
url="http://localhost:8080/geoserver/wms?request=GetMap"
layers="China_back_sc_fb"
format="image/png" />-->
<!--用来显示当前鼠标所在的坐标-->
<os:MousePosition x="10" y="{fxmap.height-20}" displayProjection="EPSG:4326"/>
<!--使用该标签才可以拖动地图-->
<os:DragHandler/>
<os:ClickHandler/>
<!--使用滚轴调到zoom-->
<os:WheelHandler/>
<!--导航工具条,移动地图,缩放地图-->
<os:PanZoom map="{fxmap.map}" x="{fxmap.x+10}" y="{fxmap.y+10}"/>
<!--比例尺-->
<os:ScaleLine x="10" y="{height-90}"/>
<!--图层管理器,可以查看当前有哪些图层-->
<os:ControlPanel x="{width-235}" y="10" width="215" title="图层管理器">
<os:LayerManager/>
</os:ControlPanel>
<!--鹰眼-->
<s:TitleWindow id="miniMapPanel" x="{width-miniMapPanel.width-10}"
y="{height-miniMapPanel.height-10}" width="260" height="200" close="miniMapPanel_closeHandler(event)" title="鹰眼图">
<os:OverviewMap id="miniMap" width="100%" height="100%" map="{map}" extentColor="0xFF3300">
<!--<os:CycleMap name="cyclemap" proxy="http://openscales.org/proxy.php?url="/>-->
</os:OverviewMap>
</s:TitleWindow>
</os:Map>
<fx:Script>
<![CDATA[
import mx.events.CloseEvent;
import org.openscales.core.Map;
[Bindable]
private var map:Map = null;
private function initMap():void{
map=fxmap.map;
}
protected function miniMapPanel_closeHandler(event:CloseEvent):void
{
}
]]>
</fx:Script>
</s:Application>
![](https://img-my.csdn.net/uploads/201212/27/1356596386_3927.png)