web-dev-qa-db-fra.com

comment ajouter des marqueurs avec OpenLayers 3

J'essaie d'ajouter des décideurs sur un OpenLayers 3 carte.

Le seul exemple que j'ai trouvé est this one dans le OpenLayers example list .

Mais l'exemple utilise ol.Style.Icon au lieu de quelque chose comme OpenLayers.Marker dans OpenLayers 2.

Première question

La seule différence serait que vous devez définir l'URL de l'image, mais est-ce le seul moyen d'ajouter un marqueur?

Aussi OpenLayers 3 ne semble pas venir avec des images de marqueur, il serait donc logique de ne pas avoir d'autre moyen que ol.Style.Icon

Deuxième question

Ce serait vraiment bien si quelqu'un pouvait me donner un exemple de fonction permettant d'ajouter des marqueurs ou des icônes après le chargement de la carte.

D'après ce que j'ai compris dans l'exemple, ils créent un calque pour l'icône.

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
});

Ensuite, ils définissent la couche d'icônes lorsqu'ils initialisent la carte

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
  })
});

Si je veux ajouter plusieurs marqueurs, dois-je créer un calque pour chaque marqueur?

Comment pourrais-je ajouter plusieurs marqueurs à une couche? Je n'arrive pas à comprendre à quoi ressemblerait cette partie

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

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

Je vous remercie

javascriptopenlayers-3
62
Marc

Q1. Les marqueurs sont considérés comme obsolètes dans OpenLayers 2, bien que cela ne soit pas très évident dans la documentation. Au lieu de cela, vous devez utiliser un OpenLayers.Feature.Vector avec un ensemble externalGraphic sur une source d’image dans son style. Cette notion a été reportée sur OpenLayers 3, il n’ya donc pas de classe de marqueur et se fait comme dans l’exemple que vous avez cité.

Q2. Ol.source.Vector prend un tableau de fonctionnalités, notez la ligne, fonctionnalités: [iconFeature], afin de créer un tableau de fonctionnalités d'icônes et d'y ajouter des fonctionnalités, par exemple:

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
});

Évidemment, cela pourrait être traité de manière plus élégante en plaçant toute la création ol.Feature dans une boucle basée sur une source de données, mais j'espère que cela démontre l'approche. Notez également que vous pouvez appliquer un style à ol.layer.Vector afin qu’il soit appliqué à toutes les entités ajoutées au calque, sans avoir à définir le style sur des entités individuelles, en supposant que vous souhaitiez qu’elles soient les mêmes. pareil, évidemment.

EDIT: Cette réponse ne semble pas fonctionner. Voici une mise à jour fiddle qui fonctionne en ajoutant les entités (icônes) au vecteur source vide dans une boucle, en utilisant vectorSource.addFeature, puis ajoute ensuite le lot complet au vecteur de calque. Je vais attendre et voir si cela fonctionne pour vous, avant de mettre à jour ma réponse originale.

84
John Powell

il y a un bon tutoriel à: http://openlayersbook.github.io

non testé mais peut être utile

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);
11
RickPat
var exampleLoc = ol.proj.transform(
    [131.044922, -25.363882], 'EPSG:4326', 'EPSG:3857');

var map = new ol.Map({
  target: 'map',
  renderer: 'canvas',
  view: new ol.View2D({
    projection: 'EPSG:3857',
    zoom: 3,
    center: exampleLoc
  }),
  layers: [
    new ol.layer.Tile({source: new ol.source.MapQuest({layer: 'osm'})})
  ]
});

map.addOverlay(new ol.Overlay({
  position: exampleLoc,
  element: $('<img src="resources/img/marker-blue.png">')
      .css({marginTop: '-200%', marginLeft: '-50%', cursor: 'pointer'})
      .tooltip({title: 'Hello, world!', trigger: 'click'})
}));

map.on('postcompose', function(evt) {
  evt.vectorContext.setFillStrokeStyle(
      new ol.style.Fill({color: 'rgba(255, 0, 0, .1)'}),
      new ol.style.Stroke({color: 'rgba(255, 0, 0, .8)', width: 3}));
  evt.vectorContext.drawCircleGeometry(
      new ol.geom.Circle(exampleLoc, 400000));
});

var exampleKml = new ol.layer.Vector({
  source: new ol.source.KML({
    projection: 'EPSG:3857',
    url: 'data/example.kml'
  })
});
map.addLayer(exampleKml);
1
Ishaan Nigam