需求

在改变地图大小后, 要让地图的中心点也要跟着改变(即将地图移动到容器新的中心位置)

默认行为

ArcGIS Flex API Map 在改变地图大小后不会移动地图, 还是待在原处, 地图容器大小确实变

化了(由比例尺和 logo 的位置看出)

解决思路

我试过改变地图大小后重新绘制(refresh)每个图层, 似乎能够达到目的, 但只是暂时的, 地

图好像无法包容住图层, 又反弹回去了(resize 前的位置), hold 不住啊!

只好边想边在网上找资料, 终于发现了可行的解决方案

Zooming to extent not working properly after resizing the map

It waits until aextentChange happens after a resize since the Map's own resize handler is

changing the map's extent.

The need to wait a frame by using callLater() is a bug.

原来 resize 之后会改变 Map 的 extent, 因此 resize 之后马上刷新图层只能暂时将地图移动到

中心位置, 但 extent 改变后, 又会还原回去.

实现步骤

1. 监听地图 resize 事件, 记录地图 resize 之前 extent 的中心点, 并监听 extentChange

2. 在 extentChange 事件中通过 callLater 设置地图的中心点为 resize 之前的中心点

完整代码

<?xml version="1.0" encoding="utf-8"?>

<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"

xmlns:esri="http://www.esri.com/2008/ags"

layout="absolute">

<mx:Script>

<![CDATA[

importcom.esri.ags.events.ExtentEvent;

importcom.esri.ags.geometry.MapPoint;

privatevarcenter:MapPoint;

privatefunctionbuttonClickHandler():void {

if (toggleButton.selected) {

map.percentWidth = 100;

} else {

map.percentWidth = 50;

}

}

privatefunctionmapResizeHandler():void {

// 地图初始化加载时会触发一次resize事件, 但地图还未load完成

// 初始地图会自动调整中心点到地图容器中心位置, 因此不需要手动调整

if (map.loaded) {

trace("这里还是地图resize之前的extent", map.extent);

trace("我们想要地图定位到该中心点", map.extent.center);

center = map.extent.center;

map.addEventListener(ExtentEvent.EXTENT_CHANGE, mapExtentChangeHandler);

}

}

privatefunctionmapExtentChangeHandler(event:ExtentEvent):void {

map.removeEventListener(ExtentEvent.EXTENT_CHANGE, mapExtentChangeHandler);

// 如果不callLater, 会有bug(地图缩放时中心点偏移)

callLater(function(center:MapPoint):void {

trace("地图resize之后会改变地图的extent", map.extent);

trace("地图resize之后extent的中心点", map.extent.center);

map.centerAt(center);

}, [center]);

}

]]>

</mx:Script>

<esri:Map id="map" resize="mapResizeHandler()"

width="50%" height="100%" borderColor="0xfff" borderStyle="solid">

<esri:ArcGISTiledMapServiceLayer

url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/Ma

pServer" />

</esri:Map>

<mx:Button id="toggleButton" label="100%" click="buttonClickHandler()" toggle="true"

/>

</mx:Application>

最终效果