`
Franciswmf
  • 浏览: 796914 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

flex 多个站点弹出层 (替代infowindow)

 
阅读更多
效果图:




<!--弹出层-->
		<esri:InfoSymbol id="infoSymbol1">
			<esri:infoRenderer>
				<fx:Component>
					<s:DataRenderer>
						<s:layout>
							<s:VerticalLayout/>
						</s:layout>
						<s:Group>
							<s:Label text="{data.stnm}" left="0"/>
							<s:Image source="assets/symbol/warn.png" left="120" toolTip="闸门故障" visible="{!data.workable}"/>
						</s:Group>
						<s:HGroup verticalAlign="middle">
							<s:Label text="{data.stnm.toString().indexOf('闸')==-1?'开闸':'泵机'}:"/>
							<s:Image source="assets/icon/dong2.png"/>
							<s:Image source="assets/symbol/{data.stnm.toString().indexOf('闸')==-1?'闸门':'泵站'}{data.devNum.toString().substr(1,1)=='1'?'关闭':'开启'}.png"/>
							<s:Image source="assets/symbol/{data.stnm.toString().indexOf('闸')==-1?'闸门':'泵站'}{data.devNum.toString().substr(2,1)=='1'?'关闭':'开启'}.png"/>
							<s:Image source="assets/symbol/{data.stnm.toString().indexOf('闸')==-1?'闸门':'泵站'}{data.devNum.toString().substr(3,1)=='1'?'关闭':'开启'}.png"/>
							<s:Image source="assets/symbol/{data.stnm.toString().indexOf('闸')==-1?'闸门':'泵站'}{data.devNum.toString().substr(4,1)=='1'?'开启':'关闭'}.png"/>
							<s:Image source="assets/symbol/{data.stnm.toString().indexOf('闸')==-1?'闸门':'泵站'}{data.devNum.toString().substr(5,1)=='1'?'开启':'关闭'}.png"/>
						</s:HGroup>
						<s:Label text="{data.q}"/>
						<s:Label text="{data.up}"/>
						<s:Label text="{data.down}"/>
					</s:DataRenderer>
				</fx:Component>
			</esri:infoRenderer>
		</esri:InfoSymbol>
		
		<esri:InfoSymbol id="infoSymbol2" containerStyleName="infostyle" infoPlacement="upperLeft">
			<esri:infoRenderer>
				<fx:Component>
					<s:DataRenderer>
						<s:layout>
							<s:VerticalLayout/>
						</s:layout>
						<s:Label text="{data.stnm}"/>
						<s:HGroup verticalAlign="middle">
							<s:Label text="{data.stnm.toString().indexOf('闸')==-1?'开闸':'泵机'}:"/>
							<s:Image source="assets/icon/dong.png"/>
							<s:Image source="assets/symbol/{data.stnm.toString().indexOf('闸')==-1?'闸门':'泵站'}{data.devNum.toString().substr(1,1)=='1'?'开启':'关闭'}.png"/>
							<s:Image source="assets/symbol/{data.stnm.toString().indexOf('闸')==-1?'闸门':'泵站'}{data.devNum.toString().substr(2,1)=='1'?'开启':'关闭'}.png"/>
							<s:Image source="assets/symbol/{data.stnm.toString().indexOf('闸')==-1?'闸门':'泵站'}{data.devNum.toString().substr(3,1)=='1'?'开启':'关闭'}.png"/>
							<s:Image source="assets/symbol/{data.stnm.toString().indexOf('闸')==-1?'闸门':'泵站'}{data.devNum.toString().substr(4,1)=='1'?'开启':'关闭'}.png"/>
							<s:Image source="assets/symbol/{data.stnm.toString().indexOf('闸')==-1?'闸门':'泵站'}{data.devNum.toString().substr(5,1)=='1'?'开启':'关闭'}.png"/>
						</s:HGroup>
						<s:Label text="{data.q}"/>
						<s:Label text="{data.up}"/>
						<s:Label text="{data.down}"/>
					</s:DataRenderer>
				</fx:Component>
			</esri:infoRenderer>
		</esri:InfoSymbol>
		
		<esri:InfoSymbol id="infoSymbol3" containerStyleName="infostyle" infoPlacement="lowerLeft">
			<esri:infoRenderer>
				<fx:Component>
					<s:DataRenderer>
						<s:layout>
							<s:VerticalLayout/>
						</s:layout>
						<s:Label text="{data.stnm}"/>
						<s:HGroup verticalAlign="middle">
							<s:Label text="{data.stnm.toString().indexOf('闸')==-1?'开闸':'泵机'}:"/>
							<s:Image source="assets/icon/dong.png"/>
							<s:Image source="assets/symbol/{data.stnm.toString().indexOf('闸')==-1?'闸门':'泵站'}{data.devNum.toString().substr(1,1)=='1'?'关闭':'开启'}.png"/>
							<s:Image source="assets/symbol/{data.stnm.toString().indexOf('闸')==-1?'闸门':'泵站'}{data.devNum.toString().substr(2,1)=='1'?'关闭':'开启'}.png"/>
							<s:Image source="assets/symbol/{data.stnm.toString().indexOf('闸')==-1?'闸门':'泵站'}{data.devNum.toString().substr(3,1)=='1'?'关闭':'开启'}.png"/>
							<s:Image source="assets/symbol/{data.stnm.toString().indexOf('闸')==-1?'闸门':'泵站'}{data.devNum.toString().substr(4,1)=='1'?'开启':'关闭'}.png"/>
							<s:Image source="assets/symbol/{data.stnm.toString().indexOf('闸')==-1?'闸门':'泵站'}{data.devNum.toString().substr(5,1)=='1'?'开启':'关闭'}.png"/>
						</s:HGroup>
						<s:Label text="{data.q}"/>
						<s:Label text="{data.up}"/>
						<s:Label text="{data.down}"/>
					</s:DataRenderer>
				</fx:Component>
			</esri:infoRenderer>
		</esri:InfoSymbol>
		
		<esri:InfoSymbol id="infoSymbol4" containerStyleName="infostyle" infoPlacement="bottom">
			<esri:infoRenderer>
				<fx:Component>
					<s:DataRenderer>
						<s:layout>
							<s:VerticalLayout/>
						</s:layout>
						<s:Label text="{data.stnm}"/>
						<s:HGroup verticalAlign="middle">
							<s:Label text="{data.stnm.toString().indexOf('闸')==-1?'开闸':'泵机'}:"/>
							<s:Image source="assets/icon/dong.png"/>
							<s:Image source="assets/symbol/{data.stnm.toString().indexOf('闸')==-1?'闸门':'泵站'}{data.devNum.toString().substr(1,1)=='1'?'开启':'关闭'}.png"/>
							<s:Image source="assets/symbol/{data.stnm.toString().indexOf('闸')==-1?'闸门':'泵站'}{data.devNum.toString().substr(2,1)=='1'?'开启':'关闭'}.png"/>
							<s:Image source="assets/symbol/{data.stnm.toString().indexOf('闸')==-1?'闸门':'泵站'}{data.devNum.toString().substr(3,1)=='1'?'开启':'关闭'}.png"/>
							<s:Image source="assets/symbol/{data.stnm.toString().indexOf('闸')==-1?'闸门':'泵站'}{data.devNum.toString().substr(4,1)=='1'?'开启':'关闭'}.png"/>
							<s:Image source="assets/symbol/{data.stnm.toString().indexOf('闸')==-1?'闸门':'泵站'}{data.devNum.toString().substr(5,1)=='1'?'开启':'关闭'}.png"/>
						</s:HGroup>
						<s:Label text="{data.q}"/>
						<s:Label text="{data.up}"/>
						<s:Label text="{data.down}"/>
					</s:DataRenderer>
				</fx:Component>
			</esri:infoRenderer>
		</esri:InfoSymbol>



public function drawGraphic():void
			{
				waterTRLayer.clear();
				var graphic:Graphic;
				var data:Object;
				for(var i:int=0;i<waterTRArr.length;i++)
				{
					var point:MapPoint=new MapPoint(waterTRArr[i].lgtd,waterTRArr[i].lttd);
					var graphic2:Graphic=new Graphic(point,null,new Object());
					//var graphicStnm:Graphic=new Graphic(point,null,new Object());
					//var symbol:WaterSymbol=new WaterSymbol(11,0x000099);//蓝色三角形
					
					graphic2.attributes.name=waterTRArr[i].stnm;
					graphic2.symbol=reservoirSourceSymbol;
					
					//graphicStnm.attributes.stnm_z=waterTRArr[i].stnm_z;
					//graphicStnm.symbol=csWater;
					
					waterTRLayer.add(graphic2);
					//waterTRLayer.add(graphicStnm);
					if(btn1Flag){
						if(i==0){
							data={
								stnm:waterTRArr[i].stnm,
									workable:true,
									q:"出库流量:0.000m³/s",
									up:"坝上水位:90.62m",
									down:"坝下水位:0.00m",
									devNum:"011100"
							};
							graphic=new Graphic(point,infoSymbol1,data);
						}else if(i==1){
							data={
								stnm:waterTRArr[i].stnm,
									workable:true,
									q:"出库流量:95.204m³/s",
									up:"坝上水位:94.81m",
									down:"坝下水位:32.33m",
									devNum:"110000"
							};
							graphic=new Graphic(point,infoSymbol2,data);
						}else if(i==2){
							data={
								stnm:waterTRArr[i].stnm,
									workable:false,
									q:"出库流量:128.339 m³/s",
									up:"坝上水位:125.62m",
									down:"坝下水位:89.49m",
									devNum:"000000"
							};
							graphic=new Graphic(point,infoSymbol3,data);
						}else if(i==3){
							data={
								stnm:waterTRArr[i].stnm,
									workable:true,
									q:"出库流量:140.346m³/s",
									up:"坝上水位:134.32m",
									down:"坝上水位:92.35m",
									devNum:"111110"
							};
							graphic=new Graphic(point,infoSymbol4,data);
						}
						waterTRLayer.add(graphic);
					}else if(btn2Flag){
						if(i==0){
							data={
								stnm:waterTRArr[i].stnm,
									workable:true,
									q:"出库流量:0.000m³/s",
									up:"坝上水位:90.00m",
									down:"坝下水位:0.00m",
									devNum:"011100"
							};
							graphic=new Graphic(point,infoSymbol1,data);
						}else if(i==1){
							data={
								stnm:waterTRArr[i].stnm,
									workable:true,
									q:"出库流量:95.000m³/s",
									up:"坝上水位:94.00m",
									down:"坝下水位:32.00m",
									devNum:"110000"
							};
							graphic=new Graphic(point,infoSymbol2,data);
						}else if(i==2){
							data={
								stnm:waterTRArr[i].stnm,
									workable:false,
									q:"出库流量:128.00 m³/s",
									up:"坝上水位:125.00m",
									down:"坝下水位:89.00m",
									devNum:"000000"
							};
							graphic=new Graphic(point,infoSymbol3,data);
						}else if(i==3){
							data={
								stnm:waterTRArr[i].stnm,
									workable:true,
									q:"出库流量:150.000m³/s",
									up:"坝上水位:130.00m",
									down:"坝上水位:90.00m",
									devNum:"111110"
							};
							graphic=new Graphic(point,infoSymbol4,data);
						}
						waterTRLayer.add(graphic);
					}
				}
				map.addLayer(waterTRLayer);
			
			}
  • 大小: 57.6 KB
分享到:
评论

相关推荐

    百度地图多个marker展示infowindow

    百度地图上展示多个marker的同时,能展示多个infowindow,避免只有最后一个infowindow能展示的问题。 博客地址:http://blog.csdn.net/qq_19666821/article/details/70195267

    百度地图个性化弹出层和地图颜色

    通过API,开发者可以调用特定方法创建和控制弹出层,如`BMap.InfoWindow`对象,以及设置地图样式,如`map.setMapStyle()`函数,该函数接受一个包含地图样式的JSON对象,可以自定义地图的各个视觉元素。 在实际开发...

    arcgis 自定义infowindow

    Infowindow是ArcGIS地图中一个非常重要的交互元素,当用户点击地图上的图层或特征时,它会弹出一个窗口,显示选定对象的相关信息。默认情况下,Infowindow的内容和样式由ArcGIS系统设定,但有时我们可能需要更灵活的...

    使用ArcGISAPI实现多个弹窗弹出;多个Popup窗体弹出,亲测可用。

    本篇将详细讲解如何使用ArcGIS API 实现多个弹窗(Popup)的弹出功能,这对于展示地图上的详细信息、提供用户交互体验至关重要。 首先,ArcGIS API 提供了Popup类,用于在地图上创建弹窗。Popup对象可以包含图层的...

    InfoWindow

    在某些场景下,可能需要同时显示多个`InfoWindow`,例如对比不同图层的特征信息。这时,可以创建多个`InfoWindow`实例,并管理它们的显示和隐藏状态。 ### 9. 优化性能 为了提高性能,`InfoWindow`的内容应该尽...

    高德地图自定义infowindow

    在使用高德地图API开发应用时,自定义`Infowindow`(信息窗口)是一个常见的需求,这可以提升用户体验并使地图展示的信息更加丰富和个性化。`Infowindow`是地图上的一个浮动视图,通常在点击地图上的标记(Marker)...

    百度地图的安卓移动端demo-InfoWindow

    InfoWindow在百度地图中通常被称为信息窗口,它是在地图上某个位置点(Marker)被点击后弹出的一个浮动窗口,用于显示该位置点的相关信息。InfoWindow通常包含标题、内容和自定义视图,为用户提供直观的信息展示。 ...

    百度地图V3.6.0系列——覆盖物和InfoWindow

    本篇将重点讲解百度地图V3.6.0版本中的覆盖物(Overlay)和InfoWindow(信息窗口)的应用,这两个功能对于创建交互式地图至关重要。 首先,覆盖物是百度地图API中的一个重要概念,它允许开发者在地图上添加自定义的...

    YisingleMarkerView:可以在高德地图上显示多个infoWindow的库

    可以在地图上显示多个InfoWindow框架 这个框架可以在地图上的marker上显示多个infoWindow(高德默认只能同时显示一个infoWindow) 效果图如下: 使用 !!!!! 请在使用前 将高德地图的sdk加到工程中 allprojects { ...

    arcgis javascript自定义infowindow

    在页面中,你需要配置地图,并定义图层的点击事件,使得当用户点击图层时,自定义的Infowindow能够正确弹出并显示相关信息。这通常涉及到`Map`、`Layer`、`Graphic`对象的使用,以及事件监听器的设置。 在实际应用...

    GMapV3infowindow风格可扩展源码

    在这个项目中,我们关注的是GMapV3的InfoWindow(信息窗口)的风格扩展源码。 InfoWindow在Google Maps API中是一个非常实用的功能,它可以在地图上的标记(Marker)上显示详细信息。通常,InfoWindow包含文本、...

    自定义信息窗InfoWindow样式

    示范使用SuperMap iClient 6R for Flex开发模式,通过设置InfoWindow 类的各种Styles属性,自定义信息窗InfoWindow样式。

    cesium之自定义气泡窗口infoWindow后续优化篇.zip

    9. **多语言支持**:如果应用需要支持多语言,优化可能包括实现InfoWindow内容的国际化,以便不同地区的用户能方便阅读。 10. **性能监控与调试**:使用Cesium提供的性能分析工具,检查InfoWindow的渲染和更新性能...

    百度地图API同时显示多个标记,可标记自己的所有分公司

    通过以上步骤,你就可以在web网页上利用百度地图API同时显示多个标记,点击标记弹出分公司简介并链接到对应的分公司网站了。无论是在电脑还是手机上,用户都能方便地查看和交互。记得在实际开发中,根据实际需求调整...

    百度地图显示多个标注点

    在使用百度地图API时,有时候我们需要在地图上显示多个标注点来表示不同的地理位置信息,比如店铺分布、公交站点等。这篇博客"百度地图显示多个标注点"提供了关于如何实现这一功能的技术指南。以下是对该主题的详细...

    Arcgis API for js自定义InfoWindow

    总结起来,自定义ArcGIS API for JavaScript的InfoWindow涉及内容设置、模板构建、数据绑定、事件处理、定位与偏移以及样式调整等多个方面。通过这些自定义功能,开发者能够打造符合项目需求、具有高度交互性的信息...

    Flex for arcgisserver 开发笔记

    - **Demo3:InfoWindow显示查询结果**:在地图上的特定点上弹出信息窗口,显示查询结果。 **地理处理服务** 地理处理服务利用ArcGIS的强大空间分析能力,处理复杂的地理数据处理流程。例如: - **Demo1:DriverTime...

    arcgis api 3.x for js 地图加载多个气泡窗口展示.zip

    这个压缩包"arcgis api 3.x for js 地图加载多个气泡窗口展示.zip"很可能包含了一系列示例代码或教程,展示了如何在地图上加载并展示多个信息气泡窗口。这些气泡窗口通常用于提供关于地图上特定位置的详细信息,如...

    Flex地图,可以自己添加坐标点,添加信息

    9. **多图层支持**: 如果需要在同一地图上展示不同数据,可以创建多个图层。每个图层可以有不同的标记、线或面,有助于区分和组织信息。 10. **数据绑定和动态更新**: 利用Flex的数据绑定特性,可以将数据源...

Global site tag (gtag.js) - Google Analytics