OpenLayers 3'te katman loadtart ve loadend olaylarını mı kullanıyorsunuz?


Yanıtlar:


19

Bir ol.layer.Vectorile birlikte kullandığınızı varsayarsak , bunun ol.source.GeoJSONgibi bir şey kullanabilirsiniz:

var vectorSource = new ol.source.GeoJSON({
  projection : 'EPSG:3857',
  url: 'http://examples.org/fearures.json'
});

var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

map.addLayer(vectorLayer);

// show loading icon
// ...

var listenerKey = vectorSource.on('change', function(e) {
  if (vectorSource.getState() == 'ready') {
    // hide loading icon
    // ...
    // and unregister the "change" listener 
    ol.Observable.unByKey(listenerKey);
    // or vectorSource.unByKey(listenerKey) if
    // you don't use the current master branch
    // of ol3
  }
});

Bu, vektör kaynağı yüklendiğinde nasıl bildirim alınacağını gösterir. Yalnızca kaynağından devralınan kaynaklarla çalışır ol.source.StaticVector. Örnekler arasında ol.source.GeoJSONve ol.source.KML.

Ayrıca, ol3'ün bir kaynağın yüklenip yüklenmediğini / ne zaman yüklendiğini bilmek için tutarlı bir yol sağlayacağı zaman bu kodun gelecekte çalışmayabileceğini unutmayın.


Harika! Ben de bunu arıyordum. OL3'ün neden henüz içermediğini merak ediyorum.
Germán Carrillo

