将 Openlayer vectortile 自定义渲染函数用于矢量图块时出错

Posted

技术标签:

【中文标题】将 Openlayer vectortile 自定义渲染函数用于矢量图块时出错【英文标题】:Error using Openlayer vectortile custom renderfunction for vectortiles 【发布时间】:2022-01-20 21:56:21 【问题描述】:

使用 Openlayer vectortile 自定义渲染函数矢量图块时出错 Openlayer 层允许设置自定义渲染功能,如https://openlayers.org/en/latest/apidoc/module-ol_layer_Layer-Layer.html 中所述。它说渲染函数将帧状态作为输入,并期望返回一个 HTML 元素。这将覆盖图层的默认渲染。我找到了一个旧版本的 openlayers 的示例,但这不适用于 openlayers 6。 我尝试使用 https://openlayers.org/en/latest/apidoc/module-ol_renderer_canvas_VectorTileLayer-CanvasVectorTileLayerRenderer.html 中提到的 CanvasVectorTileRenderer 当不定义自定义渲染函数时,一切都很顺利。但是当我添加客户渲染功能时,我收到错误消息说

VectorTileLayer.js:574 Uncaught TypeError: Cannot read properties of null (reading 'globalAlpha')
    at n.renderDeclutter (VectorTileLayer.js:574)
    at n.renderDeclutter (BaseVector.js:228)
    at n.renderFrame (Composite.js:137)
    at n.Fe (PluggableMap.js:1455)
    at n.<anonymous> (PluggableMap.js:214)

我的代码如下:

class customCanvasVectorTileLayerRenderer extends ol.renderer.canvas.VectorTileLayer 
  constructor (frameState, layer) 
    super(frameState, layer)
  
  getTile(z, x, y, frameState) 
    console.log("customCanvasVectorTileLayerRenderer - getTile: ", frameState, z, x, y)
  


urlnk = 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/' + 'GeoNetPutten:straten' +'@EPSG%3A'+'28992'+'@pbf/z/x/-y.pbf'
tg=ol.tilegrid.createXYZ(maxZoom: 16, minZoom: 8, extent: [-285401.92, 22598.08, 595401.9199999999, 903401.9199999999]) //, tileSize: 256) 
src= new ol.source.VectorTile(
    projection: proj28992, 
    tileGrid: tg, 
    format: new ol.format.MVT(defaultDataProjection: 'EPSG:28992'),
    url: urlnk
)

var straatnamenpbf = new ol.layer.VectorTile(
      title: 'Straatnamen pbf',
      source: src,
      render: function (frameState) 
        var x = new customCanvasVectorTileLayerRenderer(this)
        return x
    
)


Also when trying to directly use the existing renderer I get same error:
var straatnamenpbf = new ol.layer.VectorTile(
      title: 'Straatnamen pbf',
      source: src,
      render: function (frameState) 
        var x = new ol.renderer.canvas.VectorTileLayer(this)
        return x
    
)

我想我把事情搞混了,但是谁能帮助在 openlayers 6 中为矢量切片创建自定义渲染器?

【问题讨论】:

【参考方案1】:

自定义的getTile 方法除了记录传递的参数之外什么都不做,因此其他继承的方法可能无法获得它们期望的数据。您应该添加自己的自定义代码或从父类调用该方法,或者添加您自己的自定义 renderDeclutter 方法,该方法将与您的 getTile 方法一起使用

class customCanvasVectorTileLayerRenderer extends ol.renderer.canvas.VectorTileLayer 
  constructor (frameState, layer) 
    super(frameState, layer)
  
  getTile(z, x, y, frameState) 
    console.log("customCanvasVectorTileLayerRenderer - getTile: ", frameState, z, x, y);
    return super.getTile(z, x, y, frameState);
  

【讨论】:

以上是关于将 Openlayer vectortile 自定义渲染函数用于矢量图块时出错的主要内容,如果未能解决你的问题,请参考以下文章

单个 VectorTile 图层加载的许多“postrender”和“rendercomplete”事件

text #vectortiles #gl

OpenLayer3入门——[一]

vue openlayer聚合是啥意思

将 MSSQL 中用于 Web 映射(Leaflet、Openlayer、OpenStreetMaps、GoogleAPI 等)的投影更改为 WSG48 或任何其他格式

带有地理服务器的 openlayer 3