ArcGIS api for javascript——鼠標懸停時顯示信息窗口

時間 2019-12-01

標籤 arcgis api javascript 鼠標懸停顯示信息窗口欄目 JavaScript 简体版

原文原文鏈接

描述

本例展現當用戶在要素上懸停鼠標時如何顯示InfoWindow。本例中，要素是查詢USA州圖層的QueryTask的查詢結果。工做流程以下:javascript

1.用戶單擊一個要素css

2.要素是「加亮的」圖形。html

3.用戶在圖形上懸停鼠標，看到屬性信息的信息窗口。java

若是想要在任意要素上懸停鼠標來查看信息窗口，見示例加載查詢結構，懸停顯示。api

當用戶在要素上移動鼠標時，下面的事件監聽器格式化並顯示信息窗口:ide

 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));

});

還有一個監聽器是必要的，一旦鼠標移出要素隱藏信息窗口:ui

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。