zoukankan      html  css  js  c++  java
  • 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%; 
            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%; 
            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

     

  • 相关阅读:
    视频直播点播平台EasyDSS浏览器控制台报”命名重复“错误解决办法
    视频直播点播平台EasyDSS登录页如何实现插入产品广告位?
    视频直播点播平台EasyDSS系统如何将数据库迁移到Mysql数据库?
    视频直播点播系统EasyDSS如何将已存储的视频文件进行迁移?
    人工智能正在推动“硅”复兴
    人工智能如何重新定义云计算技术并提高业务效率
    《Nature》子刊:不仅是语言,机器翻译还能把脑波「翻译」成文字
    一文读懂机器阅读理解
    大数据算法应用的测试发展之路
    从800个GPU训练几十天到单个GPU几小时,看神经架构搜索如何进化
  • 原文地址:https://www.cnblogs.com/zany-hui/p/15384083.html
Copyright © 2011-2022 走看看