目的：
1.ArcGIS.Server.9.3和ArcGIS API for JavaScript實現Identify功能，鼠標點擊后獲取被點擊對象的然后以infoWindow的方式顯示點擊對象的屬性信息。
準備工作：
1. 在ArcGis Server9.3中發布名為usa的MapServer。
2.在使用在線的http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer地圖數據和jsapi。
完成后的效果圖：

開始
1.啟動vs新建名為MapIdentify的ASP.NET Web應用程序。其實jsapi是純客戶端的開發了不需要vs也不需要.net了，純html頁面就可以了用記事本都可以開發了。我這里為了方便了就用vs2008了，畢竟可以調試js腳本了。
2.接著在工程中添加名為javascript的文件夾并且在這個文件夾里新建wabapp.js的文件，這里用來編寫我們自己的js代碼了，在Default.aspx頁面里添加對這個js文件的引用，同時在Default.aspx頁面里添加一個id為map的div標簽作為地圖控件的載體，添加完成后的html代碼如下： <%@?Page?Language="C#"?AutoEventWireup="true"?CodeBehind="Default.aspx.cs"?Inherits="MapIdentify._Default"?%>

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html?xmlns="http://www.w3.org/1999/xhtml"?>
<head?runat="server">
????<title>Untitled?Page</title>
????<link?rel="stylesheet"?type="text/css"?href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.1/js/dojo/dijit/themes/tundra/tundra.css">
????<script?type="text/javascript"?src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.1"></script>
????<script?type="text/javascript"?src="javascript/wabapp.js"></script>
????<style?type="text/css">
<!--
.tab?{
????font-family:?Verdana,?Arial,?Helvetica,?sans-serif;
????font-size:?12px;
????font-weight:?bold;
????color:?#000000;
????text-decoration:?none;
????border:?1px?solid?#000000;
????height:?18px;
????width:?70px;
????display:?block;
????margin-right:?0px;
????float:?left;
????text-align:?center;
????padding-top:?2px;
????background-color:?#CCCCCC;
????cursor:?hand;
}
.a-tab?{
????font-family:?Verdana,?Arial,?Helvetica,?sans-serif;
????font-size:?12px;
????font-weight:?bold;
????color:?#000000;
????text-decoration:?none;
????height:?18px;
????width:?70px;
????display:?block;
????margin-right:?0px;
????float:?left;
????text-align:?center;
????padding-top:?2px;
????background-color:?#FFFFFF;
????border-top-width:?1px;
????border-right-width:?1px;
????border-bottom-width:?1px;
????border-left-width:?1px;
????border-top-style:?solid;
????border-right-style:?solid;
????border-bottom-style:?solid;
????border-left-style:?solid;
????border-top-color:?#000000;
????border-right-color:?#000000;
????border-bottom-color:?#FFFFFF;
????border-left-color:?#000000;
????cursor:?hand;
}
.tr2?{
????border:?1px?solid?#000000;
????background-color:?#FFFFFF;
????padding:?0px;
????overflow:scroll;
????width:290px;
????height:130px;
????
}
.tr1?{
????height:?21px;
}
-->
</style>
</head>
<body?class="tundra">
????<form?id="form1"?runat="server">
????<div?id="map"?style="width:500px;?height:450px;?border:1px?solid?#000;"></div>
????</form>
</body>
</html>
3.上面的html代碼非常的簡單了，主要可以看一下tab、a-tab、tr2、tr1四個樣式的定義了，這幾個樣式是用來定義Identify后在infoWindow中內容用的。
4.切換到wabapp.js文件輸入如下代碼（具體的不做解釋了代碼注釋已經非常詳細了）： dojo.require("esri.map");
dojo.require("esri.tasks.identify");

var?map,?identifyTask,?identifyParams,?symbol;
function?init()
{
???map?=?new?esri.Map("map",?{?extent:?new?esri.geometry.Extent(-127.968857954995,25.5778580720472,-65.0742781827045,51.2983251993735,?new?esri.SpatialReference({wkid:4269}))?});
???var?imageryPrime?=?new?esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");
???map.addLayer(imageryPrime);
???var?portlandLandBase?=?new?esri.layers.ArcGISDynamicMapServiceLayer("http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer");
???//設置要顯示的圖層
???portlandLandBase.setVisibleLayers([2,1,0]);
???//設置圖層透明度
???portlandLandBase.setOpacity(0.8);
???map.addLayer(portlandLandBase);
???//添加map的onLoad事件監聽用來執行initIdentify，初始化Identify
???dojo.connect(map,"onLoad",initIdentify);
}

