使使用自定义渲染器渲染的功能可选择

Question

给定的是一个 LineString、起点和终点。应绘制与此 LineString 平行的线（使用 openlayers）。请查看图像示例（黑线是平行线，蓝线是原始线，未绘制 start/end 个点）。

为了实现这一点，我在矢量图层的样式中设置了一个自定义渲染器 (ol/style/Style~RenderFunction)。此函数获取原始线的像素坐标，计算平行线并将其绘制到 canvas.

问题: 创建的平行线不能被用户选择，例如使用 ol/interaction/Select~Select 时点击它。我想在选择后立即向用户提供有关该功能的信息。

问题：如何让这个功能可选？渲染器函数中是否需要任何其他步骤？

自定义渲染器函数如下所示：

function parallelRenderer(pixelCoordinates, state) {
    
     const parallelCoordinates = computeParallelCoordinates(pixelCoordinates);

    const canvas = state.context;
    canvas.beginPath();
    canvas.moveTo(parallelCoordinates[0][0], parallelCoordinates[0][1]);

    for (let i=1; i<parallelCoordinates.length; i++) {
        canvas.lineTo(parallelCoordinates[i][0], parallelCoordinates[i][1]);
    }

    canvas.stroke();
}

背景：

Start/end 积分由用户使用 ol/interactions/Draw
提供 ol/style/Stroke~Stroke 而不是渲染器函数时可选择创建的行
我使用的是 openlayers 版本 6.5.0

更新：有一个related question（还有Mike在这个帖子里的回答）。不同之处在于，那里使用真实世界坐标来计算平行线的位置。我想在像素 space 中解决这个问题...原因是我想保持线条之间的距离不变。使用真实世界坐标，距离取决于分辨率。看来这个问题可以通过每次分辨率改变时重新计算真实世界的几何形状来解决。

Answer 1

已建议自定义渲染器的命中检测，但从未实现 https://github.com/openlayers/openlayers/issues/8136

您可以使用样式函数将单个线串设置为平行线串的样式。此代码使用 https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.4.1/math.min.js 中的 math.intersect 来计算偏移顶点的位置

function styleFunction(feature, resolution) {
    var colors = ['green', 'yellow', 'red'];
    var width = 4;
    var styles = [];
    for (var line = 0; line < colors.length; line++) {
        var dist = width * resolution * (line - (colors.length-1)/2);
        var geom = feature.getGeometry();
        var coords = [];
        var counter = 0;
        geom.forEachSegment(function(from, to) {
            var angle = Math.atan2(to[1] - from[1], to[0] - from[0]);
            var newFrom = [
                Math.sin(angle) * dist + from[0],
                -Math.cos(angle) * dist + from[1]
            ];
            var newTo = [
                Math.sin(angle) * dist + to[0],
                -Math.cos(angle) * dist + to[1]
            ];
            coords.push(newFrom);
            coords.push(newTo);
            if (coords.length > 2) {
                var intersection = math.intersect(coords[counter], coords[counter+1], coords[counter+2], coords[counter+3]);
                coords[counter+1] = (intersection) ? intersection : coords[counter+1];
                coords[counter+2] = (intersection) ? intersection : coords[counter+2];
                counter += 2;
            }
        });
        styles.push(
            new ol.style.Style({
                geometry: new ol.geom.LineString(coords),
                stroke: new ol.style.Stroke({
                    color: colors[line],
                    width: width
                })
            })
        );
    }
    return styles;
};

使使用自定义渲染器渲染的功能可选择

Make features rendered with a custom renderer selectable

javascript

openlayers