[英]Openlayers/GeoServer WFS caching, tiles or any optimization
我正在使用OpenLayers 3.20.0开发一个Web应用程序,并将来自GeoServer的图层链接到Oracle数据源。 该应用程序主要使用ImageWMS层,还使用Vector层进行交互和编辑。 问题是,绘制30000多条折线后,地图非常慢,我想使过程更快:-)
所以我想知道什么是最好的方法。 我发现了两种方法:
我寻找了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”放在示例的URL末尾时,出现了错误,但我猜这不是正确的方法。
我们将不胜感激任何帮助,以便为我提供有关如何使用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:无法读取ol.renderer.canvas.VectorTileLayer.drawTileImage(ol-debug.js:29886)处ol.renderer.canvas.VectorTileLayer.createReplayGroup_(ol-debug.js:29814)处为null的属性'getUnits' ol.Map上的ol.renderer.canvas.Map.renderFrame(ol-debug.js:30302)上的ol.renderer.canvas.VectorTileLayer.ol.renderer.canvas.TileLayer.prepareFrame(ol-debug.js:26557)位于ol.Map的renderFrame_(ol-debug.js:42107)。 (ol-debug.js:41013),位于Object.onInvokeTask(core.js:3815)处的ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask(zone.js:421)处Zone.push ../ node_modules / zone.js / dist / zone.js.Zone.runTask上的ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask(zone.js:420) (zone.js:188)
看来此问题现在来自EPSG:2169。 EPSG:3857的示例效果很好(请参阅答案)。
我想念什么吗?
非常感谢 !
加快应用程序速度的最简单方法是切换到使用WMTS(或切片WMS)层。 这样,您的应用程序就可以利用浏览器缓存来仅请求以前从未见过的切片,并且服务器也只需渲染一次,因为它们也被缓存到了磁盘中。
您几乎可以肯定不需要所有300K功能来进行编辑,因此尝试将WFS过滤为仅所请求区域的边界框将有所帮助。
最后,最大的成功可能来自切换到适当的空间数据库,例如PostGIS。
矢量图块不必为.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
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.