描述

本例展示了在重叠的多边形处理查询的一种方式。单击一个石油和天然气的字段来查看地图上的高亮显示。如果仅仅点击一个要素，能够在单击一次来查看包含一些属性的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. 前端学习之路——Git篇

    本文只是一个个人学习Git的笔记,如有错误的地方,还望指出,谢谢!参考资料如下: <Git教程--廖雪峰的官方网站 > bootstrap里面的--git_guide Git安装 在网上搜 ...

  2. Laravel关联模型中过滤结果为空的结果集(has和with区别)

    首先看代码: $userCoupons = UserCoupons::with(['coupon' => function($query) use($groupId){ return $quer ...

  3. 清华EMBA课程系列思考之六 -- 比較文明视野下的中华领导智慧、企业管理与经济解析

    告别马年的最后一缕阳光,踏着猴年的钟声,度过了温馨的春节,已然开启了新学期的第一堂课.看题目其貌不扬,但一旦进入课堂,已然聚精会神.唯恐掉队,就请大家跟我一起进入四天的心路修炼旅程,開始我们的新一期思 ...

  4. vim-YCM插件安装

    这两天开始使用vim来学习C++语言,中间少不了要进行编译.才刚刚写了两个小例子就开始发现,每次都要退出vim来进行编译,实在太麻烦了.这时候才想到之前有在一本关于vim的书籍上看到quickfix的 ...

  5. zzulioj--1778-- 和尚特烦恼4——有多少战斗力（gcd）

    1778: 和尚特烦恼4--有多少战斗力 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 259  Solved: 123 SubmitStatusWe ...

  6. 33.AngularJS 应用 angular.module定义应用 angular.controller控制应用

    转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 模块(Module) 定义了 AngularJS 应用. AngularJS 控制器(Co ...

  7. vue --- 路由传参的几种方式

    方案一: getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}`, }) ...

  8. React ----- 路由懒加载的几种实现方案

    传统的两种方式 1.import() 符合ECMAScript提议的import()语法,该提案与普通 import 语句或 require 函数的类似,但返回一个 Promise 对象.这意味着模块 ...

  9. 1 QT设置背景色

    首先需要添加头文件#include <QPalette> 然后接下来这样操作: 控件.setAutoFillBackground(true); //这里的控件就是你要设置背景颜色的控件 Q ...

  10. spring-data-redis 使用过程中需要注意的地方

    1.序列化问题 <!-- SDR默认采用的序列化策略有两种,一种是String的序列化策略,一种是JDK的序列化策略. StringRedisTemplate默认采用的是String的序列化策略 ...