ใช้ layer loadstart และ loadend events ใน OpenLayers 3 หรือไม่

OpenLayers 2 มีเลเยอร์กิจกรรมเหล่านี้ "loadstart & loadend"

สิ่งที่เทียบเท่ากับพวกเขาใน OpenLayers 3

ในขณะที่เลเยอร์เวกเตอร์โหลดและแสดงผลฉันต้องแสดงไอคอนการโหลด

สมมติว่าคุณใช้ol.layer.Vectorกับol.source.GeoJSONคุณสามารถใช้สิ่งนี้:

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

สิ่งนี้แสดงวิธีรับการแจ้งเตือนเมื่อโหลดแหล่งที่มาของเวกเตอร์ ol.source.StaticVectorมันทำงานได้เฉพาะกับแหล่งที่มาจากการสืบทอด ตัวอย่าง ได้แก่และol.source.GeoJSONol.source.KML

นอกจากนี้โปรดทราบว่ารหัสนี้อาจไม่ทำงานอีกต่อไปในอนาคตเมื่อ ol3 จะให้วิธีการที่สอดคล้องกันเพื่อทราบว่า / เมื่อโหลดแหล่งที่มา

ใน ol3 version 3.10.0 มีการเปลี่ยนแปลง ชัดเจนกว่ารุ่นเก่า แต่ยังซับซ้อนกว่า ol2

ดังนั้นสำหรับ TILE (ol.layer.Tile) เลเยอร์ snip ของคุณควรมีลักษณะดังนี้:

//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 แนวทางจะแตกต่างกันเล็กน้อย:

//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 Vector นั้นยิ่งซับซ้อนมากขึ้น:

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

ตรวจสอบโพสต์นี้ มันมีทั้งหมดข้างบน + ซอสำหรับเลเยอร์เวกเตอร์ WFS

ฉันไม่ได้พบในชั้นเรียนและไม่สามารถพบกับกรณีที่ol.source.GeoJSON vectorSource.getState() != 'ready'ดังนั้นฉันจึงลงเอยด้วยการทำสิ่งนี้:

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

คุณยังสามารถใช้getState ()ฟังก์ชั่น

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 4.5.0 สำหรับเลเยอร์เวกเตอร์ฉันไม่พบวิธีจัดการกับแหล่งข้อมูล แต่ฉันใช้สิ่งต่อไปนี้กับเหตุการณ์เลเยอร์:

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

หวังว่ามันจะช่วยได้