0

estoy haciendo un mapa en openlayers 3 y me gustaria saber si existe alguna forma de adaptarlo para celulares ya que algunas funciones como la de arrastre no me funcionan (agrande las imágenes pensando que podia ser eso, pero realmente solo me estaría funcionando con el puntero del mouse) Desde ya muchas gracias.

No se si existe un evento touch y en donde se debe colocar (tal vez sea en la declaración del mapa o en la parte de modify). Les dejo las dos partes del código a ver si alguien me puede orientar.

mapa

   map = new ol.Map({  
    // view: new ol.View(),
     view: new ol.View({
             projection: 'EPSG:4326',
             center:[longitud, latitud],
                    // [0, 0], 'EPSG:4326', 'EPSG:3857'),
                        zoom: 13.5,
                       minZoom: 2,
                       maxZoom: 18
    }), 

     layers: [
       new ol.layer.Tile({
         source: new ol.source.OSM({
        wrapX: true,
         })
       //  vectorLayer,
          //  vectorLayerVuelta,
       })
       ],          
        target: document.getElementById('map'),

        controls: ol.control.defaults({
      zoom: true,     
      attributionOptions: {
       collapsible: false           
       }
     }),

   /*  view: new ol.View({

       center: ol.proj.transform(
               [longitud, latitud], 'EPSG:4326', 'EPSG:3857'), 

       zoom: 14,
       minZoom: 12,
       maxZoom: 18,
       atribution: false
     }),*/



   });

modify origen y destino ///

var modifyOrigen = new ol.interaction.Modify({source: sourceOrigen});
//var coordenadas = feature.getBounds().getCenterLonLat();

map.addInteraction(modifyOrigen);





function addInteractions() {
  drawOrigen = new ol.interaction.Draw({
      clickTolerance : 20,
     source: sourceOrigen,
    type: iconoParadaCoche.value


  });


  map.addInteraction(drawOrigen);

  snapOrigen = new ol.interaction.Snap({

      source: sourceOrigen}); 
  map.addInteraction(snapOrigen);




}

modifyOrigen.on('modifyend', function(evt) { 




      console.log(evt.features.item(0).getGeometry().getCoordinates());
    });

// console.log(Object.values(snapOrigen)); // alert (snapOrigen);

//**** para mover el puntero Destino *****
var modifyDestino = new ol.interaction.Modify({source: sourceDestino});
map.addInteraction(modifyDestino);

function addInteractions() {
  drawDestino = new ol.interaction.Draw({
      pixelTolerance : 10,
      source: sourceDestino,
    type: iconoParadaCoche.value

  });
  map.addInteraction(drawDestino);
  snapDestino = new ol.interaction.Snap({source: sourceDestino});
  map.addInteraction(snapDestino);

}

modifyDestino.on('modifyend', function(evt) { 
      console.log(evt.features.item(0).getGeometry().getCoordinates());
    });

1 respuesta 1

0

Saludos para esto te recomiendo hacer como comenta la documentación:

dentro del head agregar la etiqueta meta así:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Adicional debes agregar la configuración de js :

var layer = new ol.layer.Tile({
        source: new ol.source.OSM()
});

entonces un breve ejemplo quedaria:

<!doctype html>
<html>
  <head>
    <title>Mobile Examples</title>
    <!-- the viewport is important for mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
    <link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
  </head>
  <body>
    <div id="map" class="full-map"></div>
    <script src="../assets/ol3/js/ol.js"></script>
    <script>
      // other than adding the <meta> viewport above, our normal setup will
      // work fine for mobile
      var layer = new ol.layer.Tile({
        source: new ol.source.OSM()
      });
      var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857');
      var view = new ol.View({
        center: london,
        zoom: 6
      });
      var map = new ol.Map({
        target: 'map',
        layers: [layer],
        view: view
      });
    </script>
  </body>
</html>

Para mayor referencia te sugiero revisar la documentación Go Mobile

4
  • Muchas gracias Diego. Me toma los puntos pero tengo que seleccionarlos mas arriba de lo que esta la figura (una es la gotita verde y la otra la bandera). hay alguna confugracion para centrar el touch sobre la figura o un tamaño recomendado?
    – Sama
    Commented el 7 may. 2019 a las 13:18
  • Muchas gracias Diego. Me toma los puntos pero tengo que seleccionarlos mas arriba de lo que esta la figura (una es la gotita verde y la otra la bandera). hay alguna confugracion para centrar el touch sobre la figura o un tamaño recomendado? 190.220.132.134/usuariocontrol/urbano.php?a=162
    – Sama
    Commented el 7 may. 2019 a las 13:27
  • como referencia que lugares colocas en origen y destino Commented el 7 may. 2019 a las 13:36
  • Origen: Antartida argentina 1350, caleta olivia (tercera opción) Destino : Brasil 388, caleta olivia (esta filtrado por pais pero no puedo hacerlo por ciudad asi queda mas facil)
    – Sama
    Commented el 7 may. 2019 a las 13:45

Tu Respuesta

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

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