如何从 Openlayer 请求优化 GeoWebcache 的响应速度或性能答案

【问题标题】：how to Optimize response speed or performance of GeoWebcache from Openlayer Request如何从 Openlayer 请求优化 GeoWebcache 的响应速度或性能
【发布时间】：2018-06-01 20:59:29
【问题描述】：

我有 TileLayer，其中包含 GeoServer2.13 上的一堆数据，并使用 OpenLayers v4.1 API 从浏览器客户端发出请求。所做的一切是：

1.带投影的Openlayer地图：

var map: any = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: 'Map',
  projection: 'EPSG:900913',
  controls: ol.control.defaults({
    attributionOptions: {
      collapsible: false
    }
  }),
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

2.WMS 请求为平铺 True：

layer: new ol.layer.Tile({
      source: new ol.source.TileWMS({
        url: _GESERVER_URL +'geo/wms',
        params: {
          'FORMAT': 'image/png',
          'VERSION': '1.1.1',
          'TILED': true,
          'LAYERS': 'geo':myTileLayer'
        },
        projection: 'EPSG:4326'
      })
    })

3.在地理服务器上：

-Layer Data tab SRS:4326
  -Http Setting response header 3600
  -Seeding Executing task 1
  -ZoomLevel 15
  -GridSet:EPSG:900913 and EPSG:4326
  -Metatiling factors 4 by 4
  -Image Format image/jpeg and image/png
  -DiskQuata:3GB
  -TileDimensions:256 x 256

我也尝试过使用 image/png8，但仍然无法加快速度。是否需要任何其他配置才能使 GeoWebcache 具有更高的性能？

【问题讨论】：

你使用的是正确的URL吗？ example.com/geoserver/gwc/service/wms
不要忘记播种瓦片（预渲染它们），或者在第二次请求瓦片时评估速度影响，而不是第一次创建瓦片。跨度>

标签： geoserver

【解决方案1】：

您请求的图块与地图显示的投影不同，这会迫使 OpenLayers 重新投影图块。这需要时间并降低质量。

从您的 WMS 层中删除行 projection: 'EPSG:4326'。

还要确保您访问切片缓存，请使用切片端点，例如 WMTS，而不是希望您的切片最终访问缓存（不太可能，因为您没有在 WMS 中指定 origin）。详情请见OpenLayers WMTS example。

var parser = new ol.format.WMTSCapabilities();
  var map;

  fetch('https://openlayers.org/en/v4.6.5/examples/data/WMTSCapabilities.xml').then(function(response) {
    return response.text();
  }).then(function(text) {
    var result = parser.read(text);
    var options = ol.source.WMTS.optionsFromCapabilities(result, {
      layer: 'layer-7328',
      matrixSet: 'EPSG:3857'
    });

    map = new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM(),
          opacity: 0.7
        }),
        new ol.layer.Tile({
          opacity: 1,
          source: new ol.source.WMTS(/** @type {!olx.source.WMTSOptions} */ (options))
        })
      ],
      target: 'map',
      view: new ol.View({
        center: [19412406.33, -5050500.21],
        zoom: 5
      })
    });
  });

【讨论】：