Leafletで少し遊ぶ


正式公開で仕様変更が起きた模様

地理院地図をleafletで表示

ライブサンプル仮置き場
http://jpusergis.site44.com/CJLayer.htm

右でレイヤ切り替え写真は近づく必要あり。

先人に習いとりあえず電子国土をレイヤとして定義するところから始める。
膨大なフレームより、コンパクトなフレームの方が楽だと思うのは中身見るとこから始めるせいか?。

電子国土地図の追加 (使い方例)

var l = L.cyberjapanLayer(),
djbmo = L.cyberjapanLayer('DJBMO'),
relie = L.cyberjapanLayer('RELIEF'),
nlii1 = L.cyberjapanLayer('NLII1'),
nlii2 = L.cyberjapanLayer('NLII2'),
nlii3 = L.cyberjapanLayer('NLII3'),
nlii4 = L.cyberjapanLayer('NLII4');

var map = L.map('map', {
    center: new L.LatLng(36.0, 140.0),
    zoom: 10,
    layers: [ l ]
});
var baseMaps = {
    "色別標高": relie,
    "オルソ": djbmo,
    "国土画像4": nlii4,
    "国土画像2": nlii2,
    "国土画像3": nlii3,
    "国土画像1": nlii1,
    "通常地図": l
};
L.control.layers(baseMaps, null).addTo(map);

中身は下記

まあ、適当にレイヤとして定義、地図でたので満足。

(function (L) {
        L.CyberjapanLayer = L.TileLayer.extend({
            statics: {
                did: {
                    5: "JAIS",
                    6: "JAIS",
                    7: "JAIS",
                    8: "JAIS",
                    9: "BAFD1000K",
                    10: "BAFD1000K",
                    11: "BAFD1000K",
                    12: "BAFD200K",
                    13: "BAFD200K",
                    14: "BAFD200K",
                    15: "DJBMM",
                    16: "DJBMM",
                    17: "DJBMM",
                    18: 'FGD'
                },
                TILES: {
                    RELIEF: {
                        MIN: 5,
                        MAX: 15,
                        EXT: 'png'
                    },
                    DJBMO: {
                        MIN: 15,
                        MAX: 17,
                        EXT: 'jpg'
                    },
                    NLII1: {
                        MIN: 15,
                        MAX: 17,
                        EXT: 'jpg'
                    },
                    NLII2: {
                        MIN: 15,
                        MAX: 17,
                        EXT: 'jpg'
                    },
                    NLII3: {
                        MIN: 15,
                        MAX: 17,
                        EXT: 'jpg'
                    },
                    NLII4: {
                        MIN: 15,
                        MAX: 17,
                        EXT: 'jpg'
                    }
                }
            },
            tilesKey: null,
            tilesInfo: null,
            initialize: function (key) {

                var rep = L.CyberjapanLayer.TILES[key];
                if (rep) {
                    this.tilesKey = key;
                    this.tilesInfo = rep;
                }

                var url = 'http://cyberjapandata.gsi.go.jp/sqras/all/{did}/latest/{z}/{X0}{Y0}/{X1}{Y1}/{X2}{Y2}/{X3}{Y3}/{X4}{Y4}/{X5}{Y5}/{tid}.{ext}';
                var options = L.setOptions(this, { maxZoom: 18, attribution: '<a tatrget="_blank" href="http://cyberjapan.jp/"><img src="http://portal.cyberjapan.jp/site/mapuse4/image/icon01.gif"/></a>' });

                L.TileLayer.prototype.initialize.call(this, url, options);
            },
            getTileUrl: function (e) {
                this._adjustTilePoint(e);
                var tid = ('0000000' + e.x).slice(-7) + ('0000000' + e.y).slice(-7);
                var z = this._getZoomForUrl();
                var didVal = L.CyberjapanLayer.did[z];
                var extVal = 'png';
                if (this.tilesInfo && this.tilesInfo.MIN <= z && z <= this.tilesInfo.MAX) {
                    didVal = this.tilesKey;
                    extVal = this.tilesInfo.EXT;
                }

                return L.Util.template(this._url, L.Util.extend({
                    did: didVal,
                    z: z,
                    x: e.x,
                    y: e.y,
                    tid: tid,
                    X0: tid.charAt(0),
                    X1: tid.charAt(1),
                    X2: tid.charAt(2),
                    X3: tid.charAt(3),
                    X4: tid.charAt(4),
                    X5: tid.charAt(5),
                    X6: tid.charAt(6),
                    Y0: tid.charAt(7),
                    Y1: tid.charAt(8),
                    Y2: tid.charAt(9),
                    Y3: tid.charAt(10),
                    Y4: tid.charAt(11),
                    Y5: tid.charAt(12),
                    Y6: tid.charAt(13),
                    ext: extVal
                }, this.options));
            }
        });
        //静的呼び出しは小文字c 定義は大文字C
        L.cyberjapanLayer = function (url, options) {
            return new L.CyberjapanLayer(url, options);
        };
    })(L);
カテゴリー: 開発 タグ: パーマリンク