openlayer MultiLineString 设置 text 重复重叠

[YBFACC]

const Paths: [number, number][][] = []

const feature = new Feature({
    geometry: new MultiLineString(Paths),
})

feature.setStyle(new Style({
    fill: new Fill({
        color: "rgba(193, 43, 255, 0)",
    }),
    stroke: new Stroke({
        color: 'rgb(193, 43, 255)',
        width: 3
    }),
    text: new Text({
        text: 'aaaa',
        font: '20px Microsoft YaHei',
        fill: new Fill({
            color: 'red',
        }),
        overflow: true,
    })
}))

// 将 feature 添加到 layer

这里猜测 MultiLineString 的 style 会对每个 LineString 都设置。 如下图，text 会大量重叠。

[YBFACC]

方法一

对 layer 设置 declutter: true

Declutter images and text. Any truthy value will enable decluttering. Within a layer, a feature rendered before another has higher priority. All layers with the same declutter value will be decluttered together. The priority is determined by the drawing order of the layers with the same declutter value. Higher in the layer stack means higher priority. To declutter distinct layers or groups of layers separately, use different truthy values for declutter.

但是效果不好，只是把文字减少了一些

[YBFACC]

方法二

把 MultiLineString 拆成单个 LineString 单独设置样式. 这是可行的，但是 MultiLineString 我们希望他是一个 feature 能整体操作。拆成 LIneString 后续麻烦

const Paths: [number, number][][] = []

const features : Feature[] =  Paths.map((k, index) => {
    const i = new Feature({
        geometry: new LineString(k)
    })

    if (index == Math.floor(Paths.length / 2)) {
        // 找个中间,添加上 text
    } else {
    }

    return i
})

// 将 features 加入到图层

[YBFACC]

方法三

手动实现 style 的 renderer。 线是线的渲染，text 靠手动添加一个点来实现

const Paths: [number, number][][] = []

const feature = new Feature({
    geometry: new MultiLineString(Paths),
})

feature.setStyle(
    new Style({
        renderer: (pixelCoordinates, state) => {
            const context = state.context;
            const geometry = state.geometry.clone();
            geometry.setCoordinates(pixelCoordinates);

            // 画线
            const renderContext = toContext(context, {
                pixelRatio: 1,
            });

            renderContext.setStyle(new Style({
                fill: new Fill({
                    color: "rgba(193, 43, 255, 0)",
                }),
                stroke: new Stroke({
                    color: 'rgb(193, 43, 255)',
                    width: 3
                })
            }))

            renderContext.drawGeometry(geometry);

            // 添加文字
            const renderContext2 = toContext(context, {
                pixelRatio: 1,
            });

            renderContext2.setStyle(new Style({
                text: new Text({
                    text: 'aaaa',
                    font: '20px Microsoft YaHei',
                    fill: new Fill({
                        color: 'green',
                    }),
                    overflow: true,
                })
            }))

            renderContext2.drawGeometry(new Point(pixelCoordinates[Math.floor(pixelCoordinates.length / 2)][0]))
        }
    })
)

// feature 加入到图层