描述

本例展示了在重叠的多边形处理查询的一种方式。单击一个石油和天然气的字段来查看地图上的高亮显示。如果仅仅点击一个要素，能够在单击一次来查看包含一些属性的InfoWindow。如果偶然单击到重叠的要素，将看到到一个要素列表，为下一次单击显示哪个要素的信息提供帮助。

注意本例使用一个InfoTemplate来定义信息窗口的文本格式。能够通过使用语法为${attributeName}包含某一属性的实际值。例如：${PROD_GAS}。

下面的代码根据用户单击要素的个数确定处理方式：

queryTask.execute(query, function(fset) {
          if (fset.features.length === 1) {
            showFeature(fset.features[0],evt);
          } else if (fset.features.length !== 0) {
            showFeatureSet(fset,evt);
          }
        });

如果用户单击一个要素，函数showFeature被调用。这个函数使用图形的SimpleFillSymbol来强调这个要素。默认情况下信息窗口不会显示，直到用户再次单击这个加亮的要素，信息窗口才会显示。

如果用户点击重叠的要素，函数showFeatureSet被调用。这个函数循环访问每个要素并将要素名称和一个超链接加入信息窗口。用户能够使用这个要素超链接的列表选择要素。然后用户能够通过单击加亮的要素显示信息窗口。

注意查询任务的结果始终是一个FeatureSet。在本例中，结果集中唯一一个项目被传递给showFeature函数，而全部的结果集被传递给showFeatureSet函数。

 <%@ 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, queries with multiple results at the same location are displayed in 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,featureSet;

      //初始化函数

      function init() {

        //开始范围：地理坐标系wiid:4326

        var startExtent = new esri.geometry.Extent(-100.7, 36.8, -95.8, 40.2, new esri.SpatialReference({wkid:4326}));

        //创建地图

        map = new esri.Map("mapDiv", {extent:startExtent});

        //切片层并加载到地图中

        var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");

        map.addLayer(tiledLayer);

        //创建并增加一个动态层

        var dynamicLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer");

        map.addLayer(dynamicLayer);

        //注册一个监听click事件，当用户点击地图时执行executeQueryTask方法

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

        //注册一个监听信息窗口的onHide事件

        dojo.connect(map.infoWindow, "onHide", function() {map.graphics.clear();});

        //建立查询任务

        queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer/0");

        //监听onComplete事件的处理结果，使用queryTask.execute方法回调

        //dojo.connect(queryTask, "onComplete", showResults);

        //建立查询过滤器

        query = new esri.tasks.Query();

        query.returnGeometry = true;

        query.outFields = ["FIELD_NAME",

        "FIELD_KID", "PROD_GAS", "PROD_OIL", "STATUS"];

      }

      function executeQueryTask(evt) {

        map.infoWindow.hide();

        map.graphics.clear();

        featureSet = null;

        //用户点击onClick事件返回地图上EVT点.

        //包含在MapPoint(esri.geometry.point)和screenPoint(pixel像素点).

        //设置查询几何等于evt.mapPoint

        //执行任务和完成showResults

        queryTask.execute(query, function(fset) {

          if (fset.features.length === 1) {

            showFeature(fset.features[0],evt);

          } else if (fset.features.length !== 0) {

            showFeatureSet(fset,evt);

          }

        });

      }

      function showFeature(feature,evt) {

        map.graphics.clear();

        //设置标记点

        var 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]));

        feature.setSymbol(symbol);

        //构建信息窗口的标题和内容

        var attr = feature.attributes;

        var title = attr.FIELD_NAME;

        var content = "Field ID : " + attr.FIELD_KID

                    + "<br />Produces Gas : " + attr.PROD_GAS

                    + "<br />Produces Oil : " + attr.PROD_OIL

                    + "<br />Status : " + attr.STATUS;

        map.graphics.add(feature);

        map.infoWindow.setTitle(title);

        map.infoWindow.setContent(content);

        (evt) ? map.infoWindow.show(evt.screenPoint,

        map.getInfoWindowAnchor(evt.screenPoint)) : null;

      }

      function showFeatureSet(fset,evt) {

        //删除地图上所有的图形层

        map.graphics.clear();

        var screenPoint = evt.screenPoint;

        featureSet = fset;

        var numFeatures = featureSet.features.length;

        //QueryTask返回featureSet类型.通过featureSet的循环把他们添加到信息窗口

        var title = "You have selected " + numFeatures + " fields.";

        var content = "Please select desired field from the list below.<br />";

        for (var i=0; i<numFeatures; i++) {

          var graphic = featureSet.features[i];

          content = content + graphic.attributes.FIELD_NAME + " Field (<A href='#' onclick='showFeature(featureSet.features[" + i + "]);'>show</A>)<br/>";

        }

        map.infoWindow.setTitle(title);

        map.infoWindow.setContent(content);

        map.infoWindow.show(screenPoint,map.getInfoWindowAnchor(evt.screenPoint));

      }

      dojo.addOnLoad(init);

    </script>

  </head>

  <body class="tundra">

    Click on a petrolueum field to get more info.<br>

    If mulitple fields are selected then you can select the field to display.

    <div id="mapDiv" style="width:800px; height:600px; border:1px solid #000;"></div>

  </body>

