DragBox 在绘图时改变颜色

Question

为了帮助用户绘制宽度和高度最小为 100 px 的框区域，我想开始用红色绘制（框的填充和边框），然后在到达时自动更改为绿色用户绘制要素时提到的 100 像素。

知道怎么做吗？

当用户完成绘图时，我得到了类似的东西，但在我看来，这种行为不够舒服。

提前致谢

Answer 1

使用最新版本的ol3。 3.13.1 您可以通过以下方式实现您的目标。

创建带有图层的地图并添加拖动框交互

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 类样式

//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 事件，以便您可以降低其宽度、高度并更改样式。对于此操作，为了节省时间，我使用 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');
}
});

还有一个 fiddle 来查看实际效果。

Answer 2

更新：

http://jsfiddle.net/jonataswalker/41j800kv/

找到更好的解决方案。将这些条件放在 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;
  }
});

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

DragBox 在绘图时改变颜色

DragBox change color while drawing

javascript

openlayers-3