-1

Buenas estoy trabajando en javascript mas especificamente con la Api de OpenLayers en busca de hacer un mapa con paradas de colectivos (bus) las cuales tomo de una base de datos mysql. Hasta el momento hago que me traiga las paradas segun la empresa y al darle clic sobre el circulo me muestra el nombre de la parada (eso lo hago con otro metodo select), pero en esos lugares me aparecen círculos de color verde, pero lo que quiero es que en esos lugares me aparezcan iconos. El recorrido de la base de datos lo hago con un for. A continuacion les muestro mi codigo para ver si me pueden ayudar a cambiar los circulos verdes por iconos ya que soy bastante nuevo en javascript y mas aun con openlayers. Desde ya muchas gracias introducir la descripción de la imagen aquí

var latitud = <?php echo $lati;?>; // lo uso para traer la latitud desde el telefono movil
var longitud = <?php echo $longi;?>; // lo uso para traer la longitud desde el telefono movil
var coord= "<?php echo $coord;?>";			
var coord_arr=coord.split('*');
var iconoParada = new Array(coord_arr.legth); 	///tomo la cantidada de paradas que tiene esa empresa en la base de datos

var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM({
          wrapX: false
        })
      })
     
    ],
    controls: ol.control.defaults({
    	 zoom: false,
      
      attributionOptions: {
        collapsible: false
       
      }
    }),
    target: 'map',
    
    view: new ol.View({
      center: ol.proj.transform(
              [longitud, latitud], 'EPSG:4326', 'EPSG:3857'), 
      zoom: 16,
      minZoom: 6,
      maxZoom: 18,
      atribution: false
    })
   
  });

var source = new ol.source.Vector();
var vector = new ol.layer.Vector({
  source: source,
  style: new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(0, 0, 0, 1)'
    }),
    stroke: new ol.style.Stroke({
      color: '#FD0202',
      width: 14
    }),
    image: new ol.style.Circle({
      radius: 20, //tamaño del circulo
      fill: new ol.style.Fill({
       color: '#24FD02' //color del circulo parada
      })
    })
  })
});
  map.addLayer(vector);

	  
	for (var i=0;i<coord_arr.length;i++){
		var data=coord_arr[i].split(',');
		var nombre_parada= data[0]; //toma el nombre de la parada
		var longi_parada= parseFloat(data[1]); //toma la longitud de la parada **** viene en este formato '-33.1333' *****
		var lati_parada= parseFloat(data[2]); //toma la latitud  
			
		    var iconoParada = new ol.Feature({
						'geometry': new ol.geom.Point(ol.proj.transform( 
							[longi_parada,lati_parada], 'EPSG:4326', 'EPSG:3857')),
						'name': nombre_parada
					 
					});
		    source.addFeature(iconoParada);
		   
	 

	
	 var seleccionarParada = new ol.interaction.Select(); /// selecciono la parada la cual quiero conocer su nombre
	 map.addInteraction(seleccionarParada);
	 seleccionarParada.on('select', function(e){
		var div = document.getElementById('seleccionarParada');
		var seleccionados = e.target.getFeatures();
		var html ='';
		seleccionados.forEach(function(t){
			html += '<b><font color="red">Parada:</font> </b>'+ t.get('name'); //imprimo el nombre de la parada en una caja de texto
			html +='<hr/>';
			

			//alert(t.get('name'));
		});
		div.innerHTML = html;
		 });
	 
	
	}
	 
	 
	 
	 
	
html, body, #map {height:100%;width:100%;margin:0;padding:0;position: relative;}
#estilo1{color:#FFF;background:#FFF;margin-top:10px}
</style> 

<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
  <script type="text/javascript" src="../../jquery.min.js"></script>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>

1 respuesta 1

1

El problema que tienes es que tu icono, no tiene un style definido.

Si ese es el problema, lo puedes solucionar de la siguiente manera:

var vectorSource = new ol.source.Vector({
      //create empty vector
    });

var iconFeature = new ol.Feature({
         geometry: new ol.geom.Point(ol.proj.transform( 
                        [longi_parada,lati_parada], 'EPSG:4326', 'EPSG:3857')),
                    name: nombre_parada
        });
        vectorSource.addFeature(iconFeature);
    }

//create the style
    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: 'http://openlayers.org/en/v3.9.0/examples/data/icon.png'
      }))
    });
2
  • sabes que lo hice tal cual me lo pasaste (lo saquè de un ejemplo y lo adapte) pero lo quiero poner asi sea un icono para indicar el punto actual del dispositivo mòvil o las paradas y cuando lo pongo al codigo no me trae nada(ni el mapa, ni las paradas, ni mi ubicaciòn). Tampoco tira un error en particular. Es como raro o tal vez soy muy torpe ja
    – Sama
    el 13 abr. 2018 a las 20:55
  • Te devuelve algún error la pantalla, al revisar en consola o debuguear? o es posible que no tengas definido tu var vectorSource = new ol.source.Vector({ //create empty vector }); jsfiddle.net/raintrooper/6RS2z/937 el 13 abr. 2018 a las 21:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.