在多边形模式下打开图层样式绘制交互

Question

我正在尝试更改绘制多边形交互的默认样式。 目前，它绘制了一条蓝线线串，并用半透明填充填充了多边形。

但是，如果我更改它，它总是将当前点连接到第一个点。

谁能指导我是如何实现的？

Answer 1

您应该为图层和交互设置样式。

通过在 Draw 元素中设置样式，您将在绘制多边形时更改多边形的样式：

var draw = new ol.interaction.Draw({
    source: source,
    type: 'Polygon',
    style: new ol.style.Style({
        fill: new ol.style.Fill({
           color: 'rgba(255, 255, 255, 0.5)'
        })
    })
});

更改与 Draw 元素共享源的矢量图层的样式，绘制后将修改多边形的样式：

var vector = new ol.layer.Vector({
    source: source,
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.9)'
        })
    })
});

我创建了一个 jsfiddle