zoukankan      html  css  js  c++  java
  • 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.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="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.2983251993735new 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(300200);
       
    //设置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, 15new 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+"' onclick='tab("+i+")'>"+rs[i].displayFieldName+"</span>";
          }
          
    else
          {
             str1
    =str1+"<span class='tab' id='"+i+"' onclick='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' onclick=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控件的应用了。
  • 相关阅读:
    【BZOJ 4581】【Usaco2016 Open】Field Reduction
    【BZOJ 4582】【Usaco2016 Open】Diamond Collector
    【BZOJ 4580】【Usaco2016 Open】248
    【BZOJ 3754】Tree之最小方差树
    【51Nod 1501】【算法马拉松 19D】石头剪刀布威力加强版
    【51Nod 1622】【算法马拉松 19C】集合对
    【51Nod 1616】【算法马拉松 19B】最小集合
    【51Nod 1674】【算法马拉松 19A】区间的价值 V2
    【BZOJ 2541】【Vijos 1366】【CTSC 2000】冰原探险
    【BZOJ 1065】【Vijos 1826】【NOI 2008】奥运物流
  • 原文地址:https://www.cnblogs.com/hll2008/p/1340910.html
Copyright © 2011-2022 走看看