//初始化Identify
function?initIdentify(map)
{
???dojo.connect(map,?"onClick",?doIdentify);
???//實例化IdentifyTask
???identifyTask?=?new?esri.tasks.IdentifyTask("http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer");
???//IdentifyTask參數設置
???identifyParams?=?new?esri.tasks.IdentifyParameters();
???//冗余范圍
???identifyParams.tolerance?=?3;
???//返回地理元素
???identifyParams.returnGeometry?=?true;
???//進行Identify的圖層
???identifyParams.layerIds?=?[2,1,0];
???//進行Identify的圖層為全部
???identifyParams.layerOption?=?esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
???//設置infoWindow的大小
???map.infoWindow.resize(300,?200);
???//設置infoWindow的標題頭
???map.infoWindow.setTitle("Identify結果");
???
???//symbol?=?new?esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,?new?esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,?new?dojo.Color([255,0,0]),?2),?new?dojo.Color([255,255,0,0.5]));
???symbol?=?new?esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND,?15,?new?esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,?new?dojo.Color([0,0,0]),?1),?new?dojo.Color([255,255,0,0.5]));
}

//進行Identify
function?doIdentify(evt)
{
???//清除上一次的高亮顯示
???map.graphics.clear();
???//Identify的geometry
???identifyParams.geometry?=?evt.mapPoint;
???//Identify范圍
???identifyParams.mapExtent?=?map.extent;
???identifyTask.execute(identifyParams,?function(idResults)?{?addToMap(idResults,?evt);?});
}

var?tabledata=new?Array();
//在infoWindow中顯示Identify結果
function?addToMap(idResults,?evt)
{
???tabledata=new?Array();
???//把Identify結果的名稱、字段、字段值放入tabledata中
???for(var?i=0;i<idResults.length;i++)
???{?
??????var?idResult=idResults[i];
??????if(tabledata.length>0)
??????{
?????????var?b=false;
?????????for(var?j=0;j<tabledata.length;j++)
?????????{
????????????if(tabledata[j].displayFieldName==idResult.layerName)
????????????{
???????????????var?b=true;
???????????????break;
????????????}
????????????
?????????}
?????????if(b)
?????????{
????????????tabledata[j].displayField.push(idResult.attributes);
????????????tabledata[j].feature.push(idResult.feature);
?????????}
?????????else
?????????{
????????????var?tds={};
????????????var?td=new?Array();
????????????//圖層名稱
????????????tds.displayFieldName=idResult.layerName;
????????????//圖層字段
????????????var?oo=idResult.attributes;
????????????td.push(oo);
????????????tds.displayField=td;
????????????var?td2=new?Array();
????????????td2.push(idResult.feature);
????????????tds.feature=td2;
????????????tabledata.push(tds);
?????????}
??????}
??????else
??????{
?????????var?tds={};
?????????var?td=new?Array();
?????????tds.displayFieldName=idResult.layerName;
?????????var?oo=idResult.attributes;
?????????td.push(oo);
?????????tds.displayField=td;
?????????var?td2=new?Array();
?????????td2.push(idResult.feature);
?????????tds.feature=td2;
?????????tabledata.push(tds);
??????}
???}
???//設置infoWindow顯示內容
???map.infoWindow.setContent(tableHtml(tabledata,0));
???//設置infoWindow顯示
???map.infoWindow.show(evt.screenPoint,?map.getInfoWindowAnchor(evt.screenPoint));
}

//Identify結果的tab切換事件
function?tab(index)
{
???map.infoWindow.setContent(tableHtml(tabledata,index));
}

//infoWindow中內容html
function?tableHtml(rs,index)
{
???var?str="";
???var?str1="";
???var?str2="";
???for(var?i=0;i<rs.length;i++)
???{
??????if(i==index)
??????{
?????????str1=str1+"<span?class='a-tab'?id='"+i+"'?οnclick='tab("+i+")'>"+rs[i].displayFieldName+"</span>";
??????}
??????else
??????{
?????????str1=str1+"<span?class='tab'?id='"+i+"'?οnclick='tab("+i+")'>"+rs[i].displayFieldName+"</span>";
??????}
???}
???str2=trHtml(index);
???str="<div?class='tr1'>"+str1+"</div><div?class='tr2'><table?border='1'>"+str2+"</table></div>";
???return?str;
}

function?trHtml(index)
{
???var?str2="<tr>";
???for?(prop?in?tabledata[index].displayField[0])
???{
??????str2=str2+"<td>"+prop+"</td>"
???}
???str2=str2+"</tr>";
???for(var?i=0;i<tabledata[index].displayField.length;i++)
???{
??????str2=str2+"<tr?style='cursor:?hand'?οnclick=showFeature(tabledata["+index+"].feature["+i+"])>";
??????for?(prop?in?tabledata[index].displayField[i])
??????{
?????????if(tabledata[index].displayField[i][prop]=="")
?????????{
????????????str2=str2+"<td>&nbsp;</td>"
?????????}
?????????else
?????????{
????????????str2=str2+"<td>"+tabledata[index].displayField[i][prop]+"</td>"
?????????}
?????????
??????}
??????str2=str2+"</tr>";
??????
???}
???return?str2;
}

//高亮顯示選中元素
function?showFeature(feature)
{
???map.graphics.clear();
???feature.setSymbol(symbol);
???map.graphics.add(feature);
}


dojo.addOnLoad(init); 5.上面的代碼中主要是IdentifyTask的功能和infoWindow控件的應用了。

轉載于:https://www.cnblogs.com/hll2008/archive/2008/11/25/1340910.html

總結

以上是生活随笔為你收集整理的ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能（六）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。