如何使用Openlayers设置新点的坐标？

Question

我有一张使用Openlayers创建的地图。地图从数据库中获取点，并在按下页面上的按钮时将其绘制在地图上。这些按预期工作。我想要做的是当用户在地图上的某处双击时添加一个新点。我并不担心将它保存到数据库中，这纯粹只是为了在现有图层上添加一个带有数据库加载点的新点。

我的代码目前看起来像这样：

map.on('dblclick', function (evt) {
console.log(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'));
addMarker(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'));

和

function addMarker(evt) {



var array = evt.toString().split(",").map(Number);
var long = array[0];
var lat = array[1];
toastr.info(long);
toastr.info(lat);
var marker = new ol.Feature(
    new ol.geom.Point([long, lat])
);



var zIndex = 1;
marker.setStyle = [new ol.style.Style({
    image: new ol.style.Icon(({
        anchor: [0.5, 36], 
        anchorXUnits: "fraction",
        anchorYUnits: "pixels",
        opacity: 1,
        src: "images/pinother.png", 
        zIndex: zIndex
    })),
    zIndex: zIndex
})];

vectorSource.addFeature(marker);}

这确实在地图上创建了具有正确外观的点，但它始终位于原点; 0,0纬度/经度！

在我的addMarker函数中使用toastr（一个样式化的警报函数）我可以看到变量“lat”和“long”正在被正确填充，所以它必须是

var marker = new ol.Feature(
new ol.geom.Point([long, lat])

点创作，我没有正确做到。传递的坐标有很大的值，例如“62.915233039476135”，这应该是多长时间，或者我错过了阻止我的新点采取任何坐标的其他东西？

Answer 1

正如Mike在评论中指出的那样，只需将事件中的坐标传递给addMarker函数即可。

仅供参考 - 标记样式也存在问题。

working example

相关代码：

  map.on('dblclick', function (evt) {
    console.log(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'));
    addMarker(evt.coordinate);
  });

  function addMarker(coordinates) {
    console.log(coordinates);
    var marker = new ol.Feature(new ol.geom.Point(coordinates));
    var zIndex = 1;
    marker.setStyle(new ol.style.Style({
      image: new ol.style.Icon(({
        anchor: [0.5, 36], 
        anchorXUnits: "fraction",
        anchorYUnits: "pixels",
        opacity: 1,
        src: "mapIcons/pinother.png", 
        zIndex: zIndex
      })),
      zIndex: zIndex
    }));
    vectorSource.addFeature(marker);
  }

代码段：

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

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

<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>
<script>
  var vectorLayer = new ol.layer.Vector({ // VectorLayer({
    source: new ol.source.Vector(),
  });
  var map = new ol.Map({
    layers: [
      new ol.layer.Tile({ // TileLayer({
        source: new ol.source.OSM()
      }),
      vectorLayer,
    ],
    target: 'map',
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    })
  });
  console.log(map.getInteractions());
  var dblClickInteraction;
  // find DoubleClickZoom interaction
  map.getInteractions().getArray().forEach(function(interaction) {
    if (interaction instanceof ol.interaction.DoubleClickZoom) {
      dblClickInteraction = interaction;
    }
  });
  // remove from map
  map.removeInteraction(dblClickInteraction)
  var vectorSource = vectorLayer.getSource();

  function addMarker(coordinates) {
    console.log(coordinates);
    var marker = new ol.Feature(new ol.geom.Point(coordinates));
    var zIndex = 1;
    marker.setStyle(new ol.style.Style({
      image: new ol.style.Icon(({
        anchor: [0.5, 36],
        anchorXUnits: "fraction",
        anchorYUnits: "pixels",
        opacity: 1,
        src: "https://openlayers.org/en/latest/examples/data/icon.png",
        zIndex: zIndex
      })),
      zIndex: zIndex
    }));
    vectorSource.addFeature(marker);
  }
  map.on('dblclick', function(evt) {
    console.log(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'));
    addMarker(evt.coordinate);
  });
  var south = 24.0;
  var west = -125.8;
  var north = 49.6;
  var east = -66.4;
  // [maxx, maxy, minx, miny]
  var extent = ol.proj.transformExtent([east, north, west, south], 'EPSG:4326', 'EPSG:3857');
  map.getView().fit(extent, {
    size: map.getSize(),
    padding: [5, 5, 5, 5]
  });
</script>