Leaflet/JavaScriptでちょっとした確認


JavaScriptのちょっとした確認用の砂場が欲しい時
canvas-tile

http://jsfiddle.net/
などで簡単に確認できる。
外部リソースにJS/CSSをセットしてHTML/CSS/JSを記述してRunで実行される。
※External Resourcesと書いてある部分

例えばLeafletでタイルのxyzを確認したいとき
[HTML]

<div id="map"></div>

[CSS]

html, body, #map {
    width: 100%;
    height: 100%;
    margin: 0px;
}

[JavaScript]

var map = L.map('map').setView([36, 140], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

var TestCanvas = L.TileLayer.Canvas.extend({

    drawTile: function(canvas, tilePoint) {
        var ctx = canvas.getContext('2d');
        ctx.font="24px Arial";
        ctx.fillText( "L" + this._map.getZoom() + 
                     " X" + tilePoint.x + 
                     " Y" + tilePoint.y,50,50);

        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.strokeRect(10, 10, 245, 245);

    }
});

(new TestCanvas()).addTo(map);
カテゴリー: 開発 タグ: パーマリンク