如何在Renderer中设置属性

ClassFactory妙用
本文介绍了一个自定义的GroupHeaderRenderer类,该类扩展了AdvancedDataGridHeaderRenderer,并通过ClassFactory来设置其属性,实现了列组头的展开和折叠功能。此外,还提供了生成AdvancedDataGridColumn和AdvancedDataGridColumnGroup的方法。

ClassFactory的properties妙用

1)UITextField与label,使用label显不出来

package com.citigroup.presentation.csa
{
	import flash.events.MouseEvent;
	
	import mx.controls.Label;
	import mx.controls.advancedDataGridClasses.AdvancedDataGridHeaderRenderer;
	import mx.core.UITextField;
	import mx.events.FlexEvent;
	
	public class GroupHeaderRenderer extends AdvancedDataGridHeaderRenderer
	{
		public var children:Array=[];
		public var expand:Boolean=true;
		private var l:UITextField;
		public function GroupHeaderRenderer()
		{
			super();
			l=new UITextField();
			l.text="[-]";
			l.addEventListener(MouseEvent.CLICK,toggle);
	                addChild(l);
			this.addEventListener(FlexEvent.CREATION_COMPLETE,init);
			
		}
		private function init(event:FlexEvent):void{
			if(expand){
				l.text="[-]";
			}else{
				l.text="[+]";
				toggleChildren(false);
			}
			this.removeEventListener(FlexEvent.CREATION_COMPLETE,init);
		}
		override public function set data(value:Object):void{
			super.data = value;
			this.setStyle("color","0xF9F088");
			this.setStyle("fontWeight","bold");
			this.setStyle("textAlign","left");
		}
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
	                super.updateDisplayList(unscaledWidth,unscaledHeight);
			label.x=0;
			l.x=label.x+label.width;
	                l.y=label.y;
		}
		
		private function toggle(event:MouseEvent):void{
			if(l.text=="[+]"){
				l.text="[-]";
				toggleChildren(true);
			}else{
				l.text="[+]";
				toggleChildren(false);
			}
		}
		private function toggleChildren(visible:Boolean):void{
			if(children.length<=1) return;
			for(var i:int=1;i<children.length;i++){
				children[i].visible=visible;
			}
		}
	}
}

                       public function genAdgColumn(headerText:String,dataField:String,width:Number=100):AdvancedDataGridColumn{
				var col:AdvancedDataGridColumn=new AdvancedDataGridColumn();
				col.headerText=headerText;
				col.dataField=dataField;
				col.width=width;
				return col;
			}
			public function genAdgColumnGroup(headerText:String,dataField:String,children:Array,expand:Boolean=true):AdvancedDataGridColumnGroup{
				var group:AdvancedDataGridColumnGroup=new AdvancedDataGridColumnGroup();
				group.headerText=headerText;
				group.dataField=dataField;
				var cf:ClassFactory=new ClassFactory(GroupHeaderRenderer);
				cf.properties ={'children':children,'expand':expand};
				group.headerRenderer=cf;				
				group.children=children;
				return group;
			}





### 设置FeatureLayer的Renderer属性 在ArcGIS API for JavaScript中,`FeatureLayer` 的 `renderer` 属性用于控制图层内要素的显示样式。这允许开发者根据特定条件来定制化展示不同类型的地理特征。 为了设置 `FeatureLayer` 的 renderer 属性,通常会使用 `SimpleRenderer`, `UniqueValueRenderer`, 或者 `ClassBreaksRenderer` 类之一。下面是一个简单的例子,展示了如何应用 `SimpleRenderer` 来改变所有要素的颜色: ```javascript const featureLayer = new FeatureLayer({ url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/NaplesItaly/ImageService/MapServer", outFields: ["*"], renderer: { type: "simple", // 使用简单渲染器 symbol: { // 定义符号样式 type: "simple-fill", // 填充符号类型 color: [227, 139, 79, 0.8], // RGBA颜色值 outline: { // 边框线样式 width: 1, color: [255, 255, 255] } }, label: "Default Renderer" } }); map.add(featureLayer); ``` 当涉及到更复杂的场景时,比如依据某个字段的不同取值给定不同的颜色方案,则可以选择 `UniqueValueRenderer`: ```javascript featureLayer.renderer = { type: "unique-value", // 使用唯一值渲染器 field: "TYPE", // 指定分类所使用的字段名 defaultSymbol: { // 默认情况下未匹配到任何类别的符号 type: "simple-marker", style: "circle", size: 10, color: "#FFA500" }, uniqueValueInfos: [ { value: "Residential", // 字段中的具体值 label: "住宅区", description: "", symbol: { // 对应此值得符号配置 type: "simple-marker", style: "square", size: 12, color: "#ADD8E6" } }, /* 更多类别 */ ] }; ``` 对于数值范围的数据处理,可以采用 `ClassBreaksRenderer` 实现分级色彩效果: ```javascript featureLayer.renderer = { type: "class-breaks", // 使用等级断点渲染器 field: "POPULATION", // 数字型字段名称 classBreakInfos: [{ minValue: 0, maxValue: 1000, label: "<= 1K", symbol: { type: "simple-fill", color: [247, 251, 255], outline: {color:[0,0,0]} } },{ minValue: 1001, maxValue: 5000, label: "1K - 5K", symbol: {/* ... */}, }] } ``` 上述代码片段均来自官方文档指南[^4] 和实际案例研究[^5] 中的最佳实践建议。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值