OpenLayers では imageloadstart、imegeloadend でレイヤの読み込み開始・終了時に任意の処理を行うことができます。
前提
例えば OpenLayers で地図にレイヤを追加している処理があるとします。
private main(): void {
// 地図
let map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
// レイヤのソース
const layerSrc = new ol.source.TileArcGISRest({
url: 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
});
// レイヤ
const layer = new ol.layer.Image({
source: layerSrc
});
// 地図にレイヤを追加する
map.addLayer(layer);
}
レイヤの読み込み開始/終了を検知する
レイヤの読み込み開始/終了を検知するにはimageloadstart、imegeloadendのイベントハンドラを追加します。
private main(): void {
const self = this;
// 地図
let map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
// レイヤのソース
const layerSrc = new ol.source.TileArcGISRest({
url: 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
});
// 読み込み開始イベントが発生したらコンソールに通知する
layerSrc.on('imageloadstart', () => {
console.log(self.getDateTimeStr() + ": レイヤ読み込み開始");
});
// 読み込み終了イベントが発生したらコンソールに通知する
layerSrc.on('imageloadend', () => {
console.log(self.getDateTimeStr() + ": レイヤ読み込み終了");
});
// レイヤ
const layer = new ol.layer.Image({
source: layerSrc
});
// 地図にレイヤを追加する
map.addLayer(layer);
}
private getDateTimeStr(): string {
const date = new Date();
const year = date.getFullYear().toString();
const month = ('0' + (date.getMonth() + 1)).slice(-2);
const day = ('0' + date.getDate()).slice(-2);
const hour = ('0' + date.getHours()).slice(-2);
const min = ('0' + date.getMinutes()).slice(-2);
const sec = ('0' + date.getSeconds()).slice(-2);
const millisec = ('0' + date.getMilliseconds()).slice(-3);
return year + '/' + month + '/' + day + ' ' + hour + ':' + min + ':' + sec + '.' + millisec;
}
これでブラウザのコンソールにこのように出力されます。
2019/03/11 10:22:50.577: レイヤ読み込み開始
2019/03/11 10:22:51.648: レイヤ読み込み終了
ボトルネックの調査やプログレスバーの表示などに使えそうですね。