时间戳

首页 > 解决方案 > 使使用自定义渲染器渲染的功能可选

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

问题描述

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

在此处输入图像描述

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

问题：创建的平行线不能被用户选中，例如在使用时点击它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();
}

背景：

更新：有一个相关的问题（以及此线程中 Mike 的答案）。不同之处在于，那里使用真实世界坐标来计算平行线的位置。我想在像素空间中解决这个问题......原因是我想保持线条之间的距离不变。使用真实世界坐标，距离取决于分辨率。似乎可以通过每次分辨率变化时重新计算现实世界的几何来解决这个问题。

标签： javascriptopenlayers

解决方案

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

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

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;
};

推荐阅读