openlayers - 如何使用 OpenLayers 4.6.4 将图标/标记添加到 OSM map

Question

我想知道是否有人可以指出我正确的方向。我正在尝试使用 OpenLayers 4.6.4 向 OSM map 添加多个标记/图标。

以下代码可以毫无问题地渲染 map :

    <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 网站上搜索有关如何添加标记的信息，但它指出标记已被弃用!我要做的就是在 map 上添加一些图钉/标记以显示站点位置。

我也尝试过其他版本的 OpenLayers 2.13.1、2.14 和 3.0，但均未成功。

任何帮助将不胜感激。

Answer 1

旧标记已弃用。你应该使用 geometry Points与 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>