Holen Sie sich die Koordinaten der gezeichneten feature in OpenLayers

Ich versuche, erstellen Sie eine online-Karte mit OpenLayers 3.

Ich bin ganz neu auf mit OpenLayers, und alles, was ich versuche zu tun ist, um die Koordinaten der Punkte, Linien, Polygone, zeichnete ich auf der Karte. Ich bin mir bewusst, dass es eine featuresadded parameter zur Verfügung, aber ich bin nicht in der Lage, Sie zu implementieren, korrekt.

Kann jemand mich in die richtige Richtung, wie man die Koordinaten eines gezeichneten (entweder in einem alert() oder console.log)?

Dank einer Tonne!!

hier ist mein 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>
InformationsquelleAutor derBrain | 2015-10-14
  1. 10

    Registrieren Sie einen listener auf ol.source.Vector und warten Sie, bis die gezeichnete Funktion ist Hinzugefügt:

    source.on('addfeature', function(evt){
    var feature = evt.feature;
    var coords = feature.getGeometry().getCoordinates();
});
    • Holy cow! 5 Minuten nachdem ich die Frage gepostet, Sie gab mir die Antwort. Das ist einfach unglaublich. Ich weiß nicht, wie viele Stunden habe ich auf diesen gestern.. danke verrrrrry viel!!!!
    • Sie sind herzlich willkommen! Froh zu helfen.
    • Stolpern über diese während der recherche das gleiche problem. Aber nicht wirklich verstehen, wie diese umgesetzt werden muss. Könnte Sie buchen die integration hier? Das wäre toll. Thx a lot!
    InformationsquelleAutor Jonatas Walker
  2. 6

    Verwenden drawend Veranstaltung

    drawend (ol.interaction.DrawEvent) Ausgelöst, die auf Funktion endet Remis

    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 

});

    Lassen Sie mich wissen, wenn ich falsch bin.

    • Das ist eine bessere Antwort.
    InformationsquelleAutor MaheshGonda
Schreibe einen Kommentar