在 openlayers 3 中动态更改矢量样式

Question

我正在使用 ol.interaction.Draw 方法在地图上绘制多边形。

我不希望用户能够绘制太大的多边形或自相交的多边形，因此当满足其中任何一个条件时（我已经编写代码来确定），我想要我的多边形的线条从默认的蓝色变为红色，以便用户知道他们的多边形是不可接受的。

我知道如何最初为绘图功能设置样式，但无法弄清楚如何在用户仍在绘图时让样式动态更改动态。

Answer 1

ol.layer.Vector and also of ol.interaction.Draw 的 style 参数可以是一个 StyleFunction，它接收特征和当前地图分辨率。如果您的几何图形有效且 return 样式合适，您可以签入此函数。

这里是一个例子，如果几何体有超过 2 个坐标，颜色会从绿色变为红色：

var drawStyle = function(feature, resolution) {
    var color = 'green';
    if(feature.getGeometry().getCoordinates().length > 2) {
        color = 'red';
    }
    return [new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: color,
            width: 2
        }),
        ...
    })];
};

var draw = new ol.interaction.Draw({
    ...
    style: drawStyle
});

http://jsfiddle.net/sad71377/

Answer 2

试试这个：

if(feature.getGeometry().getCoordinates().length > 2) {
draw.getOverlay().setStyle(

... your style...

};
}

在 openlayers 3 中动态更改矢量样式

Dynamically change vector style in openlayers 3

openlayers-3