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

【问题标题】：OpenLayers vector tiles selection not working properlyOpenLayers 矢量切片选择无法正常工作
【发布时间】：2021-11-06 03:41:34
【问题描述】：

我希望能够像本例中一样从矢量切片图层中选择特征 - https://openlayers.org/en/latest/examples/vector-tile-selection.html（编辑：他们的切片图层似乎已损坏，但几天前它工作得很好）。我在 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();
  });
});

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

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

如有需要，我可以提供更多细节和Geoserver中层的配置！

任何提示都会很好，因为我没有选择。

【问题讨论】：

代码依赖于具有 id 的特性。您需要在 MVT 选项上指定 idProperty，如示例中所示。
试过了，但没有运气。将 idProperty 设置为与 Geoserver 中的 id 相对应，但没有任何变化。

标签： openlayers openlayers-5 openlayers-6 vector-tiles

【解决方案1】：

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

【讨论】：