Menggunakan layer loadstart & loadend events di OpenLayers 3?

19

OpenLayers 2 memiliki acara layer ini "loadstart & loadend."

Apa yang setara dengan mereka di OpenLayers 3?

Sementara layer vektor memuat dan ditampilkan, saya perlu menampilkan ikon pemuatan.

Mariam Malak
sumber
Jenis sumber vektor apa yang Anda gunakan? Bisakah Anda memberikan sedikit lebih banyak konteks?
erilem
Pertanyaan terkait: Peristiwa pemicu setelah lapisan dimuat
Pete

Jawaban:

19

Dengan asumsi Anda menggunakan ol.layer.Vectordengan ol.source.GeoJSONAnda dapat menggunakan sesuatu seperti ini:

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

Ini menunjukkan cara mendapatkan notifikasi ketika sumber vektor dimuat. Ini hanya bekerja dengan sumber yang diwarisi dari ol.source.StaticVector. Contohnya termasuk ol.source.GeoJSONdan ol.source.KML.

Juga, perhatikan bahwa kode ini mungkin tidak lagi berfungsi di masa mendatang ketika ol3 akan memberikan cara yang konsisten untuk mengetahui apakah / ketika suatu sumber dimuat.

erilem
sumber
Bagus! Saya juga mencari ini. Ingin tahu mengapa OL3 belum memasukkannya.
Germán Carrillo
Mengapa tidak vectorSource.once('change', function(e){...}?
Jonatas Walker
14

Dalam ol3 versi 3.10.0 hal telah berubah. Jadi lebih jelas daripada versi yang lebih lama tetapi masih lebih rumit daripada ol2.

Jadi untuk lapisan TILE (ol.layer.Tile) snip kode Anda akan terlihat seperti:

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

sedangkan untuk lapisan WMS pendekatannya sedikit berbeda:

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

Untuk lapisan Vektor WFS, masalahnya bahkan lebih rumit:

//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>";
}

periksa posting ini. ia memiliki semua + biola untuk lapisan vektor WFS

pavlos
sumber
1
Selamat datang di GIS.SE! Bisakah Anda memperluas jawaban Anda dan memberikan sinopsis singkat dari artikel yang Anda tautkan dan bagian mana yang relevan dengan jawaban pertanyaan ini. Dengan cara ini jawabannya akan dapat membantu orang di situs ini, bahkan setelah tautannya mati.
Kersten
maaf baru. selesai !!!!!!!!
pavlos
untuk memeriksa jenis lapisan yang Anda miliki, berikut ini cara van Anda melakukannya untuk OL3 gis.stackexchange.com/a/140852/63141
Daniël Tulp
Ini harus menjadi jawaban teratas!
joaorodr84
1
Tolong, teman-teman ... KISS man ... KISS ....
Magno C
2

Saya belum menemukan kelas ol.source.GeoJSON, dan tidak dapat menemukan kasus di mana vectorSource.getState() != 'ready'. Jadi saya akhirnya melakukan sesuatu seperti ini:

    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);
    });
Damien
sumber
tolong juga posting fungsi putaran, sepertinya Anda hanya memutar mereka dan tidak menghentikan pemintalan saat selesai memuat lapisan
Daniël Tulp
1

Anda juga dapat menggunakan getState () function

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();
            }
        });
    }
Daniël Tulp
sumber
Saya menggunakan ol-v4.2.0. source.getState()selalu kembali 'siap'
himyata
1

Pada OL 4.5.0, untuk layer vektor saya belum menemukan cara untuk berurusan dengan sumbernya, sebagai gantinya saya menggunakan yang berikut ini pada event layer:

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

Semoga bisa membantu.

jean pierre huart
sumber