Display multiple WFS layers with popup

心不动则不痛 提交于 2020-01-05 05:36:25

问题


I want to display multiple WFS layers and display popup only for top layer. I wan't to disable all the base layer popup. Or if i wan't to display one features from all the layer (combine all layer features in one popup ).I have done some code but i don't understand how to add popup for one layer or popup for all layer but display only selected feature in one popup.This is my code ,

  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);
  }); 

Thanks.

来源:https://stackoverflow.com/questions/43859364/display-multiple-wfs-layers-with-popup

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!