转自原文 ArcGIS api for javascript——加载查询结果，悬停显示信息窗口

描述

本例在开始和地图交互前执行一个查询任务并加在查询结果。这允许用户鼠标悬停在任意郡县时立即见到InfoWindow。本例改变了信息窗口的默认行为，仅在鼠标单击时显示信息窗口。

QueryTask构造函数接受被查询的图层，即ESRI sample server上ESRI_Census_USA服务的郡县图层（索引号是3）。 注意这和地图使用的不是一个服务。地图使用来自ArcGIS Online的ESRI_StreetMap_World_2D服务。 通过这种方式能够使用在视觉上匹配的不同服务作为地图和查询任务的服务。 注意本例中，街道地图被显示在没有郡县可见的比例，避免查询任务返回结果和郡县要素视觉冲突的可能性。

查询的where clause限制了结果是在美国南卡罗来纳州的郡县。还要注意returnGeometry被设置为true以便要素能够被显示在地图上。

//build query filter
var query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"];
query.where = "STATE_NAME = 'South Carolina'";

InfoTemplate定义了在信息窗口中属性信息如何被格式化。注意在信息模板内容中能使用HTML。同样，能使用语法${fieldName} 来显示给出记录的字段的值。例如: ${POP2000}.

查询任务返回一个FeatureSet，要素集合是一个包含每个郡县图形的数组。下面的循环给每个图形分配一个Symbol和信息模板，然后把图形增加到地图上:

for (var i=0, il=featureSet.features.length; i<il; i++) {
          
 var graphic = featureSet.features[i];
 graphic.setSymbol(symbol);
 graphic.setInfoTemplate(infoTemplate);
 map.graphics.add(graphic);
}

当鼠标悬停在图形上时，下面的事件监听器显示信息窗口并且修改符号:

dojo.connect(map.graphics, "onMouseOver", function(evt) {
  ...
  evt.graphic.setSymbol(highlightSymbol);
  map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
});

最后，当鼠标移出图形时，这个监听器是需要删除图形:

dojo.connect(map.graphics, "onMouseOut", function(evt) {
   map.infoWindow.hide();
   evt.graphic.setSymbol(symbol);
 });

<%@ 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 onHover</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");

      function init() {

        var startExtent = new esri.geometry.Extent(-83.41, 31.98, -78.47, 35.28,

        new esri.SpatialReference({wkid:4326}));

        //创建地图

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

        //加载地图添加查询功能

        dojo.connect(map, "onLoad", initFunctionality);

        //创建并添加层

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

        map.addLayer(layer);

      }

      function initFunctionality(map) {

        //建立查询任务

        var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");

        //创建查询过滤器

        var query = new esri.tasks.Query();

        query.returnGeometry = true;

        query.outFields = ["NAME", "POP2000",

        "POP2007", "POP00_SQMI", "POP07_SQMI"];

        query.where = "STATE_NAME = 'South Carolina'";

        var infoTemplate = new esri.InfoTemplate();

        infoTemplate.setTitle("${NAME}");

        infoTemplate.setContent("<b>2000 Population: </b>${POP2000}<br/>"

                             + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI}<br/>"

                             + "<b>2007 Population: </b>${POP2007}<br/>"

                             + "<b>2007 Population per Sq. Mi.:</b>${POP07_SQMI}");

        map.infoWindow.resize(245,125);

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

        dojo.connect(queryTask, "onComplete", function(featureSet) {

              map.graphics.clear();

              var highlightSymbol = new esri.symbol.SimpleFillSymbol(

                  esri.symbol.SimpleFillSymbol.STYLE_SOLID,

                  new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,

                  new dojo.Color([255,0,0]), 3),

                  new dojo.Color([125,125,125,0.35])

              );

          //var highlightSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 3);

          var symbol = new esri.symbol.SimpleFillSymbol(

                  esri.symbol.SimpleFillSymbol.STYLE_SOLID,

                    new esri.symbol.SimpleLineSymbol(

                        esri.symbol.SimpleLineSymbol.STYLE_SOLID,

                        new dojo.Color([255,255,255,0.35]),

                        1),

                new dojo.Color([125,125,125,0.35])

                );

          var countiesGraphicsLayer = new esri.layers.GraphicsLayer();

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

          for (var i=0, il=featureSet.features.length; i<il; i++) {

            //从featureSet中得到当前实例.

            //从当前实例赋值给graphic

            var graphic = featureSet.features[i];

            graphic.setSymbol(symbol);

            graphic.setInfoTemplate(infoTemplate);

            //添加当前这个图形到地图图层中.

            countiesGraphicsLayer.add(graphic);

          }

          map.addLayer(countiesGraphicsLayer);

          map.graphics.enableMouseEvents();

          //监听onMouseOver事件执行countiesGraphicsLayer

          //监听onMouseOver事件并创建一个新的几何图形event.graphic到地图图形层

          dojo.connect(countiesGraphicsLayer, "onMouseOver", function(evt) {

            map.graphics.clear();  //使用地图图形层

            var content = evt.graphic.getContent();

            map.infoWindow.setContent(content);

            var title = evt.graphic.getTitle();

            map.infoWindow.setTitle(title);

            var highlightGraphic = new esri.Graphic(evt.graphic.geometry,highlightSymbol);

            map.graphics.add(highlightGraphic);

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

          });

          //监听map.graphics onMouseOut事件时，清除显示的图形

          //隐藏信息窗口

          dojo.connect(map.graphics, "onMouseOut", function(evt) {

            map.graphics.clear();

            map.infoWindow.hide();

          });

        });

        queryTask.execute(query);

      }

      dojo.addOnLoad(init);

    </script>

  </head>

  <body class="tundra">

    Hover over a county in South Carolina to get more information.

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

  </body>

