從arcgis for flex 在線sample中摘抄，供參考用。
一、API中的相關屬性
1.esri:map 的 wrapAround180屬性
<esri:Map wrapAround180="true">如果是世界地圖將此屬性設置爲true時，一直往西（或往東）拖動地圖時，當拖到地圖邊界時會接上世界的另一端顯示，就像平鋪圖片一樣。
2.設置esri:map的初始地圖顯示範圍和空間參考定義
<fx:Declarations>
<esri:Extent id="initialExtent"
xmin="-13635000" ymin="4541000" xmax="-13625000" ymax="4547000">
<esri:SpatialReference wkid="102100"/>
</esri:Extent>
</fx:Declarations>
<esri:Map extent="{initialExtent}" wrapAround180="true">
<esri:ArcGISTiledMapServiceLayer url="http://10.19.1.50/arcgis/rest/services/baseMap/MapServer"/>
</esri:Map>
3.設置esri:map中鼠標樣式
（1）<esri:Map openHandCursorVisible="false" 設置是否顯示小手樣式。
4.調用arcIMS地圖服務
<esri:Map>
<esri:ArcIMSMapServiceLayer serviceHost="http://www.geographynetwork.com" serviceName="Census_TIGER2000"/>
</esri:Map>
二、實用代碼整理
加載地圖相關代碼
1.加載維基地圖
<esri:Map
<esri:OpenStreetMapLayer />
</esri:Map>
這個openStreetMapLayer指的就是維基地圖，內置了。具體詳細的信息應該是看這個網址裏的文檔http://www.openstreetmap.org/，比如加載指定的圖層等等。
2.給地圖添加一個版權示例
在線幫助中打開維基地圖的版權示例挺不錯的，簡潔。
<fx:Script>
<![CDATA[
import flashx.textLayout.conversion.TextConverter;
import mx.events.FlexEvent;
protected function copyright_initializeHandler(event:FlexEvent):void
{
var htmlText:String = '(c) <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> contributors, '
+ '<a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>';
copyright.textFlow = TextConverter.importToFlow(htmlText, TextConverter.TEXT_FIELD_HTML_FORMAT);
}
]]>
</fx:Script>
<esri:Map
<esri:OpenStreetMapLayer/>
</esri:Map>
<s:RichEditableText id="copyright"
bottom="
bottom="2"
editable="
editable="false"
horizontalCenter="
horizontalCenter="0"
initialize="
initialize="copyright_initializeHandler(event)"
selectable="
selectable="false"/>
3.調用wms地圖服務，控制圖層顯示
<fx:Script>
<![CDATA[
import com.esri.ags.Units;
]]>
</fx:Script>
<esri:Map units="{Units.MILLIMETERS}">
<esri:WMSLayer url="http://10.19.1.50/arcgis/rest/services/Geometry/GeometryServer">
<esri:visibleLayers>
<!--Order matters-->
<s:ArrayList>
<!--States-->
<fx:String>0</fx:String>
<!--Cities-->
<fx:String>2</fx:String>
</s:ArrayList>
</esri:visibleLayers>
</esri:WMSLayer>
</esri:Map>
4.控制顯示切片地圖圖層及初始顯示等級
<fx:Script>
<![CDATA[
import com.esri.ags.geometry.MapPoint;
import com.esri.ags.layers.TiledMapServiceLayer;
import mx.events.FlexEvent;
private function layerShowHandler(event:FlexEvent):void
{
// update the LODs/zoomslider to use/show the levels for the selected base map
var tiledLayer:TiledMapServiceLayer = event.target as TiledMapServiceLayer;
//myMap.lods = tiledLayer.tileInfo.lods;
}
]]>
</fx:Script>
<esri:Map id="myMap"
level="1"
load="myMap.centerAt(new MapPoint(-11713000, 4822000))">
<esri:ArcGISTiledMapServiceLayer show="layerShowHandler(event)"
url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
visible="{bb.selectedIndex == 0}"/>
<esri:ArcGISTiledMapServiceLayer show="layerShowHandler(event)"
url="http://server.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer"
visible="{bb.selectedIndex == 1}"/>
<esri:ArcGISTiledMapServiceLayer show="layerShowHandler(event)"
url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
visible="{bb.selectedIndex == 2}"/>
</esri:Map>
<s:ButtonBar id="bb"
right="5" top="5"
requireSelection="true">
<s:dataProvider>
<s:ArrayList>
<fx:String>Streets</fx:String>
<fx:String>U.S. Topo</fx:String>
<fx:String>Imagery</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:ButtonBar>
獲取地圖的顯示範圍，經緯度座標，比例尺，顯示等級信息
<fx:Script>
<![CDATA[
import com.esri.ags.events.ExtentEvent;
import com.esri.ags.geometry.Extent;
import com.esri.ags.geometry.MapPoint;
import com.esri.ags.utils.WebMercatorUtil;
// when mouse (cursor) is on the map ...
private function loadHandler():void
{
myMap.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
}
// ... show coordinates of current (mouse) location
private function mouseMoveHandler(event:MouseEvent):void
{
const mapPoint:MapPoint = myMap.toMapFromStage(event.stageX, event.stageY);
const latlong:MapPoint = WebMercatorUtil.webMercatorToGeographic(mapPoint) as MapPoint;
mousecoords.text =
"x,y is " + mapPoint.x.toFixed(0) + "," + mapPoint.y.toFixed(0)
+ " and Lat/Long is: " + latlong.y.toFixed(6)
+ " / " + latlong.x.toFixed(6);
}
// convert current projected extent to geographic and show as such
protected function showExtentInGeographic(extent:Extent):String
{
const geoExtent:Extent = WebMercatorUtil.webMercatorToGeographic(myMap.extent) as Extent;
// return geoExtent.toString() + ".." ;
return " " + geoExtent.xmin.toFixed(6)
+ ", " + geoExtent.ymin.toFixed(6)
+ ", " + geoExtent.xmax.toFixed(6)
+ ", " + geoExtent.ymax.toFixed(6)
+ " (wkid: " + geoExtent.spatialReference.wkid + ")";
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout paddingTop="6"/>
</s:layout>
<s:HGroup>
<s:Label fontWeight="bold" text="Current map extent:"/>
<s:RichEditableText editable="false" text='xmin="{myMap.extent.xmin.toFixed(0)}" ymin="{myMap.extent.ymin.toFixed(0)}" xmax="{myMap.extent.xmax.toFixed(0)}" ymax="{myMap.extent.ymax.toFixed(0)}" (wkid="{myMap.spatialReference.wkid}")'/>
</s:HGroup>
<s:HGroup>
<s:Label fontWeight="bold" text="Current map extent (in geographic):"/>
<s:RichEditableText editable="false" text="{showExtentInGeographic(myMap.extent)}"/>
</s:HGroup>
<s:HGroup>
<s:Label fontWeight="bold" text="Current Mouse Coordinates:"/>
<s:RichEditableText id="mousecoords"
editable="false"
text="Move the mouse over the map to see its current coordinates..."/>
</s:HGroup>
<s:HGroup>
<s:Label fontWeight="bold" text="Current map scale is"/>
<s:RichEditableText editable="false" text="1:{myMap.scale.toFixed(0)} (level {myMap.level})"/>
</s:HGroup>
<esri:Map id="myMap" load="loadHandler()">
<esri:extent>
<esri:Extent xmin="3035000" ymin="4305000" xmax="3475000" ymax="10125000">
<esri:SpatialReference wkid="102100"/>
<!-- same as tiled map service below -->
</esri:Extent>
</esri:extent>
<esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
</esri:Map>
自定義地圖的顯示級別
<esri:Map>
<esri:lods>
<esri:LOD resolution="0.0439453125" scale="18468599.9106772"/>
<esri:LOD resolution="0.02197265625" scale="9234299.95533859"/>
<esri:LOD resolution="0.010986328125" scale="4617149.97766929"/>
<esri:LOD resolution="0.0054931640625" scale="2308574.98883465"/>
<esri:LOD resolution="0.00274658203125" scale="1154287.49441732"/>
</esri:lods>
<esri:extent>
<esri:Extent xmin="-124.629" ymin="18.826" xmax="-68.027" ymax="56.311">
<esri:SpatialReference wkid="4269"/>
</esri:Extent>
</esri:extent>
<esri:ArcGISDynamicMapServiceLayer url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer"/>
</esri:Map>
動態添加圖層的顯示級別：
<fx:Script>
<![CDATA[
import com.esri.ags.layers.supportClasses.LOD;
private function addLODs():void
{
// make sure the resolution makes sense for tile schema of the base layer
// both resolution and scale are required fields
// About NaN: The lods are automatically sorted based on scale, so setting level isn't necessary.
var lods:Array = myMap.lods;
lods.push(new LOD(NaN, 0.6, 3000));
lods.push(new LOD(NaN, 0.3, 1500));
lods.push(new LOD(NaN, 0.1, 500));
myMap.lods = lods;
}
]]>
</fx:Script>
<esri:Map id="myMap" load="addLODs()">
一種解決方案當對地圖進行查詢後，查詢結果顯示不全時控制地圖自動縮小一級，確保完全顯示查詢結果。
<fx:Script>
<![CDATA[
import com.esri.ags.Graphic;
import com.esri.ags.events.MapMouseEvent;
import com.esri.ags.events.QueryEvent;
import com.esri.ags.geometry.Extent;
import com.esri.ags.utils.GraphicUtil;
import mx.collections.ArrayCollection;
private var mapClickToggler:Boolean = true;
private function mapClickHandler(event:MapMouseEvent):void
{
if (mapClickToggler)
{
query.geometry = event.mapPoint;
queryTask.execute(query);
}
}
private function executeCompleteHandler(event:QueryEvent):void
{
for each (var myGraphic:Graphic in event.featureSet.features)
{
myGraphic.addEventListener(MouseEvent.CLICK, unselectGraphic);
myGraphic.addEventListener(MouseEvent.ROLL_OVER, toggleMapClick);
myGraphic.addEventListener(MouseEvent.ROLL_OUT, toggleMapClick);
myGraphicsLayer.add(myGraphic);
}
zoomToGraphics();
}
private function zoomToGraphics():void
{
var graphicProvider:ArrayCollection = myGraphicsLayer.graphicProvider as ArrayCollection;
var graphicsExtent:Extent = GraphicUtil.getGraphicsExtent(graphicProvider.toArray());
if (graphicsExtent)
{
myMap.extent = graphicsExtent;
// make sure the whole extent is visible
if (!myMap.extent.contains(graphicsExtent))
{
myMap.level--;
}
}
}
private function unselectGraphic(event:MouseEvent):void
{
myGraphicsLayer.remove(event.currentTarget as Graphic);
zoomToGraphics();
}
private function toggleMapClick(event:MouseEvent):void
{
mapClickToggler = !mapClickToggler;
}
]]>
</fx:Script>
<fx:Declarations>
<esri:QueryTask id="queryTask"
executeComplete="executeCompleteHandler(event)"
url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5"
useAMF="false"/>
<esri:Query id="query"
outSpatialReference="{myMap.spatialReference}"
returnGeometry="true"/>
</fx:Declarations>
<s:layout>
<s:VerticalLayout horizontalAlign="center"/>
</s:layout>
<s:Label paddingTop="8" text="Click on a state to select or unselect it. The map will zoom to current selection."/>
<esri:Map id="myMap" mapClick="mapClickHandler(event)">
<esri:extent>
<esri:Extent xmin="-13901000" ymin="3292000" xmax="-8812000" ymax="6154000">
<esri:SpatialReference wkid="102100"/>
</esri:Extent>
</esri:extent>
<esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
<esri:GraphicsLayer id="myGraphicsLayer"/>
</esri:Map>
加載CSVlayer
加載的是一種文本格式的數據。rul指向數據地址，然後指定經緯度座標
<esri:CSVLayer id="csvLayer"
fault="csvLayer_faultHandler(event)"
latitudeFieldName="Lat"
loadError="csvLayer_loadErrorHandler(event)"
longitudeFieldName="Lon"
renderer="{magnitudeRenderer}"
url="http://earthquake.usgs.gov/earthquakes/catalogs/eqs7day-M2.5.txt">
<esri:sourceFields>
<esri:Field name="Magnitude"/>
<esri:Field name="Depth"/>
<esri:Field name="Region" alias="Location"/>
<esri:Field name="Datetime"/>
</esri:sourceFields>
一個控制二維地圖旋轉的方向盤
arcgis server api for flex的3.1的版本里的sample裏有一個這樣的例子，方向盤是皮膚組件寫的，鼠標旋轉方向盤然後地圖也按相同的北方向旋轉，效果很好。
路徑：解壓後的API中arcgis_api_for_flex_3_1\ArcGIS_Flex\samples\src\MapRotation.mxml,
This sample also uses the following files:
com/esri/ags/samples/components/RotationWheel.as
com/esri/ags/samples/skins/RotationWheelSkin.mxml
FeatureLayer相關
通過字段屬性值動態設置地圖符號樣式，還有添加tooltip的代碼
注：對featureLayer中的圖形元素設置不同的顯示風格時，針對 點線面都用不同的類
點esri:SimpleMarkerSymbol 如：示例中是點
線 esri:SimpleLineSymbol
面 esri:SimpleFillSymbol
<fx:Script>
<![CDATA[
import com.esri.ags.events.GraphicEvent;
protected function featurelayer1_graphicAddHandler(event:GraphicEvent):void
{
event.graphic.toolTip = event.graphic.attributes.FIPS;
}
]]>
</fx:Script>
<fx:Declarations>
<esri:SimpleMarkerSymbol id="symbol1"
alpha="0.7"
color="0xFF0000"
size="6"
style="triangle"/>
<esri:SimpleMarkerSymbol id="symbol2"
alpha="0.7"
color="0xFF0000"
size="10"
style="triangle"/>
<esri:SimpleMarkerSymbol id="symbol3"
alpha="0.7"
color="0xFF0000"
size="16"
style="triangle"/>
<esri:SimpleMarkerSymbol id="symbol4"
alpha="0.7"
color="0xFF0000"
size="22"
style="triangle"/>
<esri:SimpleMarkerSymbol id="symbol5"
alpha="0.7"
color="green"
size="26"
style="circle"/>
</fx:Declarations>
<s:Label width="100%" text="This map combines a tiled street map with a FeatureLayer service showing census block points rendered using a class break renderer."/>
<esri:Map openHandCursorVisible="false">
<esri:extent>
<esri:Extent id="lowerManhattan"
xmin="-8239000" ymin="4968000" xmax="-8235000" ymax="4971000">
<esri:SpatialReference wkid="102100"/>
</esri:Extent>
</esri:extent>
<esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
<esri:FeatureLayer graphicAdd="featurelayer1_graphicAddHandler(event)"
outFields="[FIPS,POP2000]"
url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/0">
<esri:renderer>
<esri:ClassBreaksRenderer attribute="POP2000">
<esri:ClassBreakInfo maxValue="61" symbol="{symbol1}"/>
<esri:ClassBreakInfo maxValue="264"
minValue="62"
symbol="{symbol2}"/>
<esri:ClassBreakInfo maxValue="759"
minValue="265"
symbol="{symbol3}"/>
<esri:ClassBreakInfo maxValue="1900"
minValue="760"
symbol="{symbol4}"/>
<esri:ClassBreakInfo minValue="1901" symbol="{symbol5}"/>
</esri:ClassBreaksRenderer>
</esri:renderer>
</esri:FeatureLayer>
</esri:Map>
地圖符號樣式（二）--多個不同形狀的simpleMakerSymbol組合成新的符號圖形
<esri:renderer>
<esri:UniqueValueRenderer attribute="CAPITAL">
<esri:defaultSymbol>
<esri:SimpleMarkerSymbol color="0xCCCCCC"
size="12"
style="x"/>
</esri:defaultSymbol>
<esri:UniqueValueInfo value="Y">
<esri:symbol>
<esri:CompositeSymbol>
<!-- Star in circle -->
<esri:SimpleMarkerSymbol color="0xFF0000"
size="22"
style="circle"/>
<esri:SimpleMarkerSymbol color="0xFFFFFF"
size="20"
style="triangle"/>
<esri:SimpleMarkerSymbol angle="180"
color="0xFFFFFF"
size="20"
style="triangle"/>
</esri:CompositeSymbol>
</esri:symbol>
</esri:UniqueValueInfo>
<esri:UniqueValueInfo value="N">
<esri:symbol>
<esri:SimpleMarkerSymbol color="0xFF0000"
size="18"
style="diamond"/>
</esri:symbol>
</esri:UniqueValueInfo>
</esri:UniqueValueRenderer>
</esri:renderer>
tooltip--style
<fx:Style>
@namespace mx "library://ns.adobe.com/flex/mx";
mx|ToolTip {
fontFamily: "Arial";
fontSize: 16;
fontWeight: "bold";
color: #FF0000;
backgroundColor:"blue";
}
</fx:Style>
根據屬性字段定義要在featureLayer中顯示的部分graphics
private function doSearch():void
{
// fLayer.layerDetails.displayField
fLayer.definitionExpression = "STATE_NAME like '" + qText.text + "'";
}//可以加%實現模糊查詢：STATE_NAME like 'W%'
----------------------------------
<esri:FeatureLayer id="fLayer" load="{doSearch()}"
自定義infoWindow示例及其style樣式表
<esri:FeatureLayer definitionExpression="TYPE='city' AND POP1990 > 50000"
outFields="[CITY_NAME,CAPITAL,DIVORCED,POP1990,MALES,FEMALES]"
url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0">
<esri:infoWindowRenderer>
<fx:Component>
<esri:LabelDataRenderer>
<esri:label>{data.CITY_NAME}</esri:label>
<s:BorderContainer backgroundColor="white"
borderColor="black"
color="green"
cornerRadius="5"
minHeight="0"
minWidth="0">
<s:layout>
<s:VerticalLayout paddingBottom="5"
paddingLeft="5"
paddingRight="5"
paddingTop="5"/>
</s:layout>
<s:Label text="Sex ratio: { Math.round(100*data.MALES/data.FEMALES) } men to 100 women"/>
<s:Label text="Divorce rate: { Number(1000*data.DIVORCED/data.POP1990).toFixed(1) }" toolTip="Divorce rate is the number of divorces per 1000 people."/>
</s:BorderContainer>
</esri:LabelDataRenderer>
</fx:Component>
</esri:infoWindowRenderer>
------------------------------------
<fx:Style>
@namespace esri "http://www.esri.com/2008/ags";
/* The "header" of the InfoWindow */
esri|InfoWindowLabel
{
color: white;
font-size: 20;
}
esri|InfoWindow
{
border-thickness: 0;
background-color: blue;
font-size: 16;
upper-left-radius: 15;
upper-right-radius: 0;
info-placement: top;
info-offset-y: 20;
}
</fx:Style>
點選featureLayer圖層中的graphics並高亮顯示，同時獲取相應的屬性字段數據到datagrid
<fx:Script>
<![CDATA[
import com.esri.ags.FeatureSet;
import com.esri.ags.Graphic;
import com.esri.ags.events.FeatureLayerEvent;
import com.esri.ags.events.MapMouseEvent;
import com.esri.ags.geometry.Extent;
import com.esri.ags.tasks.supportClasses.Query;
import com.esri.ags.tasks.supportClasses.RelationshipQuery;
import mx.controls.Alert;
import mx.rpc.AsyncResponder;
private function findWells(event:FeatureLayerEvent):void
{
var relatedWellsQuery:RelationshipQuery = new RelationshipQuery();
relatedWellsQuery.outFields = [ "OBJECTID" ];
relatedWellsQuery.relationshipId = 2;
// The "2" comes from the service directory of the layer:
if (event.features.length > 0)
{
relatedWellsQuery.objectIds = [ event.features[0].attributes.OBJECTID ];
fieldsLayer.queryRelatedFeatures(relatedWellsQuery, new AsyncResponder(onResult, onFault));
relatedDatagrid.dataProvider = null;
function onResult(relatedRecords:Object, token:Object = null):void
{
var fset:FeatureSet = (relatedRecords[event.features[0].attributes.OBJECTID]);
var selectionQuery:Query = new Query();
var objIds:Array = new Array();
for each (var g:Graphic in fset.features)
{
objIds.push(g.attributes.OBJECTID)
}
selectionQuery.objectIds = objIds;
wellsLayer.selectFeatures(selectionQuery, FeatureLayer.SELECTION_NEW);
}
function onFault(info:Object, token:Object = null):void
{
Alert.show(info.toString(), "Query Problem");
}
}
else
{
Alert.show("No wells found", "Info");
}
}
private function findRelatedRecords(event:FeatureLayerEvent):void
{
var relatedQuery:RelationshipQuery = new RelationshipQuery();
relatedQuery.outFields = [ "API_NUMBER", "ELEVATION", "FORMATION", "TOP" ];
relatedQuery.relationshipId = 3;
// The "3" comes from the service directory of the layer:
// Well 2 Tops (3) -- Related To: KSTOPS (2)
var objIds:Array = new Array();
for each (var g:Graphic in event.features)
{
objIds.push(g.attributes.OBJECTID)
}
relatedQuery.objectIds = objIds;
wellsLayer.queryRelatedFeatures(relatedQuery, new AsyncResponder(onResult, onFault));
relatedDatagrid.dataProvider = null;
var attrs:Array = new Array();
function onResult(relatedRecords:Object, token:Object = null):void
{
for each (var i:FeatureSet in relatedRecords)
{
for each (var j:Graphic in i.features)
{
attrs.push(j.attributes);
}
}
relatedDatagrid.dataProvider = attrs;
}
function onFault(info:Object, token:Object = null):void
{
Alert.show(info.toString(), "Query Problem");
}
}
protected function map_mapClickHandler(event:MapMouseEvent):void
{
var selectionQuery:Query = new Query();
selectionQuery.geometry = event.mapPoint;
fieldsLayer.selectFeatures(selectionQuery, FeatureLayer.SELECTION_NEW);
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:HGroup width="100%" height="100%">
<esri:Map id="map"
mapClick="map_mapClickHandler(event)"
openHandCursorVisible="false">
<esri:extent>
<esri:Extent xmin="-10854000" ymin="4502000" xmax="-10829000" ymax="4524000">
<esri:SpatialReference wkid="102100"/>
</esri:Extent>
</esri:extent>
<esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"/>
<esri:ArcGISDynamicMapServiceLayer url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer">
<esri:visibleLayers>
<s:ArrayCollection>
<fx:Number>0</fx:Number>
<fx:Number>1</fx:Number>
</s:ArrayCollection>
</esri:visibleLayers>
</esri:ArcGISDynamicMapServiceLayer>
<esri:FeatureLayer id="fieldsLayer"
mode="selection"
selectionComplete="findWells(event)"
url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1"/>
<esri:FeatureLayer id="wellsLayer"
mode="selection"
outFields="*"
selectionComplete="findRelatedRecords(event)"
url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/0">
</esri:FeatureLayer>
</esri:Map>
<mx:DataGrid id="relatedDatagrid"
width="50%" height="100%">
<mx:columns>
<mx:DataGridColumn dataField="API_NUMBER" headerText="API Number"/>
<mx:DataGridColumn dataField="ELEVATION" headerText="Elevation"/>
<mx:DataGridColumn dataField="TOP" headerText="Top"/>
<mx:DataGridColumn dataField="FORMATION" headerText="Formation"/>
</mx:columns>
</mx:DataGrid>
</s:HGroup>
將地圖上一定範圍內的興趣點自動聚合成簇顯示，API中現成的自動加權分枝算法
<fx:Script>
<![CDATA[
import com.esri.ags.Graphic;
import com.esri.ags.events.ExtentEvent;
import com.esri.ags.events.FlareEvent;
import com.esri.ags.events.FlareMouseEvent;
import com.esri.ags.events.GraphicEvent;
import com.esri.ags.events.MapEvent;
import spark.utils.TextFlowUtil;
protected function map_loadHandler(event:MapEvent):void
{
featureLayer.addEventListener(FlareMouseEvent.FLARE_CLICK, flareClickHandler);
featureLayer.addEventListener(FlareEvent.FLARE_IN_START, flareInStartHandler);
}
private function flareClickHandler(event:FlareMouseEvent):void
{
showInfoWindow(event.graphic, event.stageX, event.stageY);
}
private function flareInStartHandler(event:FlareEvent):void
{
map.infoWindow.hide();
}
private function showInfoWindow(gr:Graphic, stageX:Number, stageY:Number):void
{
myTextArea.textFlow = TextFlowUtil.importFromString(
'<span fontWeight="bold">State Name: </span>' + gr.attributes.STATE_NAME + '<br/>'
+ '<span fontWeight="bold">Age (5-17): </span>' + gr.attributes.AGE_5_17 + '<br/>'
+ '<span fontWeight="bold">Age (18-64): </span>' + gr.attributes.AGE_18_64 + '<br/>'
+ '<span fontWeight="bold">Age (65 and above): </span>' + gr.attributes.AGE_65_UP);
map.infoWindow.label = gr.attributes.CITY_NAME;
map.infoWindow.closeButtonVisible = false;
map.infoWindow.show(map.toMapFromStage(stageX, stageY));
}
protected function map_extentChangeHandler(event:ExtentEvent):void
{
map.infoWindow.hide();
}
protected function featureLayer_graphicAddHandler(event:GraphicEvent):void
{
event.graphic.addEventListener(MouseEvent.CLICK, graphicClickHandler); // showing info window on non-clustered graphics
}
private function graphicClickHandler(event:MouseEvent):void
{
showInfoWindow(Graphic(event.target), event.stageX, event.stageY);
}
]]>
</fx:Script>
<fx:Declarations>
<text:TextFormat id="tf"
font="Arial"
size="14"/>
<esri:FlareSymbol id="flareSymbol"
backgroundAlphas="[0.5,1.0]"
backgroundColors="[0x00FF00,0xFF0000]"
flareMaxCount="30"
flareSizeIncOnRollOver="3"
sizes="[20,30]"
textFormat="{tf}"
weights="[30,60]"/>
<esri:WeightedClusterer id="clusterer" symbol="{flareSymbol}">
<esri:center>
<!--
x/y values are from the below extent x/y min/max values, these are the center of the extent.
To make sure that you have the same clusters every time and independently of the map size and extent, these values have to set explicity,
or you can let the cluster pick the map center at runtime.
-->
<esri:MapPoint x="{(-14477000-6677000)*0.5}" y="{(2273000+8399000)*0.5}"/>
</esri:center>
</esri:WeightedClusterer>
<esri:SimpleMarkerSymbol id="defaultsym"
alpha="0.8"
color="0xFF0000">
<esri:SimpleLineSymbol width="2" color="blue"/>
</esri:SimpleMarkerSymbol>
</fx:Declarations>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<esri:Map id="map"
extentChange="map_extentChangeHandler(event)"
load="map_loadHandler(event)"
openHandCursorVisible="false">
<esri:extent>
<esri:Extent xmin="-14477000" ymin="2273000" xmax="-6677000" ymax="8399000">
<esri:SpatialReference wkid="102100"/>
</esri:Extent>
</esri:extent>
<esri:infoWindowContent>
<s:TextArea id="myTextArea"
width="200" height="80"
editable="false"/>
</esri:infoWindowContent>
<esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer"/>
<esri:FeatureLayer id="featureLayer"
clusterer="{clusterer}"
definitionExpression="POP1990 > 75000"
graphicAdd="featureLayer_graphicAddHandler(event)"
mode="snapshot"
outFields="*"
symbol="{defaultsym}"
url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0"/>
</esri:Map>
<s:HGroup width="100%"
gap="5"
minHeight="10"
verticalAlign="middle">
<s:Label text="{featureLayer.numGraphics}"/>
<s:Label text="Graphics - Overall cluster min count"/>
<s:Label text="{clusterer.overallMinCount}"/>
<s:Label text="max count"/>
<s:Label text="{clusterer.overallMaxCount}"/>
</s:HGroup>
