得到绘制的地图的坐标中的OpenLayers

我想使用的OpenLayers 3.得到绘制的地图的坐标中的OpenLayers

我是全新的使用的OpenLayers创建一个在线地图，以及所有我想要做的是让的坐标我在地图上绘制的点，线，多边形。我知道有一个featuresadded参数可用，但我无法正确实现它。

任何人都可以指出我在正确的方向如何获得绘制功能的坐标（在alert（）或console.log中）？

谢谢！

这里是我的代码：

<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 &nbsp;</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>

来源

2015-10-14 derBrain

上ol.source.Vector注册一个listener，等到绘制的地图添加：

source.on('addfeature', function(evt){ 
    var feature = evt.feature; 
    var coords = feature.getGeometry().getCoordinates(); 
});

来源

2015-10-14 15:26:56

圣牛！我发布这个问题5分钟后，你给了我答案。这简直太神奇了。我不知道我昨天花了多少小时..谢谢你verrrrrry多!!!! – derBrain

不客气！乐意效劳。 –

@derBrain：在研究相同问题的同时陷入困境。但并不真正了解如何实施。你可以在这里发布整合吗？那太好了。多谢！ – luftikus143

使用drawend事件

drawend (ol.interaction.DrawEvent) - 在功能触发平局结束

例如：

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 

});

让我知道，如果我错了。

来源

2015-10-24 08:56:20 MaheshGonda

这是一个更好的答案。 –

得到绘制的地图的坐标中的OpenLayers

回答

相关问题