如何使用OpenLayers 3添加标记
我正在尝试在OpenLayers 3地图上添加makers。
我找到的唯一示例是OpenLayers示例list中的this one。
但是这个示例在OpenLayers 2中使用了ol.Style.Icon而不是OpenLayers.Marker之类的东西。
第一个问题
唯一的区别是您必须设置图像Url，但这是添加标记的唯一方法吗？
此外，OpenLayers 3似乎没有提供标记图像，所以如果除了ol.Style.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
});然后在初始化地图时设置图标图层
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
})
});如果我想添加许多标记，我必须为每个标记创建一个层吗？
如何在一个图层中添加多个标记？我不知道这部分会是什么样子
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});谢谢
Stack Overflow用户
发布于 2014-06-20 05:59:16
Q1。标记在OpenLayers 2中被认为是不推荐使用的，尽管这在文档中并不是很明显。相反，您应该使用externalGraphic设置为其样式中某个图像源的OpenLayers.Feature.Vector。这个概念已经被带到了OpenLayers 3中，所以没有标记类，它是按照你引用的例子来做的。
Q2。ol.source.Vector接受一个特征数组，注意这一行，features : iconFeature，因此您将创建一个图标特征数组并向其中添加特征，例如：
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，以便将其应用于要添加到图层的所有要素，而不必在单个要素上设置样式，显然，假设您希望它们是相同的。
编辑:这个答案似乎不起作用。这是一个更新的fiddle，它的工作原理是使用vectorSource.addFeature将特征(图标)添加到循环中的空向量源，然后将整个块添加到层向量中。在更新我的原始答案之前，我会等着看这对你是否有效。
https://stackoverflow.com/questions/24315801
复制相似问题
腾讯云开发者
