ArcGIS api for javascript——鼠标悬停时显示信息窗口

最新推荐文章于 2025-05-28 15:22:50 发布

转载最新推荐文章于 2025-05-28 15:22:50 发布 · 6.8k 阅读

arcgis api for javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种在地图应用中实现当用户鼠标悬停在特定要素上时显示InfoWindow的方法。通过使用ArcGIS API，文章详细展示了如何通过监听用户的鼠标操作并在相应的地图要素上显示属性信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

描述

本例展示当用户在要素上悬停鼠标时如何显示InfoWindow。本例中，要素是查询USA州图层的QueryTask的查询结果。工作流程如下:

1.用户单击一个要素

2.要素是“加亮的”图形。

3.用户在图形上悬停鼠标，看到属性信息的信息窗口。

如果想要在任意要素上悬停鼠标来查看信息窗口，见示例加载查询结构，悬停显示。

当用户在要素上移动鼠标时，下面的事件监听器格式化并显示信息窗口:

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

          var g = evt.graphic;

          map.infoWindow.setContent(g.getContent());

          map.infoWindow.setTitle(g.getTitle());

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

});

还有一个监听器是必要的，一旦鼠标移出要素隐藏信息窗口:

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

  1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  3 <html>
  4   <head>
  5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6     <meta http-equiv="X-UA-Compatible" content="IE=7" />
  7     <title>QueryTask with geometry, results as an InfoWindow</title>
  8     <link rel="stylesheet" type="text/css"
  9     href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
 10     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
 11     <script type="text/javascript" language="Javascript">
 12       dojo.require("esri.map");
 13       dojo.require("esri.tasks.query");
 14 
 15       var map, queryTask, query;
 16       var symbol, infoTemplate;
 17 
 18       function init() {
 19         //创建地图
 20         map = new esri.Map("mapDiv");
 21 
 22         //创建并添加层
 23         var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer");
 24         map.addLayer(layer);
 25 
 26         //注册监听click事件，当用户点击地图时执行executeQueryTask方法
 27         dojo.connect(map, "onClick", executeQueryTask);
 28 
 29 
 30         //建立查询任务
 31         queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/1");
 32 
 33         //监听onComplete事件的处理结果，使用queryTask.execute方法回调
 34         dojo.connect(queryTask, "onComplete", showResults);
 35 
 36         //建立查询过滤器
 37         query = new esri.tasks.Query();
 38         query.returnGeometry = true;
 39         query.outFields = ["STATE_NAME",
 40         "STATE_FIPS", "STATE_ABBR", "HYPERLINK", "AREA"];
 41 
 42         //在信息窗口创建infoTemplate
 43         //${属性名}将取代目前的功能和属性值.
 44         infoTemplate = new esri.InfoTemplate("${STATE_NAME}", "State Fips:${STATE_FIPS}<br>Abbreviation: ${STATE_ABBR}<br/>Area: ${AREA}");
 45 
 46         symbol = new esri.symbol.SimpleFillSymbol(
 47            esri.symbol.SimpleFillSymbol.STYLE_SOLID,
 48            new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT,
 49            new dojo.Color([255,0,0]), 2), 
 50            new dojo.Color([255,255,0,0.5])
 51         );
 52       }
 53 
 54       function executeQueryTask(evt) {
 55         //用户点击onClick事件返回地图上EVT点.
 56         //包含在MapPoint(esri.geometry.point)和screenPoint(pixel像素点).
 57         //设置查询几何等于evt.mapPoint
 58         query.geometry = evt.mapPoint;
 59 
 60         //执行任务和完成showResults
 61         queryTask.execute(query, showResults);
 62       }
 63 
 64       function showResults(featureSet) {
 65         //删除地图上所有的图形层
 66         map.graphics.clear();
 67 
 68         var features = featureSet.features;
 69 
 70         //QueryTask返回featureSet类型.通过featureSet的循环把他们添加到信息窗口
 71         for (var i=0, il=features.length; i<il; i++) {
 72           //从featureSet中得到当前实例.
 73           //从当前实例赋值给graphic
 74           var graphic = features[0];
 75           graphic.setSymbol(symbol);
 76 
 77           //设置图形的infoTemplate.
 78           graphic.setInfoTemplate(infoTemplate);
 79 
 80           //添加当前这个图形到地图图层中
 81           map.graphics.add(graphic);
 82         }
 83         //注册鼠标悬停监听事件
 84         dojo.connect(map.graphics, "onMouseMove", function(evt) {
 85           var g = evt.graphic;
 86           map.infoWindow.setContent(g.getContent());
 87           map.infoWindow.setTitle(g.getTitle());
 88           map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor
 89           (evt.screenPoint));
 90         });
 91         //注册鼠标离开监听事件
 92         dojo.connect(map.graphics, "onMouseOut", function() {
 93             map.infoWindow.hide();
 94           } );
 95 
 96       }
 97 
 98       dojo.addOnLoad(init);
 99     </script>
100   </head>
101   <body class="tundra">
102     Click on a state to get more info.  When state is highlighted, move mouse over state to get more info.
103     <div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div>
104   </body>
105 </html>