Problemas al mostrar icono en un mapa de Openlayers

Derley · #1 (**permalink**) 25/04/2014, 13:58

Hola,

Veréis, me he atascado a la hora de mostrar un punto de localización. El mapa se centra en el punto correcto pero el icono que debe de estar más o menos en el centro del mapa apuntando hacia la localización exacta me sale exáctamente en el punto (0, 0), es decir, en el ecuador del planeta.

He mirado pero no encuentro el error, a la hora de crear el icono ya lo sitúo en la posición correcta, pero sigue apareciendo en el centro del planeta.

A continuación os dejo el código a ver si me podéis ayudar.

Muchas gracias de antemano.

Código HTML:

<html lang="en">
  <head>
    <link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="http://ol3js.org/en/master/build/ol.js" type="text/javascript"></script>
    <title>OpenLayers 3 example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map">
	
	</div>
</body>
</html>

Y este sería el código JavaScript:

Código Javascript:

Ver originalvar capa1 = new ol.layer.Tile({
              source: new ol.source.MapQuest({layer: 'sat'})
          });
        
     var capa2 = new ol.layer.Tile({
              source: new ol.source.MapQuest({layer: 'hyb'})
          });
          
    var iconFeature = new ol.Feature({ name: 'Tren'});
    iconFeature.setGeometry(new ol.geom.Point([-4.231575155, 43.308034436])); //Posiciono el Icono
 
    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: 'icono_localizacion.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({
        target: 'map',
        layers: [capa1, capa2, vectorLayer],
        view: new ol.View2D({
          center: ol.proj.transform([-4.231575155, 43.308034436 ], 'EPSG:4326', 'EPSG:3857'),//Posiciono el mapa para mostrar esa localización
          //center: [0,0],
          zoom: 7
        })
      });

El código que he usado de referencia lo he sacado de aquí, por si os sirve:

http://ol3js.org/en/master/examples/icon.js

Gracias de nuevo.

Un saludo.