我正在使用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
因此,要定义Vector Tile源,如何定义我的URL,以及我在GeoServer端如何以正确的方式配置我的图层?我找到了这个资源:qazxsw poi
我在GeoServer上没有图像类型的唯一矢量图块格式是'application / json; type = utfgrid'。当我在我的网址末尾添加'@ pbf / {z} / {x} / { - y} .pbf'时,我会收到错误,但我猜这不是正确的方法。
任何帮助将非常感谢,让我更精确地了解如何使用GeoServer工作VectorTile图层和源,或者优化我创建的地图的其他方法。
非常感谢。
经过一些回答,我来到这个代码示例:
https://docs.geoserver.org/latest/en/user/extensions/vectortiles/tutorial.html
此代码属于以下错误:
错误TypeError:无法在ol.renderer.canvas.VectorTileLayer.drawTileImage(ol-debug.js:29886)的ol.renderer.canvas.VectorTileLayer.createReplayGroup_(ol-debug.js:29814)中读取null的属性'getUnits' ol.renderer.canvas.VectorTileLayer.ol.renderer.canvas.TileLayer.prepareFrame(ol-debug.js:26557)位于ol.Map的ol.renderer.canvas.Map.renderFrame(ol-debug.js:30302)。 ol.Map上的renderFrame_(ol-debug.js:42107)。 (ol-debug.js:41013)位于Object.inInvokeTask(core.js:3815)的ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask(zone.js:421)at at Zone.push上的ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask(zone.js:420)../ node_modules / zone.js / dist / zone.js.Zone.runTask (zone.js:188)
现在问题来自EPSG:2169。 EPSG:3857的样本效果很好(见答案)。
我错过了什么吗?
非常感谢 !
加速应用程序的最简单方法是切换到使用WMTS(或平铺WMS)层。这样,您的应用程序可以使用浏览器缓存来仅请求之前从未见过的磁贴,并且服务器只需要渲染一次,因为它们也会缓存到磁盘。
您几乎肯定不需要所有300K功能进行编辑,因此尝试将WFS过滤到所请求区域的边界框将有所帮助。
最后,最大的胜利可能来自切换到像PostGIS这样的适当空间数据库。
矢量图块不需要是.pbf或使用XYZ网址。这是使用WFS URL作为矢量切片源的重新设计的OpenLayers WFS示例。当缩小以覆盖整个加拿大时,它似乎比原始示例更具响应性。
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');
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
})
});
使用基于proj4的投影的代码似乎存在问题,但它应该使用tile加载函数
<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>