javascript - org - cómo agregar marcadores con OpenLayers 3

openlayers lib openlayers js

Question

Estoy intentando agregar fabricantes en un mapa de OpenLayers 3 .

El único ejemplo que he encontrado es this en la list ejemplos de OpenLayers .

Pero el ejemplo usa ol.Style.Icon lugar de algo como OpenLayers.Marker en OpenLayers 2 .

Primera pregunta

La única diferencia sería que tienes que configurar la URL de la imagen, pero ¿es la única forma de agregar un marcador?

Además, OpenLayers 3 no parece venir con imágenes de marcador, por lo que tendría sentido si no hay otra manera que ol.Style.Icon

Segunda pregunta

Sería realmente agradable si alguien pudiera darme un ejemplo de una función para agregar marcadores o íconos después de cargar el mapa.

Por lo que entiendo en el ejemplo, crean una capa para el icono

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

Luego configuran la capa del icono cuando inicializan el mapa

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 quiero agregar muchos marcadores, ¿tengo que crear 1 capa para cada marcador?

¿Cómo podría agregar muchos marcadores a una capa? No puedo entender cómo se vería esta parte

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

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

Gracias

Answer 1

Q1. Los marcadores se consideran obsoletos en OpenLayers 2, aunque esto no es muy obvio a partir de la documentación. En su lugar, debe usar un OpenLayers.Feature.Vector con unGraphic externo configurado para una fuente de imagen en su estilo. Esta noción se ha trasladado a OpenLayers 3, por lo que no hay una clase de marcador y se realiza como en el ejemplo que citó.

Q2. El ol.source.Vector toma una serie de características, tenga en cuenta la línea, características: [iconFeature], por lo que podría crear una serie de características de los iconos y agregarle características, por ejemplo:

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

Obviamente, esto podría manejarse de forma más elegante al poner toda la creación de la naturaleza. Dentro de un ciclo basado en alguna fuente de datos, pero espero que esto demuestre el enfoque. Tenga en cuenta también que puede aplicar un estilo al ol.layer.Vector para que se aplique a todas las características que se agregan a la capa, en lugar de tener que establecer el estilo en las características individuales, suponiendo que desea que sean el lo mismo, obviamente

EDITAR: Esa respuesta no parece funcionar. Aquí hay un fiddle actualizado que funciona agregando las características (iconos) al origen de vector vacío en un bucle, usando vectorSource.addFeature y luego agrega todo el lote al vector de capa. Voy a esperar y ver si esto funciona para usted, antes de actualizar mi respuesta original.

Answer 2

hay un buen tutorial en: http://openlayersbook.github.io

no probado, pero puede ser útil

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

Answer 3

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