flexview自定义一个popup窗口显示在地图

1.地图layer属性的定义文件popupconfig.xml：

<?xml version="1.0" ?>
<layersettings>
<layer name="库区布置点"
url="http://172.16.6.67/ArcGIS/rest/services/gzReservoirPlacement/FeatureServer/0">
<fields>
<field name="NAME" alias="名称" />
<field name="COR_NAME" alias="所属企业" />
<field name="SECTION" alias="所属区间" />
<field name="VOLUME" alias="体积" />
<field name="RP_TYPE" alias="型号" />
<field name="AREAS" alias="面积" />
<field name="RP_LENGTH" alias="长度" />
<field name="POSITION" alias="位置" />
<field name="MEDIUM" alias="介质" />
<field name="DAN_TARGET" alias="危险目标" />
<field name="DAMAGE_FROM_NAME" alias="伤害形式" />
</fields>
<showobjectid>true|false</showobjectid>
<showglobalid>true|false</showglobalid>
<singletomultilinethreshold>60</singletomultilinethreshold>
</layer>
</layersettings>
</configuration>

2.自定义的popup窗口代码：

<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx"
 xmlns:esri="http://www.esri.com/2008/ags"
 xmlns:layout="org.alivepdf.layout.*"
 xmlns:flashcommander="org.flashcommander.*"
 xmlns:components="org.flashcommander.components.*"
 width="100%" height="100%" creationComplete="vgroup1_creationCompleteHandler(event)">

<fx:Script>
<![CDATA[
import com.esri.ags.Graphic;
import com.esri.ags.Map;
import com.esri.ags.layers.FeatureLayer;
import com.esri.ags.layers.supportClasses.FeatureEditResults;
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import mx.rpc.AsyncResponder;
import mx.rpc.Fault;
import mx.rpc.events.FaultEvent;
private var _editGraphic:Graphic;
private var _editFeatureLayer:FeatureLayer;
private var _map:Map;
private var sectionArray:ArrayCollection = new ArrayCollection(

[
{name:"一区"},{name:"二区"},{name:"三区"},{name:"四区"}
 
]);

public function set editGraphic(value:Graphic):void
{
_editGraphic = value;

}

public function set editFeatureLayer(value:FeatureLayer):void
{
_editFeatureLayer = value;
}

public function set map(value:Map):void
{
_map = value;
}

protected function btnDelete_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
this._editFeatureLayer.applyEdits(null,null,[_editGraphic],true, new AsyncResponder(deleteFeatureComplete,deleteFeatureFault));
}

protected function btnSave_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
setGraphicAttrsFromFormItems();
this._editFeatureLayer.applyEdits(null,[_editGraphic],null,true, new AsyncResponder(updateFeatureComplete,updateFeatureFault)); 
}


private function  updateFeatureComplete(result:FeatureEditResults,token:Object):void{
if(this._map.getLayer(this._editFeatureLayer.id)){
this._map.getLayer(this._editFeatureLayer.id).refresh();
}
this._map.infoWindow.hide();
}

private function  deleteFeatureComplete(result:FeatureEditResults,token:Object):void{
if(this._map.getLayer(this._editFeatureLayer.id)){
this._map.getLayer(this._editFeatureLayer.id).refresh();
}
this._map.infoWindow.hide();
}

private function updateFeatureFault(fault:Fault,token:Object):void{

}
private function deleteFeatureFault(fault:Fault,token:Object):void{

}

private function setSectionValue(value:String):void{
for(var i=0;i<this.sectionArray.length;i++){
  if(value==sectionArray[i].name){
  this.txtSection.selectedIndex=i;
      break;
  }
}
}


private function setFormItemsValues():void{
var attrs:Object=this._editGraphic.attributes;
if(attrs.NAME)txtName.text=attrs.NAME;
if(attrs.COR_NAME)txtCorName.text=attrs.COR_NAME;
if(attrs.SECTION)
{
setSectionValue(attrs.SECTION);
//txtSection.selectedItem.name=attrs.SECTION;
}
if(attrs.VOLUME)txtVolume.text=attrs.VOLUME;
if(attrs.AREAS)txtArea.text=attrs.AREAS;
if(attrs.RP_LENGTH)txtLength.text=this._editGraphic.attributes.RP_LENGTH;
if(attrs.RP_TYPE)txtRpType.text=attrs.RP_TYPE;
if(attrs.POSITION)txtPosition.text=attrs.POSITION;
if(attrs.MEDIUM)txtMedium.text=attrs.MEDIUM;
if(attrs.DAN_TARGET)txtDanTarget.text=attrs.DAN_TARGET;
if(attrs.DAMAGE_FROM)txtDamageFrom.text=attrs.DAMAGE_FROM;
}

private function setGraphicAttrsFromFormItems():void{ 
this._editGraphic.attributes.NAME=txtName.text;
this._editGraphic.attributes.COR_NAME=txtCorName.text;
if(txtSection.selectedItem){
this._editGraphic.attributes.SECTION=txtSection.selectedItem.name;
}else{
this._editGraphic.attributes.SECTION="";
}
this._editGraphic.attributes.VOLUME=txtVolume.text;
this._editGraphic.attributes.AREAS=txtArea.text;
this._editGraphic.attributes.RP_LENGTH=txtLength.text;
this._editGraphic.attributes.RP_TYPE=txtRpType.text;
this._editGraphic.attributes.POSITION=txtPosition.text;
this._editGraphic.attributes.MEDIUM=txtMedium.text;
this._editGraphic.attributes.DAN_TARGET=txtDanTarget.text;
this._editGraphic.attributes.DAMAGE_FROM=txtDamageFrom.text;
}







