WMS GetFeatureInfo (Layers)——WMS获取要素信息（图层）

最新推荐文章于 2024-08-06 11:24:45 发布

桃李不言_下自成蹊

最新推荐文章于 2024-08-06 11:24:45 发布

阅读量2.8k

点赞数

分类专栏： OpenLayers3

OpenLayers3 专栏收录该内容

76 篇文章 8 订阅

订阅专栏

这篇博客演示了如何使用 WMS GetFeatureInfo 中的选项，通过图层名称来读取一次请求多个图层返回的特征信息。

摘要由CSDN通过智能技术生成

All features:	6
Hotel features:	2
Restaurant features:	4

Demonstrates the use of the layers option in the ol.format.WMSGetFeatureInfo format object, which allows features returned by a single WMS GetFeatureInfo request that asks for more than one layer to be read by layer name.

在ol.format.WMSGetFeatureInfo格式对象中演示layers设置的使用，这允许要素返回单个WMS GetFeatureInfo请求，这个请求可以通过图层的名称来访问多个图层。

代码：

<!DOCTYPE html>
<html>
  <head>
    <title>WMS GetFeatureInfo (Layers)</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>
  </head>
  <body>
    <table id="info">
      <tr>
        <td>All features:</td>
        <td id="all"></td>
      </tr>
      <tr>
        <td>Hotel features:</td>
        <td id="hotel"></td>
      </tr>
      <tr>
        <td>Restaurant features:</td>
        <td id="restaurant"></td>
      </tr>
    </table>
    <script>
      // 获取请求
      fetch('https://openlayers.org/en/v4.2.0/examples/data/wmsgetfeatureinfo/osm-restaurant-hotel.xml').then(function(response) {
        return response.text();
      }).then(function(response) {

        // this is the standard way to read the features
        // 标准的方式来读取要素
        // 返回所有要素
        var allFeatures = new ol.format.WMSGetFeatureInfo().readFeatures(response);
        document.getElementById('all').innerText = allFeatures.length.toString();

        // when specifying the 'layers' options, only the features of those
        // layers are returned by the format
        // 当指定了layer设置的时候，只有这些图层的要素按照格式返回
        // 返回hotel图层的要素
        var hotelFeatures = new ol.format.WMSGetFeatureInfo({
          layers: ['hotel']
        }).readFeatures(response);
        document.getElementById('hotel').innerText = hotelFeatures.length.toString();

        // 返回restaurant图层的要素
        var restaurantFeatures = new ol.format.WMSGetFeatureInfo({
          layers: ['restaurant']
        }).readFeatures(response);
        document.getElementById('restaurant').innerText = restaurantFeatures.length.toString();

      });
    </script>
  </body>
</html>