openlayers wms/wmts 栅格图层点击点像元值查询-摩杜云开发者社区

一、wms 栅格图层像元值查询

二、wmts 栅格图层像元值查询

三、浏览器知识补充

注意：wms 栅格图层像元值查询，借助getGetFeatureInfoUrl 就可以获取到对应的url地址，但是wmts 没有内置的getFeatureInfoUrl

一、wms 栅格图层像元值查询

ol.source.TileWMS的getGetFeatureInfoUrl方法来构建WMS GetFeatureInfo请求的URL。最后，我们使用fetch函数发送请求，并在控制台上和页面上显示获取到的像元值信息

示例如下

// 创建一个 WMS 图层源
const wmsSource = new ol.source.TileWMS({
  url: 'WMS服务的URL',
  params: {
    'LAYERS': '图层名称', // 指定要查询的图层
    'TILED': true,
  },
  serverType: 'mapserver', // 服务器类型可能需要根据实际情况设置
});

// 创建包含 WMS 图层源的图层
const wmsLayer = new ol.layer.Tile({
  source: wmsSource,
});

// 添加图层到地图
map.addLayer(wmsLayer);

// 监听鼠标点击事件来执行 GetFeatureInfo 请求
map.on('singleclick', function (event) {
  const viewResolution = map.getView().getResolution();
  const coordinate = event.coordinate;

  // 执行 GetFeatureInfo 请求
  const url = wmsSource.getGetFeatureInfoUrl(
    coordinate,
    viewResolution,
    'EPSG:3857', // 坐标系
    { 'INFO_FORMAT': 'application/json' } // 请求格式，根据需要设置
  );

  if (url) {
    // 发送 GetFeatureInfo 请求
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        // 处理获取到的数据，包括像元值
        console.log('GetFeatureInfo 响应数据:', data);
      })
      .catch((error) => {
        console.error('获取 GetFeatureInfo 数据时发生错误:', error);
      });
  }
});

在上述示例中，我们使用 ol.source.TileWMS 来创建一个 WMS 图层源，并在地图上添加该图层。然后，我们监听地图的单击事件，以执行 GetFeatureInfo 请求，并使用 getGetFeatureInfoUrl 方法构建请求 URL。

请注意，根据你的具体服务配置和需求，你可能需要适当地调整参数和响应数据的处理方式。这样，你就可以在 OpenLayers 中执行 GetFeatureInfo 请求以获取像元值。

二、wmts 栅格图层像元值查询

在 OpenLayers 中，WMTS（Web Map Tile Service）与WMS（Web Map Service）有不同的设计和用途。通常，WMS 是用于获取特定坐标点的地图特征信息（包括像元值）的服务，而 WMTS 是基于瓦片的服务，通常不提供直接的 GetFeatureInfo 请求支持。

因此，WMTS 源 (ol.source.WMTS) 没有内置的 getFeatureInfoUrl 方法来执行 GetFeatureInfo 请求。如果你需要在使用 WMTS 图层时执行 GetFeatureInfo 请求以获取像元值，你可能需要使用 WMS 图层源 (ol.source.TileWMS) 来实现这个目标

Chat Gpt的wmts 像元值查询提供了下面三个方法

如果在使用WMTS（Web Map Tile Service）作为地图服务，但仍然需要获取点击点的像元值，可以考虑以下方法：

后端数据服务：虽然你已经使用了WMTS，但你仍然可以使用后端数据服务来获取点击点的像元值。你可以在后端服务器上设置一个处理点击事件的API端点，该端点接收点击坐标，并返回点击点的像元值或相关数据。前端应用程序通过发送HTTP请求到该API端点来获取数据。
预处理瓦片数据：在生成WMTS瓦片时，可以考虑在瓦片中嵌入像元值信息。这需要在瓦片生成过程中将像元值信息添加到瓦片的元数据中。然后，当用户点击地图上的某个瓦片时，你可以通过解析该瓦片的元数据来获取像元值信息。
使用WMS图层叠加：虽然你提到不想使用WMS，但你可以在WMTS地图上叠加一个透明的WMS图层，该图层可以用于获取点击点的像元值。这个WMS图层可以仅在需要时显示，并且可以用于获取像元值，而不会影响地图的可见性。

但是我不想在地图上多叠加一个wms请求，本来我们使用wmts很可能就是因为数据量太大想要加快请求，我们知道浏览器同时请求的个数是有限制的（浏览器的并发请求数有限制，主要是为了避免过多的请求导致性能下降和网络拥塞），如果我们再叠加一个wms图层，那很可能会影响网页的加载速度和用户体验。后端数据服务和预处理瓦片数据又比较麻烦

