OpenLayers 矢量切片选择无法正常工作

Question

我希望能够 select Vector tile layer 中的特征，就像这个例子中的那样 - https://openlayers.org/en/latest/examples/vector-tile-selection.html（编辑：他们的 tile layer 似乎被破坏了，但它工作了几天前）。我在 EPSG:3765 中的 Geoserver 上有一个图块层。这是我的 OpenLayers 配置：

// Match the server resolutions
const maxResolution = 3862.66;
let defaultResolutions = [];
defaultResolutions.length = 17;
for (let i = 0; i < defaultResolutions.length; ++i) {
  defaultResolutions[i] = maxResolution / Math.pow(2, i + 1);
}

let tileGrid = new TileGrid({
  extent: [247020.5267134084, 4688936.351599621, 741441.9826338722, 5160175.80631312],
  tileSize: 256,
  resolutions: defaultResolutions,
  hidpi:false,
});

// Create new OpenLayers projection for EPSG:3765
let vtLayer = new VectorTileLayer({
  source: new VectorTileSource({
    declutter: true,
    tilePixelRatio: 1, // oversampling when > 1
    tileGrid: tileGrid,
    format: new MVT({
      defaultDataProjection: 'EPSG:3765',
     }),
    projection: 'EPSG:3765',
    url: 'https://dev.li-st.net/geoserver/gwc/service/tms/1.0.0/' + layer_vt_test + '@EPSG%3A'+projection_epsg_no+'@pbf/{z}/{x}/{-y}.pbf',
    //maxZoom: 19,
    //minZoom: 12,
    //maxResolution: 3862.66,
    //wrapX: false,
  })
})

// Selection
const selectionLayer = new VectorTileLayer({
  map: map,
  renderMode: 'vector',
  source: vtLayer.getSource(),
  style: function (feature) {
    if (feature.getId() in selection) {
      return selectedCountry;
    }
  },
});

其中 layer_vt_test 是图层名称，projection_epsg_no 是存储在变量中的 EPSG 编号。当我尝试 OpenLayers 示例中的代码时，出现以下错误： Uncaught TypeError: zg.getFeatures is not a function.

这是代码在遵循示例时中断的地方（我认为）：

map.on(['click', 'pointermove'], function (event) {
  if (
    (selectElement.value === 'singleselect-hover' &&
      event.type !== 'pointermove') ||
    (selectElement.value !== 'singleselect-hover' &&
      event.type === 'pointermove')
  ) {
    return;
  }
  vtLayer.getFeatures(event.pixel).then(function (features) {
    if (!features.length) {
      selection = {};
      selectionLayer.changed();
      return;
    }
    const feature = features[0];
    if (!feature) {
      return;
    }
    const fid = feature.getId();

    if (selectElement.value.indexOf('singleselect') === 0) {
      selection = {};
    }
    // add selected feature to lookup
    selection[fid] = feature;

    selectionLayer.changed();
  });
});

我的地图被重新投影，因为我可以看到图层并且一切都已到位，但是当我想让图层 select 可用时（点击、悬停或任何操作，这都没有关系) 它不起作用。 Geoserver (EPSG3765) 上的网格集已创建并分配给 Tile 层。

我是不是做错了什么？我没有看到 getFeatures() 是示例中导入的函数？

如有必要，我可以提供更多详细信息和 Geoserver 中图层的配置！

任何提示都会很好，因为我别无选择。

Answer 1

问题中的示例使用的是最新版本的 OL（“6.7.0”）。我正在使用“^5.1.2”并且必须遵循 this example。它使用 getFeaturesAtPixel(event.pixel) 而不是 getFeatures(event.pixel)。

OpenLayers 矢量切片选择无法正常工作

OpenLayers vector tiles selection not working properly

openlayers

openlayers-5

openlayers-6

vector-tiles