如何使用OpenLayers 3添加标记

Question

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

我发现的唯一的例子是这样一个的OpenLayers例子列表.

但这个例子使用ol.Style.Icon的像,而不是OpenLayers.Marker在OpenLayers 2.

第一个问题

唯一的区别是你必须设置图像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
  })
});

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

如何在图层中添加许多标记？我无法弄清楚这部分会是什么样子

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

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

谢谢

Answer 1

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

Q2.ol.source.Vector采用一系列功能,注意线条,功能:[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,以便将其应用于添加到图层的所有要素,而不必在各个要素上设置样式,假设您希望它们是同样,显然.

编辑:这个答案似乎不起作用.这是一个更新的小提琴,通过使用vectorSource.addFeature将特征(图标)添加到循环中的空矢量源,然后将整个批次添加到图层矢量.在更新原始答案之前,我会等待,看看这是否适合您.

Answer 2

有一个很好的教程:http://openlayersbook.github.io

未经测试但可能有帮助

var features = [];

//iterate through array...
for( var i = 0 ; i < data.length ; i++){
    var item = data[i];                                     //get item
    var type = item.type;                                   //get type
    var longitude = item.longitude;                         //coordinates
    var latitude = item.latitude;
    /*....
    * now get your specific icon...('..../ic_customMarker.png')
    * by e.g. switch case...
    */
    var iconPath = getIconPath(type);

    //create Feature... with coordinates
    var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform([longitude, latitude], 'EPSG:4326',     
        'EPSG:3857'))
    });

    //create style for your feature...
    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: iconPath
        }))
    });

    iconFeature.setStyle(iconStyle);
    features.push(iconFeature);
    //next item...
}

/*
* create vector source
* you could set the style for all features in your vectoreSource as well
*/
var vectorSource = new ol.source.Vector({
    features: features      //add an array of features
    //,style: iconStyle     //to set the style for all your features...
});

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