Menggunakan layer loadstart & loadend events di OpenLayers 3?


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.


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


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

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

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.