get coordinates of drawn feature in OpenLayers

问题

I'm trying to create an online map using OpenLayers 3.

I'm brand new to using OpenLayers, and all I'm trying to do is to get the coordinates of the points, lines, polygons that I drew on the map. I'm aware that there is a featuresadded parameter available, but I'm not able to implement it correctly.

Can anybody point me in the right direction how to get the coordinates of a drawn feature (either in an alert() or console.log)?

Thanks a ton!!

here's my code:

<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>

回答1:

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

回答2:

Use drawend event

drawend (ol.interaction.DrawEvent) - Triggered upon feature draw ends

Ex:

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 

});

Let me know if I am wrong.

来源：https://stackoverflow.com/questions/33129271/get-coordinates-of-drawn-feature-in-openlayers

标签

javascript

dictionary

coordinates

openlayers-3