`
fengzheng0603
  • 浏览: 72888 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

原创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(point.@x,point.@y)) as MapPoint;
					var myAttributes:Object = {};
					myAttributes.text=point.@text;
					myAttributes.datap=valueAC;
					if(point.@text=="point2" || point.@text=="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>

 

  • 大小: 1.5 MB
分享到:
评论

相关推荐

    用arcgis for flex 在地图上显示柱状图 饼状图和折线图

    本教程将深入讲解如何利用ArcGIS for Flex在地图上显示柱状图、饼状图和折线图,以便于用户更直观地理解地理数据。 首先,我们需要了解ArcGIS for Flex的基本概念。ArcGIS for Flex是一个基于Adobe Flex的开发库,...

    arcgis server FLEX调用百度地图的实现类

    ArcGIS Server是Esri提供的一个强大的GIS服务器平台,它可以发布地图服务、地理处理服务等,而FLEX客户端则可以通过SOAP或REST接口与ArcGIS Server通信,获取地图数据并展示在用户界面上。 要调用百度地图,我们...

    arcgis for flex实现的地图卷帘效果

    在本文中,我们将深入探讨如何利用ArcGIS for Flex实现地图卷帘特效,这种特效可以为用户提供新颖的视觉体验,增加地图应用的吸引力。 首先,让我们了解什么是“地图卷帘效果”。地图卷帘效果是一种动态展示地图...

    Arcgis server flex 渲染用法

    Arcgis server flex FeatureLayer 渲染用法

    arcgis server flex API 函数及调用实例

    如果需要在地图上动态绘制几何对象,可以使用`Graphic`类和`SimpleMarkerSymbol`/`SimpleLineSymbol`/`SimpleFillSymbol`等符号类。 8. **地图导航**: 通过`zoomIn`、`zoomOut`、`pan`等方法,可以实现地图的...

    Arcgis server for flex 如何调用google地图

    在ArcGIS Server for Flex中调用Google地图涉及到的是地理信息系统(GIS)开发中的跨平台集成。ArcGIS Server是Esri公司提供的一个强大的地理空间服务引擎,用于发布、管理和访问地图及地理数据。Flex则是一种基于...

    ArcGIS Server Flex 应用视频

    通过这些视频教程,开发者不仅可以学会如何构建基本的Flex地图应用,还能掌握高级功能的实现,从而充分利用ArcGIS Server的强大功能,开发出高效、实用的地理信息系统应用。在实际项目中,这些知识将有助于提升GIS...

    Flex for arcgisserver 开发笔记

    【Flex for ArcGIS Server 开发笔记】 Flex for ArcGIS Server 是一种用于构建富互联网应用程序(RIA)的开发框架,特别适用于开发与地理信息系统相关的Web应用。由ESRI公司推出,它为ArcGIS Server 9.3提供了一种...

    ArcGIS_Server_Flex1.2_help

    3. 地理处理任务:Flex API支持调用ArcGIS Server上的地理处理服务,用户可以执行复杂的地理计算和分析,如缓冲区分析、叠加分析等。 4. 数据交换:Flex应用可以与ArcGIS Server进行数据交换,例如通过WMS或WFS服务...

    ArcGIS Server Flex API 1.3 离线帮助

    《ArcGIS Server Flex API 1.3 离线帮助》是Esri公司为开发者提供的一款详尽的技术文档,主要用于支持使用Flex技术构建与ArcGIS Server交互的应用程序。ArcGIS Server是一个强大的地理信息系统(GIS)平台,允许用户...

    10 ArcGIS Server FLEX API(GP服务应用).pdf

    ArcGIS Server FLEX API是ArcGIS Server提供的一个接口,允许使用Flex技术创建富客户端应用程序,以便用户能够利用网络上的地理信息资源。 根据文件标题“10 ArcGIS Server FLEX API(GP服务应用).pdf”和描述,本...

    arcgis for flex 加载高德地图

    本文将详细讲解如何利用ArcGIS for Flex API来加载高德地图,帮助开发者实现地图服务的集成。 ArcGIS for Flex是Esri公司提供的一种基于Adobe Flex的开发工具,它允许开发者构建具有地图功能的Web应用程序。Flex是...

    ArcGIS_Server_Flex开发教程.pdf

    根据提供的信息,我们可以推断这份文档是关于ArcGIS Server Flex开发教程的相关内容。然而,由于提供的部分内容主要包含版权信息而缺乏具体的章节或内容摘要,因此将基于标题、描述及常见Flex开发与ArcGIS Server...

    arcgis4flex调用天地图资源

    在GIS领域,ArcGIS for Flex是一个强大的Web GIS开发框架,它允许开发者利用Adobe Flex技术构建交互式的、基于Web的地图应用程序。而"arcgis4flex调用天地图资源"的主题涉及了如何将ArcGIS与中国的天地图(Tianditu...

    ArcGIS For Flex 地图联动

    在 ArcGIS For Flex 中,我们可以监听地图事件,如 `zoom`、`pan`、`extentChange` 等,当一个地图发生这些事件时,触发相应的更新逻辑,使其他地图跟随变化。这种联动可以通过设置相同的地图范围、比例尺或者中心点...

    ArcGIS Server开发指南基于Flex和.Net源码

    ArcGIS Server开发指南基于Flex和.Net数据随书光盘内容.分两个文件上传。

    arcgis及supermap Flex绘制军标源码

    通过阅读并理解提供的"MXML"文件,你可以看到如何将ArcGIS或SuperMap的API与Flex的绘图功能结合起来,实现军标在地图上的动态渲染。 总结,ArcGIS和SuperMap Flex结合使用,可以创建功能强大的在线军事地图应用。...

    ArcGIS Server Flex help

    List of ArcGIS API for Flex 1.2 packages. See the Adobe Flex 3 Language Reference at http://livedocs.adobe.com/flex/3/langref/ for Adobe Flex 3 packages. Package Description ...

Global site tag (gtag.js) - Google Analytics