描述

本例展示了当一个要素被查询时如何立刻打开一个InfoWindow。信息窗口能被用来将要素的属性格式化成用户易读的格式。

本例中，地图和查询任务都使用ESRI sample server上的服务KGS_OilGasFields_Kansas。地图也使用了来自ArcGIS Online的ESRI_Imagery_World_2D图层。 注意地图和查询任务不是必须要使用相同的服务。 例如，仅仅想保持来自ArcGIS Online的背景影像并在地图单击后显示要素。

单击地图后，下面的事件监听器调用函数executeQueryTask:

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

查询任务根据用户单击的对象（不是多边形，唯一多边形或多个重叠的多边形）提供不同地运行:

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被调用。该函数格式化信息窗口，使用map.graphics.add显示要素的图形，并使用map.infoWindow.show方法立刻显示信息窗口。这覆盖了图形第二次单击显示信息窗口的默认行为。

如果多个要素被单击，函数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——查询，然后单击显示信息窗口

    描述 本例展示如何配置查询任务为示例的工作流程: 1.用户单击一个要素来加亮显示. 2.用户再一次单击要素来查看属性信息的 InfoWindow. 本例查询USA州,因此ESRI_StateCityH ...

  2. ArcGIS api for javascript——查询没有地图的数据

    描述 本例展示了用户能够从没有显示服务的地图服务查询数据.大部分地图服务包含属性信息的数据集,数据集能够被查询并显示在一个简单的列或表格里. 本例按提供的州名称查询USA人口普查数据,然后显示关于州的 ...

  3. arcgis api for javascript中使用proxy.jsp

    当我们使用arcgis api for javascript 查询arcgis服务时,如果查询的参数很长时,通过get方式提交会查询不到结果,因为get方式提交的参数有长度限制,需要通过代理的方式使用 ...

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

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

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

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

  6. arcgis api for javascript 学习（七） 调用发布地图信息，并将地图属性信息输出到Excel表格---进阶版

    我们在arcgis api for javascript 学习(三)已经学习到了关于调用地图信息进行属性输出的问题,不过通过代码我们实现后会发现还是有一些小瑕疵的,比如我们只能单个数据属性的输出,如果 ...

  7. arcgis api for javascript 学习（三） 调用发布地图信息，并将地图属性信息输出到Excel表中

    吐血推荐:网上搜了很久关于webgis地图属性表输出到Excel表,并没能找到相关有价值的信息,在小白面前,这就是一脸懵x啊!网上要么是关于前端如何在页面上直接导出excel,和webgis半毛钱关系 ...

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

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

  9. ArcGIS API for JavaScript介绍

    ArcGIS API for JavaScript中的类是按照模块组织的,主要包含esri.esri/geometry.esri/renderers.esri/symbols.esri/symbols ...

随机推荐

  1. layui layer 弹框

    layer 这个是一个web弹层组件,挺好用的...然后项目框架是SSM... layer.open主要是用来弹出来一个iframe弹窗,然后用来展示数据也行,用来修改也行,这次记录的主要是展示,展示 ...

  2. swift where 的作用

    条件限定: 类型限定: 结构化查询模式. 用于结构体.记录字段.

  3. CentOS7-1810 系统DNS服务器BIND软件配置说明

    DNS的出现的历史 网络出现的早期是使用IP地址通讯的,那时就几台主机通讯.但是随着接入网络主机的增多,这种数字标识的地址非常不便于记忆,UNIX上就出现了建立一个叫做hosts的文件(Linux和W ...

  4. 路飞学城Python-Day7

    Moudle 2 1.鸡汤中国人均阅读4.35本:日本40本:韩国17本:法国20本:以色列60本成长的路上需要读书,坚持读书内心会得到升华的想法不要太多,尽量多读书,多充电多读书,多看报,少吃零食, ...

  5. 路飞学城Python-Day3

    Moudle 1 Chapter 1 #练习题# 1.简述编译型与解释型语言的区别,且分别列出你知道的哪些语言属于编译型,哪些属于解释型?"""编译型:编译类指在应用源程 ...

  6. 解决Windows下git需要每次都要ssh-add的问题

    顽皮的很: 不知道怎么回事,每次打开git提交代码都需要ssh-add一下秘钥才可以正常提交: 不然就报错权限之类的问题: 怎么才能更方便一些? 卸了重装!我没试... 再或者是在 git 的安装目录 ...

  7. NOIp2018模拟赛四十

    今天太晚了...题解到时候补吧(flag立好) 成绩:100+0+0=100 感觉A题本质暴力贪心?C题一道水题我居然没做...亏爆 A:[agc011e]increasing numbers B:[ ...

  8. LCT复习

    LCT,虚实链剖分.支持连边和断边操作.Tarjan制造. [HNOI2010]弹飞绵羊 当然这题分块可以做,常数小,但是LCT更无脑. 建立一个虚拟的弹飞节点\(n+1\),初始化时对于一个点假如再 ...

  9. layui框架下的摸索与学习

    一.table表格内的查询  1.单个条件查询: 主要代码: <%-- Created by IntelliJ IDEA. User: Administrator Date: 2019/1/14 ...

  10. React 中组件间通信的几种方式

    在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 非嵌套组件间通信 跨级组件之间通信 1.父组件向子组件通 ...