ARCGIS viewer入门(10）自定义infowindow

最新推荐文章于 2024-10-03 15:26:35 发布

原创最新推荐文章于 2024-10-03 15:26:35 发布 · 1w 阅读

1 ·

CC 4.0 BY-SA版权

GIS 同时被 2 个专栏收录

27 篇文章

订阅专栏

flex

25 篇文章

订阅专栏

这篇博客介绍了如何在ARCGIS viewer中实现自定义infoWindow。通过创建一个名为MyInfoPopup的控件，并设置其属性来显示图形的详细信息，包括MRID、NAME、ALIASNAME、LONGITUDE和LATITUDE。关键步骤在于将content属性设置为自定义控件，以展示图形的属性信息。

方法一：完全自定义infowindows方法：

private function myResultFunction(results:Array, clickGraphic:Graphic = null):void
{
trace("results:"+results);
if (results && results.length > 0)
{
var result:IdentifyResult = results[0];
var resultGraphic:Graphic = result.feature;
resultGraphic.symbol = smsIdentify;
//resultGraphic.infoWindowRenderer=myInfoWindowRenderer;
graphicsLayer.clear();
graphicsLayer.add(resultGraphic);
lastIdentifyResultGraphic = resultGraphic;
var mapPoint:MapPoint = resultGraphic.geometry as MapPoint;
var myInfoPopup:MyInfoPopup = new MyInfoPopup;
myInfoPopup.MRID = resultGraphic.attributes.MRID;
myInfoPopup.NAME = resultGraphic.attributes.NAME;
myInfoPopup.ALIASNAME = resultGraphic.attributes.ALIASNAME;
myInfoPopup.LONGITUDE = resultGraphic.attributes.LONGITUDE;
myInfoPopup.LATITUDE = resultGraphic.attributes.LATITUDE;
myMap.infoWindow.label = resultGraphic.attributes.ALIASNAME;
myMap.infoWindow.content = myInfoPopup;//这个是关键，这个content可以赋值任何一个控件或者容器。
myMap.infoWindow.show( mapPoint );
trace("clickGraphic:"+clickGraphic);
//clickGraphic.symbol = new InfoSymbol(); // use default renderer
// clickGraphic.symbol=smsIdentify;
// clickGraphic.infoWindowRenderer = myInfoWindowRenderer;
// clickGraphic.attributes = resultGraphic.attributes;
}
}

private function myResultFunction(results:Array, clickGraphic:Graphic = null):void
{
	trace("results:"+results);
    if (results && results.length > 0)
    {
        var result:IdentifyResult = results[0];
        var resultGraphic:Graphic = result.feature;
        
        resultGraphic.symbol = smsIdentify;
        //resultGraphic.infoWindowRenderer=myInfoWindowRenderer;
        graphicsLayer.clear();
        
        graphicsLayer.add(resultGraphic);
        
        lastIdentifyResultGraphic = resultGraphic;
        
        var mapPoint:MapPoint = resultGraphic.geometry as MapPoint;
		var myInfoPopup:MyInfoPopup = new MyInfoPopup;
		myInfoPopup.MRID = resultGraphic.attributes.MRID;
		myInfoPopup.NAME = resultGraphic.attributes.NAME;
		myInfoPopup.ALIASNAME = resultGraphic.attributes.ALIASNAME;
		myInfoPopup.LONGITUDE = resultGraphic.attributes.LONGITUDE;
		myInfoPopup.LATITUDE = resultGraphic.attributes.LATITUDE;
		
		myMap.infoWindow.label = resultGraphic.attributes.ALIASNAME;
		myMap.infoWindow.content = myInfoPopup; 
		myMap.infoWindow.show( mapPoint );
        
        trace("clickGraphic:"+clickGraphic);
        //clickGraphic.symbol = new InfoSymbol(); // use default renderer
	//	clickGraphic.symbol=smsIdentify;
	//	clickGraphic.infoWindowRenderer = myInfoWindowRenderer;
       // clickGraphic.attributes = resultGraphic.attributes;
        
    }
}

MyInfoPopup.mxml

Js代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Bindable]
public var MRID:String;
[Bindable]
public var NAME:String;
[Bindable]
public var ALIASNAME:String;
[Bindable]
public var LONGITUDE:String;
[Bindable]
public var LATITUDE:String;
]]>
</mx:Script>
<mx:VBox backgroundColor="0xEEEEEE" >
<mx:Label text="MRID : {MRID}"/>
<mx:Label text="编码: {NAME}"/>
<mx:Label text="名称: {ALIASNAME}"/>
<mx:Label text="经度: {LONGITUDE}"/>
<mx:Label text="纬度: {LATITUDE}"/>
</mx:VBox>
</mx:Canvas>

