Issue with retrieving multiple overlapping features in WebGLVectorLayer #16289

GraNaTic · 2024-10-14T15:27:50Z

GraNaTic
Oct 14, 2024

Hello, esteemed developers and OpenLayers community members!

I’ve encountered an issue when trying to get all the WebGLLayer features at a click point, and I’ve spent quite a bit of time searching for a solution. However, I haven’t been able to find a built-in function in OpenLayers that solves this problem. As mentioned in many other tickets, the getFeaturesAtPixel function of the Map object returns only the topmost feature of the layer. From my experiments with the getFeaturesAtCoordinate function of the VectorSource object, I’ve found that it works well with polygons but not at all with geometries of type MultiLineString, LineString, or Point. Based on the code of the function, I assume it might work with these geometries if the coordinates of their centers are provided.

I implemented a workaround to get the features using the getFeaturesAtPixel function, but I’m not satisfied with it as it feels cumbersome and not quite the right approach.

const contextmenu = async (e) => 
{
    e.preventDefault();

    const pixel = map.getEventPixel(e);
    const clickCoordinate = map.getCoordinateFromPixel(pixel);
    let features = [];
    let feature;

    // While there are features at the pixel
    while ((feature = map.getFeaturesAtPixel(pixel)[0])) {
        // Add the feature to the array
        features.push(feature.clone());

        // Get the layer type the feature belongs to
        const layerType = feature.get('layerType');

        // Find the layer by layerType
        const layer = map.getLayers().getArray().find(layer => layer.get('layerType') === layerType);

        if (layer) {
            const source = layer.getSource();

            // Remove the feature from the layer using its ID
            source.removeFeature(feature);
            await new Promise(resolve => setTimeout(resolve, 60));
        }
    }

    // Now we have all features in the features array

    // Return the features to the original layers in reverse order
    for (let i = features.length - 1; i >= 0; i--) {
        const feature = features[i];
        const layerType = feature.get('layerType');

        // Find the layer by type
        const layer = map.getLayers().getArray().find(layer => layer.get('layerType') === layerType);

        if (layer) {
            const source = layer.getSource();

            // Add the feature back to the layer
            source.addFeature(feature);
        }
    }
    await new Promise(resolve => setTimeout(resolve, 30));

    if (features.length === 0) return;
}

Could you please advise if there is a more elegant and efficient way to get all WebGLLayer features at a click point that can solve this problem?

Thank you for your attention, with great respect for the work of the developers and the community,

Greg Baranov

Answered by jahow

Oct 14, 2024

To get a more accurate array of features at a certain coordinate you might want to use the method of the source you're using, e.g.: https://openlayers.org/en/latest/apidoc/module-ol_source_Vector-VectorSource.html#getFeaturesInExtent

View full answer

jahow · 2024-10-14T18:57:51Z

jahow
Oct 14, 2024
Maintainer

To get a more accurate array of features at a certain coordinate you might want to use the method of the source you're using, e.g.: https://openlayers.org/en/latest/apidoc/module-ol_source_Vector-VectorSource.html#getFeaturesInExtent

1 reply

GraNaTic Oct 15, 2024
Author

Thank you very much for your response! This method indeed significantly helps in obtaining the features located at the click point. However, despite its ability to accurately retrieve the nearest Line/MultiLine String and use flexible custom HitTolerance, the approach to detecting points with dynamically changing sizes, calculated using Flat Style expressions, remains unclear to me. Is there a way to get the current numerical values of the point's image-height, image-width, and circle-radius properties without calculating them using Flat Style expressions? If not, could you direct me to the methods that allow calculating the values by passing expressions and arguments from the layer style?

Here is an example of my styles and WebGLLayer:

// Object with styles for different layers
const styles = {
  pointsType1: {
    "icon-src": "icon.png",
    "icon-width": [
      'interpolate',
      ['linear'],
      ['zoom'],
      8, 12,
      16, 48,
    ],
    "icon-height": [
      'interpolate',
      ['linear'],
      ['zoom'],
      8, 12,
      16, 48,
    ],
    //"icon-size": 16,
    "icon-rotate-with-view": false,
  },
  pointsType2: {
    'circle-radius': 8,
    'circle-fill-color': 'rgba(255, 0, 0, 0.7)',
    'circle-opacity': 0.9,
  },
};

// Function to get the style based on the layer name
export const getLayerStyle = (layerType) => {
  // Return the layer style if it exists, otherwise return the default style
  return styles[layerType] || styles.default;
};

// WebGLLayer class that takes a layer name and uses the corresponding style
export class WebGLLayer extends Layer {
  constructor(options) {
    super(options);
  }

  createRenderer() {
    const style = getLayerStyle(this.get('layerType')); // Get the style based on the layer name
    this.set('style', style);
    return new WebGLVectorLayerRenderer(this, {
      className: this.getClassName(),
      style,
    });
  }
}

I greatly appreciate your help!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Issue with retrieving multiple overlapping features in WebGLVectorLayer #16289

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

Issue with retrieving multiple overlapping features in WebGLVectorLayer #16289

Uh oh!

Uh oh!

GraNaTic Oct 14, 2024

Replies: 1 comment · 1 reply

Uh oh!

jahow Oct 14, 2024 Maintainer

Uh oh!

Uh oh!

GraNaTic Oct 15, 2024 Author

GraNaTic
Oct 14, 2024

Replies: 1 comment 1 reply

jahow
Oct 14, 2024
Maintainer

GraNaTic Oct 15, 2024
Author