高度なトピック

class MyDemProvider extends mapray.DemProvider {
    constructor()
    {
        super();
        // 初期化
        ...
    }

    requestTile( z, x, y, callback )  // override
    {
        var req = new XMLHttpRequest();
        req.open( 'GET', this._makeURL( z, x, y ), true );
        req.responseType = 'arraybuffer';
        req.onloadend = function ( event ) {
            var status = req.status;
            if ( req.response && (status >= 200 && status < 300 || status == 304) ) {
                callback( req.response );  // データ取得に成功 (ArrayBuffer インスタンスを返す)
            }
            else {
                callback( null );  // データ取得に失敗、または取り消し
            }
        };
        req.send();
        return req;  // 要求 ID
    }

    cancelRequest( id )  // override
    {
        id.abort();  // XMLHttpRequest#abort() でリクエスト取り消し
    }

    _makeURL( z, x, y )  // タイル z/x/y の DEM データの URL を返す
    {
        return 'http://localhost/dem/' + z + '/' + x + '/' + y + '.bin';
    }
}

class MyImageProvider extends mapray.ImageProvider {
    constructor()
    {
        super();
        // 初期化
        ...
    }

    requestTile( z, x, y, callback )  // override
    {
        var image = new Image();
        image.onload  = function() { callback( image ); };
        image.onerror = function() { callback( null ); };
        image.src = this._makeURL( z, x, y );
        return image;  // 要求 ID
    }

    cancelRequest( id )  // override
    {
        // 取り消し方法はないので何もしない
    }

    getImageSize()  // override
    {
        return 256;  // 画像サイズは 256×256
    }

    getZoomLevelRange()  // override
    {
        return new mapray.ImageProvider.Range( 0, 10 );  // ズームレベルは 0 から 10
    }

    _makeURL( z, x, y )  // タイル z/x/y の地図画像データの URL を返す
    {
        return 'http://localhost/map/' + z + '/' + x + '/' + y + '.png';
    }
}