方法二：完全自定义infowindows方法：

InfoWindow.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:esri="http://www.esri.com/2008/ags"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:samples="InfoWindowRenderer.*" >

<fx:Style>

@namespace esri "http://www.esri.com/2008/ags";

@namespace s "library://ns.adobe.com/flex/spark";

@namespace samples "InfoWindowRenderer.*";

.styles

{

fills:#81C3FB blue green;

border-color:green;

border-thickness: 1;

background-color: #81C3FB;

font-size: 14;

upper-left-radius: 15;

lower-right-radius:15;

info-placement: top;

}

</fx:Style>

<fx:Script>

<![CDATA[

import com.esri.ags.Graphic;

import com.esri.ags.events.GraphicEvent;

import com.esri.ags.geometry.MapPoint;

import com.esri.ags.geometry.Polyline;

private function graphicAddHandler(event:GraphicEvent):void

{

event.graphic.toolTip = "工程编号："+event.graphic.attributes.Id+"\n"

+ "工程名："+event.graphic.attributes.NAME ;

event.graphic.addEventListener(MouseEvent.CLICK, onMouseCLickHandler);

}

private function onMouseCLickHandler(event:MouseEvent):void

{

const graphic:Graphic = event.target as Graphic;

if (graphic)

{

const mapPoint:MapPoint = (Polyline(graphic.geometry)).paths[0][0] as MapPoint;

var infoContent:InfowindowContent = new InfowindowContent();

infoContent.data = graphic.attributes;

map.infoWindowContent = infoContent;

map.infoWindow.styleName = "styles";

const point:Point = map.toScreen(mapPoint);

map.infoWindow.label = graphic.attributes.NAME;

map.infoWindow.show(map.toMap(point));

}

]]>

</fx:Script>

<fx:Declarations>

<esri:SimpleLineSymbol id="sls" width="3" color="0x00FF00"/>

</fx:Declarations>

<esri:Map id="map" openHandCursorVisible="false">

<esri:ArcGISDynamicMapServiceLayer url="http://localhost:8399/arcgis/rest/services/GEOSWNMap/MapServer"/>

<esri:FeatureLayer id="citiesFeatureLayer"

graphicAdd="graphicAddHandler(event)"

mode="snapshot"

symbol="{sls}"

outFields="*"

url="http://localhost:8399/arcgis/rest/services/GEOSWNMap/MapServer/1">

</esri:FeatureLayer>

</esri:Map>

</s:Application>

InfowindowContent.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas styleName="canvans" xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minHeight="100" minWidth="300">

<fx:Style>

@namespace s "library://ns.adobe.com/flex/spark";

@namespace mx "library://ns.adobe.com/flex/mx";

.canvans{

background-color:white;

horizontal-align:center;

}

.linkButton{

font-size: 14;

font-weight: bold;

color:green;

roll-over-color:green;

background-color:green;

}

</fx:Style>

<s:VGroup width="100%" height="100%" paddingTop="20" horizontalAlign="center">

<s:Label text="{data.NAME}" height="25"/>

<s:HGroup horizontalAlign="center" width="100%">

<mx:LinkButton label="查看单元数据" styleName="linkButton" />

<mx:LinkButton label="查看单元对比数据" styleName="linkButton" />

</s:HGroup>

</s:VGroup>

</mx:Canvas>

其他的一些相关资料

1 首先如何设置 infowindow或infoWindowRenderer的边框背景色：

Java代码

<fx:Style> @namespace esri "http://www.esri.com/2008/ags";
esri|InfoWindowLabel
{
color: white;
font-size: 20;
}
esri|InfoWindow
{
border-thickness: 0;
background-color: green;
font-size: 16;
upper-left-radius: 15;
upper-right-radius: 0;
info-placement: top;
info-offset-y: 20;
}
</fx:Style>

<fx:Style> @namespace esri "http://www.esri.com/2008/ags";
		esri|InfoWindowLabel
		{
			color: white;
			font-size: 20;
		}
		esri|InfoWindow
		{
			border-thickness: 0;
			background-color: green;
			font-size: 16;
			upper-left-radius: 15;
			upper-right-radius: 0;
			info-placement: top;
			info-offset-y: 20;            
		}
	 
	</fx:Style>

效果如图：

2 点击地图任意位置弹出一个信息窗：

Java代码

private function onMouseCLK(event:MapMouseEvent):void
{
myMap.infoWindow.show(myMap.toMapFromStage(event.stageX, event.stageY));
//设置里面的文字：
myTextArea.text="asdfasf";
}

private function onMouseCLK(event:MapMouseEvent):void
{
  myMap.infoWindow.show(myMap.toMapFromStage(event.stageX, event.stageY));
//设置里面的文字：
myTextArea.text="asdfasf";
}

设置信息泡的组件：

Html代码

<esri:Map id="myMap" mapClick="onMouseCLK(event)">
<esri:infoWindowContent>
<mx:TextArea id="myTextArea"
width="250"height="75"/>
</esri:infoWindowContent>
</esri:Map>

<esri:Map id="myMap"   mapClick="onMouseCLK(event)">
 <esri:infoWindowContent>
            <mx:TextArea id="myTextArea"
                         width="250" height="75"/>
        </esri:infoWindowContent>
</esri:Map>

3 点击任意一个图元，弹出信息窗:

方式一：最简单，直接在给图层的infoWindowRenderer 属性赋值：

Html代码

<esri:GraphicsLayer >
<esri:infoWindowRenderer>
<fx:Component>
<mx:VBox backgroundColor="0xffffff"
color="0x444444"
label="Parcel {data.PARCELID}">
<mx:Label text="Owner: {data.OWNERNME1}"/>
<mx:Label text="Address: {data.SITEADDRESS}"/>
<mx:Label text="Land Value: {data.LNDVALUE}"/>
<mx:Label text="Landuse: {data.USECD}"/>
</mx:VBox>
</fx:Component>
</esri:infoWindowRenderer>
<esri:GraphicsLayer/>

<esri:GraphicsLayer > 
   <esri:infoWindowRenderer>
                <fx:Component>
                    <mx:VBox backgroundColor="0xffffff"
                             color="0x444444"
                             label="Parcel {data.PARCELID}">
                        <mx:Label text="Owner: {data.OWNERNME1}"/>
                        <mx:Label text="Address: {data.SITEADDRESS}"/>
                        <mx:Label text="Land Value: {data.LNDVALUE}"/>
                        <mx:Label text="Landuse: {data.USECD}"/>
                    </mx:VBox>
                </fx:Component>
            </esri:infoWindowRenderer>
<esri:GraphicsLayer/>

方式二：给graphic加事件，在事件处理函数中弹出信息窗,所以当图元超过500时，效率很差。

<esri:GraphicsLayer id="roadLayer" graphicAdd="fLayer_graphicAddHandler" />

  protected function fLayer_graphicAddHandler(event:GraphicEvent):void
      {
                event.graphic.addEventListener(MouseEvent.MOUSE_CLICK, onMouseClkHandler);
     }

Js代码

pprivate function onMouseClkHandler(event:MouseEvent):void
var gr:Graphic = Graphic(event.target);
gr.symbol = mouseOverSymbol;
myMap.infoWindow.label = gr.attributes.NAME;
myMap.infoWindow.closeButtonVisible = false;
myMap.infoWindow.show(myMap.toMapFromStage(event.stageX, event.stageY));
}

  pprivate function onMouseClkHandler(event:MouseEvent):void
 {
                var gr:Graphic = Graphic(event.target);
                gr.symbol = mouseOverSymbol;
                myMap.infoWindow.label = gr.attributes.NAME;
                myMap.infoWindow.closeButtonVisible = false;
                myMap.infoWindow.show(myMap.toMapFromStage(event.stageX, event.stageY));
   }

或者:

gra.infoWindowRenderer=new ClassFactory(weatherInfoWin);

gra.symble=....;