Openlayers 3 Coords

Question

我是OL的新手。 我只需要在地图上加上一些点，理想情况下要求将有关此点的信息写入db，但现在我只想提醒（coords）。 所以，我找到了一个例子，我可以将一些点，线和多边形放到地图上。

 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>

它适用于所有的libs，我可以将点，线和多边形放到地图上，但是我无法得到这些点的坐标。 我尝试创建一些监听器，它在这段代码中注释，看起来像

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

但是我理解这种方法也听老鼠移动，我得到一些错误：

Uncaught TypeError: Cannot read property 'getGeometry' of undefined

如果有人有时间阅读这个长问题，我该怎么做，以及如何正确地获取我的coords并将其保存到DB？

Answer 1

我只需要编辑这段代码：

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

}

至：

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();
});

在yii2控制器中，我写了一个动作，只是从请求获得标题和坐标。 这是不安全的，但后来我会编辑这个。 总之，我放在地图上的每一个点，线或多边形都将它们的坐标保存到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