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

时间:2019-01-15 23:47:28

标签: javascript openstreetmap openlayers-5

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

我正在使用OpenLayers 5。

1 个答案:

答案 0 :(得分: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