protected function vgroup1_creationCompleteHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
setFormItemsValues();
}

]]>
</fx:Script>

<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<s:Form width="100%">
<!-- 更改垂直间距 -->
<s:layout>
<s:FormLayout gap="-14"/>
</s:layout>
<s:FormItem width="100%" label="名称" textAlign="right">
<s:TextInput id="txtName" width="100%"/>
</s:FormItem>
<s:FormItem width="100%" label="所属企业" textAlign="right">
<!--<s:TextInput id="txtCorName" width="100%"/>-->
<components:AutoComplete id="txtCorName" width="100%"
dataProvider="['黄埔油库', 'abb', 'baa', 'bba', 'cba', 'abc', 'ccc']"
forceOpen="true" requireSelection="true"/>
</s:FormItem>
<s:FormItem width="100%" label="所属区间" textAlign="right">
 
<s:DropDownList id="txtSection" width="100%" dataProvider="{sectionArray}"
labelField="name"/>
</s:FormItem>
<s:FormItem width="100%" label="体积" textAlign="right">
<s:TextInput id="txtVolume" width="100%"/>
</s:FormItem>
<s:FormItem width="100%" label="面积" textAlign="right">
<s:TextInput id="txtArea" width="100%"/>
</s:FormItem>
<s:FormItem width="100%" label="长度" textAlign="right">
<s:TextInput id="txtLength" width="100%"/>
</s:FormItem>
<s:FormItem width="100%" label="型号" textAlign="right">
<s:TextInput id="txtRpType" width="100%"/>
</s:FormItem>
<s:FormItem width="100%" label="位置" textAlign="right">
<s:TextInput id="txtPosition" width="100%"/>
</s:FormItem>
<s:FormItem width="100%" label="介质" textAlign="right">
<s:TextInput id="txtMedium" width="100%"/>
</s:FormItem>
<s:FormItem width="100%" label="危险目标" textAlign="right">
<s:TextInput id="txtDanTarget" width="100%"/>
</s:FormItem>
<s:FormItem width="100%" label="伤害形式" textAlign="right">
<s:TextInput id="txtDamageFrom" width="100%"/>
</s:FormItem>
    </s:Form>
<s:HGroup width="100%" horizontalAlign="center">
        <s:Button id="btnSave" label="保存" click="btnSave_clickHandler(event)"/>
<s:Button id="btnDelete" label="刪除" click="btnDelete_clickHandler(event)"/>
</s:HGroup>
</s:VGroup>

3.调用自定义的popup窗口并显示在地图上

var customAttributeEditForm:CustomAttributeRangeEditForm=new CustomAttributeRangeEditForm();
customAttributeEditForm.editGraphic=this.editGraphic;
customAttributeEditForm.editFeatureLayer=this.editFeatureLayer;
customAttributeEditForm.map=this.map;
this.map.infoWindow.content=customAttributeEditForm;
this.map.infoWindow.show(editGraphic.geometry.extent.center);

4.核心代码讲解：

                      初始化自定义popup窗口内容，从图层graphic绑定

private function setFormItemsValues():void{
var attrs:Object=this._editGraphic.attributes;
if(attrs.NAME)txtName.text=attrs.NAME;
if(attrs.COR_NAME)txtCorName.text=attrs.COR_NAME;
if(attrs.SECTION)
{
setSectionValue(attrs.SECTION);
//txtSection.selectedItem.name=attrs.SECTION;
}
if(attrs.VOLUME)txtVolume.text=attrs.VOLUME;
if(attrs.AREAS)txtArea.text=attrs.AREAS;
if(attrs.RP_LENGTH)txtLength.text=this._editGraphic.attributes.RP_LENGTH;
if(attrs.RP_TYPE)txtRpType.text=attrs.RP_TYPE;
if(attrs.POSITION)txtPosition.text=attrs.POSITION;
if(attrs.MEDIUM)txtMedium.text=attrs.MEDIUM;
if(attrs.DAN_TARGET)txtDanTarget.text=attrs.DAN_TARGET;
if(attrs.DAMAGE_FROM)txtDamageFrom.text=attrs.DAMAGE_FROM;
}

                        //保存popup窗口内容到图层

private function setGraphicAttrsFromFormItems():void{ 
this._editGraphic.attributes.NAME=txtName.text;
this._editGraphic.attributes.COR_NAME=txtCorName.text;
if(txtSection.selectedItem){
this._editGraphic.attributes.SECTION=txtSection.selectedItem.name;
}else{
this._editGraphic.attributes.SECTION="";
}
this._editGraphic.attributes.VOLUME=txtVolume.text;
this._editGraphic.attributes.AREAS=txtArea.text;
this._editGraphic.attributes.RP_LENGTH=txtLength.text;
this._editGraphic.attributes.RP_TYPE=txtRpType.text;
this._editGraphic.attributes.POSITION=txtPosition.text;
this._editGraphic.attributes.MEDIUM=txtMedium.text;
this._editGraphic.attributes.DAN_TARGET=txtDanTarget.text;
this._editGraphic.attributes.DAMAGE_FROM=txtDamageFrom.text;
}

      备注：

GIS之家论坛（推荐）：http://www.gishome.online

GIS之家GitHub:https://github.com/gishome/arcgis-for-js

GIS之家作品：https://shop116521643.taobao.com/shop/view_shop.htm

GIS之家兴趣部落：http://buluo.qq.com/p/barindex.html?bid=327395

GIS项目交流群：238339408

GIS之家交流群一：432512093