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

我有一张使用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”，这应该有多长时间限制？或者我是否错过了其他一些阻止我的新点获取坐标的东西？

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

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

相关代码：

  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>

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

问题描述

1楼