Comment afficher plusieurs informations fonction sur un clic de carte de plusieurs couches affichées à l'aide geoserver

Question

var element = document.getElementById('popup'); 
var popup = new ol.Overlay({ 
      element: element, 
      positioning: 'bottom-center', 

      stopEvent: false 
     }); 
     map.addOverlay(popup); 
var Source_ATM = 
     new ol.source.TileWMS({ 
     url: 'http://localhost:8080/geoserver/BMC/wms', 
     params: { 
      'LAYERS': 'BMC:atm', 
      'VERSION': '1.1.0', 
      'FORMAT': 'image/png', 
      'TILED': true 
     }, 
     id:"atm", 
     serverType:'geoserver' 
     }); 


    var Layer_ATM = new ol.layer.Tile({ 
     source: Source_ATM, 

    }); 

    Layer_ATM.setVisible(false); 

    //block_boundary Layer 
    var Source_BlockBoundary = 
     new ol.source.TileWMS({ 
     url: 'http://localhost:8080/geoserver/BMC/wms?', 
     params: { 
      'LAYERS': 'BMC:block_boundary', 
      'VERSION': '1.1.0', 
      'FORMAT': 'image/png', 
      'TILED': true 
     }, 
     id:"block_boundary", 
     serverType:'geoserver' 
    }); 

    var Layer_block_boundary = new ol.layer.Tile({ 
     source: Source_BlockBoundary, 

    }); 

    Layer_block_boundary.setVisible(false); 
    function featureinfoFun() { 

        map.on('singleclick', function (evt) { 

         var view = map.getView(); 
         var viewResolution = view.getResolution(); 

         var source = Layer_block_boundary.getSource(); 
         //var source2=Layer_test.getSource(); 

         var url = source.getGetFeatureInfoUrl(
         evt.coordinate, viewResolution, view.getProjection(), 
         { 'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 50 }); 

         if (url) { 
          var coordinate = evt.coordinate; 
          popup.setPosition(coordinate); 
          $(element).popover("destroy"); 
          $(element).popover({ 
           'placement': 'top', 
           'html': true, 
           'content': '<iframe style="width: 105%;"seamless src="' + url + '"></iframe>' 

          }); 

          $(element).popover('show'); 
          $(element).css('display', 'block'); 
          //$(element).popup.classList.toggle('show'); 
          //$(element).popup.close(); 
         } 
        }); 
      } 

.ol-popup { 
      position: absolute; 
      background-color: white; 
      -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); 
      filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); 
      padding: 15px; 
      border-radius: 10px; 
      border: 1px solid #cccccc; 
      bottom: 12px; 
      left: -50px; 
      min-width: 280px; 
      } 
      .ol-popup:after, .ol-popup:before { 
      top: 100%; 
      border: solid transparent; 
      content: " "; 
      height: 0; 
      width: 0; 
      position: absolute; 
      pointer-events: none; 
      } 
      .ol-popup:after { 
      border-top-color: white; 
      border-width: 10px; 
      left: 48px; 
      margin-left: -10px; 
      } 
      .ol-popup:before { 
      border-top-color: #cccccc; 
      border-width: 11px; 
      left: 48px; 
      margin-left: -11px; 
      } 
      .ol-popup-closer { 
      text-decoration: none; 
      position: absolute; 
      top: 2px; 
      right: 8px; 
      } 
      .ol-popup-closer:after { 
      content: "✖"; 
      } 

<div id="map1" class="map" style="position: fixed; height:100%; margin-top: 28px;"> 

        <!--div class="ol-toggle-options ol-unselectable"><a title="Toggle options toolbar" onClick="toggleControlPanel()" href="#toggle"></a></div--> 

        <div id="popup" class="ol-overlay-container" style="width:200px;height: 0px;"> 
        <a href="#" id="popup-closer" class="ol-popup-closer"></a> 
         <div id="popup-content" class="popover-content"></div> 

Ceci est mon code. Aidez-moi à afficher les informations sur les fonctionnalités des deux couches. aidez-moi s'il vous plaît avec le code. Je veux montrer plusieurs couches et quand je clique sur une couche et une autre couche, il affiche les informations d'attributs provenant geoserver pour les deux couches

Answer 1

Pour afficher les informations des deux couches que vous devez soit faire deuxgetFeatureInfo demandes (un pour chaque couche). Vous pouvez également combiner les deux couches de la requête en définissant les paramètres LAYERS & QUERY_LAYERS comme une liste de noms de calques séparés par des virgules (si vous spécifiez des styles, vous devrez également ajouter les deux noms de style au paramètre STYLES).

La meilleure façon de le faire est d'ajouter LAYERS & QUERY_LAYERS au bloc lors de l'appel param getFeatureInfoUrl