为了帮助用户绘制宽度和高度至少为100像素的boxarea,我认为开始绘制红色(填充和边框),然后在达到100时自动更改为绿色用户正在绘制该功能时提到的px。
知道怎么做吗?
当用户完成绘图时我得到了类似的东西,但在我看来,这种行为不够舒服。
提前致谢
答案 0 :(得分:0)
使用最新版本的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可以看到它的实际效果。
答案 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;
}
});
取这段代码并在其上加上一些条件: