Javascript 获取OpenLayers中绘制特征的坐标
我正在尝试使用OpenLayers 3创建在线地图 我对使用OpenLayers是全新的，我所做的只是获取我在地图上绘制的点、线、多边形的坐标。我知道有一个featuresadded参数可用，但我无法正确实现它 有人能告诉我如何获得绘制特征的坐标（在alert（）或console.log中）的正确方向吗 非常感谢 这是我的密码：Javascript 获取OpenLayers中绘制特征的坐标,javascript,dictionary,coordinates,openlayers-3,Javascript,Dictionary,Coordinates,Openlayers 3,我正在尝试使用OpenLayers 3创建在线地图 我对使用OpenLayers是全新的，我所做的只是获取我在地图上绘制的点、线、多边形的坐标。我知道有一个featuresadded参数可用，但我无法正确实现它 有人能告诉我如何获得绘制特征的坐标（在alert（）或console.log中）的正确方向吗 非常感谢 这是我的密码： <html> <head> <script src="http://openlayers.org/en/v3.3.0/build/
<html>
<head>
<script src="http://openlayers.org/en/v3.3.0/build/ol.js" type="text/javascript"></script>
<link rel="stylesheet" href="ol.css" type="text/css">
<style type="text/css">
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: small;
}
#map {
clear: both;
position: relative;
border: 1px solid black;
}
#wrapper {
width: 337px;
height: 50px;
}
#location {
float: right;
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
color: #483D8B;
background-color: white;
}
#nodelist{
font-family: Arial, Verdana, sans-serif;
font-size: 14px;
color: #000000;
font-style: normal;
background-color: white;
}
</style>
<script type="text/javascript">
var map;
var draw;
var transformed_coordinate;
var vector;
function init() {
var view = new ol.View({
center: ol.proj.transform([13.1929, 55.718],'EPSG:4326', 'EPSG:3857'),
zoom: 12
});
var myZoom = new ol.control.Zoom();
var myZoomSlider = new ol.control.ZoomSlider();
var zoomToExtentControl = new ol.control.ZoomToExtent({
extent: [1453297.22,7490484.81,1483872.03,7513415.91]
});
var myScaleLine = new ol.control.ScaleLine()
var neighborhood = new ol.source.ImageWMS({
url: 'http://localhost:8090/geoserver/project/wms',
params: {'LAYERS': 'project:Neighborhood'}
});
var roads = new ol.source.ImageWMS({
url: 'http://localhost:8090/geoserver/project/wms',
params: {'LAYERS': 'project:Roads_all'}
});
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 layers = [
new ol.layer.Image({
source: neighborhood
}),
new ol.layer.Image({
source: roads
}),
vector
]
map = new ol.Map({
layers: layers,
target: 'map',
view: view
});
map.addControl(myZoom);
map.addControl(myZoomSlider);
map.addControl(zoomToExtentControl);
map.addControl(myScaleLine);
map.on('singleclick', function(evt){
var coord = evt.coordinate;
transformed_coordinate = ol.proj.transform(coord, "EPSG:3857", "EPSG:4326");
//console.log(transformed_coordinate);
})
function onFeaturesAdded(event){
var bounds = event.features[0].geometry.getBounds();
var answer = "bottom: " + bounds.bottom + "\n";
answer += "left: " + bounds.left + "\n";
answer += "right: " + bounds.right + "\n";
answer += "top: " + bounds.top + "\n";
alert(answer);
}
var typeSelect = document.getElementById('type');
function addInteraction() {
var value = typeSelect.value;
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);
}
}
/**
* Let user change the geometry type.
* @param {Event} e Change event.
*/
typeSelect.onchange = function(e) {
map.removeInteraction(draw);
addInteraction();
};
addInteraction();
} //end init
</script>
</head>
<body onload="init()">
<div id="map" style="width: 800px; height: 600px"></div>
<form class="form-inline">
<label>Geometry type </label>
<select id="type">
<option value="None">None</option>
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
</select>
</form>
</body>
</html>
身体{
字体系列：Verdana、Geneva、Arial、Helvetica、sans serif；
字体大小：小；
}
#地图{
明确：两者皆有；
位置：相对位置；
边框：1px纯黑；
}
#包装纸{
宽度：337px；
高度：50px；
}
#位置{
浮动：对；
字体系列：Arial，Verdana，无衬线；
字体大小：12px；
颜色：#483D8B；
背景色：白色；
}
#节点主义者{
字体系列：Arial，Verdana，无衬线；
字体大小：14px；
颜色：#000000；
字体风格：普通；
背景色：白色；
}
var映射；
var提取；
坐标变换；
var向量；
函数init（）{
变量视图=新的ol.view({
中心：ol.proj.transform（[13.1929,55.718]，“EPSG:4326”，“EPSG:3857”），
缩放：12
});
var myZoom=new ol.control.Zoom（）；
var myZoomSlider=new ol.control.ZoomSlider（）；
var zoomToExtentControl=new ol.control.ZoomToExtent({
范围：[1453297.227490484.811483872.037513415.91]
});
var myScaleLine=new ol.control.ScaleLine（）
var邻域=新的ol.source.ImageWMS({
网址：'http://localhost:8090/geoserver/project/wms',
参数：{'LAYERS'：'project:neighbour'}
});
var roads=新ol.source.ImageWMS({
网址：'http://localhost:8090/geoserver/project/wms',
参数：{'LAYERS'：'project:Roads_all'}
});
var source=new ol.source.Vector（{wrapX:false}）；
vector=新ol.layer.vector({
资料来源：资料来源，
风格：新的ol风格({
填充：新的ol.style.fill({
颜色：“rgba（0,255,0,0.5）”
}),
笔划：新的ol风格笔划({
颜色：“#ffcc33”，
宽度：2
}),
图片：新ol.style.Circle({
半径：7，
填充：新的ol.style.fill({
颜色：“#ffcc33”
})
})
})
});
变量层=[
新ol.layer.Image({
资料来源：邻里
}),
新ol.layer.Image({
资料来源：公路
}),
矢量
]
map=新ol.map({
层：层，
目标：“地图”，
视图：视图
});
map.addControl（myZoom）；
map.addControl（myZoomSlider）；
map.addControl（zoomToExtentControl）；
map.addControl（myScaleLine）；
map.on（'singleclick'，函数（evt）{
var coord=evt.坐标；
转换坐标=ol.proj.transform（坐标，“EPSG:3857”，“EPSG:4326”）；
//console.log（转换的_坐标）；
})
功能onFeaturesAdded（事件）{
var bounds=event.features[0]。geometry.getBounds（）；
var answer=“bottom:”+bounds.bottom+“\n”；
答案+=“左：”+bounds.left+“\n”；
答案+=“正确：”+bounds.right+“\n”；
答案+=“top:+bounds.top+”\n”；
警惕（回答）；
}
var typeSelect=document.getElementById（'type'）；
函数addInteraction（）{
var值=typeSelect.value；
如果（值！=“无”）{
var geometryFunction，maxPoints；
如果（值=='Square'）{
值='圆'；
geometryFunction=ol.interaction.Draw.createRegularPolygon（4）；
}else if（值=='Box'）{
值='LineString'；
最大点=2；
geometryFunction=函数（坐标、几何）{
如果（！几何体）{
几何=新的几何多边形（空）；
}
var start=坐标[0]；
var end=坐标[1]；
geometry.setCoordinates([
[开始，[开始[0]，结束[1]]，结束，[结束[0]，开始[1]]，开始]
]);
返回几何；
};
}
draw=新ol.interaction.draw({
资料来源：资料来源，
类型：/**@type{ol.geom.GeometryType}*/（值），
geometryFunction:geometryFunction，
maxPoints:maxPoints
});
地图。添加交互作用（绘制）；
}
}
/**
*让用户更改几何图形类型。
*@param{Event}e更改事件。
*/
typeSelect.onchange=函数（e）{
映射。移除交互（绘制）；
addInteraction（）；
};
addInteraction（）；
}//结束初始化
几何类型
没有一个
指向
线绳
多边形
ol.source.Vectorsource.on('addfeature', function(evt){
var feature = evt.feature;
var coords = feature.getGeometry().getCoordinates();
});
draund（ol.interaction.drawervent）如果我错了，请告诉我。天哪！在我发布问题5分钟后，你给了我答案。这简直太神奇了。我不知道我昨天花了多少时间在这上面。。非常感谢你@德布莱恩：在研究同一个问题时遇到了这个问题。但并不真正理解如何实现这一点。你能在这里发布集成吗？那太好了。太多了！这是一个更好的答案。
this.draw = new ol.interaction.Draw();
this.draw.on('drawend', function(evt){
//in evt you will get ol.feature
// from ol.feature get the geometry and than get coordinates
});