`
aijun980204
  • 浏览: 99369 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

FLEX地图应用教程之三

    博客分类:
  • flex
阅读更多

继续昨天的教程,不过这里要更正下,今天的方法会跟昨天有所不同,今天将引入MapCanvas.因为在切换地图的时候我用昨天的方法,同时放置三个,就 会出现问题.为什么呢?因为每种地图的图片大小是不同,坐标点也许一样,由于图片不一致,可能造成误差.回到正题,在开始之前,我们温习下ViewStackLinkBar 合起来的用法.很简单,先上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>

      感觉不错,教程基本到这里算告一个段落了.整体的体现基本算出来了,不过下一部分就是加标签了,这个很重要的,是可以应用到非常实用的方面
分享到:
评论
1 楼 lgdlgd 2010-07-28  
三种地图中GOOGLE地图显示不出来

相关推荐

    FLEX地图应用教程

    FLEX地图应用教程主要面向初学者,旨在介绍如何使用FLEX进行地图开发,并在地图上实现各种功能。本教程选择The Earthplayer API作为示例,该API支持LIVE、GOOGLE和51地图,提供了一个相对完善的解决方案。尽管The ...

    flex地图应用教程

    通过这个Flex地图应用教程,开发者将全面掌握如何使用Flex技术和地图API来创建功能丰富的地图应用,无论是简单的信息展示还是复杂的地理数据分析,都能得心应手。教程的PPT形式有利于直观学习,便于理解和实践。

    Flex地图教程 ppt

    【Flex地图应用教程】这篇教程主要讲解如何使用Flex技术结合earthplayerlib库来开发地图应用,涉及到了Google、Live和51地图等多个平台的集成。教程以PPT的形式呈现,适合初学者学习。 首先,Flex是一种基于...

    教你怎样用FLEX做地图的教程

    在本教程中,我们将探讨如何使用Adobe Flex(FLEX)框架来创建地图应用程序,特别是借助The Earthplayer API来实现对LIVE、GOOGLE和51地图的支持。首先,我们需要了解Flex是一个基于MXML和ActionScript的开发平台,...

    flex地图应用开发教程及项目源代码

    在本教程中,我们将深入探讨Flex地图应用的开发,包括如何使用地图玩家SWC API以及如何构建相关的项目源代码。Flex是一种基于ActionScript 3的开源框架,常用于创建富互联网应用程序(RIA)。在Flex中集成地图功能...

    Flex地图编辑技术

    Flex地图编辑技术主要涉及到使用Adobe Flex这一开源框架与Esri的ArcGIS Server相结合,实现对地理信息系统的交互式编辑功能。在GIS应用中,地图编辑是核心部分,它允许用户创建、修改和管理地理空间数据。下面将详细...

    Flex3实现的谷歌地图实例

    Flex3是Adobe公司开发的一款基于ActionScript 3.0的富互联网应用(RIA)开发工具,主要用于构建交互式的、...同时,这也为你提供了扩展和自定义地图应用的可能性,比如添加更多自定义标记、实现复杂的地图动画效果等。

    FLEX地图教程

    FLEX地图应用教程,讲述了如何使用百度地图构建webGIS应用程序。

    flex开源3D地图

    Flex开源3D地图是一种基于Adobe Flex技术的三维地图应用程序,它允许开发者构建交互式的、具有丰富视觉效果的3D地理信息系统。Flex是一个用于构建富互联网应用程序(RIA)的开源框架,它基于ActionScript编程语言和...

    flash和flex地图API以及相关word文档式教程

    本教程专注于使用Flash和Flex来开发地图应用,这对于地理信息系统(GIS)和在线地图服务的开发者来说是极其有价值的。 首先,Flash是一种由Adobe公司开发的交互式矢量图形和多媒体平台。它广泛用于创建网页动画、...

Global site tag (gtag.js) - Google Analytics