有没有办法在 openlayers 中获取修改后的多边形的新坐标？

Question

我给地图一个组成多边形的四个坐标：

var x_1 = 28.0244307;
var y_1 = -25.8635238;

var x_2 = 28.0244307;
var y_2 = -25.8835238;

var x_3 = 28.0444307;
var y_3 = -25.8835238;

var x_4 = 28.0444307;
var y_4 = -25.8635238;

所以当我启用功能以便修改现有多边形时，修改后的多边形显然应该有新的坐标，我怎样才能得到修改后的多边形的新坐标？

var coords = [
                [x_1, y_1],
                [x_2, y_2],
                [x_3, y_3],
                [x_4, y_4],
                [x_1, y_1]
            ];

var polygon = new ol.geom.Polygon([coords]);

var feature = new ol.Feature(polygon);

    polygon.transform('EPSG:4326', 'EPSG:3857');

var vectorSource = this.vectorSource;
    vectorSource.addFeature(feature);

var select = new ol.interaction.Select();

var modify = new ol.interaction.Modify({
    features: select.getFeatures(),
   });

 var snap = new ol.interaction.Snap({
     source: vectorSource,
    });

 this.map.addInteraction(select);
 this.map.addInteraction(modify);
 this.map.addInteraction(snap);

Answer 1

你可以这样做：

feature.getGeometry().getCoordinates();

Answer 2

modifyend 事件触发时获取要素的坐标。

  modify.on('modifyend', function (evt) {
    console.log("modify end");
    var i=0;
    evt.features.forEach(function (feature) {
       console.log(i+":"+feature.getGeometry().getCoordinates());
       i++;
    });
  });

当我修改多边形时将其输出到控制台：

modify end
0:3119665.3552953834,-2982187.576923644,3116995.620270418,-2985977.4637464806,3121891.745111249,-2984662.004550239,3121891.745111249,-2982187.576923644,3119665.3552953834,-2982187.576923644

proof of concept fiddle

var raster = new ol.layer.Tile({ // TileLayer({
  source: new ol.source.OSM()
});

var vector = new ol.layer.Vector({ // VectorLayer({
  source: new ol.source.Vector() // VectorSource({
});

//
var x_1 = 28.0244307;
var y_1 = -25.8635238;

var x_2 = 28.0244307;
var y_2 = -25.8835238;

var x_3 = 28.0444307;
var y_3 = -25.8835238;

var x_4 = 28.0444307;
var y_4 = -25.8635238;

var coords = [
  [x_1, y_1],
  [x_2, y_2],
  [x_3, y_3],
  [x_4, y_4],
  [x_1, y_1]
];

var polygon = new ol.geom.Polygon([coords]);

var feature = new ol.Feature(polygon);

polygon.transform('EPSG:4326', 'EPSG:3857');

var vectorSource = vector.getSource();
vectorSource.addFeature(feature);

var select = new ol.interaction.Select();

var modify = new ol.interaction.Modify({
  features: select.getFeatures(),
});

var snap = new ol.interaction.Snap({
  source: vectorSource,
});

var map = new ol.Map({
  interactions: ol.interaction.defaults().extend([select, modify, snap]),
  layers: [raster, vector],
  target: 'map',
  view: new ol.View({
    center: ol.proj.fromLonLat([28.024, -25.87]),
    zoom: 12
  })
});
modify.on('modifyend', function(evt) {
  console.log("modify end");
  var i = 0;
  evt.features.forEach(function(feature) {
    console.log(i + ":" + feature.getGeometry().getCoordinates());
    i++;
  });
});


select.on('change', function() {
  console.log("select change");
});

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 95%;
  width: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<div id="map" class="map"></div>