OpenLayers 2 में ये परत घटनाएं हैं "लोडस्टार्ट और लोडेंड।"
OpenLayers 3 में उनके बराबर क्या है?
जबकि एक वेक्टर परत लोड होती है और प्रदान की जाती है, मुझे एक लोडिंग आइकन दिखाना होगा।
OpenLayers 2 में ये परत घटनाएं हैं "लोडस्टार्ट और लोडेंड।"
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.GeoJSON
और ol.source.KML
।
यह भी ध्यान दें कि यह कोड भविष्य में काम नहीं कर सकता है जब ol3 एक स्रोत लोड होने पर पता करने के लिए एक सुसंगत तरीका प्रदान करेगा।
vectorSource.once('change', function(e){...}
?
Ol3 संस्करण में 3.10.0 चीजें बदल गई हैं। तो पुराने संस्करणों की तुलना में अधिक स्पष्ट है लेकिन फिर भी ol2 की तुलना में अधिक जटिल है।
तो TILE (ol.layer.Tile) लेयर्स के लिए आपका कोड स्निप जैसा दिखना चाहिए:
//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 वेक्टर लेयर्स के लिए चीजें और भी जटिल हैं:
//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();
}
});
}
source.getState()
हमेशा 'तैयार' लौटता है
ओएल 4.5.0 पर, वेक्टर परतों के लिए मुझे स्रोत से निपटने का एक तरीका नहीं मिला है, इसके बजाय मैं परत घटनाओं पर निम्नलिखित का उपयोग करता हूं:
if (layer instanceof ol.layer.Vector) {
layer.on("precompose", function () {
$("#ajaxSpinnerImage").show();
});
layer.on("render", function () {
$("#ajaxSpinnerImage").hide();
});
}
आशा है कि यह मदद कर सकता है।