ArcGIS api for javascript——滑鼠懸停時顯示資訊視窗

阿新 • • 發佈：2019-01-21

描述

本例展示當用戶在要素上懸停滑鼠時如何顯示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>

ArcGIS api for javascript——滑鼠懸停時顯示資訊視窗

描述本例展示當用戶在要素上懸停滑鼠時如何顯示InfoWindow。本例中，要素是查詢USA州圖層的QueryTask的查詢結果。工作流程如下: 1.使用者單擊一個要素 2.要素是“加亮的”圖形。 3.使用者在圖形上懸停滑鼠，看到屬性資訊的資訊視窗。如果想要在任意要素上懸停滑鼠來檢視資訊視窗，見示例載入查

ArcGIS api for javascript 引入包時需要注意的問題

這兩天在做圖例顯示的功能。所有演算法都設計好了，但圖例總是顯示不出來，並且還報原始碼錯誤。苦惱了很久。報錯如下： Cannot read property "query" of null 原因：請求頭中的request和function中的類名的位置沒有一一對應所導致的解決

ToolTip外掛，滑鼠懸停時顯示資訊

來自網上示例 <!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>Bootstrap 例項 - 工具提示（Tooltip）外掛</title

Arcgis api for javascript學習筆記(4.6版本) - 二維MapView中的FeatureLayer顯示標註

meta AS dojo each 自己 round updating 完成後 graph 4.6版本api的FeatureLayer中有提供 labelsVisible 和 labelingInfo 兩個屬性，設置這兩個屬性可以實現顯示將屬性中某個字段作為標註。但是這兩個

arcgis api for javascript graphiclayer dojo框架下畫圖圖層的顯示與清除

首先，我們借用上一篇文章中搭建的arcgis地圖服務來做例子，並且對其進行一些少許更改。程式碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

ArcGIS API for JavaScript 面要素圖層顯示邊界

前言在前端我們載入的動態圖層是面要素組成的，我們希望獲得面要鎖的邊界我們可以通過要素圖層渲染的方式完成。效果：我們載入省級行政區的圖層，我們想獲得省級行政區邊

ArcGIS API For Javascript之多圖層顯示與隱藏，圖層要素選框查詢

5、多圖層的載入與隱藏利用Html+Javascript前端程式設計實現上傳到服務端的地圖服務中的多圖層的載入與隱藏。本實驗中除了底圖之外，添加了共10個圖層，分別為賓館酒店_point (0) 餐飲_point (1) 超市商城_point (2) 地級市_font

ArcGIS API for JavaScript實現分圖層顯示

大家都知道，當用ArcGIS釋出地圖服務時，是把整個地圖文件所有圖層都發布出去的，如果展示的時候只想顯示某個圖層怎麼辦呢？或許你會用FeatureLayer，這樣做當然也能實現，但是在地圖文件中

Arcgis API for JavaScript在地圖上實現手機定位資訊的追蹤顯示

/* 定義全域性變數 */ var ulm_Int = null;//儲存手機定位資訊輪詢setInterval的id var isFirstQuery = null;//定義一個變數儲存是否是第一次查詢 var ulm_Layer = null;//手機定位資訊圖層變數 var ulm_queryResul

使用Arcgis Api for Javascript 調用本地Portal發布的WebMap

pla basemap 步驟 reat 地址 dap toc cli 配置步驟：安裝Arcgis Portal 10.4,Server 10.4,DataStore ,WebAdaptor for IIS,搭建arcgis api for javascript 4

ArcGIS API for JavaScript學習（1）：第一個地圖

樣式表參數資源 charset 底層 arcgis 順序 api navi 1.簡介 ArcGIS API for JavaScript跟隨ArcGIS 9.3同時發布，是ESRI根據JavaScript技術實現的調用ArcGIS Server REST API接口的一

ArcGIS API for JavaScript 4.4學習筆記[新] AJS4.4和AJS3.21新特性

ack 讀取 port 不同 ide evel arc ges wfs ESRI官網悄無聲息突然更新4.4和3.21，公眾號也沒有什麽消息。照例，給大家看看這次更新有什麽新特性吧。 1. AJS 4.4 官方更新日誌：點我，比較詳細。我在這裏抽一些主幹作為說明。 1.1

Arcgis api for javascript學習筆記-三維地圖的飛行效果

com init viewport window eight put div speed null 其實就只是用到了 view.goTo() 函數，再利用 window.setInterval() 函數(定時器)定時執行goTo()。代碼如下： <!DOCTYP

ArcGIS API for JavaScript 4.6 版本加載高德地

地理信息ArcGIS API for JavaScript 4.X 版本升級後，API發生了很大的變化。其中就支持了WebEarth展示，主要是通過 esri/views/SceneView 實現的。在新版本中，默認都是加載Esri自己的地圖。若想加載其他地圖，可以通過擴展BaseTileLayer實現

ArcGIS API for JavaScript 4.x 與 npm

resolved 進行 ali IE fun IT rop async creat 在4.7版本中，不僅增加了WebGL的渲染支持（渲染前端速度加快，渲染量也加大）、增強了ES6中的Promises語法支持，還支持了npm管理及webpack打包，實屬喜訊。 “意味著可以

ArcGIS API for JavaScript 與 npm 之例子運行

node 服務器環境 arcgis dem git ive bubuko 下載 module 下載官方的demo，4.7的，在終端裏跑了一下，測試成功（未打包）在測試中精簡掉了不需要的文件，使用http協議跑的（file協議不行哦）最簡單的目錄如下：我把以上文件放到

[ArcGIS API for JavaScript 4.8] Sample Code-Get Started-widgets簡介

idg com mapview list star evel 好的 gin views 【官方文檔：https://developers.arcgis.com/javascript/latest/sample-code/intro-widgets/index.html】

用Tomcat8.5做Arcgis API for javascript的本地部署

step1:1從arcgis官網上下載Arcgis api for JavaScript 4.3 https://developers.arcgis.com/javascript/latest/guide/release-notes/ ps:前提是你需要有一個esri開

ArcGIS API For JavaScript（六）InfoWindow

ArcGIS API For JavaScript（六）InfoWindow <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"&n

ArcGIS API For JavaScript（五）呼叫GP服務--簡單網路路徑分析

ArcGIS API For JavaScript（五）呼叫GP服務--簡單網路路徑分析 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

ArcGIS api for javascript——滑鼠懸停時顯示資訊視窗

描述

相關推薦