</html>

ArcGIS api for javascript——显示多个查询结果的更多相关文章

  1. ArcGIS api for JavaScript 3.27 FindTask查询功能

    在ArcGIS API中查询功能是经常使用的,常用的三个查询分别是FindTask,QueryTask,IdentifyTask.它们各自都有自己的特点. 查询功能分为属性查询和空间查询 FindTa ...

  2. ArcGIS api for javascript——用缓存区查询地图

    描述 本例展示了如何在另外一个任务里使用一个任务的结果.单击地图查看被单击的点的1公里范围内的缓存(如果需要可以修改这个默认的缓存距离).也可以看缓存区的这些点的人口普查街区信息.单击一个点查看更多的 ...

  3. ArcGIS api for javascript——显示地图属性

    描述 本例展示了如哦读取地图和图层的属性和返回信息给用户.本例中的四个按钮允许用户接收地图属性.每个按钮调用不同的函数. ·Get All Map Layers - 这个按钮调用getMapLayer ...

  4. ArcGIS api for javascript——显示多个ArcGIS Online服务

    描述 本例展示了如何使用按钮在地图里的两个不同的图层间切换.所有地图里的图层恰巧是来自ArcGIS Online的ArcGISTiledMapServiceLayers.按钮是Dojo dijit按钮 ...

  5. ArcGIS api for javascript——显示一个信息窗口

    描述 这个示例展示了在用户单击地图时如何在InfoWindow中显示信息.信息窗口是一个dijit (Dojo widget).信息窗口能够包含文本,字符,图片和任何通过HTML表示的事物.这个例子在 ...

  6. ArcGIS api for javascript——加载查询结果，悬停显示信息窗口

    转自原文 ArcGIS api for javascript——加载查询结果,悬停显示信息窗口 描述 本例在开始和地图交互前执行一个查询任务并加在查询结果.这允许用户鼠标悬停在任意郡县时立即见到Inf ...

  7. ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图

    ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...

  8. ArcGIS API for Javascript 使用缓冲区结果做query查询出现“esri.config.defaults.io.proxyUrl 尚未进行设置”错误

    1.前言 在研究ArcGIS API for JavaScript时会遇到这样的问题,比如我们在做缓冲区分析时,用分析的范围作为空间查询query的参数,在执行结果中总是会看到“esri.config ...

  9. ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译

    内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View, ...

随机推荐

  1. 路飞学城Python-Day4(practise)

    #1.请用代码实现:利用下划线将列表的每一个元素拼接成字符串,li = ['alex','eric','rain']# li = ['alex','eric','rain']# print('_'.j ...

  2. axios 使用post方式传递参数，后端接受不到问题

    一.URLSearchParams var params = new URLSearchParams(); params.append('key1', 'value1'); //你要传给后台的参数值 ...

  3. URAL - 1243 - Divorce of the Seven Dwarfs （大数取模）

    1243. Divorce of the Seven Dwarfs Time limit: 1.0 second Memory limit: 64 MB After the Snow White wi ...

  4. unix中文件I/O

    在unix中可用的文件I/O函数包含打开文件,读文件,写文件等. Unix系统中的大多数文件I/O须要用到5个函数:open,read,write,lseek,close. 这里要说明的是read,w ...

  5. 【每日一记】unity3d 图片置灰shader

    项目须要.參考了一下网上的资料,写了一个shader,给button置灰. shader详细实现例如以下: 2016.07.25补充,支持mask剪裁 Shader "Transparent ...

  6. DM8168 屏蔽 PCIe

    DM8168新板在没有做PCI接口的情况下,能够把PCI模块凝视,直接尝试: make CROSS_COMPILE=arm-none-linux-gnueabi- ARCH=arm menuconfi ...

  7. 后缀自己主动机（SAM）学习指南

    *在学习后缀自己主动机之前须要熟练掌握WA自己主动机.RE自己主动机与TLE自己主动机* 什么是后缀自己主动机 后缀自己主动机 Suffix Automaton (SAM) 是一个用 O(n) 的复杂 ...

  8. 支持并发的httpclient（基于tcp连接池以及netty）

    闲来无事,将曾经自己写的一个库放出来吧. . 有的时候会有这样子的需求: (1)serverA通过HTTP协议来訪问serverB (2)serverA可能会并发的像B发送非常多HTTP请求 类似于上 ...

  9. Constructor call must be the first statement in a constructor

    super()和this ()不能共存.否则编译时会报异常. Constructorcall must be the first statement in a constructor 换句话说就是su ...

  10. jsp出现错误can not find the tag directory /web-inf/tags

    百度google了一大圈没找到中文答案,无奈之下硬着头皮看了一个英文答案http://stackoverflow.com/questions/11502703/eclipse-can-not-find ...