アイコンの場所フィーチャーopenlayers3

Question

マーカー付きの地図を表示するためのコードは次のとおりです。私は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 
    }) 
    }); 

どのように私は正しい位置にマーカーを作ることができます。おかげさまで

Answer 1

OSMレイヤーがEPSG：3857投影システムに投影されています。しかしiconFeatureに渡される座標はWGS84投影システムにあります。中心を設定する間、座標が変換されます。 iconFeatureオブジェクトにも同じことを適用する必要があります。

トランスフォームiconフィーチャフィーチャオブジェクトの中心のような座標です。

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

このplunker link

に更新されたコードを参照してください。