</html>

ArcGIS api for javascript——加载查询结果，悬停显示信息窗口的更多相关文章

  1. ArcGIS api for javascript——加载查询结果，单击显示信息窗口

    描述 本例在开始和地图交互前执行一个查询并加载结果.这允许用户点击任意郡县立即看到一个InfoWindow. QueryTask构造函数接受被查询的图层,即ESRI sample server上ESR ...

  2. ArcGIS API for Javascript 加载天地图（经纬度投影）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. ArcGIS API for Javascript 加载天地图（墨卡托投影）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. ArcGIS api for javascript——加载图标

    描述 这个示例展示了如何能用一个动画图片显示地图正在加载.在这个示例中,图片是一个小的动画GIF.当地图第一次加载或用户缩放和平移地图时显示图片.当所有图层加载完成图片消失. 这个示例是通过event ...

  5. ArcGIS API For JavaScript 加载地图，设置地图中心点

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. ArcGIS API for Silverlight 加载google地图

    原文:ArcGIS API for Silverlight 加载google地图 using System; using System.Net; using System.Windows; using ...

  7. ArcGIS API for Silverlight加载google地图（后续篇）

    原文:ArcGIS API for Silverlight加载google地图(后续篇) 之前在博客中(http://blog.csdn.net/taomanman/article/details/8 ...

  8. 解决ArcGIS API for Silverlight 加载地图的内外网访问问题

    原文:解决ArcGIS API for Silverlight 加载地图的内外网访问问题 先上一个类,如下: public class BaseClass { public static string ...

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

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

随机推荐

  1. bzoj2427:[HAOI2010]软件安装(Tarjan+tree_dp)

    2427: [HAOI2010]软件安装 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1053  Solved: 424[Submit][Statu ...

  2. codevs1085数字游戏（环形DP+划分DP ）

    1085 数字游戏  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold     题目描述 Description 丁丁最近沉迷于一个数字游戏之中.这个游戏看似简单, ...

  3. [Swift通天遁地]八、媒体与动画-(8)使用开源类库快速实现位移动画

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  4. distpicker三级联动，动态改变省市信息

    一.引入3个js文件 <script type="text/javascript" src="js/distpicker.data.js">< ...

  5. leetCode----day01---- 从排序数组中删除重复项

    需求: 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成. ...

  6. reactnative(1) - RefreshControl 使用案例

    'use strict'; import React, { Component } from 'react'; import { AppRegistry, ScrollView, StyleSheet ...

  7. python 根据数组生成图片

    array = np.asarray(allBigPng, dtype=np.uint8)image = Image.fromarray(array, 'RGBA') image.save(outpu ...

  8. Android项目实战_手机安全卫士系统加速

    ## 1.本地数据库自动更新的工作机制1. 开启一个服务,定时访问服务器2. 进行版本对比,如果最新版本比较高,获取需要更新的内容3. 将新内容插入到本地数据库中 ## 2.如何处理横竖屏切换1. 指 ...

  9. 如何修改wampserver中mysql中字符编码的解决方案

    因为我用的一般都是utf8,所以有必要改一下: 打开mysql控制台,输入密码登录之后,执行命令: show variables like ‘%char%’; 注意引号的中英文格式以及最后面的分号不要 ...

  10. CSS——精灵图与背景图片定位

    精灵图产生背景: 1.网页上的每张图像都需要向服务器发送一次请求才能展现给用户.2.网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数 ...