iconFeature openlayers3的位置

时间:2016-12-21 16:01:13

标签: javascript openlayers-3

我有以下代码用于显示带标记的地图。我正在使用OpenLayers3。 问题是标记没有正常显示在正确的位置。它必须在加拿大显示,但它显示在地图的中间

    var iconFeature = new ol.Feature({
     geometry: new ol.geom.Point([-72.66, 45.04]),
     name: 'Null Island'
    });

    var iconStyle = new ol.style.Style({
     image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
     anchor: [0.5, 46],
     anchorXUnits: 'fraction',
     anchorYUnits: 'pixels',
     src: 'https://openlayers.org/en/v3.20.0/examples/data/icon.png'
     }))
    });

    iconFeature.setStyle(iconStyle);

    var vectorSource = new ol.source.Vector({
     features: [iconFeature]
    });

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


    //map
   var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),vectorLayer
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([-72, 45]),
      zoom: 6
    })
  });

如何将标记放在正确的位置。 感谢。

1 个答案:

答案 0 :(得分:0)

OSM层投影在EPSG:3857投影系统中。但传递给iconFeature的坐标是在WGS84投影系统中。设置中心时,坐标将被转换。还需要为iconFeature对象应用相同的内容。

转换iconFeature要素对象的坐标,如中心所做的那样。

var iconFeature = new ol.Feature({
     geometry: new ol.geom.Point(ol.proj.fromLonLat([-72.66, 45.04])),
     name: 'Null Island'
});

请参阅此plunker link

中的更新代码