label decluttering

[chitombo]

Good day, I have a layer upon which I am showing labelled points, using vl-style-func with a factory function to create the style per point to label each point with their name following what had been recommended in #57 Unfortunately, when zoomed out the labels appear very cluttered and not readable, so I tried following the Vector Label Decluttering from OpenLayers example using the textOverflow: true within the factory function.

This did not work for me, and I cannot figure out how to declutter the labels. I would appreciate any advice on how to achieve this? Thank you in advance,

samples from my code as follows `

    <vl-style-func :factory="pointStyleFunc"></vl-style-func>
  </vl-layer-vector>`

Points are an array of { type: "Feature", id: uuid, geometry: { type: "Point", coordinates: [longitude, latitude] }, properties: { name: name, status: status } }

Style is let style = createStyle({ imageSrc: "/img/moving.png", imageScale: 0.9, imageAnchor: [0.5, 0.5], text: feature.get("name"), textOverflow: true, textFillColor: "#fff", textStrokeColor: "#000", textStrokeWidth: 2, textFont: "bold 13px sans-serif", textOffsetY: -16 });

[chitombo]

I think I figured out my issue. I needed to add <vl-layer-vector :declutter="true"> this seems to have cleared up the clutter by removing nearby points until you zoom in further. This should work for me.

[ghettovoice]

Hello @chitombo , sorry for the late response. I'm glad you find a solution. Almost all options of vl-layer-vector are the same as ol/layer/Vector.