如何使用OpenLayers 3添加标记 [英] how to add markers with OpenLayers 3

问题描述

我正在尝试在 OpenLayers 3 地图上添加制作者。

I'm trying to add makers on a OpenLayers 3 map.

我找到的唯一例子这个 OpenLayers 示例列表。

The only example I have found is this one in the OpenLayers example list.

但该示例使用 ol.Style.Icon 而不是像 OpenLayers.Marker OpenLayers 2 。

But the example uses ol.Style.Icon instead of something like OpenLayers.Marker in OpenLayers 2.

第一个问题

唯一的区别是是你必须设置图像Url，但它是添加标记的唯一方法吗？

The only difference would be that you have to set the image Url but is it the only way to add a marker?

此外 OpenLayers 3 似乎没有标记图像，所以如果除了 ol.Style.Icon

Also OpenLayers 3 doesn't seem to come with marker images so it would make sense if there's no other way than ol.Style.Icon

第二问题

如果有人能给我一个在加载地图后添加标记或图标的功能示例，那将是非常好的。

It would be really nice if someone could give me an example of a function to add markers or icons after the map is loaded.

根据我在示例中的理解，他们为图标创建了一个图层

From what I understand in the example, they create a layer for the icon

var iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.transform([-72.0704, 46.678], 'EPSG:4326', 'EPSG:3857')),
  name: 'Null Island',
  population: 4000,
  rainfall: 500
});


var iconStyle = new ol.style.Style({
  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
    anchor: [0.5, 46],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    opacity: 0.75,
    src: 'data/icon.png'
  }))
});

iconFeature.setStyle(iconStyle);

var vectorSource = new ol.source.Vector({
  features: [iconFeature]
});

var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

然后他们在初始化地图时设置图标层

Then they set the icon layer when they initialize the map

var map = new ol.Map({
  layers: [new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer],
  target: document.getElementById('map'),
  view: new ol.View2D({
    center: [0, 0],
    zoom: 3
  })
});

如果我想添加许多标记，我是否必须为每个标记创建1层？

If I want to add many markers, do I have to create 1 layer for each marker?

如何在图层中添加许多标记？我无法弄清楚这部分看起来如何
喜欢

How could I add many markers to a layer? I can't figure out how this part would look like

var vectorSource = new ol.source.Vector({
  features: [iconFeature]
});

var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

谢谢

推荐答案

Q1。在OpenLayers 2中，标记被认为已被弃用，尽管从文档中这不是很明显。相反，您应该使用OpenLayers.Feature.Vector，并将externalGraphic设置为其样式中的某个图像源。这个概念已被转移到OpenLayers 3，所以没有标记类，它就像你引用的例子那样完成。

Q1. Markers are considered deprecated in OpenLayers 2, though this isn't very obvious from the documentation. Instead, you should use an OpenLayers.Feature.Vector with an externalGraphic set to some image source in its style. This notion has been carried over to OpenLayers 3, so there is no marker class and it is done as in the example you cited.

Q2。 ol.source.Vector采用一系列功能，注意线条，功能：[iconFeature]，因此您将创建一个图标功能数组并为其添加功能，例如：

Q2. The ol.source.Vector takes an array of features, note the line, features: [iconFeature], so you would create an array of icon features and add features to that, eg:

var iconFeatures=[];

var iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.transform([-72.0704, 46.678], 'EPSG:4326',     
  'EPSG:3857')),
  name: 'Null Island',
  population: 4000,
  rainfall: 500
});

var iconFeature1 = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.transform([-73.1234, 45.678], 'EPSG:4326',     
  'EPSG:3857')),
  name: 'Null Island Two',
  population: 4001,
  rainfall: 501
});

iconFeatures.push(iconFeature);
iconFeatures.push(iconFeature1);

var vectorSource = new ol.source.Vector({
  features: iconFeatures //add an array of features
});

var iconStyle = new ol.style.Style({
  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
    anchor: [0.5, 46],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    opacity: 0.75,
    src: 'data/icon.png'
  }))
});


var vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: iconStyle
});

显然，通过将所有ol.Feature创建放在基于循环的内部，可以更优雅地处理在一些数据源上，但我希望这证明了这种方法。另请注意，您可以将样式应用于ol.layer.Vector，以便将其应用于添加到图层的所有要素，而不必在各个要素上设置样式，假设您希望它们是同样，显然。

Obviously, this could be more elegantly handled by putting all of the ol.Feature creation inside a loop based on some data source, but I hope this demonstrates the approach. Note, also, that you can apply a style to the ol.layer.Vector so that it will be applied to all features being added to the layer, rather than having to set the style on individual features, assuming you want them to be the same, obviously.

编辑：这个答案似乎不起作用。这是一个更新的小提琴，它通过在循环中向空矢量源添加功能（图标）来工作，使用vectorSource.addFeature，然后将整个批次添加到图层矢量。在更新我原来的答案之前，我会等着看你是否适合你。

That answer doesn't seem to work. Here is an updated fiddle that works by adding the features (icons) to the empty vector source in a loop, using vectorSource.addFeature and then adds the whole lot to the layer vector afterwards. I will wait and see if this works for you, before updating my original answer.

这篇关于如何使用OpenLayers 3添加标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！