FeatureLayer 的Feature 的symbol使用renderer

本文介绍了一个使用Flex框架实现的数据渲染器(DataRenderer)组件。该组件用于显示监控数据,包括雨量、水位和闸门开合度等,并具备展开和最小化状态切换功能。文章详细展示了组件的XML配置及ActionScript代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

定义个DataRenderer

<?xml version="1.0" encoding="utf-8"?>
<s:DataRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
				xmlns:s="library://ns.adobe.com/flex/spark" implements="mx.core.IFactory"
				xmlns:code="http://code.google.com/p/flex-iframe/"
				creationComplete="datarenderer1_creationCompleteHandler(event)"
				xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:supportClasses="com.esri.ags.skins.supportClasses.*" xmlns:view="widgets.monitor.view.*" xmlns:template="com.depth.viewer.widget.template.*" xmlns:widget="com.depth.viewer.widget.*">
	
	<fx:Script>
		<![CDATA[
			import com.depth.viewer.facade.IocAppFacade;
			import com.esri.ags.Graphic;
			import com.esri.ags.layers.FeatureLayer;
			import com.xcsw.flex.facade.ConstFacade;
			
			import mx.controls.Alert;
			import mx.events.DragEvent;
			import mx.events.FlexEvent;
			import mx.events.MoveEvent;
			
			import widgets.map.util.MapUtil;
			/*
			
			只显示监控数据,雨量、水位、闸门开合度,没有视频
			*/
			protected function linkbutton3_clickHandler(event:MouseEvent):void
			{
				if(!data)//由渲染器使用者提供
					return;
				var feature:Graphic = data.feature as Graphic;
				var fl:FeatureLayer = feature.graphicsLayer as FeatureLayer;
				//获取水位站对应的ID
				var fId:String = feature.attributes[fl.layerDetails.objectIdField];
				var site:String=data.station;
				//水位信息警戒水位参数设置
				IocAppFacade.getInstance().sendNotification(IocAppFacade.LOAD_WIDGET,{id:"TriggerlevelWidget",runingParams:{ID:fId,tablename:"M_Waterlevel",site:site}});
			}
			
			
			public function newInstance():*{
				return new MonitorDataInfoSymbolRenderer();
			}
			
	
			protected function btnCloseButton_clickHandler(event:MouseEvent):void
			{
				if (currentState != "minState")
				{
					currentState = "minState";
				} 
			}
			
			
			protected function datarenderer1_creationCompleteHandler(event:FlexEvent):void
			{
				//addEventListener(MouseEvent.ROLL_OUT,rollOutHandler);
				//addEventListener(MouseEvent.ROLL_OVER,rollOverHandler);
			}
			
			private function rollOverHandler(event:MouseEvent):void
			{
				if (currentState == "minState")
				{
					currentState = "normal";
				}
			}
			
			private function rollOutHandler(event:MouseEvent):void
			{
				//var obj:Object=event.target;
			}
			
			
			protected function chkMonitorData_clickHandler(event:MouseEvent):void
			{
				var checkBox:CheckBox=event.target as CheckBox;
				switch(checkBox.label){
					case "雨量":
						if(checkBox.selected)							
							
							break;
					case "水位":
						if(checkBox.selected)
														
							
							break;
					case "闸门":						
						if(checkBox.selected)
							
							
							break;
				}
			}
				

			protected function btnExpandButton_clickHandler(event:MouseEvent):void
			{
				if (currentState == "minState")
				{
					currentState = "normal";
				}
			}

		]]>
	</fx:Script>
	
	<s:states>
		<s:State name="normal"/>
		<s:State name="minState"/>
	</s:states>
	
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		.InfoExpandButton {
			disabledSkin: Embed(source="/assets/swf/skins2.swf", symbol="Callout_expandButtonDisabledSkin");
			downSkin: Embed(source="/assets/swf/skins2.swf", symbol="Callout_expandButtonDownSkin");
			overSkin: Embed(source="/assets/swf/skins2.swf", symbol="Callout_expandButtonOverSkin");
			upSkin: Embed(source="/assets/swf/skins2.swf", symbol="Callout_expandButtonUpSkin");
		}
		
		.InfoCloseButton {
			disabledSkin: Embed(source="/assets/swf/skins2.swf", symbol="Callout_closeButtonDisabledSkin");
			downSkin: Embed(source="/assets/swf/skins2.swf", symbol="Callout_closeButtonDownSkin");
			overSkin: Embed(source="/assets/swf/skins2.swf", symbol="Callout_closeButtonOverSkin");
			upSkin: Embed(source="/assets/swf/skins2.swf", symbol="Callout_closeButtonUpSkin");
		}
	</fx:Style>
	
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	
	<s:VGroup width="100%">
		<s:HGroup verticalAlign="middle">
			<s:Label text="监控点:"/>
			<mx:Button id="btnExpandButton"
					   width="18" height="18"
					   click="btnExpandButton_clickHandler(event)"
					   includeIn="minState"
					   styleName="InfoExpandButton"/>
			<mx:Button id="btnCloseButton" 
					   width="18" height="18"
					  includeIn="normal"
					  click="btnCloseButton_clickHandler(event)" 
					  styleName="InfoCloseButton" toolTip="关闭"/>
		</s:HGroup>
				
		<s:BorderContainer height="80" borderColor="#128EEE" includeIn="normal" >
			<s:layout>
				<s:VerticalLayout />
			</s:layout>
			
			<s:HGroup id="ghRain"  verticalAlign="middle" fontSize="25">
				<s:CheckBox id="chkMonitorDataRain" label="雨量" click="chkMonitorData_clickHandler(event)" />
				<s:Label text=":" />
			</s:HGroup>
			
			<s:HGroup id="hgWater" verticalAlign="middle">
				<s:CheckBox id="chkMonitorDataWater" label="水位" click="chkMonitorData_clickHandler(event)" />
				<s:Label text=":" />
			</s:HGroup>
			
			<s:HGroup id="hgFloodgate" verticalAlign="middle">
				<s:CheckBox id="chkMonitorDataFloodgate" label="闸门" click="chkMonitorData_clickHandler(event)" />
				<s:Label text=":" />
			</s:HGroup>	
		</s:BorderContainer>
		
		<s:Label text="当前时间:" includeIn="normal" />
	</s:VGroup>	
