2

I have a vector layer with Point data. There could easily be between 10K and 30K features to render, each feature with their respective label, so decluttering is needed.

My goal is to have the feature/"circle" of each point rendered (to visually see the data distribution), with the label/text being decluttered when needed. Like in this little screenshot where we see all features but only some of the labels:

enter image description here

A key point here is that normally to render Point vector data, one would make use of the ol.style.Circle class;

image = new ol.style.Circle({
radius: xxx,
fill: new ol.style.Fill({
    ...
}),
stroke: new ol.style.Stroke({
    ...
}),

And for labels we have to use the "text" element of the Style:

text: new ol.style.Text({
...
})

But the declutter mechanism is resolving conflicts between "image" and "text" elements. As from the API:

Declutter images and text. Decluttering is applied to all image and text styles, and the priority is defined by the z-index of the style. Lower z-index means higher priority.

So this gives us a challenge rendering points using both the image and the text elements in the applied styles.

For geometry type 'Point' I have managed to find a way around this by using the "geometry" element of the Style, and I construct a new ol.geom.Circle allowing me to render points not defining the "image" element, but instead applying standard "fill" and "stroke" like we do for Polygons or Lines.

geometry: new ol.geom.Circle(feature.getGeometry().getCoordinates(), 2*resolution)

So the Style then becomes:

var featureStyle = new ol.style.Style({
geometry: new ol.geom.Circle(feature.getGeometry().getCoordinates(), 2*resolution),
fill: new ol.style.Fill({
  ...
}),
stroke: new ol.style.Stroke({
  ...
})

});

However, for 'MultiPoint' features, I see no way of working around the use of the "image" element.

Hence, the core question here is: Is it not possible to render a MultiPoint with labels as long as the layer is in declutter mode? Have I missed some part of documentation stating this is not possible? Or do I still not understand all details of the decluttering mechanism?

If I have a MultiPoint feature using a Style with both image and text, and turn on declutter, it is not rendered at all on the map. See this Codepen as example: https://codepen.io/eivindronnevik/pen/GRKObvE

Currently the layer has declutter:true, set declutter to false and the MultiPoint feature will appear.

If I remove the text-element of the Style, then the features render. If I remove the image-element, the labels render. I would have understood if there were individual Points of the MultiPoint disappearing when decluttering comes into play, e.g. the "image" element of these two Points were too close - so only one of them are rendered. But in theory we can create a MultiPoint with 2 Points, one in Russia and one in the US, and still if declutter is on nothing will render.

Using Points, an image and text element of the same Style object does not "collide", declutter will either render both or none (in relation to other Points around). But it seems like for MultiPoint this is different, it is like the image and text element of each individual Point collide, hence nothing is rendered.

Any input or possible corrections of my understanding of decluttering is sought.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.