时间戳

首页 > 解决方案 > 从 shapefile 数据显示弹出窗口

javascript - 从 shapefile 数据显示弹出窗口

问题描述

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

我创建了一个构造函数映射函数，然后使用它添加了一个谷歌地图。然后使用 ol.addLayer 方法我添加了一个包含数据的新层。之后，我为单击事件创建了一个选择变量，并为显示弹出窗口创建了变量弹出窗口。有人请帮我显示以下网址中的数据。

<!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 上的任何点时，我都需要显示一个弹出窗口。

标签： javascriptopenlayers

解决方案

使用 WMS 源，您将使用类似于 https://openlayers.org/en/master/examples/getfeatureinfo-image.html的 GetFeatureInfo，但不是在地图下方显示信息，而是在类似于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

推荐阅读