如何使用OpenLayers 4.6.4向OSM Map添加图标/标记

Question

我想知道是否有人可以指出我正确的方向。我正在尝试使用OpenLayers 4.6.4向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网站上搜索有关如何添加标记的信息，但它表明标记已被弃用！我想要做的就是在地图上添加一些图钉/标记来显示网站位置。

我也尝试过其他版本的OpenLayers 2.13.1,2.14和3.0但没有任何成功。

任何帮助将不胜感激。

Answer 1

旧标记已弃用。你应该使用几何Points与Icon style。 Icon Symbolizer Example是您正在寻找的：

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 href="https://openlayers.org/en/v4.6.4/css/ol.css" rel="stylesheet"/>
<script src="https://openlayers.org/en/v4.6.4/build/ol-debug.js"></script>
<div id="map" class="map"></div>