當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能（六）

發(fā)布時(shí)間：2025/3/20 javascript 47 豆豆

生活随笔收集整理的這篇文章主要介紹了 ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能（六）小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

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

開始
1.啟動(dòng)vs新建名為MapIdentify的ASP.NET Web應(yīng)用程序。其實(shí)jsapi是純客戶端的開發(fā)了不需要vs也不需要.net了，純html頁面就可以了用記事本都可以開發(fā)了。我這里為了方便了就用vs2008了，畢竟可以調(diào)試js腳本了。
2.接著在工程中添加名為javascript的文件夾并且在這個(gè)文件夾里新建wabapp.js的文件，這里用來編寫我們自己的js代碼了，在Default.aspx頁面里添加對這個(gè)js文件的引用，同時(shí)在Default.aspx頁面里添加一個(gè)id為map的div標(biāo)簽作為地圖控件的載體，添加完成后的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">

</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四個(gè)樣式的定義了，這幾個(gè)樣式是用來定義Identify后在infoWindow中內(nèi)容用的。
4.切換到wabapp.js文件輸入如下代碼（具體的不做解釋了代碼注釋已經(jīng)非常詳細(xì)了）： 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");
???//設(shè)置要顯示的圖層
???portlandLandBase.setVisibleLayers([2,1,0]);
???//設(shè)置圖層透明度
???portlandLandBase.setOpacity(0.8);
???map.addLayer(portlandLandBase);
???//添加map的onLoad事件監(jiān)聽用來執(zhí)行initIdentify，初始化Identify
???dojo.connect(map,"onLoad",initIdentify);
}

//初始化Identify
function?initIdentify(map)
{
???dojo.connect(map,?"onClick",?doIdentify);
???//實(shí)例化IdentifyTask
???identifyTask?=?new?esri.tasks.IdentifyTask("http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer");
???//IdentifyTask參數(shù)設(shè)置
???identifyParams?=?new?esri.tasks.IdentifyParameters();
???//冗余范圍
???identifyParams.tolerance?=?3;
???//返回地理元素
???identifyParams.returnGeometry?=?true;
???//進(jìn)行Identify的圖層
???identifyParams.layerIds?=?[2,1,0];
???//進(jìn)行Identify的圖層為全部
???identifyParams.layerOption?=?esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
???//設(shè)置infoWindow的大小
???map.infoWindow.resize(300,?200);
???//設(shè)置infoWindow的標(biāo)題頭
???map.infoWindow.setTitle("Identify結(jié)果");
???
???//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]));
}

//進(jìn)行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結(jié)果
function?addToMap(idResults,?evt)
{
???tabledata=new?Array();
???//把Identify結(jié)果的名稱、字段、字段值放入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);
??????}
???}
???//設(shè)置infoWindow顯示內(nèi)容
???map.infoWindow.setContent(tableHtml(tabledata,0));
???//設(shè)置infoWindow顯示
???map.infoWindow.show(evt.screenPoint,?map.getInfoWindowAnchor(evt.screenPoint));
}

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

//infoWindow中內(nèi)容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> </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控件的應(yīng)用了。

轉(zhuǎn)載于:https://www.cnblogs.com/hll2008/archive/2008/11/25/1340910.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： 21天学通c++之7.10 for 循环
下一篇：客户端不支持javascript怎么办