將地圖標記添加到 Open Layers 6

Question

我的問題很簡單：如何在特定的經緯度添加標記？

通過打開圖層示例頁面，我創建了一個帶有標記的新地圖。

我使用new ol.Feature添加了標記，但似乎無論我如何設置標記位置的坐標都不會改變。

請有人就為什么地圖標記未顯示在正確位置提供建議嗎？

 const iconFeature = new ol.Feature({ geometry: new ol.geom.Point([53, -2]), //This marker will not move. name: 'Somewhere', }); const map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM(), }), new ol.layer.Vector({ source: new ol.source.Vector({ features: [iconFeature] }), style: new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', src: 'https://openlayers.org/en/latest/examples/data/icon.png' }) }) }) ], view: new ol.View({ center: ol.proj.fromLonLat([53,-2]), zoom: 6 }) });

 .map { width: 100%; height: 400px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script> <div id="map" class="map"> <div id="popup"></div> </div>

Answer 1

您可以使用 ol.proj.fromLonLat 將EPSG:4326轉換為EPSG:3857 ，用於特征和地圖居中。 一般來說，您必須這樣做，因為默認投影是EPSG:3857 。

對於圖標：

const iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([-2, 53])),
  name: 'Somewhere near Nottingham',
});

將視圖/地圖集中在同一位置：

view: new ol.View({
  center: ol.proj.fromLonLat([-2, 53]),
  zoom: 6
})

工作代碼片段：

 const iconFeature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([-2, 53])), name: 'Somewhere near Nottingham', }); const map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM(), }), new ol.layer.Vector({ source: new ol.source.Vector({ features: [iconFeature] }), style: new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', src: 'https://openlayers.org/en/latest/examples/data/icon.png' }) }) }) ], view: new ol.View({ center: ol.proj.fromLonLat([-2, 53]), zoom: 6 }) });

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://openlayers.org/en/v6.5.0/css/ol.css" type="text/css"> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script> <div id="map" class="map"> <div id="popup"></div> </div>

Answer 2

默認情況下，視圖為 3857 投影，單位為米。

因此，您輸入的坐標距 [0;0] 53 米，位於離尼日利亞不遠的海中。

您可以在 3857 中輸入坐標，例如

geometry: new ol.geom.Point([-8185391,5695875]),

或者您必須使用ol.proj.fromLonLat([53,-2])將坐標投影到 3857，如注釋中所示

請記住，坐標首先表示為經度，然后是緯度，如文檔中所述。