Neden olmasın vectorSource.once('change', function(e){...}?
Jonatas Walker

14

OL3 3.10.0 sürümünde işler değişti. Yani eski versiyonlardan daha açık ama yine de ol2'den daha karmaşık.

Yani TILE (ol.layer.Tile) katmanları için kod pasajınız şöyle görünmelidir:

//declare the layer
var osmLayer =  new ol.layer.Tile({
  source: new ol.source.OSM()
});
//asign the listeners on the source of tile layer
osmLayer.getSource().on('tileloadstart', function(event) {
//replace with your custom action
document.getElementById('tilesloaderindicatorimg').src = 'css/images/tree_loading.gif';
 });

osmLayer.getSource().on('tileloadend', function(event) {
//replace with your custom action
document.getElementById('tilesloaderindicatorimg').src = 'css/images/ok.png';
 });
osmLayer.getSource().on('tileloaderror', function(event) {
//replace with your custom action        
document.getElementById('tilesloaderindicatorimg').src = 'css/images/no.png';
 });

WMS katmanları için yaklaşım biraz farklıdır:

//declare the layer
var wmsLayer =   new ol.layer.Image({
source: new ol.source.ImageWMS({
  attributions: [new ol.Attribution({
    html: '© ' +
        '<a href="http://www.geo.admin.ch/internet/geoportal/' +
        'en/home.html">' +
        'National parks / geo.admin.ch</a>'
  })],
  crossOrigin: 'anonymous',
  params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'},
  serverType: 'mapserver',
  url: 'http://wms.geo.admin.ch/'
})
});

//and now asign the listeners on the source of it
var lyrSource = wmsLayer.getSource();
  lyrSource.on('imageloadstart', function(event) {
  console.log('imageloadstart event',event);
  //replace with your custom action
  var elemId = event.target.params_.ELEMENTID;
  document.getElementById(elemId).src = 'css/images/tree_loading.gif'; 
  });

  lyrSource.on('imageloadend', function(event) {
   console.log('imageloadend event',event);
  //replace with your custom action
  var elemId = event.target.params_.ELEMENTID;
  document.getElementById(elemId).src = 'css/images/ok.png'; 
  });

  lyrSource.on('imageloaderror', function(event) {
   console.log('imageloaderror event',event);
  //replace with your custom action
  var elemId = event.target.params_.ELEMENTID;
  document.getElementById(elemId).src = 'css/images/no.png'; 
  }); 

WFS Vektör katmanları için işler daha da karmaşıktır:

//declare the vector source
sourceVector = new ol.source.Vector({
    loader: function (extent) {
        //START LOADING
        //place here any actions on start loading layer
        document.getElementById('laodingcont').innerHTML = "<font color='orange'>start loading.....</font>";
        $.ajax('http://demo.opengeo.org/geoserver/wfs', {
            type: 'GET',
            data: {
                service: 'WFS',
                version: '1.1.0',
                request: 'GetFeature',
                typename: 'water_areas',
                srsname: 'EPSG:3857',
                bbox: extent.join(',') + ',EPSG:3857'
            }
        }).done(loadFeatures)
            .fail(function () {
            //FAIL LOADING
            //place here any actions on fail loading layer
            document.getElementById('laodingcont').innerHTML = "<font color='red'>error loading vector layer.</font>";
        });
    },
    strategy: ol.loadingstrategy.bbox
});

//once we have a success responce, we need to parse it and add fetaures on map
function loadFeatures(response) {
formatWFS = new ol.format.WFS(),
sourceVector.addFeatures(formatWFS.readFeatures(response));
 //FINISH LOADING
document.getElementById('laodingcont').innerHTML = "<font color='green'>finish loading vector layer.</font>";
}

bu gönderiyi kontrol et. yukarıdakilerin hepsine sahiptir + WFS vektör katmanları için bir keman


1
GIS.SE'ye Hoşgeldiniz! Lütfen cevabınızı genişletebilir ve bağlantı verdiğiniz makalenin kısa bir özetini ve bu sorunun cevabının hangi kısmıyla alakalı olduğunu söyleyebilir misiniz? Bu şekilde yanıt, bağlantı sona erdikten sonra bile bu sitedeki kullanıcılara yardımcı olabilir.
Kersten

üzgünüm acemi. yapılan !!!!!!!!
pavlos

hangi katman türüne sahip olduğunuzu kontrol etmek için, bunu OL3 gis.stackexchange.com/a/140852/63141
Daniël Tulp

Bu en iyi cevap olmalı!
joaorodr84

1
Lütfen OL çocuklar .... ÖPÜCÜK adam ... ÖPÜCÜK ....
Magno C

2

Sınıfı ol.source.GeoJSONbulamadım ve nerede bir dava bulamadım vectorSource.getState() != 'ready'. Böylece böyle bir şey yaptım:

    function spin(active) {
        if (active) {
            // start spinning the spinner
        } else {
            // stop spinning the spinner
        }
    }

    // Toggle spinner on layer loading
    layer.on('change', function() {
        spin();
    });
    layer.getSource().on('change', function() {
        spin(false);
    });

lütfen spin fonksiyonunu da gönderin, sadece onları döndürdüğünüz ve katmanı yüklemeyi bitirdiğinizde dönüşü durdurmuyorsunuz gibi görünüyor
Daniël Tulp

1

getState () işlevini de kullanabilirsiniz

if (source instanceof ol.source.Vector) {
        source.on("change", function () {
            //console.log("Vector change, state: " + source.getState());
            switch (source.getState()) {
                case "loading":
                    $("#ajaxSpinnerImage").show();
                    break;
                default:
                    $("#ajaxSpinnerImage").hide();
            }
        });
    }

Ol-v4.2.0 kullanıyorum. source.getState()her zaman 'hazır' döndürür
himyata

1

OL 4.5.0'da, vektör katmanları için kaynakla başa çıkmanın bir yolunu bulamadım, bunun yerine katman olaylarında aşağıdakileri kullanıyorum:

if (layer instanceof ol.layer.Vector) {
    layer.on("precompose", function () {
              $("#ajaxSpinnerImage").show();
            });
    layer.on("render", function () {
              $("#ajaxSpinnerImage").hide();
            });
}

Umarım yardımcı olabilir.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.