When my feature requires a combination of text and line styles at the same time, the text is decluttered using overflow, but the lines still exist. I don't have a way to judge and hide the lines. Do you know of any other ways I can use this combination? it looks like this now. result
this.layer = new VectorImageLayer({
source: new VectorSource({ wrapX: false }),
declutter: true,
style: function (feature) {
const { visible, rotation, type, sog, name, lonLat } =
feature.getProperties();
const currentZoom = self.map.getView().getZoom();
const styles = [];
const isSog = !!sog ? "sog" : "default";
const icon = icons[type][isSog];
if (currentZoom > self.minZoom && icon) {
icon.setRotation((Math.PI * rotation) / 180);
defaultStyle.setImage(icon);
styles.push(defaultStyle);
} else if (currentZoom <= self.minZoom) {
styles.push(miniStyle);
}
if (currentZoom >= self.tooltipMinZoom && name && icon) {
const pointStyle = tooltipStyle.Point;
const pointText = pointStyle.getText();
const radians = (Math.PI * rotation) / 180;
const offsetX =
self.tooltipOffsetX * Math.cos(radians) -
self.tooltipOffsetX * Math.sin(radians);
const offsetY =
self.tooltipOffsetY * Math.sin(radians) +
self.tooltipOffsetY * Math.cos(radians);
pointText.setText(name);
pointText.setOffsetX(offsetX);
pointText.setOffsetY(offsetY);
const startPixel = self.map.getPixelFromCoordinate(lonLat);
startPixel[0] += offsetX;
startPixel[1] += offsetY;
const endPoint = self.map.getCoordinateFromPixel(startPixel);
const lineStyle = tooltipStyle.LineString;
lineStyle.setGeometry(new LineString([lonLat, endPoint], "XY"));
styles.push(...[pointStyle, lineStyle]);
}
return visible ? styles : [];
},
});
I think this is all code that is relevant, and some style code that is not relevant unless you need it.
I want to know if it is possible to get the declutter of the style, or if there is another way to achieve this effect.