在上一步
,
我们已经基本学会如何连接API,显示地图,然后是放大,缩小这几个地图的最基本功能,不过今天我们要做的并不是继续深入进去,而是找到更加简单的方法来
实现昨天做过的例子,但是我为什么不在一开始就讲简单的方式呢,首先我需要让大家了解里面的参数到底是怎么运作的,了解后,我们就偷点懒。而且这种做法对
下一步教程起到了承前启后的作用。先来看已经完成的DEMO:
你看除了版面有点变化,组件放置的位置有变化,其他一切都没有多大的变化,但是我偷偷告诉你,代码变的更加简单了,因为其实在API里,开发者已经用帮我们做完了我们应该做的事,我们只需要更加简单的去应用。
看代码:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="400"
xmlns:maps="com.earthplayer.maps.*"
creationComplete="init()" backgroundGradientColors="[#ffffff, #ffffff]" layout="absolute">
<mx:Script>
<![CDATA[
import com.earthplayer.maps.MapUpdateCenterEvent;
import com.earthplayer.maps.MapController;
public function init():void{
maps.setCenter(new Point(116.37819,39.92374),5);
}
private function mouseHandler(event:MouseEvent):void{
maps.receiveMouseEvent(event);
}
private function Big():void{
if(zoom.value < 17){
zoom.value += 1;
}
showMap();
}
private function Small():void{
if(zoom.value > 5){
zoom.value -= 1;
}
showMap();
}
private function showMap():void{
maps.setCenter(maps.controller.centerLngLat,zoom.value);
}
]]>
</mx:Script>
<maps:MapLive id="maps" width="100%" height="100%" x="0" y="0"/>
<mx:Canvas width="100%" height="100%"
mouseMove="mouseHandler(event)"
mouseDown="mouseHandler(event)"
mouseUp="mouseHandler(event)"
mouseOut="mouseHandler(event)"/>
<mx:Button id="zoomBig" label="+" click="Big()" y="13" width="20" height="20" left="10" toolTip="放大"/>
<mx:VSlider x="9" y="42" snapInterval="1"
liveDragging="true" change="showMap()" tickInterval="1" id="zoom" minimum="5" maximum="17" value="5" height="100"/>
<mx:Button id="zoomSmall" label="-" click="Small()" width="20" height="20" y="148" left="10" toolTip="缩小"/>
</mx:Application>
代码分析:
你可以清楚的看到,我不再监听地图的UPDATECENTER事件,而是
直接再地图上方加一个空的CANVAS,然后监听CANVAS上的鼠标事件,然后再调用mouseHandler构造函数,让地图接受事件。注意哦,我们
这里可以在鼠标样式上做个小花样,比如按下去的样式,移动的样式等等。这就是CANVAS接受事件的好处,而且在下一步的多个地图切换下,可以让多个地图
同步接受当前的一些事件,非常好。
在显示地图的构造函数里,我们更加简单的直接调用内部命令maps.controller.centerLngLat
。而不是自己重新换算,方便了很多。 |
分享到:
相关推荐
FLEX地图应用教程对于flex地图开发的初学者很有用。
整套Flex地图教程,都整合成了PPT,讲解详细,易懂
flex地图应用开发教程,地图玩家SWC API,flex地图开发项目源代码
详细讲解了利用earthplayerlib和google、live地图、51地图开发flex地图应用的过程。包含了许多细节和技巧。 教程整理成ppt形式。
FLEX地图应用教程,讲述了如何使用百度地图构建webGIS应用程序。
FLEX中地图的应用 地球物理地图FLEX中地图的应用 地球物理地图
flash和flex地图API以及相关word文档式教程 文档是介绍如何在flex使用
Flex 4 ColumnChart 图表使用实例ColumnChart_RIA前线-Flex富应用、Flex中文教程、Flex实例源码 Flex实现ColumnChart柱图为圆角矩形的itemRenderer - 代码分享 - 开源中国社区 flex 动态生成柱状图,折线图_IT空间_...
crosshairVisible:true/false 是否在地图的中心显示十字。doubleClickZoomEnabled:true/false 是否开启双击地图放大的功能。keyboardNavigationEnabled :true/false 是否开启键盘进行地图导航放大缩小的功能。...
使用 arcgis api for flex 可以达到下面的效果 1,显示你的地图数据并可以和数据交互 2,在服务器上执行空间处理模型并显示结果 3,基于ArcGIS Online 上的底图显示你自己的数据 4,根据属性或者位置查找你的数据并...