ওপেনলায়ার্স 3 এ স্তর লোডস্টার্ট এবং লোডেন্ড ইভেন্টগুলি ব্যবহার করছেন?


19

ওপেনলায়ার্স 2 এর এই স্তর ইভেন্টগুলি "লোডস্টার্ট এবং লোডেন্ড" রয়েছে।

ওপেনলায়ার্স 3 এ তাদের সমতুল্য কী?

যখন কোনও ভেক্টর স্তর লোড হয় এবং রেন্ডার হয়, আমাকে লোডিং আইকনটি দেখাতে হবে।


আপনি কোন ধরণের ভেক্টর উত্স ব্যবহার করেন? আপনি কি দয়া করে আরও কিছু প্রসঙ্গ সরবরাহ করতে পারেন?
এরিলেম

উত্তর:


19

ধরে নিলাম আপনি এটির 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.GeoJSONএবং ol.source.KML

এছাড়াও, নোট করুন যে এই কোডটি ভবিষ্যতে আর কাজ করতে পারে না যখন অল 3 কোনও উত্স লোড হয়েছে কিনা তা জানার একটি ধারাবাহিক উপায় সরবরাহ করবে।


গ্রেট! আমি এটিও খুঁজছিলাম ভাবছেন কেন ওএল 3 এটিকে এখনও অন্তর্ভুক্ত করে না।
জার্মেইন ক্যারিলো

কেন হবে না vectorSource.once('change', function(e){...}?
জোনাটাস ওয়াকার

14

ওল 3 সংস্করণে 3.10.0 জিনিস পরিবর্তন হয়েছে। এটি পুরানো সংস্করণগুলির চেয়ে বেশি স্পষ্ট তবে ওএল 2 এর চেয়ে আরও জটিল।

তাই টাইলের জন্য (ওল। ক্লেয়ার.টাইল) স্তরগুলির জন্য আপনার কোড স্নিপটি দেখতে পাওয়া উচিত:

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

ডাব্লুএমএস স্তরগুলির জন্য পন্থাটি কিছুটা আলাদা is

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

ডাব্লুএফএস ভেক্টর স্তরগুলির জন্য জিনিসগুলি আরও জটিল:

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

এই পোস্টটি দেখুন। এটিতে ডাব্লুএফএস ভেক্টর স্তরগুলির জন্য উপরের সমস্ত + একটি ঝাঁকুনি রয়েছে


1
জিআইএস.এসই তে স্বাগতম! আপনি কি দয়া করে আপনার উত্তরটি প্রসারিত করতে পারেন এবং আপনি যে নিবন্ধটি সংযুক্ত করেছেন এবং একটি অংশের এই প্রশ্নের উত্তরের সাথে কী প্রাসঙ্গিক তা সংক্ষিপ্তসার সরবরাহ করতে পারেন। লিঙ্কটি মারা যাওয়ার পরেও উত্তর এই সাইটের লোকদের সহায়তা করতে সক্ষম হবে।
কার্স্টেন

দুঃখিত newby। সম্পন্ন!!!!!!!!
পাভলো

আপনার কাছে কোন স্তরের ধরণ রয়েছে তা যাচাই করতে, এখানে আপনি ওল 3 গিস.স্ট্যাকেক্সেঞ্জঞ্জ.
ড্যানিয়েল

এটি শীর্ষ উত্তর হতে হবে!
joorodr84

1
প্লিজ ওল ছেলেরা .... KISS man ... KISS ....
ম্যাগনো সি

2

আমি ক্লাস 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);
    });

দয়া করে স্পিন ফাংশনটিও পোস্ট করুন, দেখে মনে হচ্ছে আপনি কেবল সেগুলি
ঘুরছেন

1

আপনি গেটস্টেট () ফাংশনটিও ব্যবহার করতে পারেন

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

আমি #-v4.2.0 ব্যবহার করছি। source.getState()সর্বদা 'প্রস্তুত'
হিশিয়াত

1

ওএল ৪.০.০ তে, ভেক্টর স্তরগুলির জন্য আমি উত্সটির সাথে কাজ করার কোনও উপায় খুঁজে পাইনি, পরিবর্তে আমি স্তর ইভেন্টগুলিতে নিম্নলিখিতটি ব্যবহার করি:

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

আশা করি এটি সাহায্য করতে পারে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.