Openlayers/GeoServer WFS缓存、平铺或任何优化

Question

我正在使用OpenLayers 3.20开发一个Web应用程序。0，层来自GeoServer，链接到Oracle数据源。此应用程序主要使用ImageWMS层，也使用矢量层进行交互和编辑。问题是地图绘制速度非常慢，绘制了30000多条多段线，我想让这个过程更快：-）

所以我想知道最好的方法是什么。我找到了两种方法：

• 在ImageWMS层中更改我的矢量层，并仅在选择或编辑时手动加载所需的功能，但它要求我对代码进行一定量的修改

我找了VectorTile的样本，但它们不是很多（大多数时候是关于OpenLayers 2），留档有点差。

关于层声明的最大未知是关于矢量文件源。必须定义一个URL，我在文档中发现，我必须放置{x}/{y}/{z}参数，但是这个URL到底在哪里，是如何构建的？（见https://openlayers.org/en/latest/apidoc/module-ol_source_VectorTile-VectorTile.html，即“url”选项）

作为示例，我当前的Vector源有一个这样的URL： /geoserver/ANF/ows？服务=WFS

因此，要定义VectorTile源，我如何定义我的URL，以及我在GeoServer端要做什么来以正确的方式配置我的层？我找到了这个资源：https://docs.geoserver.org/latest/en/user/extensions/vectortiles/tutorial.html

在GeoServer上，我拥有的唯一一种不是图像类型的矢量平铺格式是'application/json；类型=utfgrid'。当我把‘@pbf/{z}/{x}/{-y}放进去时。pbf’在我的URL的末尾，就像示例一样，我有错误，但我想这不是正确的方法。

如果您能给我提供更多关于如何使用GeoServer制作矢量图层和源的精确信息，或者以其他方式优化我创建的地图，我将不胜感激。

非常感谢。

在回答了一些问题之后，我来看看下面的代码示例：

this._view = new ol.View({
    center: [74000, 96000],
    projection: 'EPSG:2169',
    zoom: 13,
    maxZoom: 24,
    minZoom: 11
});

this._map = new ol.Map(
    {
        view: this._view,
        controls: [
            new ol.control.Zoom(),
            new ol.control.ScaleLine()
        ]                
    });

let vectorSourceURL: string = `/geoserver/ANF/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ANF:myLayer&outputFormat=application%2Fjson`;

let source = new ol.source.VectorTile({
    format: new ol.format.GeoJSON({
        defaultDataProjection: 'EPSG:2169',
        geometryName: 'GEOLOC'
    }),
    tileUrlFunction: function (tileCoord, pixelRatio, projection) {
        return vectorSourceURL + '&bbox=' + source.getTileGrid().getTileCoordExtent(tileCoord).join(',') + ',EPSG:2169';
    },
    tileGrid: ol.tilegrid.createXYZ(),
    projection: 'EPSG:2169'
});

let layer = new ol.layer.VectorTile({
    source: source,
    renderOrder: null
});

layer.set('name', 'myLayer');
layer.set('title', 'myLayer');

此代码属于以下错误：

错误类型错误：无法在ol读取null的属性“getUnits”。渲染器。帆布向量机。在ol处创建ReplayGroup（ol debug.js:29814）。渲染器。帆布向量机。位于ol的drawTileImage（ol debug.js:29886）。渲染器。帆布向量机。ol。渲染器。帆布蒂莱耶。在ol上准备名称（ol debug.js:26557）。渲染器。帆布地图位于ol的renderFrame（ol debug.js:30302）。地图renderFrame_uOL（debug.js:42107）位于ol。地图（ol debug.js:41013）在ZoneDelegate。推/节点\单元模块/区域。js/dist/zone。js。分区公使。在对象处调用任务（zone.js:421）。ZoneDelegate上的onInvokeTask（core.js:3815）。推/节点\单元模块/区域。js/dist/zone。js。分区公使。在区域中调用任务（zone.js:420）。推/节点\单元模块/区域。js/dist/zone。js。区runTask（zone.js:188）

看来这个问题现在来自EPSG:2169。EPSG:3857的样本效果良好（见答案）。

我是不是漏了什么？

非常感谢！

Answer 1

矢量图块不需要是. pbf或使用XYZ网址。下面是重新制作的OpenLayers WFS示例，它使用WFS url作为矢量图块的源。当缩小到覆盖整个加拿大时，它看起来确实比最初的例子更有反应。

  var vectorSource = new ol.source.VectorTile({
    format: new ol.format.GeoJSON(),
    tileUrlFunction: function(tileCoord, pixelRatio, projection) {
      return 'https://ahocevar.com/geoserver/wfs?service=WFS&' +
          'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
          'outputFormat=application/json&srsname=EPSG:3857&' +
          'bbox=' + vectorSource.getTileGrid().getTileCoordExtent(tileCoord).join(',') + ',EPSG:3857';
    },
    tileGrid: ol.tilegrid.createXYZ()
  });

  var vector = new ol.layer.VectorTile({
    source: vectorSource,
    style: new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'rgba(0, 0, 255, 1.0)',
        width: 2
      })
    })
  });

  var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  var map = new ol.Map({
    layers: [raster, vector],
    target: document.getElementById('map'),
    view: new ol.View({
      center: [-8908887.277395891, 5381918.072437216],
      maxZoom: 19,
      zoom: 12
    })
  });

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/3.20.0/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://cdnjs.cloudflare.com/ajax/libs/openlayers/3.20.0/ol.js"></script>
<div id="map"></div>

Answer 2

加快应用程序速度的最简单方法是切换到使用WMTS（或平铺仓储管理系统）层。这样，您的应用程序可以利用浏览器缓存来只请求它以前从未见过的磁贴，服务器只需要渲染一次，因为它们也缓存到磁盘上。

几乎可以肯定，编辑时不需要所有300K功能，因此尝试将WFS过滤到请求区域的边界框将有所帮助。

最后，最大的胜利可能来自切换到一个合适的空间数据库，如PostGIS。