Instrução
Exibir pop-ups usando o cursor do mouse no ArcGIS API para JavaScript 4.x
Resumo
No ArcGIS API for JavaScript 4.x, os pop-ups podem exibir o conteúdo dos atributos da feição usando o cursor do mouse em vez de um clique do mouse.
Procedimento
As instruções a seguir descrevem como exibir pop-ups com o passar do mouse em vez de um clique do mouse usando ArcGIS API para JavaScript.
- Abra um editor de texto, por exemplo, Notepad ++.
- Inicie a tag <html> e <head> do script.
<html> <head>
- Dentro da tag <head>, inicie a referência ao ArcGIS API for JavaScript.
<meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title> Display Popups on Mouse Hover | 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 o estilo a ser usado no mapa.
<style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style>
- Inicie o script para especificar a feição a ser usada.
<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);
- No mesmo script, inclua o código para habilitar a função de foco do mouse e feche a tag <script>.
view.on("pointer-move", function (event) { view.hitTest(event).then(function (response) { if (response.results.length) { var graphic = response.results.filter(function (result) { // check if the graphic belongs to the layer of interest return result.graphic.layer === featureLayer; })[0].graphic; view.popup.open({ location: graphic.geometry.centroid, features: [graphic] }); } else { view.popup.close(); } }); }); }); </script>
- Feche todas as tags abertas e crie a tag <body>.
</head> <body> <div id="viewDiv"></div> </body> </html>
- Salve o arquivo com a extensão .html. A seguir está um exemplo de todo o script:
<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title> Display Popups on Mouse Hover | 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) { // check if the graphic belongs to the layer of interest 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 do Artigo: 000024297
Receba notificações e encontre soluções para problemas novos ou comuns
Obtenha respostas resumidas e soluções de vídeo do nosso novo chatbot de IA.
Informações Relacionadas
Descubra mais sobre este tema
Search for related information
Find training related to this topic
Explore ideas and give feedback
Obtenha ajuda de especialistas do ArcGIS
Baixe o Aplicativo de Suporte da Esri