所以比较好的办法是，我们在创建wmts source的时候，同时创建一个wms source 源，但我们可以不用叠加到地图上，这样我们点击地图的时候，直接用wms的source，获取到url，然后请求回像元值

示例如下：

<script>
        // 创建地图
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM() // 添加一个基本的OpenStreetMap图层
                }),
                new ol.layer.Tile({
                    source: new ol.source.WMTS({
                        url: 'https://your-wmts-service-url.com/wmts', // WMTS服务的URL
                        layer: 'your-layer-name', // WMTS图层名称
                        matrixSet: 'EPSG:3857', // 瓦片矩阵集
                        format: 'image/png', // 图片格式
                        projection: 'EPSG:3857', // 投影
                        tileGrid: new ol.tilegrid.WMTS({
                            extent: ol.proj.get('EPSG:3857').getExtent(),
                            resolutions: [156543.03392804097, 78271.51696402048, 39135.75848201024, 19567.87924100512, 9783.93962050256, 4891.96981025128, 2445.98490512564, 1222.99245256282, 611.49622628141, 305.748113140705, 152.8740565703525, 76.43702828517625, 38.21851414258813, 19.109257071294063, 9.554628535647032, 4.777314267823516, 2.388657133911758, 1.194328566955879, 0.5971642834779395, 0.29858214173896974],
                            matrixIds: Array(19).fill().map((e, i) => 'EPSG:3857:' + i)
                        })
                    })
                })
            ],
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });


const wmsSource = new ol.source.TileWMS({
  url: 'https://your-wmts-service-url.com/wms',
  params: {
    'LAYERS': 'your-layer-name', // 指定要查询的图层
    'TILED': true,
  }
});

map.on('singleclick', function (event) {
  const viewResolution = map.getView().getResolution();
  const coordinate = event.coordinate;

  // 执行 GetFeatureInfo 请求
  const url = wmsSource.getGetFeatureInfoUrl(
    coordinate,
    viewResolution,
    'EPSG:3857', // 坐标系
    { 'INFO_FORMAT': 'application/json' } // 请求格式，根据需要设置
  );

  if (url) {
    // 发送 GetFeatureInfo 请求
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        // 处理获取到的数据，包括像元值
        console.log('GetFeatureInfo 响应数据:', data);
      })
      .catch((error) => {
        console.error('获取 GetFeatureInfo 数据时发生错误:', error);
      });
  }
});

    </script>

三、浏览器知识补充

浏览器同时请求的个数是有限制的，这是因为浏览器为了维护性能和网络资源的合理使用，对同时发起的HTTP请求进行了限制。这个限制通常称为“并发请求数”或“并发连接数”，它可以影响页面的加载速度和用户体验。

以下是一些关于浏览器请求机制的详细解释：

并发请求数限制：不同的浏览器对于并发请求数的限制可能有所不同，但通常在同一域名下的并发请求数量是有限制的。这意味着对于同一个域名，浏览器会限制同时发送的HTTP请求的数量。一般情况下，一个浏览器在同一域名下通常允许4到6个并发连接。

同一域名的限制：浏览器的并发连接限制是基于域名的。如果一个网页上有多个资源（如图片、样式表、JavaScript文件等）来自于同一域名，浏览器会尽量保持在该域名下的连接数不超过限制。这可以提高性能，因为减少了对同一域名的竞争。

并发连接的等待队列：如果浏览器达到了并发连接的限制，后续的请求会被放入等待队列中，等待前面的请求完成。一旦前面的请求完成，等待队列中的请求将被依次处理。

域名分片：为了绕过并发连接限制，开发人员可以使用域名分片（也称为域名切片或域名分发），即将页面上的资源分布在不同的子域名上。例如，将图片放在images.example.com，将样式表放在styles.example.com，这样可以增加并发连接的数量。

HTTP/2 协议：HTTP/2 协议引入了多路复用机制，允许在单个连接上同时发送多个请求和响应。这意味着HTTP/2 可以更有效地处理并发请求，而不受传统的并发连接限制的影响。

总之，浏览器的并发请求数有限制，主要是为了避免过多的请求导致性能下降和网络拥塞。开发人员可以通过合理的资源分布和优化来最大程度地利用并发连接，以提高网页的加载速度和用户体验。同时，HTTP/2 协议