将地图标记添加到开放图层 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://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v6.14.1/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v6.14.1/build/ol.js"></script>
<div id="map" class="map">
<div id="popup"></div>
</div>

Answer 2

默认情况下，视图为 3857 投影，其单位为米。

因此，您输入的坐标距离 [0;0]，在离尼日利亚不太远的海里。

您可以在 3857 中输入坐标，例如

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

或者，您必须将坐标投影到 3857，如注释中所述，使用ol.proj.fromLonLat([53,-2])

请记住，坐标首先表示为经度，然后表示为纬度，如文档中所述。