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

Posted 2023-02-22

【中文标题】将 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);