0

使用 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 中为矢量切片创建自定义渲染器吗？

4

1 回答 1

0

自定义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);
  }
}
于 2021-12-19T13:08:59.657 回答