2 votos

Actualizar la geolocalización de OpenLayers 3

Tengo un problema con la geolocalización de OpenLayers. He utilizado el ejemplo de http://openlayers.org/en/latest/examples/geolocation.html. Funciona bien hasta que salgo de la página y luego intento entrar de nuevo. No obtengo mi ubicación hasta que actualizo la página. Recibo el siguiente error:

 angular.js:14362 Posiblemente rechazado sin gestionar: Sus mapas no se encuentran, hemos comprobado el número máximo de veces. :)

Estoy utilizando Angular.

   Crear Nuevo Lugar   

Código del mapa cuando estoy en la página de creación de lugares:

var map,geolocation;

    var view = new ol.View({
        projection: 'EPSG:4326',
        center: [0, 0],
        zoom: 17
    });

    var raster = new ol.layer.Tile({
      source: new ol.source.BingMaps({
        key: 'ApwK1WfFWCTGox_FfcbOJrt5b0UBoem7K87N0lXgy6H9vC2ygvEg4iDP4dtFP6_o',
        imagerySet: 'Road',
        maxZoom: 19
        }),
        preload: Infinity,
    });

    var source = new ol.source.Vector({wrapX: false});  
    var vector = new ol.layer.Vector({
      source: source
    });

            map = new ol.Map({
              layers: [raster, vector],
              // Mejora la experiencia del usuario cargando mosaicos mientras arrastra/zooma. Hará
              // que el zoom sea entrecortado en dispositivos móviles o lentos.
              loadTilesWhileInteracting: true,
              target: 'map',
              view: view,
              controls: ol.control.defaults({
                attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                  collapsible: false
                  })
              }),
          });
var init = function (){

        geolocation = new ol.Geolocation({
            projection: map.getView().getProjection(),
            tracking: true,
            trackingOptions: {
                enableHighAccuracy: true,
                maximumAge: 2000
            }
        });

        // Manejar error de geolocalización.
        geolocation.on('error', function (error) {
            console.log = error.message;

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

        var iconStyle = new ol.style.Style({
            image: new ol.style.Circle({
                radius: 6,
                fill: new ol.style.Fill({
                    color: '#3399CC'
                }),
                stroke: new ol.style.Stroke({
                    color: '#fff',
                    width: 2
                })
            })
        });

        var iconLayer = new ol.layer.Vector({
            source: iconSource,
            style: iconStyle
        });
        map.addLayer(iconLayer);
        geolocation.on('change', function (evt) {

            var pos = geolocation.getPosition();
            iconFeature.setGeometry(new ol.geom.Point(pos));
            view.setCenter(pos);
            view.setZoom(18);
        });

    }
    init();

He creado un plunker para demostrar el problema.

Plunker abrirá la Ruta 1 de forma predeterminada, si vas a la Ruta 2 el mapa se cargará con tu ubicación, luego vuelve a la Ruta 1 y luego a la Ruta 2 la ubicación no se mostrará.

https://plnkr.co/edit/s4gLV3xaENThGiXhCi1D

0voto

Dilpreet Kaur Puntos 28

Finalmente logré resolverlo gracias a un amigo

en la configuración del estado del lugar, agregue data.currentlocation

state('route2', {
      url: "/route2",
      data: {
        currentLocation: null
      },

almacenamos la geoposición en state.data y dentro de la función init agregue lo siguiente

if ($state.current.data.currentLocation != null) {

            updateLoc($state.current.data.currentLocation);
          }

          geolocation.on('change', function(evt) {
            var pos = $state.current.data.currentLocation = geolocation.getPosition();
            updateLoc(pos);
          });

          function updateLoc(pos) {
            iconFeature.setGeometry(new ol.geom.Point(pos));
            view.setCenter(pos);
            view.setZoom(18);
          }

Ejemplo de trabajo aquí https://plnkr.co/edit/MVBqWKgjPMmuylcSePDq

i-Ciencias.com

I-Ciencias es una comunidad de estudiantes y amantes de la ciencia en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.

Powered by:

X