世界の測量

Sibling of "Relevant, Timely, and Accurate, " but much lighter and shorter ※自らの所属する組織の見解を示すものでない

電子国土タイル画像の赤と緑をブラウザ側で入れ替え

グレースケール化と同じ。ただし、コードを多少整理した。

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>

写真については、期待通りの表示になる。赤外を使っているわけではないので、それほど劇的に判読しやすくなるわけではない。地図画像についても、興味深い。結果的に、等高線が緑系になる。