</s:DataRenderer>


使用该renderer

			protected function btnShowVideoInfo_clickHandler(event:MouseEvent):void
			{
				var videoLayerName:String="sde.SDE.MonitorPoint";
				//var videoLayerName:String="sde.SDE.RainMonitory";
				featureLayer=MapUtil.getFeatureLayerByName(videoLayerName);
				
				//featureLayer增加feature
				featureLayer.addEventListener(GraphicEvent.GRAPHIC_ADD,graphicAddedHandler);
				featureLayer.visible=true;
				
				/**
				 * feature添加处理函数
				 */ 
				function graphicAddedHandler(event:GraphicEvent):void{
/* 					var features:ArrayCollection=featureLayer.graphicProvider as ArrayCollection;
					for each(var feature:Graphic in features){
						displayFeatureInfoSymbol(feature);
					}  */
					displayFeatureInfoSymbol(event.graphic);
				}

	
			}
			private function displayFeatureInfoSymbol(feature:Graphic,data:Object=null):void{
				var infoSymbol:InfoSymbol=new InfoSymbol();
				infoSymbol.infoRenderer=new ClassFactory(MoniotorPointInfoSymbolRenderer);
				feature.symbol=infoSymbol;
				feature.alpha=0.8;
				//feature.visible=false;
			}

   



### 创建和使用自定义 RendererArcGIS JavaScript API 中,`Renderer` 是 `GraphicsLayer` 和 `FeatureLayer` 的重要组成部分,用于控制要素的可视化效果。由于 `Renderer` 类本身没有构造函数[^3],因此通常会使用具体的子类来创建渲染器。 #### 使用 SimpleRenderer 实现简单渲染 最简单的渲染方式是使用 `SimpleRenderer`,这适用于所有要素都采用相同符号的情况: ```javascript require([ "esri/layers/FeatureLayer", "esri/renderers/SimpleRenderer", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol" ], function (FeatureLayer, SimpleRenderer, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol) { var featureLayer = new FeatureLayer("URL_TO_SERVICE"); // 定义符号 var symbol = new SimpleMarkerSymbol( SimpleMarkerSymbol.STYLE_CIRCLE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([0, 255, 0, 0.25]) ); // 应用渲染器 featureLayer.renderer = new SimpleRenderer(symbol); }); ``` #### 基于属性值分类渲染 ClassBreaksRenderer 当需要根据不同数值范围设置不同样式时,可以考虑使用 `ClassBreaksRenderer`: ```javascript var classBreaksRenderer = new ClassBreaksRenderer(null, "POPULATION"); classBreaksRenderer.addBreak(0, 1000, new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])) ); classBreaksRenderer.addBreak(1000, 5000, new SimpleFillSymbol().setColor(new Color([255, 165, 0, 0.5])) ); featureLayer.setRenderer(classBreaksRenderer); ``` #### 利用 UniqueValueRenderer 进行唯一值渲染 如果要基于特定字段的不同取值赋予不同的显示风格,则应选用 `UniqueValueRenderer` : ```javascript var uniqueValueRenderer = new UniqueValueRenderer(null, "STATE_NAME"); uniqueValueRenderer.addValue("California", new SimpleFillSymbol().setColor(new Color([0, 0, 255, 0.5])) ); uniqueValueRenderer.defaultSymbol = new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0])); featureLayer.setRenderer(uniqueValueRenderer); ``` 为了满足更复杂的业务逻辑需求,还可以结合外部数据源动态调整渲染规则。例如读取 JSON 文件获取最新的统计数据并据此更新地图上各地区的颜色深浅程度[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值