javascript - how to add markers with OpenLayers 3 -

javascript - how to add markers with OpenLayers 3 -

i'm trying add together makers on openlayers 3 map.

the illustration have found this 1 in openlayers illustration list.

but illustration uses ol.style.icon instead of openlayers.marker in openlayers 2.

first question

the difference have set image url not big deal i'm wondering if it's way add together marker?

also openlayers 3 doesn't seem come marker images create sense if there's no other way ol.style.icon

second question

it nice if give me illustration of function add together markers or icons after map loaded.

from understand in example, create layer 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 set icon layer when initialize 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 }) });

if want add together many markers, have create 1 layer each marker?

how add together many markers layer? can't figure out how part like

var vectorsource = new ol.source.vector({ features: [iconfeature] }); var vectorlayer = new ol.layer.vector({ source: vectorsource });

thank you

q1. markers considered deprecated in openlayers 2, though isn't obvious documentation. instead, should utilize openlayers.feature.vector externalgraphic set image source in style. notion has been carried on openlayers 3, there no marker class , done in illustration cited.

q2. ol.source.vector takes array of features, note line, features: [iconfeature], create array of icon features , add together features 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 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 });

obviously, more elegantly handled putting of ol.feature creation within loop based on info source, hope demonstrates approach. note, also, can apply style ol.layer.vector applied features beingness added layer, rather having set style on individual features, assuming want them same, obviously.

edit: reply doesn't seem work. here updated fiddle works adding features (icons) empty vector source in loop, using vectorsource.addfeature , adds whole lot layer vector afterwards. wait , see if works you, before updating original answer.

javascript openlayers openlayers-3