GSJMap - 使用法

レイヤー

背景レイヤー

 デフォルトでは地理院地図(標準)が背景レイヤーとして表示されます.背景レイヤーは,複数のレイヤーを登録して切り替えて使うことができます.

背景レイヤーの設定

 背景レイヤーの設定は,Map生成時に行う方法と,生成後にaddBase()メソッドで追加する方法の2つの方法があります.

・basesフィールド

 map()関数のパラメータオブジェクトのbasesフィールドに,Layerオブジェクトの配列として指定します.配列内の最後のものがデフォルト表示となります.なお,GSJMapのデフォルト表示で使われている地理院地図(標準)は,GSJ.DEFAULT_BASEで取得することができます.

・addBase()関数

 Map生成後でも,MapオブジェクトのaddBase()関数で背景レイヤーを追加することができます.

背景レイヤーの切り替え

 背景レイヤーは,MapオブジェクトのsetBase()関数で切り替えることができます.この引数にはLayerオブジェクトのidまたはtitle属性の値を指定します(id属性が優先されます).

背景レイヤーの検索

 MapオブジェクトのfindBase()関数で背景レイヤーを検索することができます.この引数にはLayerオブジェクトのidまたはtitle属性の値を指定します(id属性が優先されます).最初に該当したものが返されます.
 引数を省略すると,全ての背景レイヤーのリストが返されます.

背景レイヤーの削除 2014-07-10時点で未実装

 MapオブジェクトのdelBase()関数で背景レイヤーを検索することができます.引数にはLayerオブジェクトを与えます.

サンプル( leaflet5_base.html ) 背景レイヤー

        var
                map;

        map = GSJ.map( {
                owner: 'map',
                bases: [ GSJ.DEFAULT_BASE, {
                        id: 'OpenAerialTiles',
                    url: 'http://ttiles01.mqcdn.com/tiles/1.0.0/vy/sat/{z}/{x}/{y}.png',
                    title: 'MapQuest Open Aerial Tiles',
                        attribution: 'MapQuest',
                    attribution_url: 'http://developer.mapquest.com/web/products/open/map',
                    minZoom: 0,
                    maxZoom: 13,
                } ],
              center: { lat: 34.637, lng: 137.409 },
          zoom: 8,
        } );

        map.addBase( {
                id: 'OpenStreetMap',
            url: 'http://tile.openstreetmap.org/{z}/{x}/{y}.png',
        title: 'Open Street Map',
                attribution: 'Open Street Map',
        attribution_url: 'http://osm.jp/',
            minZoom: 0,
        maxZoom: 13,
        } );

        map.setBase( 'OpenAerialTiles' );

        // 背景レイヤーをidで検索
        showInfo( '#out1', map.findBase( '地理院地図(標準)' ) );

        // 背景レイヤーをtitleで検索
        showInfo( '#out2', map.findBase( 'Open Street Map' ) );

        // 背景レイヤーを全て取得
//      console.log( map.findBase() );

//      map.delBase( 'OpenAerialTiles' );
//      未実装


        function showInfo( selector, aLayer ){
                var
                        _s = '[' + aLayer.title + '] ';

                _s += 'id: ' + aLayer.id + ', url: ' + aLayer.url;
                document.querySelector( selector ).innerHTML = _s;
        }

マーカーとポップアップ

ポップアップ

 地図上にポップアップウィンドウを表示させるには,Map.addPopup()メソッドを利用します.このメソッドの第1引数には位置を表すLatLngオブジェクトを,第2引数には表示させる文字列を指定します.

プロミス

 GSJMapでは,プロミスという仕組みを導入しました.プロミスは,生成時点ではまだ完了していない処理を表現するオブジェクトで,非同期処理を簡潔に記述するために役立ちます.地図アプリではとくに,地図データはもちろん標高データ,検索データ等多くのデータを非同期に取得して扱いますので,プロミスを利用すると,ネスティングが深くなるのを避けて分かりやすく記述できるようになります.
 JavaScriptの次期バージョン(ES6)で導入される予定で,ChormeやFirefoxではすでに実装されています.GSJMapでは,ブラウザがプロミスを実装している場合はそれを使用し,実装されてない場合は独自実装したものを使用します.

利用

 GSJMapでは,ファイルのロードなどいくつかの関数がプロミスを返します.それらを利用するのに特に難しいことはなく,従来なら関数呼び出し時に指定するコールバック関数を,別のthen()メソッドで指定するだけです.
 以下は,GSJ.loadImage()関数を使った例です.この関数は引数に画像のURLを受け取り,戻り値には画像ファイルをロードするプロミスを返します.プロミスのthen()メソッドでは,コールバック関数を2つ指定することができ,1つ目が成功時,2つ目が失敗時の処理となります.GSJ.loadImage() の場合は,成功時にはコールバック関数の引数にImageオブジェクトが渡され,失敗時にはエラーメッセージが渡されます.

    var
        imgsrc = 'https://gbank.gsj.jp/seamless/tilemap/detailed/glfn/11/802/1816.png';

    GSJ.loadImage( imgsrc ).then(
            function( img ) {
                var
                    ct = document.getElementById( 'canvas1' ).getContext( '2d' );
                ct.drawImage( img, 0, 0 );
            },
            function( error ) {
                    alert( error );
            }
    );

 また,then()メソッドは新たにプロミスを返します.このプロミスは,最初のプロミスが成功または失敗したときに実行されるプロミスです.最初のプロミスのコールバック関数で値を返すと,then()が返すプロミスで受け取ることができます.このことを利用してプロミスのメソッドチェーンを作ることができます.
 以下は,前の例を利用して最後にコンソールにメッセージを記述する例です.

        GSJ.loadImage( imgsrc ).then(
                function( img ) {
                        var
                                ct = document.getElementById( 'canvas1' ).getContext( '2d' );
                        ct.drawImage( img, 0, 0 );
                },
                function( error ) {
                        alert( error );
                }
        ).then( function() {
                // 以下は,成功か失敗かによらず実行されます
                console.log( '画像ロード終了');
        } );

 プロミスオブジェクトは独自に生成することも可能です.GSJMapでプロミスを生成するには GSJ.promise() 関数を使用します(ES6では,Promiseコンストラクタを使用します).GSJ.promise()関数は引数に関数を1つだけ取り,この関数は2つの引数resolveとrejectをとり,この中で非同期処理を含む部分の処理を記述します.そして成功した場合はresolveで指定した関数を,失敗した場合はrejectで指定した関数をコールします.
 GSJ.loadImageの内容を記述すると以下のようになります.

        promise = GSJ.promise( function( resolve, reject ) {
                var
                        img = new Image();
                img.crossOrigin = 'anonymous';
                img.onload = function() {
                        resolve( this );                        // 成功時にはresolve()をコール
                };
                img.onerror = function() {
                        reject( this );                         // 失敗時にはreject()をコール
                }
                img.src = imgsrc;
        } );

2014年9月23日更新