从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>
836
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
