描述

本例展示了在重叠的多边形处理查询的一种方式。单击一个石油和天然气的字段来查看地图上的高亮显示。如果仅仅点击一个要素，能够在单击一次来查看包含一些属性的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. SpringCloud学习笔记（17）----Spring Cloud Netflix之服务网关Zuul的使用

    1. 什么时候Zuul? Zuul是一个基于jvm路由和服务端的负载均衡器,在云平台上提供动态路由,监控,弹性,安全等边缘服务的框架. 路由功能:相当于nginx的反向代理 比如: / 可能需要映射到 ...

  2. 简洁的MVC思想框架——Nancy（环境配置与Get操作）

    Nancy官网——https://github.com/NancyFx/Nancy 概述:Nancy是一个开源的Web轻型框架内核符合MVC思想,有开发方便,路由简单的特点,而且功能齐全 起步:Hel ...

  3. codevs 1288 埃及分数 (迭代加深搜索)

    题目大意:给你一个分数$a/b$,把它拆解成$\sum_{i=1}^{n}1/ai$的形式,必须保证$ai$互不相同的情况下,尽量保证n最小,其次保证分母最大的分数的分母最小 什么鬼玄学题!!! 因为 ...

  4. 6、Java类、对象、构造器、引用类型内存基本知识、引用类型值传递

    1.面向对象三大特征: 封装:encapsulation 继承:inheritance 多态:polymorphism 2.类中 数据特征(property):属性(attribute)静态的stat ...

  5. MPI搭建简要教程

    具体安装部署,能够參考 http://www.ibm.com/developerworks/cn/linux/l-cn-mpich2/,该教程将的比較具体. 注:不同版本号的 MPICH2对编译器以及 ...

  6. less04 运算符、命名空间

    less //.wp{ // margin: 0 auto; // background: forestgreen; // width: 450px + 450; //有一个有单位就可以 // hei ...

  7. 用DOM动态控制表格

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. tp5使用oss存储图片

    1.申请Access Key ID和Access Key Secret,以及创建好你的Bucket 2.通过composer安装oss插件 通过cmd,到项目的目录下,输入下面的指令. compose ...

  9. php中的页面跳转和重定向

    php中的页面跳转和重定向 ThinkPHP中跳转和重定向的区别 跳转: 浏览器认为: 当前URL请求成功, 重新请求新的URL. 浏览器会 记录当前的URL 和 新的URL 在请求历史记录中. 回退 ...

  10. pyspark import 可以通过 --py-files

    公用函数的放到了 common.py 文件中. 通过 --py-files 可以在pyspark中可以顺利导入: pyspark --py-files lib/common.py > impor ...