arcgis for js 4.x 悬浮显示popup

ummary

 

In ArcGIS API for JavaScript 4.x, pop-ups can display content from feature attributes using a mouse hover instead of a mouse click.

 

Procedure

 

The following instructions describe how to display pop-ups with a mouse hover instead of a mouse click using ArcGIS API for JavaScript.

  1. Open a text editor, for example, Notepad++.
  2. Start the <html> and the <head> tag for the script.
<html>

<head>
  1. Within the <head> tag, start the reference to 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>
  1. Specify the style to be used in the map.
<style> 
     html, 
     body, 
     #viewDiv { 
       padding: 0; 
       margin: 0; 
       height: 100%; 
       width: 100%; 
     } 
   </style>
  1. Start the script to specify the feature to use.
<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);
  1. Within the same script, include the code to enable the mouse hover function and close the <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>
  1. Close all the opened tags and create the <body> tag.
</head> 
 
 <body> 
   <div id="viewDiv"></div> 
 </body> 

 </html>
  1. Save the file with the .html extension. The following is a sample of the entire 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>

 转：https://support.esri.com/en/technical-article/000024297

 

posted @ 2021-10-09 09:28  zhh  阅读(1027)  评论(0)    收藏  举报