原创arcgis server flex 实现在地图上绘制折线图

原创arcgis server  flex 实现在地图上绘制折线图,效果图：

 代码：利用arcgis的infosysbol 用LineChart来渲染，数据从Graphic的attributes来进行传递

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:esri="http://www.esri.com/2008/ags"
               pageTitle="infosymbol" creationComplete="application1_creationCompleteHandler(event)" xmlns:mx="library://ns.adobe.com/flex/mx">
	<fx:Style>
		.RightStyle
		{
			borderThickness: 1;
			info-placement:center;
			borderColor: #000005;
			backgroundColor: #ffffff;
			paddingLeft: 5;
			paddingRight: 5;
			paddingTop: 5;
			paddingBottom: 5;	
			border-alpha:0;
			background-alpha:0;
		}
		
		
	</fx:Style>

    <fx:Script>
        <![CDATA[
			import com.esri.ags.Graphic;
			import com.esri.ags.geometry.MapPoint;
			import com.esri.ags.utils.WebMercatorUtil;
			
			import mx.collections.ArrayCollection;
			import mx.events.FlexEvent;

			
			[Bindable]
			private var valueAC:ArrayCollection = new ArrayCollection( [
				{ hour: "1",  value: 1500 },
				{ hour: "2",  value: 200 },
				{ hour: "3",  value: 500 },
				{ hour: "4",  value: 1200 },
				{ hour: "5",  value: 575 } ]);
			
			
			[Bindable]
			private var valueAC2:ArrayCollection = new ArrayCollection( [
				{ hour: "1",  value: 1000 },
				{ hour: "2",  value: 500 },
				{ hour: "3",  value: 700 },
				{ hour: "4",  value: 1200 },
				{ hour: "5",  value: 300 } ]);
			

			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{					
		        map.extent=WebMercatorUtil.geographicToWebMercator(extent) as Extent;
				darwPointPloygon();				
			}
			
			private function darwPointPloygon():void
			{
				var point:XML;

				for each(point in points) {
					var mp:MapPoint=WebMercatorUtil.geographicToWebMercator(new MapPoint([email protected],[email protected])) as MapPoint;
					var myAttributes:Object = {};
					[email protected];
					myAttributes.datap=valueAC;
					if([email protected]=="point2" || [email protected]=="point4"){
						myAttributes.datap=valueAC2;
					}
					var infosys:InfoSymbol=new InfoSymbol();
					infosys.containerStyleName="RightStyle";
					infosys.infoRenderer=myInfoSymbol.infoRenderer;
					var g:Graphic = new Graphic(mp, infosys, myAttributes);
					infoPointglayer.add(g);		
				}
			}

        ]]>
    </fx:Script>
	<fx:Declarations>	
		
		<fx:XMLList id="points">
			<point text="point1" x="118" y="26" />
			<point text="point2" x="116" y="30" />
			<point text="point3" x="113" y="25" />
			<point text="point4" x="105" y="22" />
		</fx:XMLList>

		<esri:InfoSymbol id="myInfoSymbol">
			<esri:infoRenderer>
				<fx:Component>
					<s:DataRenderer>
						<mx:LineChart id="linechart" height="100" width="100"
									  paddingLeft="5" paddingRight="5" 
									  showDataTips="true" dataProvider="{data.datap}">
							
							
							<!--categoryField：横坐标数据节点-->
							<mx:horizontalAxis>
								<mx:CategoryAxis id="h1" 
												 categoryField="hour" />
							</mx:horizontalAxis>
							
							<!--yField:纵坐标数据节点-->
							<mx:series>						
								<!--纵坐标轴1-->
								<mx:LineSeries id="cs1" horizontalAxis="{h1}" form="curve"  yField="value" displayName="时间（h）/降水量（MM）">
									<mx:lineStroke>
										<mx:SolidColorStroke id = "s2" color="blue" weight="2"/>
									</mx:lineStroke>
								</mx:LineSeries>
								
							</mx:series>
						</mx:LineChart>
					</s:DataRenderer>
				</fx:Component>
			</esri:infoRenderer>
		</esri:InfoSymbol>
		
		<esri:Extent id="extent"  xmin="27.25" ymin="59.01" xmax="174.38" ymax="-2.07">
			<esri:SpatialReference wkid="4326"/>
		</esri:Extent>
	</fx:Declarations>
    <esri:Map id="map" level="4">
        
        <esri:ArcGISTiledMapServiceLayer url="http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineStreetColor/MapServer"/>
		<esri:GraphicsLayer  id="infoPointglayer" />
    </esri:Map>

</s:Application>