使用 OpenLayers 添加简单的标记/点

【问题标题】：Add simple markers/points with OpenLayers使用 OpenLayers 添加简单的标记/点
【发布时间】：2019-01-16 21:18:30
【问题描述】：

我一直在寻找有关如何在 OSM/OpenLayers 上放置标记列表（数组）的一天，但不幸的是，官方示例对我不起作用。您能告诉我显示地图的最佳方式，然后使用自定义 PNG 标记图标将其添加到坐标数组吗？

我正在使用 OpenLayers 5。

【问题讨论】：

当您说“官方示例对我不起作用”时，您是什么意思？你用的是哪个例子？是this one吗？ That works for me。您是否收到 javascript 错误？
是的，就是你链接的那个。我收到 JS 错误，因为在 JavaScript 中无法导入。您有没有导入的工作示例吗？谢谢。
在我的评论中查看link。
谢谢，但我想在地图上添加多个标记，并设置我的图标大小。我在哪里可以添加我的新积分？在vectorSource的特征中？
类似this?

标签： javascript openstreetmap openlayers-5

【解决方案1】：

标记坐标数组的最简单方法是在多点几何中使用该数组。如果坐标是 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

【讨论】：