Question

为了帮助用户绘制宽度和高度至少为100像素的boxarea，我认为开始绘制红色（填充和边框），然后在达到100时自动更改为绿色用户正在绘制该功能时提到的px。

知道怎么做吗？

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

提前致谢

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在绘图时改变颜色

2 个答案: