如何在Openlayers中获取绘制的多边形坐标

Question

我有一个openlayers项目。当我在地图上画任何一个地方时，我想得到画出的多边形坐标和关于画出的地方的信息，比如邻居的名字。我在这里尝试了很多解决方案，也尝试了另一个建议，但我无法绘制坐标。如何获取绘制的多边形坐标。

这是我的html代码

<div id="map" class="map"></div>
<select id="layer-select" class="layer-select">
<option value="AerialWithLabelsOnDemand" selected>Aerial with labels</option>
</select>
<form class="form-inline">
<label for="type">Geometry type: &nbsp;</label>
<select class="form-control mr-2 mb-2 mt-2" id="type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
<option value="Circle">Circle</option>
<option value="None">None</option>
</select>
<input class="form-control mr-2 mb-2 mt-2" type="button" value="Undo" id="undo">
</form>

这是js代码

"use strict";
var TileLayer = ol.layer.Tile;
var OSM = ol.source.OSM;
var VectorSource = ol.source.Vector;
var VectorLayer = ol.layer.Vector;
var Style = ol.style.Style;
var Fill = ol.style.Fill;
var Stroke = ol.style.Stroke;
var CircleStyle = ol.style.Circle;
var View = ol.View;
var Modify = ol.interaction.Modify;
var Draw = ol.interaction.Draw;
var Snap = ol.interaction.Snap;
var Overlay = ol.Overlay;
var toStringHDMS = ol.coordinate.toStringHDMS;
var fromLonLat = ol.proj.fromLonLat;
var toLonLat = ol.proj.toLonLat;
var raster = new TileLayer({
preload: Infinity,
source: new ol.source.BingMaps({
key: '------------------',
imagerySet: 'AerialWithLabelsOnDemand',     
})
});
var source = new VectorSource({ wrapX: false });
var vector = new VectorLayer({
source: source,
});

var map = new ol.Map({
layers: [
raster, vector
],
target: 'map',
view: new View({
center: fromLonLat([34.9744, 39.0128]),
zoom: 6,
})
});
var typeSelect = document.getElementById('type');
var draw; // global so we can remove it later
function addInteraction() {
var value = typeSelect.value;
if (value !== 'None') {
draw = new Draw({
source: source,
type: typeSelect.value,

});
map.addInteraction(draw);
}
}
typeSelect.onchange = function () {
map.removeInteraction(draw);
addInteraction();
};
document.getElementById('undo').addEventListener('click', function () {
draw.removeLastPoint();
});

var popup = new Overlay({
element: document.getElementById('popup'),
});
map.addOverlay(popup);
map.on('click', function (evt) {
var element = popup.getElement();
var coordinate = evt.feature;
var hdms = toStringHDMS(toLonLat(coordinate));
$(element).popover('dispose');
popup.setPosition(coordinate);
$(element).popover({
container: element,
placement: 'top',
animation: false,
html: true,
content: '<p>The location you clicked was:</p><code>' + hdms + '</code>',
});
$(element).popover('show');
});

Answer 1

map.on('click', function (evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
return feature;
});
if (feature) {
var coord = feature.getGeometry().getCoordinates();
var props = feature.getProperties();
console.log(props.yourAttributeName);                 
}        
});