DragBox在绘图时改变颜色

时间:2016-02-17 08:49:54

标签: javascript openlayers-3

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

知道怎么做吗?

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

提前致谢

2 个答案:

答案 0 :(得分:0)

使用最新版本的ol3。 3.13.1您可以采取以下措施来实现目标。

  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);
    
  2. 创建两个包含绘图框样式的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;
    }
    
  3. 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');
    }
    });
    
  4. fiddle可以看到它的实际效果。

答案 1 :(得分:0)

<强>更新

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;
  }
});

取这段代码并在其上加上一些条件: