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