OpenLayers – Declutter Styling Techniques

openlayersstyle

declutter does not working as it should be for point geometry, it should avoid overlapping labels and not styling format or geometry. when I set it true for points, points are starting disappear when map is zoomed out.

I used the example from OpenLayers then I set declutter to true for point (line 190) and also for line (line 168), for line is working and it avoid labels to overlap and it allows line geometry overlapping each other with the custom styling, but the whole point will be disappear when the map is zoomed out.

Did I miss any configuration or this is a bug from OL. (Tested with OL 6.1.1 and 6.2.1) at the end the question is why the points geometry disappear with enabled declutter?

Code Snippet: https://codesandbox.io/s/vector-labels-s7oeu

Best Answer

See the documentation https://openlayers.org/en/latest/apidoc/module-ol_layer_Vector-VectorLayer.html "Declutter images and text". CircleStyle is an image: 

function pointStyleFunction(feature, resolution) {
  return new Style({
    image: new CircleStyle({
      radius: 10,
      fill: new Fill({ color: "rgba(255, 0, 0, 0.1)" }),
      stroke: new Stroke({ color: "red", width: 1 })
    }),
    text: createTextStyle(feature, resolution, myDom.points)
  });
}

To avoid decluttering you could style the points as Circle geometry:

function pointStyleFunction(feature, resolution) {
  return new Style({
    geometry: new Circle(feature.getGeometry().getCoordinates(), 10 * resolution),
    fill: new Fill({ color: "rgba(255, 0, 0, 0.1)" }),
    stroke: new Stroke({ color: "red", width: 1 }),
    text: createTextStyle(feature, resolution, myDom.points)
  });
}

https://codesandbox.io/s/vector-labels-5dlub

Related Question