操作方法：在 ArcGIS API for JavaScript 4.x 中使用鼠标悬停显示弹出窗口

摘要

在 ArcGIS API for JavaScript 4.x 中，弹出窗口可以通过鼠标悬停而非鼠标单击显示要素属性的内容。

过程

以下说明描述了如何使用 ArcGIS API for JavaScript 通过鼠标悬停而非鼠标单击显示弹出窗口。

打开文本编辑器，例如 Notepad++。
以 <html> 和 <head> 标签开始脚本。

<html> <head>

在 <head> 标签内，开始引用 ArcGIS API for JavaScript。

<meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title> 鼠标悬停时显示弹出窗口 | ArcGIS API for JavaScript 4.16 </title> <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.16/"></script>

指定要用于地图中的样式。

<style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style>

开始指定要使用的要素的脚本。

<script> require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer" ], function (Map, MapView, FeatureLayer) { var map = new Map({ basemap: "gray" }); var view = new MapView({ container: "viewDiv", map: map, center: [-95.7129, 37.0902], zoom: 5, popup: { autoOpenEnabled: false } }); var featureLayer = new FeatureLayer({ url: "<Service REST Url>", popupTemplate: { title: "{state_abbr}", content: "{state_name}" } }); map.add(featureLayer);

在相同的脚本中，加入启用鼠标悬停功能的代码，然后关闭 <script> 标签。

view.on("pointer-move", function (event) { view.hitTest(event).then(function (response) { if (response.results.length) { var graphic = response.results.filter(function (result) { // 检查图形是否属于感兴趣的图层 return result.graphic.layer === featureLayer; })[0].graphic; view.popup.open({ location: graphic.geometry.centroid, features: [graphic] }); } else { view.popup.close(); } }); }); }); </script>

关闭所有打开的标签，然后创建<body> 标签。

</head> <body> <div id="viewDiv"></div> </body> </html>

以 .html 扩展名保存文件。以下是完整脚本示例：

<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title> 鼠标悬停时显示弹出窗口 | ArcGIS API for JavaScript 4.16 </title> <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.16/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer" ], function (Map, MapView, FeatureLayer) { var map = new Map({ basemap: "gray" }); var view = new MapView({ container: "viewDiv", map: map, center: [-95.7129, 37.0902], zoom: 5, popup: { autoOpenEnabled: false } }); var featureLayer = new FeatureLayer({ url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2", popupTemplate: { title: "{state_abbr}", content: "{state_name}" } }); map.add(featureLayer); view.on("pointer-move", function (event) { view.hitTest(event).then(function (response) { if (response.results.length) { var graphic = response.results.filter(function (result) { // 检查图形是否属于感兴趣的图层 return result.graphic.layer === featureLayer; })[0].graphic; view.popup.open({ location: graphic.geometry.centroid, features: [graphic] }); } else { view.popup.close(); } }); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

文章 ID: 000024297

发现关于本主题的更多内容

获取来自 ArcGIS 专家的帮助

联系技术支持部门

下载 Esri 支持应用程序

转至下载选项

操作方法：在 ArcGIS API for JavaScript 4.x 中使用鼠标悬停显示弹出窗口

摘要

过程

接收通知并查找新问题或常见问题的解决方案

相关信息

发现关于本主题的更多内容