HOW TO
Anzeigen von Pop-ups durch Daraufzeigen in ArcGIS API for JavaScript 4.x
Zusammenfassung
In ArcGIS API for JavaScript 4.x kann der Inhalt von Feature-Attributen in Pop-ups durch Daraufzeigen statt mit einem Mausklick angezeigt werden.
Vorgehensweise
In der folgenden Anleitung wird beschrieben, wie Pop-ups mithilfe von ArcGIS API for JavaScript durch Daraufzeigen statt mit einem Mausklick angezeigt werden.
- Öffnen Sie einen Text-Editor wie Notepad++.
- Beginnen Sie das Skript mit dem <html>- und dem <head>-Tag.
<html> <head>
- Fügen Sie im <head>-Tag den Verweis auf ArcGIS API for JavaScript ein.
<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>
- Geben Sie den Style ein, der in der Karte verwendet werden soll.
<style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style>
- Beginnen Sie das Skript, um das Feature anzugeben, das verwendet werden soll.
<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);
- Geben Sie in diesem Skript den Code zur Aktivierung der Mauszeigerfunktion ein, und beenden Sie das Skript mit dem <script>-Tag.
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>
- Schließen Sie alle geöffneten Tags, und erstellen Sie das <body>-Tag.
</head> <body> <div id="viewDiv"></div> </body> </html>
- Speichern Sie die Datei mit der Erweiterung ".html". Im Folgenden ist ein Beispiel für das gesamte Skript dargestellt:
<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>
Artikel-ID: 000024297
Benachrichtigungen erhalten und Lösungen für neue oder häufige Probleme finden
Unser neuer KI-Chatbot stellt zusammengefasste Antworten und Videolösungen für Sie bereit.
Zugehörige Informationen
Weitere Informationen zu diesem Thema erkunden
Search for related information
Find training related to this topic
Explore ideas and give feedback
Unterstützung durch ArcGIS-Experten anfordern
Esri Support App herunterladen