Openlayers 3 Coords

Question

I'm newbee of OL. I need just to put some point on the map and ideally make some request for writting info about this point to db, but now i just want to alert(coords) of point. So, i found an example, where i can put some point, line and polygone to the map.

 var raster = new ol.layer.Tile({ source: new ol.source.OSM() }); var map = new ol.Map({ layers: [raster], target: 'map', view: new ol.View({ center: [-11000000, 4600000], zoom: 4 }) }); var features = new ol.Collection(); var featureOverlay = new ol.layer.Vector({ source: new ol.source.Vector({features: features}), style: new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.2)' }), stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }), image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: '#ffcc33' }) }) }) }); featureOverlay.setMap(map); var modify = new ol.interaction.Modify({ features: features, // the SHIFT key must be pressed to delete vertices, so // that new vertices can be drawn at the same position // of existing vertices deleteCondition: function(event) { //var feature = event.element; //var coord = event.feature.getGeometry().getCoordinates(); //coord = ol.proj.transform(coord, 'EPSG:3857', 'EPSG:4326'); // alert(coord); return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event); } }); map.addInteraction(modify); var draw; // global so we can remove it later var typeSelect = document.getElementById('type'); function addInteraction() { draw = new ol.interaction.Draw({ features: features, type: /** @type {ol.geom.GeometryType} */ (typeSelect.value) /*draw.on('drawend', function (event) { // get the feature var feature = event.element; var coord = event.feature.getGeometry().getCoordinates(); alert(coord);*/ }); map.addInteraction(draw); } /** * Handle change event. */ typeSelect.onchange = function() { map.removeInteraction(draw); addInteraction(); }; addInteraction(); // Code of adding to DB our features //

 <?php /* @var $this yii\\web\\View */ use yii\\helpers\\Html; use sibilino\\yii2\\openlayers\\ol; use sibilino\\yii2\\openlayers\\OpenLayers; ?> <!DOCTYPE html> <html> <head> <title>Draw and Modify Features</title> <link rel="stylesheet" href="http://openlayers.org/en/v3.18.2/css/ol.css" type="text/css"> <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> <script src="http://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <script src="http://openlayers.org/en/v3.18.2/build/ol.js"></script> </head> <body> <div id="map" class="map"></div> <form class="form-inline"> <label>Geometry type &nbsp;</label> <select id="type"> <option value="Point">Point</option> <option value="LineString">LineString</option> <option value="Polygon">Polygon</option> </select> </form> <script> </script> </body> </html>

It works normally with all libs, and I can put points, lines and polygones to the map, but I can't get coord of the points, which I put. I tried to create some listener, it's commented in this code, looks like

//var feature = event.element;
  //var coord = event.feature.getGeometry().getCoordinates();
  //coord = ol.proj.transform(coord, 'EPSG:3857', 'EPSG:4326');
  //  alert(coord);

But this method as I understood listens mouse moving too, and I'm getting some errors like:

Uncaught TypeError: Cannot read property 'getGeometry' of undefined

If somebody have time to read this long question, what can I do, and how to do right for getting my coords and saving this to DB?

Answer 1

I just needed to redact this code:

function addInteraction() {

draw = new ol.interaction.Draw({
  features: features,
  type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
/*draw.on('drawend', function (event) {
  // get the feature
  var feature = event.element;
  var coord = event.feature.getGeometry().getCoordinates();
  alert(coord);*/
});


map.addInteraction(draw);

}

To:

function addInteraction() {

draw = new ol.interaction.Draw({
  features: features,
  type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)

});

// Code of adding to DB our features

draw.on('drawend', function (event) {
  var feature = event.element;
  var coord = event.feature.getGeometry().getCoordinates();
 alert(coord);

  var title=document.getElementById('type');

   var url = "http://localhost/basic/web/index.php?r=sggis/create&title="+title.value+"&point="+coord;
   function lol(){
     var xhr = new XMLHttpRequest();
     xhr.open("GET", url, false);
     xhr.send();
   }
  lol();
});

And in yii2 Controller i have written an action which just gets title and coords just from the request. It's unsafe, but then I'll redact this one. At all, every point, line or poly which i put on the map saves their coords to postgresSQL's DataBase.

Openlayers 3 Coords

Question

1 answers

solution1
0 ACCPTED 2016-10-03 09:27:59

Openlayers 3 Coords

Question

1 answers

solution1 0 ACCPTED 2016-10-03 09:27:59

solution1
0 ACCPTED 2016-10-03 09:27:59