使用OpenLayers添加簡單的標記/點

Question

我一直在尋找有關如何在OSM / OpenLayers上放置標記列表（數組）的一天，但是不幸的是，官方示例對我不起作用。 您能告訴我最好的方式來顯示地圖，然后使用自定義PNG標記圖標將其添加為坐標數組嗎？

我正在使用OpenLayers 5。

Answer 1

標記坐標數組的最簡單方法是在MultiPoint幾何中使用該數組。 如果坐標為LonLat，則需要將幾何圖形轉換為地圖坐標：

  var iconFeature = new ol.Feature({
    geometry: new ol.geom.MultiPoint([[-90, 0], [-45, 45], [0, 0], [45, -45], [90, 0]]).transform('EPSG:4326','EPSG:3857'),
    name: 'Null Islands',
    population: 4000,
    rainfall: 500
  });

默認情況下，圖標將以圖像的自然尺寸顯示，但是您可以通過設置縮放選項來更改圖標：

  var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(/** @type {module:ol/style/Icon~Options} */ ({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: 'https://openlayers.org/en/v5.3.0/examples/data/icon.png',
      scale: 0.5
    }))
  });

http://mikenunn.16mb.com/demo/OL_5.3.0_multi-icon.html