我是OpenLayers的新手,对于一个明显的(也许是愚蠢的)问题感到抱歉,为此我找到了解决方案的不同方法,但都没有工作。尝试过这个和那个,十几个不同的建议(here,here,here,here,here)但是徒劳无功。
基本上,我想将绘制的矩形的坐标传递给另一个web服务。因此,在绘制矩形后,它应该将我吐出边界框的四个角。
到目前为止,我所掌握的是绘制矩形的基本OL图层示例:
var source = new ol.source.Vector({wrapX: false});
vector = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0, 255, 0, 0.5)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vector
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
var draw; // global so we can remove it later
function addInteraction()
{
var value = 'Box';
if (value !== 'None')
{
var geometryFunction, maxPoints;
if (value === 'Square')
{
value = 'Circle';
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
}
else if (value === 'Box')
{
value = 'LineString';
maxPoints = 2;
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;
};
}
draw = new ol.interaction.Draw({
source: source,
type: /** @type {ol.geom.GeometryType} */ (value),
geometryFunction: geometryFunction,
maxPoints: maxPoints
});
map.addInteraction(draw);
}
}
addInteraction();
现在,接下来会发生什么?提取边界框的好方法是什么?
感谢任何提示!
答案 0 :(得分:8)
您需要将侦听器设置为绘制交互。像这样:
draw.on('drawend',function(e){
alert(e.feature.getGeometry().getExtent());
});
这是fiddle