编辑

Question

我正在使用OpenLayers 3.20.0开发一个Web应用程序，其中的图层来自GeoServer，并链接到Oracle数据源。该应用程序主要使用ImageWMS层，还使用Vector层进行交互和编辑。问题是，地图绘制速度超过30000条折线，速度非常慢，我想使过程更快：-）

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

在ImageWMS层中更改我的Vector层，并仅在选择或编辑时加载手动需要的功能，但这会要求我对代码进行一定程度的修改
使用VectorTile层而不是Vector层，我想它应该像ImageWMS和tile系统一样工作，以便仅根据地图视图加载数据（很好吗？）

我寻找了VectorTile的样本，但是样本不是很多（大多数情况下是关于OpenLayers 2的），并且文档有点差。

关于图层声明的最大未知是关于VectorTile源。必须定义一个URL，并且我在文档中发现必须放置{x} / {y} / {z}参数，但是该URL的确切位置和构建方式？（请参见https://openlayers.org/en/latest/apidoc/module-ol_source_VectorTile-VectorTile.html，“ URL”选项）

作为示例，我当前的Vector源具有如下URL：/geoserver/ANF/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ANF:myLayer&outputFormat=application%2Fjson

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

我在GeoServer上没有图像类型的唯一矢量图块格式是'application / json; type = utfgrid'。当我像示例一样在网址末尾添加“ @ pbf / {z} / {x} / {-y} .pbf”时，出现了错误，但我猜这不是正确的方法。

我们将非常感谢您的帮助，以使我能够更精确地使用GeoServer使VectorTile图层和源工作，或者通过其他方式优化我创建的地图。

非常感谢。

编辑

在得到一些答案之后，我要看一下这段代码示例：

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');

此代码属于以下错误：

错误TypeError：无法读取null的属性“ getUnits” 在ol.renderer.canvas.VectorTileLayer.createReplayGroup_（ol-debug.js：29814）在ol.renderer.canvas.VectorTileLayer.drawTileImage（ol-debug.js：29886）在ol.renderer.canvas.VectorTileLayer.ol.renderer.canvas.TileLayer.prepareFrame （ol-debug.js：26557）在ol.renderer.canvas.Map.renderFrame（ol-debug.js：30302）在ol.Map.renderFrame_（ol-debug.js：42107）在ol.Map。（ol-debug.js：41013）在ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask （zone.js：421）在Object.onInvokeTask（core.js：3815）在ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask （zone.js：420）在Zone.push ../ node_modules / zone.js / dist / zone.js.Zone.runTask（zone.js：188）

该问题现在来自EPSG：2169。带有EPSG：3857的示例效果很好（请参阅答案）。

我想念什么吗？

非常感谢！

Answer 1

加快应用程序速度的最简单方法是切换到使用WMTS（或切片WMS）层。这样，您的应用程序就可以利用浏览器缓存来仅请求以前从未见过的切片，并且服务器也只需渲染一次，因为它们也被缓存到了磁盘中。

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

最后，最大的成功可能是切换到适当的空间数据库，例如PostGIS。

Answer 2

矢量图块不必为.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>

将代码与基于proj4的投影一起使用似乎确实存在问题，但它应该使用图块加载功能工作

let viewProjection = ol.proj.get('EPSG:2169');

let format = new ol.format.GeoJSON({
        defaultDataProjection: viewProjection,
        featureProjection: viewProjection,
        geometryName: 'GEOLOC'
    });

let source = new ol.source.VectorTile({
    tileUrlFunction: function (tileCoord, pixelRatio, projection) {
        return vectorSourceURL + '&bbox=' + source.getTileGrid().getTileCoordExtent(tileCoord).join(',') + ',EPSG:2169';
    },
    tileLoadFunction: function (tile, url) {
        tile.setProjection(viewProjection);
        tile.setLoader(function() {
            var xhr = new XMLHttpRequest();
            xhr.onload = function() {
                tile.setFeatures(format.readFeatures(xhr.responseText));
            }
            xhr.open("GET", url, true);
            xhr.send();
        });
    },
    tileGrid: ol.tilegrid.createXYZ(),
    projection: viewProjection
});

Openlayers / GeoServer WFS缓存，切片或任何优化

编辑

2 个答案: