frogcat/20161227.md

## 20161227.md

      
    Raw
  

              20161227.md
            
          
    地理院標高タイルを使った等高線生成

  
## index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
  <title>contour</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
  <script>
    var ContourLayer = L.GridLayer.extend({
      initialize: function(url, options) {
        L.Util.setOptions(this, options);
        this._url = url;
      },
      createTile: function(coords, done) {
        var canvas = L.DomUtil.create("canvas", "leaflet-tile");
        canvas.width = 256;
        canvas.height = 256;

        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
          var dem = xhr.responseText.split(/[,\n]/).map(function(a) {
            return Math.floor(parseFloat(a) / 100);
          });
          var ctx = canvas.getContext("2d");
          var img = ctx.createImageData(0x100, 0x100);
          for (var i = 0; i <= 0xffff; i++) {
            if ((i & 0xff) === 0xff || (i & 0xff00) === 0xff00)
              continue;
            if (dem[i] !== dem[i + 1] || dem[i] !== dem[i + 0x100] || dem[i] !== dem[i + 0x101]) {
              img.data[i * 4 + 0] = 0xff;
              img.data[i * 4 + 1] = 0xff;
              img.data[i * 4 + 2] = 0xff;
              img.data[i * 4 + 3] = dem[i] % 5 === 0 ? 0xff : 0x70;
            }
          }
          ctx.putImageData(img, 0, 0);
          if (done) done(null, canvas);
        };
        xhr.onerror = function() {
          if (done) done(null, canvas);
        };
        xhr.open('GET', L.Util.template(this._url, coords));
        xhr.send();
        return canvas;
      }
    });

    L.contourLayer = function(url, options) {
      return new ContourLayer(url, options);
    };
  </script>
</head>

<body>
  <div id="map" style="position:absolute;top:0;left:0;right:0;bottom:0;"></div>

  <script>
    var map = L.map("map", {
      minZoom: 0,
      maxZoom: 14,
      zoom: 12,
      center: [35.3593, 138.7329]
    });
    L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png", {
      attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html'>地理院タイル</a>"
    }).addTo(map);

    L.contourLayer("https://cyberjapandata.gsi.go.jp/xyz/dem/{z}/{x}/{y}.txt", {
      attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html'>地理院タイル</a>",
      minZoom: 0,
      maxZoom: 14
    }).addTo(map);
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
	<title>contour</title>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
	<script>
	var ContourLayer = L.GridLayer.extend({
	initialize: function(url, options) {
	L.Util.setOptions(this, options);
	this._url = url;
	},
	createTile: function(coords, done) {
	var canvas = L.DomUtil.create("canvas", "leaflet-tile");
	canvas.width = 256;
	canvas.height = 256;

	var xhr = new XMLHttpRequest();
	xhr.onload = function() {
	var dem = xhr.responseText.split(/[,\n]/).map(function(a) {
	return Math.floor(parseFloat(a) / 100);
	});
	var ctx = canvas.getContext("2d");
	var img = ctx.createImageData(0x100, 0x100);
	for (var i = 0; i <= 0xffff; i++) {
	if ((i & 0xff) === 0xff \|\| (i & 0xff00) === 0xff00)
	continue;
	if (dem[i] !== dem[i + 1] \|\| dem[i] !== dem[i + 0x100] \|\| dem[i] !== dem[i + 0x101]) {
	img.data[i * 4 + 0] = 0xff;
	img.data[i * 4 + 1] = 0xff;
	img.data[i * 4 + 2] = 0xff;
	img.data[i * 4 + 3] = dem[i] % 5 === 0 ? 0xff : 0x70;
	}
	}
	ctx.putImageData(img, 0, 0);
	if (done) done(null, canvas);
	};
	xhr.onerror = function() {
	if (done) done(null, canvas);
	};
	xhr.open('GET', L.Util.template(this._url, coords));
	xhr.send();
	return canvas;
	}
	});

	L.contourLayer = function(url, options) {
	return new ContourLayer(url, options);
	};
	</script>
	</head>

	<body>
	<div id="map" style="position:absolute;top:0;left:0;right:0;bottom:0;"></div>

	<script>
	var map = L.map("map", {
	minZoom: 0,
	maxZoom: 14,
	zoom: 12,
	center: [35.3593, 138.7329]
	});
	L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png", {
	attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html'>地理院タイル</a>"
	}).addTo(map);

	L.contourLayer("https://cyberjapandata.gsi.go.jp/xyz/dem/{z}/{x}/{y}.txt", {
	attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html'>地理院タイル</a>",
	minZoom: 0,
	maxZoom: 14
	}).addTo(map);
	</script>
	</body>

	</html>