Skip to content

Instantly share code, notes, and snippets.

@amay077
Last active September 8, 2017 10:20
Show Gist options
  • Select an option

  • Save amay077/7317192 to your computer and use it in GitHub Desktop.

Select an option

Save amay077/7317192 to your computer and use it in GitHub Desktop.
地理院地図の標高タイル(CSV)を描画してみた ref: http://qiita.com/amay077/items/ef41e8feef3bafd15453
map.mapTypes.set("GsiMaps", {
name:"標高タイル",
tileSize:new google.maps.Size(256,256),
minZoom:14, // 標高タイルは Lv:14 しか用意されてないので
maxZoom:14,
getTile:function(tileCoord, zoom, ownerDocument) {
// 普通は img だけど、標高タイルは CSV で画素毎の標高値が取得できるので、
// クライアント側で描画するために Canvas を使う
var canvas = ownerDocument.createElement("canvas");
canvas.width = 256;
canvas.height = 256;
var x = (tileCoord.x % Math.pow(2, zoom)).toString();
var y = tileCoord.y.toString();
// 各画素の標高値を取得する
canvas.tileUrl = "http://cyberjapandata.gsi.go.jp/xyz/dem/" + zoom + "/" + x + "/" + y + ".txt";
// 標高を描画する
renderDem(canvas);
renderedTiles[canvas.tileUrl] = canvas; // タイル再描画の為にとっておく
return canvas;
}
});
// 標高タイルを描画する
function renderDem(canvas) {
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 256, 256);
$.get(canvas.tileUrl, function(data) {
// CSV が得られるのでパース
var lines = data.split(/\r\n|\r|\n/);
for (var i = 0; i < lines.length; i+=dotSize) {
var cols = lines[i].split(',');
for (var j = 0; j < cols.length; j+=dotSize) {
if (cols[j] == 'e') { // エラーの画素には 'e' が入ってる
continue;
}
// 標高0m を startColor、標高1000mを endColor としたグラデーション色を設定する。
ctx.fillStyle = $.xcolor
.gradientlevel(startColor, endColor, cols[j] / 1000.0 * 100.0, 100)
.getCSS();
ctx.fillRect(j, i, dotSize, dotSize);
}
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment