電子国土タイル画像の赤と緑をブラウザ側で入れ替え
グレースケール化と同じ。ただし、コードを多少整理した。
HTMLの主要部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>GRB</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <link rel="apple-touch-icon" href="https://si0.twimg.com/profile_images/666603054/r.png"/> <script src='http://stateofthemap.us/js/mapbox.min-dirty.js'></script> <link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.6/mapbox.css' rel='stylesheet' /> <script src='https://raw.github.com/gist/2431946/b7cb70d5e17b03168a1de25d39943ef0d4127a79/modlayer.js'></script> <style> body {padding: 0; margin: 0;} html, body, #map {height: 100%;} </style> </head> <body> <div id="map"></div> <div style="position: absolute; bottom: 4px; right: 4px;"> <a tatrget="_blank" href="http://cyberjapan.jp/"> <img height='27' src="http://cyberjapan.jp/image/logo.gif"/> </a> </div> <script> var filter = function(data) { var val; for (var x = 0; x < 256; x++) { for (var y = 0; y < 256; y++) { val = data[4 * ((y * 256) + x) + 0]; data[4 * ((y * 256) + x) + 0] = data[4 * ((y * 256) + x) + 1]; data[4 * ((y * 256) + x) + 1] = val; } } } gsi = new modLayer(new MM.MapProvider(function(coord) { var did = [null, null, null, null, null, 'RELIEF', 'RELIEF', 'RELIEF', 'RELIEF', 'BAFD1000K', 'BAFD1000K', 'BAFD1000K', 'BAFD200K', 'BAFD200K', 'BAFD200K', 'DJBMO', 'DJBMO', 'DJBMO', 'FGD'][coord.zoom]; var tid = ('0000000' + coord.column).slice(-7) + ('0000000' + coord.row).slice(-7); var url = 'http://allow-any-origin.appspot.com/' + '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 + (coord.zoom > 14 ? '.jpg' : '.png'); return url; }), filter); map = mapbox.map('map', gsi); map.tileSize = {x: 255, y: 255} map.centerzoom({lat: 35.68146889341397, lon: 139.76604980197698}, 16); </script> </body> </html>
写真については、期待通りの表示になる。赤外を使っているわけではないので、それほど劇的に判読しやすくなるわけではない。地図画像についても、興味深い。結果的に、等高線が緑系になる。