Flex 地图联动

来源：互联网发布：大学c语言必背基础知识编辑：程序博客网时间：2024/05/19 20:45

前段时间用Flex做了一个地图联动，实现拖动、缩放其中一幅图，另一幅图随之变换的效果。废话不多说，上代码。

一。首先启动Flex，新建工程，将ArcGIS For Flex API 添加进来（我用的是1.3）

二。main.mxml：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="white" xmlns:esri="http://www.esri.com/2008/ags">
<mx:Canvas height="100%" width="100%" creationComplete="adjustBlock()">
  <esri:Map id="map1" logoVisible="false" borderStyle="solid" borderThickness="3" panEnd="Link2to1()" zoomEnd="Link2to1()" y="40">
   <esri:extent>
    <esri:Extent xmin="526470.5" ymin="4426604.1" xmax="533598.3" ymax="4433473.5">
     <esri:SpatialReference wkid="32650"/>
    </esri:Extent>
   </esri:extent>
   <esri:ArcGISDynamicMapServiceLayer id="DynamicMap1" url="<A href="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/">http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
  </esri:Map>
  <esri:Map id="map2" logoVisible="false" borderStyle="solid" borderThickness="3" panEnd="Link1to2()" zoomEnd="Link1to2()" y="40">
   <esri:extent>
    <esri:Extent xmin="526470.5" ymin="4426604.1" xmax="533598.3" ymax="4433473.5">
     <esri:SpatialReference wkid="32650"/>
    </esri:Extent>
   </esri:extent>
   <esri:ArcGISDynamicMapServiceLayer id="DynamicMap2" url="<A href="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/">http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
  </esri:Map>
</mx:Canvas>
<mx:Button id="btnLink" toggle="true" label="地图联动" fontFamily="宋体" fontSize="12" click="btnLink_click()" x="150" y="10">
</mx:Button>
<mx:Script>
  <![CDATA[
   import flash.geom.Point;
   import mx.events.ItemClickEvent;
   private var btnLinkClick:Boolean = false; //联动按钮是否被点击
     private var Link2to1canFire:Boolean = true; //是否能执行窗口2适应窗口1的联动操作
     private var Link1to2canFire:Boolean = true; //是否能执行窗口1适应窗口2的联动操作
   private var point1:Point=new Point;
   private function adjustBlock():void
   {
    point1.x=Application.application.width;
    point1.y=Application.application.height;
    point1=Application.application.localToGlobal(point1);
    map1.width=point1.x/2;
    map2.width=map1.width;
    map2.x=map1.width;

   }
   private function btnLink_click():void
   {
    Link1to2canFire=true;
    Link2to1canFire=true;
    if(btnLinkClick)
    btnLinkClick=false;
    else
    btnLinkClick=true;
   }

   private function Link1to2():void
   {
    if(Link1to2canFire)
    {
     if(btnLinkClick)
     {
     map1.extent=map2.extent;
         }
    }

   }

   private function Link2to1():void
   {
    if(Link2to1canFire)
    {
     if(btnLinkClick)
     {
     map2.extent=map1.extent;
          }
    }

   }


  ]]>
</mx:Script>
</mx:Application>

实现效果图如下：