地理院地図をleafletで表示


前記事
Leafletで少し遊ぶ

新版が10月ラストで出ており2013年度でβ終了⇒本運用へ
で仕様変更があり、普通のタイル仕様になっていたのでまさに定義ファイルへ書き換え。
順次整備中となっているよう。

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

gsi-map

使い方

std = L.gsiLayer('std'),
pale = L.gsiLayer('pale'),
blank = L.gsiLayer('blank'),
english = L.gsiLayer('english'),
relief = L.gsiLayer('relief'),
ort = L.gsiLayer('ort'),
gazo1 = L.gsiLayer('gazo1');
gazo2 = L.gsiLayer('gazo2');
gazo3 = L.gsiLayer('gazo3');
gazo4 = L.gsiLayer('gazo4');

var map = L.map('map', {
    center: new L.LatLng(36.0, 140.0),
    zoom: 10,
    layers: [std]
});

var baseMaps = {};
baseMaps[std.discription] = std;
baseMaps[pale.discription] = pale;
baseMaps[blank.discription] = blank;
baseMaps[english.discription] = english;
baseMaps[relief.discription] = relief;

var overlay = {};
overlay[ort.discription] = ort;
overlay[gazo1.discription] = gazo1;
overlay[gazo2.discription] = gazo2;
overlay[gazo3.discription] = gazo3;
overlay[gazo4.discription] = gazo4;

L.control.layers(baseMaps, overlay).addTo(map);

コードは下記

定義だけおいとく形に

(function (L) {
    L.GsiLayer = L.TileLayer.extend({
        statics: {
            type: {
                std: { ext: 'png', min: 2, max: 17, discription: '電子国土基本図(地図情報)' },
                pale: { ext: 'png', min: 12, max: 17, discription: '淡色地図' },
                blank: { ext: 'png', min: 5, max: 14, discription: '白地図' },
                english: { ext: 'png', min: 5, max: 8, discription: 'English Version' },
                relief: { ext: 'png', min: 5, max: 15, discription: '色別標高図' },
                ort: { ext: 'jpg', min: 15, max: 17, discription: '電子国土基本図(オルソ画像)' },
                gazo1: { ext: 'jpg', min: 15, max: 17, discription: '国土画像情報(第一期:1974~1978年撮影' },
                gazo2: { ext: 'jpg', min: 15, max: 17, discription: '国土画像情報(第二期:1979~1983年撮影' },
                gazo3: { ext: 'jpg', min: 15, max: 17, discription: '国土画像情報(第三期:1984~1986年撮影' },
                gazo4: { ext: 'jpg', min: 15, max: 17, discription: '国土画像情報(第四期:1988~1990年撮影' }
            }//end type
        }, //end statics
        mapkey: null,
        discription: null,
        initialize: function (key) {
            var type = L.GsiLayer.type[key];
            if (!type)
                return;
            this.mapkey = key
            this.discription = type.discription
            var url = "http://cyberjapandata.gsi.go.jp/xyz/" + key + "/{z}/{x}/{y}." + type.ext;
            var options = L.setOptions(this, {
                attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>国土地理院</a>",
                maxZoom: type.max,
                minZoom: type.min,
                errorTileUrl: 'img/nodata.gif'
            });
            L.TileLayer.prototype.initialize.call(this, url, options);
        } //end init
    }); //end extend
    L.gsiLayer = function (key) {
        return new L.GsiLayer(key);
    };
})(L);
カテゴリー: 開発 タグ: パーマリンク