在“打开图层”中添加点,并在指针单击坐标的实际位置下方绘制了几个像素

时间:2019-06-10 10:45:03

标签: javascript openlayers

我是Open Layers的新手,也是JS的初学者。 我正在尝试在地图上添加一个点。到目前为止,我已经可以使用它了,但是添加的点却从实际的点击点“移动”了几个像素-不管缩放如何。它们始终位于下方几个像素处。 这可能是一个愚蠢的错误,但即使在这里寻找原因,也无法真正思考。

浏览了css文件,这里没有任何可疑的地方

var map = new ol.Map({
    view: new ol.View({
          center: ol.proj.fromLonLat([19.90, 50.06]),
          zoom: 10
    }),
    layers: [
          new ol.layer.Tile({
          source: new ol.source.OSM()
          })
         ],
    target: 'map'
});

var markerStyle = new ol.style.Style({
     image: new ol.style.Icon({
     anchor: [0.5, 0.5],
     size: [52, 52],
     offset: [52, 0],
     opacity: 1,
     scale: 0.35,
     src: 'dot.png'
     })
});

var marker = new ol.Feature({
     geometry: new ol.geom.Point(
     ol.proj.fromLonLat([19.95, 50.08])),
     style: markerStyle
});

var marker2 = new ol.Feature({
    geometry: new ol.geom.Point(
    ol.proj.fromLonLat([19.99,50.09])),
    style: markerStyle
});

var vectorSource = new ol.source.Vector({
    features: [marker, marker2],
    style: markerStyle
});

var markerVectorLayer = new ol.layer.Vector({
    source: vectorSource,
});


map.addLayer(markerVectorLayer);

map.on('click', function(evt){

  console.log(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'));

  var pointCoords = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
  var markerX = new ol.Feature({
      geometry: new ol.geom.Point(
      ol.proj.fromLonLat(pointCoords)),
      style: markerStyle
    });

    vectorSource.addFeature(markerX);

});  ````

1 个答案:

答案 0 :(得分:0)

好的,谢谢你的回答-可能会引导我朝正确的方向前进。我玩过markerStyle,然后发现在我的小型显示器上,当地图大小达到某个点以下时,描述了一个问题。调整大小后,它消失了。对不起,给@Mike带来麻烦,谢谢。