显示来自 shapefile 数据的弹出窗口

Question

我正在使用 openlayers 库和地理服务器在网页上显示地图。我想从地图 [ 这是一个 ImageWMS 文件 ] 获取数据并显示为弹出功能，就像用户单击地图上的任何点一样。我正在使用地理服务器图层来显示地图，我想将该图层的详细信息显示为每个地图点上的弹出窗口。

我创建了一个构造函数映射函数，然后使用它添加了一个 google 映射。然后使用 ol.addLayer 方法我添加了一个包含数据的新层。之后，我为点击事件创建了一个 select 变量，并为显示弹出窗口创建了一个变量弹出窗口。请有人帮我显示下面 url 的数据。

<!DOCTYPE html>
      <html>
      <head>
      <title>Overlay</title>
      <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
     <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
      <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      </head>
  <body>
        <div id="map" class="map">
        </div>

    <script>

var map = new ol.Map({
    target: 'map',
   view: new ol.View({
       center: ol.proj.fromLonLat([76.6927, 11.8083]),
       minZoom: 4,
       zoom: 12,
       interactions: ol.interaction.defaults({ altShiftDragRotate:false, pinchRotate:false })
   })
});

var format = 'image/png';

map.addLayer(new ol.layer.ImageWMS({
    source: new ol.source.ImageWMS({
       ratio:1,
       projection:'EPSG:4326',
       url:'url',
       params:{'FORMAT':format,
               'VERSION':'1.1.1',
               STYLES:'',                    
               LAYERS:'layer',
              }
   }),
    style: function(f) {
      return new ol.style.Style({ 
        image: new ol.style.RegularShape({
          radius: 5,
          radius2: 0,
          points: 4,
          stroke: new ol.style.Stroke({ color: "#000", width:1 })  
        }),
        text: new ol.style.Text ({
          text: f.get('id').toString(),
          font: 'bold 11px sans-serif',
        }),
        stroke: new ol.style.Stroke({
          width: 1,
          color: [255,128,0]
        }),
        fill: new ol.style.Fill({
          color: [255,128,0,.2]
        })
      })
    }
  }));
//Interaction
var select = new ol.interaction.Select({
    hitTolerance: 5,
    multi: true,
    condition: ol.events.condition.singleClick
  });
  map.addInteraction(select);


//Select control

var popup = new ol.Overlay.PopupFeature({
    popupClass: 'default anim',
    select: select,
    canFix: true,
    template: {
        title: 
          function(f) {
            return f.get('gwl')+' ('+f.get('id')+')';
          }
    }
  });



map.addOverlay (popup);



    </script>
  </body>
</html>

每当用户尝试单击 shapefile 上的任何点时，我都需要显示一个弹出窗口。

Answer 1

对于 WMS 源，您可以使用类似于 https://openlayers.org/en/master/examples/getfeatureinfo-image.html but instead of the info display below the map you would display in in a popup similar to https://openlayers.org/en/master/examples/popup.html 要更好地控制显示的数据，请使用 {'INFO_FORMAT': 'application/json'}

您链接的 ol-ext 示例使用了矢量图层。您可以使用其 WFS 服务从您的服务器而不是 WMS 获取矢量数据，请参阅 https://openlayers.org/en/master/examples/vector-wfs.html

显示来自 shapefile 数据的弹出窗口

Display popup from shapefile data

javascript

openlayers