Javascript DragBox在绘图时更改颜色

为了帮助用户在宽度和高度上绘制一个最小为100像素的长方体区域，我想开始绘制红色（填充和框边），然后在用户绘制该功能时，当它达到所提到的100像素时，自动变为绿色

你知道怎么做吗

当用户完成绘图时，我得到了类似的结果，但在我看来，这种行为还不够舒适

---

提前感谢您使用最新版本的ol3。3.13.1为实现目标，您可以采取以下措施

创建带有图层的地图并添加dragbox交互

var raster =  new ol.layer.Tile({
  source: new ol.source.OSM()
});   

var map = new ol.Map({
layers: [raster],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
 })
});

var selectOnBoxInt = new ol.interaction.DragBox({
  condition  : ol.events.condition.always
});
map.addInteraction(selectOnBoxInt);
//set it active on start up
selectOnBoxInt.setActive(true);

创建两个css类，为您的drawbox保存样式

//this is the deafult 
.ol-dragbox {
  background-color: rgba(255,0,0,0.4);
  border-color: rgba(2500,0,0,1);
  border-width:2;
 }
 //this is when width,height>100     
.ol-mydragbox {
  background-color: rgba(0,255,0,0.4);
  border-color: rgba(0,255,0,1);
  border-width:2;
}

将一个

boxdrag

事件指定到您的drawbox交互中，这样您就可以降低其宽度、高度并进行样式更改。对于这个操作，为了节省时间，我使用jquery。您可以使用您的想象力在没有jquery的情况下完成它

selectOnBoxInt.on('boxdrag',function(e){
var width = Math.abs(e.target.box_.endPixel_[0] - e.target.box_.startPixel_[0]);
var height = Math.abs(e.target.box_.endPixel_[1] - e.target.box_.startPixel_[1]);
if (width>100 && height>100){
$('.ol-dragbox').removeClass('ol-dragbox').addClass('ol-mydragbox');
$('.ol-box').removeClass('ol-box').addClass('ol-mydragbox');
} else {
$('.ol-mydragbox').removeClass('ol-mydragbox').addClass('ol-dragbox');
}
});

---

和a来查看它的运行情况。

更新：

找到了更好的解决方案。将这些条件放入

ol.interaction.Draw#StyleFunction

：

var draw = new ol.interaction.Draw({
  source: vectorSource,
  type: 'LineString',
  maxPoints: 2,
  style: function(feature){
    var style;
    var geometry = feature.getGeometry();
    var extent = geometry.getExtent();
    var topLeft = 
        map.getPixelFromCoordinate(ol.extent.getTopLeft(extent));
    var bottomLeft = 
        map.getPixelFromCoordinate(ol.extent.getBottomLeft(extent));
    var topRight = 
        map.getPixelFromCoordinate(ol.extent.getTopRight(extent));

    var width = topRight[0] - topLeft[0];
    var height = bottomLeft[1] - topLeft[1];
    coords_element.innerHTML = 
      'width: ' + width + '<br>height: ' + height;

    if (width > 100 && height > 100) {
      style = new ol.style.Style({
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 0.2)'
        }),
        stroke: new ol.style.Stroke({
          color: 'red',
          width: 2
        })
      });
    } else {
      style = new ol.style.Style({
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 0.2)'
        }),
        stroke: new ol.style.Stroke({
          color: '#ffcc33',
          width: 2
        })
      });
    }

    return [style];
  },
  geometryFunction: function(coordinates, geometry) {
    if (!geometry) {
      geometry = new ol.geom.Polygon(null);
    }
    var start = coordinates[0];
    var end = coordinates[1];
    geometry.setCoordinates([
        [start, [start[0], end[1]], end, [end[0], start[1]], start]
    ]);
    return geometry;
  }
});

var draw=new ol.interaction.draw({
来源：矢量源，
键入：“LineString”，
最大积分：2，
风格：功能（特征）{
var风格；
var geometry=feature.getGeometry（）；
var extent=geometry.getExtent（）；
var topLeft=
map.getPixelFromCoordinate（ol.extent.getTopLeft（extent））；
var bottomLeft=
map.getPixelFromCoordinate（ol.extent.getBottomLeft（extent））；
var topRight=
map.getPixelFromCoordinate（ol.extent.getToRight（extent））；
变量宽度=右上[0]-左上[0]；
变量高度=左下[1]-左上[1]；
coords_element.innerHTML=
'宽度：'+width+'
高度：'+height；
如果（宽度>100和高度>100）{
style=新的ol.style.style({
填充：新的ol.style.fill({
颜色：“rgba（255，255，255，0.2）”
}),
笔划：新的ol风格笔划({
颜色：“红色”，
宽度：2
})
});
}否则{
style=新的ol.style.style({
填充：新的ol.style.fill({
颜色：“rgba（255，255，255，0.2）”
}),
笔划：新的ol风格笔划({
颜色：“#ffcc33”，
宽度：2
})
});
}
返回[风格]；
},
geometryFunction：函数（坐标、几何）{
如果（！几何体）{
几何=新的几何多边形（空）；
}
var start=坐标[0]；
var end=坐标[1]；
geometry.setCoordinates([
[开始，[开始[0]，结束[1]]，结束，[结束[0]，开始[1]]，开始]
]);
返回几何；
}
});

---

---

拿这段代码，并在上面加上一些条件：

我想我错过了一些东西，但无论如何，这是一个很好的练习。别担心，至少他有两种解决方案可供选择。实际上，我使用的是ol.interaction.Draw，就像您的示例代码一样。我在geometryFunction中添加了更改样式的pavlos建议：if（width>100&&height>100）{$（'.ol-control'）.removeClass（'ol-control'）.addClass（'ol-mydragbox'）；$（'.ol-control'）.removeClass（'ol-control'）.addClass（'ol-mydragbox'）；}但它不起作用，没有错误，但没有颜色变化…：-（@ToniBCN你想使用哪种解决方案？我喜欢你的解决方案@JonatasWalker，但正如你所说的，它是不完整的，我没有处理代码中缺少的部分来进行颜色更改。这个解决方案听起来不错！！。我必须升级我的Web应用程序的OL版本，并尝试进行调整，因为我已经做了一些更改。我将告诉你ut.非常感谢。我确实使用了ol.interaction.Draw而不是ol.interaction.Dragbox，但是您在示例中发布的boxdrag事件不起作用。没有错误，也没有控制台中的跟踪信息…：-（如果您使用ol.interaction.Draw，您必须以另一种方式进行操作。我的示例运行良好，请检查小提琴（）为了验证您的自我。Box正在更改颜色，因为触发了

boxdrag

事件。True@pavlos您的示例运行良好。但是由于一些更改，现在，我需要使用ol.interaction.Draw，然后它就不工作了。谢谢您的支持。没有提示，朋友。

boxdrag

不适用于绘图交互，这是真的。您最好坚持使用@jona助教解决方案。很乐意帮助。