change ol.style.Circle by Icon javascript

Question

change ol.style.Circle by Icon javascript

Navigation

#1 by (1 votes)

-1

Good I am working in javascript more specifically with the Api of OpenLayers in search of making a map with bus stops which I take from a mysql database. So far I have you bring me the stops according to the company and clicking on the circle shows me the name of the stop (I do that with another method select), but in those places I see green circles, but what I want is that in those places I see icons. I travel through the database with a for. Below I show you my code to see if you can help me to change the green circles by icons since I am quite new in javascript and even more with openlayers. From already thank you very much

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>

javascript openlayers-3

asked by Luis 13.04.2018 в 14:18

source

1 answer

Problem generating Signed APK in android studio SQL sum of sum totals

score 1 · Answer 1

The problem you have is that your icon does not have a defined style.

If that is the problem, you can solve it in the following way:

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