CÓMO
Mostrar elementos emergentes desplazando el ratón por encima en ArcGIS API for JavaScript 4.x
Resumen
En ArcGIS API for JavaScript 4.x, los elementos emergentes pueden mostrar contenido de atributos de entidades desplazando el ratón por encima en lugar de haciendo clic con él.
Procedimiento
Las siguientes instrucciones describen cómo mostrar elementos emergentes desplazando el ratón por encima en lugar de haciendo clic con él mediante ArcGIS API for JavaScript.
- Abra un editor de texto, por ejemplo, Notepad++.
- Inicie la etiqueta <html> y <head> para el script.
<html> <head>
- Dentro de la etiqueta <head>, inicie la referencia a ArcGIS API for JavaScript.
<meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title> Mostrar elementos emergentes pasando el ratón por encima | 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>
- Especifique el estilo que se va a utilizar en el mapa.
<style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style>
- Inicie el script para especificar la entidad que se va a utilizar.
<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);
- Dentro del mismo script, incluya el código para habilitar la función de desplazamiento del ratón y cierre la etiqueta <script>.
view.on("pointer-move", function (event) { view.hitTest(event).then(function (response) { if (response.results.length) { var graphic = response.results.filter(function (result) { // comprobar si el gráfico pertenece a la capa de interés return result.graphic.layer === featureLayer; })[0].graphic; view.popup.open({ location: graphic.geometry.centroid, features: [graphic] }); } else { view.popup.close(); } }); }); }); </script>
- Cierre todas las etiquetas abiertas y cree la etiqueta <body>.
</head> <body> <div id="viewDiv"></div> </body> </html>
- Guarde el archivo con la extensión .html. A continuación, se muestra un ejemplo de todo el script:
<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title> Mostrar elementos emergentes pasando el ratón por encima | 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) { // se comprueba si el gráfico pertenece a la capa de interés 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. de artículo: 000024297
Recibir notificaciones y encontrar soluciones a problemas nuevos o comunes
Obtenga respuestas resumidas y soluciones de vídeo de nuestro nuevo chatbot de IA.
Información relacionada
Descubrir más sobre este tema
Search for related information
Find training related to this topic
Explore ideas and give feedback
Obtener ayuda de expertos en ArcGIS
Descargar la aplicación de soporte de Esri