继续昨天的教程,不过这里要更正下,今天的方法会跟昨天有所不同,今天将引入MapCanvas.因为在切换地图的时候我用昨天的方法,同时放置三个,就
会出现问题.为什么呢?因为每种地图的图片大小是不同,坐标点也许一样,由于图片不一致,可能造成误差.回到正题,在开始之前,我们温习下ViewStack
与LinkBar
合起来的用法.很简单,先上DEMO,然后再看代码.
代码:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="200" height="200">
<mx:Script>
<![CDATA[
private function showMap():void{
look.text = stack.selectedChild.id+ "切换了"
}
]]>
</mx:Script>
<mx:ViewStack valueCommit="showMap()" id="stack" width="100%" height="100%">
<mx:Canvas label="第一个" id="no1" backgroundColor="#ff0000" width="100%" height="100%"/>
<mx:Canvas label="第二个" id="no2" backgroundColor="#00ff00" width="100%" height="100%"/>
</mx:ViewStack>
<mx:LinkBar dataProvider="stack"/>
<mx:Label x="29" y="98" id="look" width="127" height="21"/>
</mx:Application>
分析:
valueCommit是ViewStack的一个方法,意思就是在ViewStack
切换的时候就执行.那么我们下面在地图切换的时候就能用到了,比如一开始我们把3个地图都放在ViewStack下,只要切换,就显示该地图,唯一需要注
意的是,各自的地图中心点,及放大倍数,这个需要能同步.继续地图教程.以下是完成DEMO
代码:
<?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.MapCanvas;
import com.earthplayer.maps.MapUpdateCenterEvent;
import com.earthplayer.maps.MapController;
private var currentLngLat:Point = new Point(116.37819,39.92374);
public function init():void{
showMap();
//可以注意到我没有再在地图上搞一个CANVAS来监听鼠标事件,而是在ViewStack监听UPDATECENTER
//这跟我第一部分差不多
mapStack.addEventListener(MapUpdateCenterEvent.UPDATECENTER,updateCenter)
}
private function updateCenter(event:MapUpdateCenterEvent):void{
//然后当鼠标有移动后,Point不断的更新内部变量
currentLngLat.x = event.lng;
currentLngLat.y = event.lat;
}
private function changZoom(adjest:int):void{
//这里重新做了下,更加的简洁
var z:int = zoom.value += adjest;
if(z>17){
z = 17;
}else if(z<5){
z=5
}
zoom.value = z;
showMap();
}
private function showMap():void{
//这里重点来了,MapCanvas重新出台,其实MapCanvas就是MAP的地图容器
(mapStack.selectedChild as MapCanvas).setCenter(currentLngLat,zoom.value);
}
]]>
</mx:Script>
<!-- 下面的框架就简单了 -->
<mx:ViewStack valueCommit="showMap()" id="mapStack" width="100%" height="100%" visible="true" x="0" y="0">
<maps:MapLive label="LIVE地图" width="100%" height="100%" visible="true" x="0" y="0"/>
<maps:Map51ditu label="51地图" width="100%" height="100%" visible="false" x="0" y="0"/>
<maps:MapGoogle label="Google地图" width="100%" height="100%" visible="false" x="0" y="0"/>
</mx:ViewStack>
<mx:Button id="zoomBig" label="+" click="changZoom(1)" 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="changZoom(-1)" width="20" height="20" y="148" left="10" toolTip="缩小"/>
<mx:Canvas width="214" height="25" x="94" y="370" backgroundColor="#ff0000" backgroundAlpha=".5">
<mx:LinkBar dataProvider="mapStack" />
</mx:Canvas>
</mx:Application>
感觉不错,教程基本到这里算告一个段落了.整体的体现基本算出来了,不过下一部分就是加标签了,这个很重要的,是可以应用到非常实用的方面 |
分享到:
相关推荐
FLEX地图应用教程主要面向初学者,旨在介绍如何使用FLEX进行地图开发,并在地图上实现各种功能。本教程选择The Earthplayer API作为示例,该API支持LIVE、GOOGLE和51地图,提供了一个相对完善的解决方案。尽管The ...
通过这个Flex地图应用教程,开发者将全面掌握如何使用Flex技术和地图API来创建功能丰富的地图应用,无论是简单的信息展示还是复杂的地理数据分析,都能得心应手。教程的PPT形式有利于直观学习,便于理解和实践。
【Flex地图应用教程】这篇教程主要讲解如何使用Flex技术结合earthplayerlib库来开发地图应用,涉及到了Google、Live和51地图等多个平台的集成。教程以PPT的形式呈现,适合初学者学习。 首先,Flex是一种基于...
在本教程中,我们将探讨如何使用Adobe Flex(FLEX)框架来创建地图应用程序,特别是借助The Earthplayer API来实现对LIVE、GOOGLE和51地图的支持。首先,我们需要了解Flex是一个基于MXML和ActionScript的开发平台,...
在本教程中,我们将深入探讨Flex地图应用的开发,包括如何使用地图玩家SWC API以及如何构建相关的项目源代码。Flex是一种基于ActionScript 3的开源框架,常用于创建富互联网应用程序(RIA)。在Flex中集成地图功能...
Flex地图编辑技术主要涉及到使用Adobe Flex这一开源框架与Esri的ArcGIS Server相结合,实现对地理信息系统的交互式编辑功能。在GIS应用中,地图编辑是核心部分,它允许用户创建、修改和管理地理空间数据。下面将详细...
Flex3是Adobe公司开发的一款基于ActionScript 3.0的富互联网应用(RIA)开发工具,主要用于构建交互式的、...同时,这也为你提供了扩展和自定义地图应用的可能性,比如添加更多自定义标记、实现复杂的地图动画效果等。
FLEX地图应用教程,讲述了如何使用百度地图构建webGIS应用程序。
Flex开源3D地图是一种基于Adobe Flex技术的三维地图应用程序,它允许开发者构建交互式的、具有丰富视觉效果的3D地理信息系统。Flex是一个用于构建富互联网应用程序(RIA)的开源框架,它基于ActionScript编程语言和...
本教程专注于使用Flash和Flex来开发地图应用,这对于地理信息系统(GIS)和在线地图服务的开发者来说是极其有价值的。 首先,Flash是一种由Adobe公司开发的交互式矢量图形和多媒体平台。它广泛用于创建网页动画、...