Leaflet, Modest Maps, mapbox.js での電子国土画像タイルの表現方法

Leaflet, Modest Maps, mapbox.js で電子国土画像タイルを表示してみた。OpenLayers はオリジナルの電子国土Webシステムが使用しているので割愛している。

• Leaflet http://www.handygeospatial.info/2012/10/15/
• Modest Maps http://www.handygeospatial.info/2012/10/25/
• mapbox.js http://www.handygeospatial.info/2012/10/28/

それぞれについて、電子国土画像タイルレイヤを記載する方法を抽出してみると、次のとおり。

Leaflet

独自拡張のテンプレート表現で無理やり L.TileLayer を作ったあと、L.TileLayer#getTileUrl をモンキーパッチするイメージだ。比較的ダーティなやり方だと思う。

    var l = L.tileLayer('http://cyberjapandata.gsi.go.jp/sqras/all/{did}/latest/{z}/{X0}{Y0}/{X1}{Y1}/{X2}{Y2}/{X3}{Y3}/{X4}{Y4}/{X5}{Y5}/{tid}.png', {maxZoom: 18, attribution: '<a tatrget="_blank" href="http://cyberjapan.jp/"><img src="http://cyberjapan.jp/image/logo.gif"/></a>'});
    l.getTileUrl = function (e) {
      this._adjustTilePoint(e);
      var tid = ('0000000' + e.x).slice(-7) + ('0000000' + e.y).slice(-7);
      return  L.Util.template(this._url, L.Util.extend({
          did: {
		        5: "RELIEF",
		        6: "RELIEF",
		        7: "RELIEF",
		        8: "RELIEF",
		        9: "BAFD1000K",
		        10: "BAFD1000K",
		        11: "BAFD1000K",
		        12: "BAFD200K",
		        13: "BAFD200K",
		        14: "BAFD200K",
		        15: "DJBMM",
		        16: "DJBMM",
		        17: "DJBMM",
            18: 'FGD'
	        }[this._getZoomForUrl()],
          z: this._getZoomForUrl(),
          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),
        },this.options));}
    l.addTo(map);

via 電子国土リフ

Modest Maps

MM.MapProvider が、タイルの column, row, zoom から URL を算出する関数をコンストラクタの引数として取ってくれる。比較的クリーンなやり方である。

    var layer = new MM.Layer(new MM.MapProvider(function(coord) {
      var did = [null, null, null, null, null, 
                 'RELIEF', 'RELIEF', 'RELIEF', 'RELIEF',
                 'BAFD1000K', 'BAFD1000K', 'BAFD1000K',
                 'BAFD200K', 'BAFD200K', 'BAFD200K',
                 'DJBMM', 'DJBMM', 'DJBMM', 'FGD'][coord.zoom];
      var tid = ('0000000' + coord.column).slice(-7) + 
                ('0000000' + coord.row).slice(-7);
      var url = 'http://cyberjapandata.gsi.go.jp/sqras/all/' + did + 
        '/latest/' + coord.zoom + 
        '/' + tid.charAt(0) + tid.charAt(7) +
        '/' + tid.charAt(1) + tid.charAt(8) +
        '/' + tid.charAt(2) + tid.charAt(9) +
        '/' + tid.charAt(3) + tid.charAt(10) +
        '/' + tid.charAt(4) + tid.charAt(11) +
        '/' + tid.charAt(5) + tid.charAt(12) +
        '/' + tid + '.png';
      return url;
    }));

via 電子国土MODS

mapbox.js

実は、このレイヤでは Modest Maps をそのままつかっているので、やりかたは Modest Maps と全く同じ。なお、メソッドの中で、定数的な役割を持っている did を宣言するのはちょっと気持ち悪い。JavaScript 処理系がうまくくくりだしてくれるといいけれども。

    var layer = new MM.Layer(new MM.MapProvider(function(coord) {
      var did = [null, null, null, null, null, 
                 'RELIEF', 'RELIEF', 'RELIEF', 'RELIEF',
                 'BAFD1000K', 'BAFD1000K', 'BAFD1000K',
                 'BAFD200K', 'BAFD200K', 'BAFD200K',
                 'DJBMM', 'DJBMM', 'DJBMM', 'FGD'][coord.zoom];
      var tid = ('0000000' + coord.column).slice(-7) + 
                ('0000000' + coord.row).slice(-7);
      var url = 'http://cyberjapandata.gsi.go.jp/sqras/all/' + did + 
        '/latest/' + coord.zoom + 
        '/' + tid.charAt(0) + tid.charAt(7) +
        '/' + tid.charAt(1) + tid.charAt(8) +
        '/' + tid.charAt(2) + tid.charAt(9) +
        '/' + tid.charAt(3) + tid.charAt(10) +
        '/' + tid.charAt(4) + tid.charAt(11) +
        '/' + tid.charAt(5) + tid.charAt(12) +
        '/' + tid + '.png';
      return url;
    }));

via 電子国土MBX