admin管理员组文章数量:1654021
ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能(六)
目的:1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能,鼠标点击后获取被点击对象的然后以infoWindow的方式显示点击对象的属性信息。
准备工作:
1. 在ArcGis Server9.3中发布名为usa的MapServer。
2.在使用在线的http://server.arcgisonline/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer地图数据和jsapi。
完成后的效果图:
开始
1.启动vs新建名为MapIdentify的ASP.NET Web应用程序。其实jsapi是纯客户端的开发了不需要vs也不需要了,纯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/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3/1999/xhtml" >
< head runat ="server" >
< title > Untitled Page </ title >
< link rel ="stylesheet" type ="text/css" href ="http://serverapi.arcgisonline/jsapi/arcgis/1.1/js/dojo/dijit/themes/tundra/tundra.css" >
< script type ="text/javascript" src ="http://serverapi.arcgisonline/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/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> </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控件的应用了。
本文标签: 功能ServerArcGISidentifyJavaScript
版权声明:本文标题:ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能(六) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1729650785a1209012.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论