如何使用 OpenLayers 4.6.4 将 Icon/Marker 添加到 OSM 地图
How to Add Icon/Marker to OSM Map using OpenLayers 4.6.4
我想知道是否有人可以指出正确的方向。我正在尝试使用 OpenLayers 4.6.4 将多个 markers/icons 添加到 OSM 地图。
以下代码渲染地图没有任何问题:
<script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
<script type='text/javascript'>
var map = new ol.Map({
target: 'mapdiv',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-0.1526069, 51.4790309]),
zoom: 14
})
});
</script>
我尝试在 OpenLayers 网站上搜索有关如何添加标记的信息,但它指出标记已被弃用!我只想在地图上添加一些 pins/markers 以显示站点位置。
我也尝试过其他版本的 OpenLayers 2.13.1、2.14 和 3.0,但都没有成功。
如有任何帮助,我们将不胜感激。
旧标记已弃用。你应该使用 geometry Points with Icon style. Icon Symbolizer Example 是你要找的那个:
document.addEventListener("DOMContentLoaded", function() {
var iconFeature1 = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.1526069, 51.4790309]), ),
name: 'Somewhere',
});
var iconFeature2 = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.1426069, 51.4840309])),
name: 'Somewhere else'
});
// specific style for that one point
iconFeature2.setStyle(new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Map_marker_font_awesome.svg/200px-Map_marker_font_awesome.svg.png',
})
}));
const iconLayerSource = new ol.source.Vector({
features: [iconFeature1, iconFeature2]
});
const iconLayer = new ol.layer.Vector({
source: iconLayerSource,
// style for all elements on a layer
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'https://openlayers.org/en/v4.6.4/examples/data/icon.png'
})
})
});
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
iconLayer
],
view: new ol.View({
center: ol.proj.fromLonLat([-0.1526069, 51.4790309]),
zoom: 14
})
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol-debug.js"></script>
<div id="map" class="map"></div>
我想知道是否有人可以指出正确的方向。我正在尝试使用 OpenLayers 4.6.4 将多个 markers/icons 添加到 OSM 地图。
以下代码渲染地图没有任何问题:
<script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
<script type='text/javascript'>
var map = new ol.Map({
target: 'mapdiv',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-0.1526069, 51.4790309]),
zoom: 14
})
});
</script>
我尝试在 OpenLayers 网站上搜索有关如何添加标记的信息,但它指出标记已被弃用!我只想在地图上添加一些 pins/markers 以显示站点位置。
我也尝试过其他版本的 OpenLayers 2.13.1、2.14 和 3.0,但都没有成功。
如有任何帮助,我们将不胜感激。
旧标记已弃用。你应该使用 geometry Points with Icon style. Icon Symbolizer Example 是你要找的那个:
document.addEventListener("DOMContentLoaded", function() {
var iconFeature1 = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.1526069, 51.4790309]), ),
name: 'Somewhere',
});
var iconFeature2 = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.1426069, 51.4840309])),
name: 'Somewhere else'
});
// specific style for that one point
iconFeature2.setStyle(new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Map_marker_font_awesome.svg/200px-Map_marker_font_awesome.svg.png',
})
}));
const iconLayerSource = new ol.source.Vector({
features: [iconFeature1, iconFeature2]
});
const iconLayer = new ol.layer.Vector({
source: iconLayerSource,
// style for all elements on a layer
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'https://openlayers.org/en/v4.6.4/examples/data/icon.png'
})
})
});
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
iconLayer
],
view: new ol.View({
center: ol.proj.fromLonLat([-0.1526069, 51.4790309]),
zoom: 14
})
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol-debug.js"></script>
<div id="map" class="map"></div>