1

我想显示多个 WFS 图层并仅显示顶层的弹出窗口。我不想禁用所有基础层弹出窗口。或者，如果我不想显示所有图层中的一个功能（将所有图层功能组合在一个弹出窗口中）。我已经完成了一些代码，但我不明白如何为一层添加弹出窗口或为所有图层添加弹出窗口，但仅显示在一个弹出窗口中选择功能。这是我的代码，

  document.addEventListener('DOMContentLoaded',function(){

   var container = document.getElementById('popup');
   var content = document.getElementById('popup-content');
   var closer = document.getElementById('popup-closer');

    var baselayer = new ol.layer.Vector({
   title:'india ',
      source:new ol.source.Vector({
      url:"http://localhost:8088/geoserver/mapper/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=mapper:ind_adm1&maxFeatures=50&outputFormat=application%2Fjson",
    format:new ol.format.GeoJSON()
   })
   }) ;

   var layer = new ol.layer.Vector({
   title:'india boubdry points',
      source:new ol.source.Vector({
      url:"http://localhost:8088/geoserver/abc/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=abc:india&maxFeatures=50&outputFormat=application%2Fjson",
    format:new ol.format.GeoJSON()
   })
   }) ;



 var overlay = new ol.Overlay(({
 element: container
}));

   var map = new ol.Map({
    target: 'map',
    layers: [
    new ol.layer.Tile({
    source:new ol.source.OSM()
    }),
    baselayer,layer
    ],
overlays:[overlay],
    view:new ol.View({
    center:ol.proj.fromLonLat([78.3486781000,22.7622132000]),
    maxZoom:50,
    zoom:3
  })
  });

  var select=new ol.interaction.Select();
   select.on('select',function(e)
   {
   if(e.selected.length>0)
   {
   closer.addEventListener("click",function(evt)
   {
   container.style.display="none";
   })
   var cooordinates=e.mapBrowserEvent.coordinate
   content.innerHTML='<b>Bank:</b><i>'+e.selected[0].H["fid"]+'</i><br><b>state:</b><i>'+e.selected[0].H["st_name"]+'</i><br><b>District:</b><i>'+e.selected[0].H["type_1"]+'</i>';
  overlay.setPosition(cooordinates);
     container.style.display="block";
     }
     else
     {
        container.style.display="none";
     }
   });
   map.addInteraction( select);
  });

谢谢。

4

0 回答 0