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.
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.
Jawaban:
Dengan asumsi Anda menggunakan ol.layer.Vector
dengan ol.source.GeoJSON
Anda 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.GeoJSON
dan 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.
vectorSource.once('change', function(e){...}
?
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
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);
});
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();
}
});
}
source.getState()
selalu kembali 'siap'
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.