Openlayers 3 Coords

Question

I'm newbee of OL. 我是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. 我只需要在地图上加上一些点，理想情况下要求将有关此点的信息写入db，但现在我只想提醒（coords）。 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. 它适用于所有的libs，我可以将点，线和多边形放到地图上，但是我无法得到这些点的坐标。 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? 如果有人有时间阅读这个长问题，我该怎么做，以及如何正确地获取我的coords并将其保存到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. 在yii2控制器中，我写了一个动作，只是从请求获得标题和坐标。 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. 总之，我放在地图上的每一个点，线或多边形都将它们的坐标保存到postgresSQL的DataBase中。

Openlayers 3 Coords

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-10-03 09:27:59

Openlayers 3 Coords

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-10-03 09:27:59

解决方案1
0 已采纳 2016-10-03 09:27:59