ArcGIS api for javascript——查询,然后单击显示信息窗口

Posted xiaotian_小天

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ArcGIS api for javascript——查询,然后单击显示信息窗口相关的知识,希望对你有一定的参考价值。

描述

本例展示如何配置查询任务为示例的工作流程:

1.用户单击一个要素来加亮显示。

2.用户再一次单击要素来查看属性信息的 InfoWindow

本例查询USA州,因此ESRI_StateCityHighway_USA的州图层被传给QueryTask构造函数。

第一次鼠标单击通过下面的事件监听器捕获:

dojo.connect(map, "onClick", executeQueryTask);

发生单击时,executeQueryTask函数被调用去执行查询,然后showResults函数增加图形。

当用户单击高亮的图形时,第二次鼠标单击默认被捕获。为了格式化信息窗口,应用使用showResults函数调用 graphic.setInfoTemplate应用的 InfoTemplate

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>QueryTask with geometry, results as an InfoWindow</title>
    <link rel="stylesheet" type="text/css"   
    href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
    <script type="text/javascript" language="Javascript">
      dojo.require("esri.map");
      dojo.require("esri.tasks.query");

      var map, queryTask, query;
      var symbol, infoTemplate;

      function init() {
        //创建地图
        map = new esri.Map("mapDiv");

        //创建并添加动态层
        var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer");
        map.addLayer(layer);

        //监听click事件,当用户点击地图时执行executeQueryTask方法
        dojo.connect(map, "onClick", executeQueryTask);

        //建立查询任务
        queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/1");

        //监听onComplete事件的处理结果,使用queryTask.execute方法回调
        //dojo.connect(queryTask, "onComplete", showResults);

        //建立查询过滤器
        query = new esri.tasks.Query();
        query.returnGeometry = true;
        query.outFields = ["STATE_NAME",
        "STATE_FIPS", "STATE_ABBR", "HYPERLINK", "AREA"];

        //在信息窗口创建infoTemplate
        //${属性名}将取代目前的功能和属性值
        infoTemplate = new esri.InfoTemplate("${STATE_NAME}", "State Fips:${STATE_FIPS}<br />Abbreviation: ${STATE_ABBR}<br />Area: ${AREA}");

        symbol = new esri.symbol.SimpleFillSymbol
       (esri.symbol.SimpleFillSymbol.STYLE_SOLID,
       new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT,
       new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]));
      }

      function executeQueryTask(evt) {
        //用户点击onClick事件返回地图上EVT点.
        //包含在MapPoint(esri.geometry.point)和screenPoint(pixel像素点).
        //设置查询几何等于evt.mapPoint
        query.geometry = evt.mapPoint;

        //执行任务和完成showResults
        queryTask.execute(query, showResults);
      }

      function showResults(featureSet) {
        //删除地图上所有的图形层
        map.graphics.clear();

        //QueryTask返回featureSet类型.通过featureSet的循环把他们添加到信息窗口
        for (var i=0, il=featureSet.features.length; i<il; i++) {
          //从featureSet中得到当前实例.
          //从当前实例赋值给graphic
          var graphic = featureSet.features[0];
          graphic.setSymbol(symbol);

          //设置图形的infoTemplate.
          graphic.setInfoTemplate(infoTemplate);

          //添加当前这个图形到地图图层中
          map.graphics.add(graphic);
        }
      }

      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="tundra">
    Click on a State to get more info.  When State is highlighted, click State again to get infoWindow.
    <div id="map" style="width:600px; height:600px; border:1px solid #000;"></div>
  </body>
</html>

  

 

以上是关于ArcGIS api for javascript——查询,然后单击显示信息窗口的主要内容,如果未能解决你的问题,请参考以下文章

arcgis api for javascript 4.10版本的本地部署

Map学习(arcgis api for javascript3.18)

ArcGIS API for JavaScript学习:第一个地图

ArcGIS API for JavaScript

arcgis api for javascript怎么加载天地图的影像图

如何利用arcgis api for javascript在graphicslayer绘制点线面