将地图标记添加到 Open Layers 6 [英] Adding map markers to Open Layers 6
问题描述
我的问题很简单:如何在特定的经纬度添加标记?
处理开放图层 示例页面 我创建了一张新地图用记号笔.
我使用 new ol.Feature
添加了标记,但似乎无论我如何设置标记位置的坐标都不会改变.
请任何人就为什么地图标记未显示在正确位置提供建议?
const iconFeature = new ol.Feature({geometry: new ol.geom.Point([53, -2]),//这个标记不会移动.name: '某处',});const map = new ol.Map({目标:'地图',层数:[新的 ol.layer.Tile({来源:新 ol.source.OSM(),}),新的 ol.layer.Vector({来源:新 ol.source.Vector({特点:[iconFeature]}),风格:新 ol.style.Style({图像:新 ol.style.Icon({锚点:[0.5, 46],anchorXUnits: '分数',anchorYUnits: '像素',src: 'https://openlayers.org/en/latest/examples/data/icon.png'})})})],视图:新 ol.View({中心:ol.proj.fromLonLat([53,-2]),变焦:6})});
.map {宽度:100%;高度: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>
您可以使用 ol.proj.fromLonLat 将 EPSG:4326
转换为 EPSG:3857
,对于既具有特征又使地图居中.一般来说,您必须这样做,因为默认投影是 EPSG:3857
.
对于图标:
const iconFeature = new ol.Feature({几何:新 ol.geom.Point(ol.proj.fromLonLat([-2, 53])),name: '靠近诺丁汉',});
使视图/地图在同一位置居中:
view: new ol.View({中心:ol.proj.fromLonLat([-2, 53]),变焦:6})
工作代码片段:
const iconFeature = new ol.Feature({几何:新 ol.geom.Point(ol.proj.fromLonLat([-2, 53])),name: '靠近诺丁汉',});const map = new ol.Map({目标:'地图',层数:[新的 ol.layer.Tile({来源:新的 ol.source.OSM(),}),新的 ol.layer.Vector({来源:新 ol.source.Vector({特点:[iconFeature]}),风格:新 ol.style.Style({图像:新 ol.style.Icon({锚点:[0.5, 46],anchorXUnits: '分数',anchorYUnits: '像素',src: 'https://openlayers.org/en/latest/examples/data/icon.png'})})})],视图:新 ol.View({中心:ol.proj.fromLonLat([-2, 53]),变焦:6})});
html, body {宽度:100%;高度:100%;填充:0px;边距:0px;}.地图 {宽度:100%;高度:100%;}
<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>
My question is simple: How do you add a marker at a specific longitude and latitude?
Working through the open layers example page I have created a new map with a marker.
I added the marker using the new ol.Feature
but it seems no matter what I set the coordinates to the marker position will not change.
Please can anyone offer advice on why the map marker is not showing in the correct position?
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>
You can use ol.proj.fromLonLat to transform EPSG:4326
to EPSG:3857
, for both features and centering the map. In general you have to do that as the default projection is EPSG:3857
.
for icons:
const iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([-2, 53])),
name: 'Somewhere near Nottingham',
});
to center the view/map at the same place:
view: new ol.View({
center: ol.proj.fromLonLat([-2, 53]),
zoom: 6
})
working code snippet:
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>
<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>
这篇关于将地图标记添加到 Open Layers 6的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!