【OpenLayers】レイヤの読み込み開始/終了を検知する方法

OpenLayers

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: レイヤ読み込み終了

ボトルネックの調査やプログレスバーの表示などに使えそうですね。

タイトルとURLをコピーしました