junkor-1011 · August 31, 2020 13:56
diff --git a/readme.md b/readme.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
 <title>geobuf test(canvas)</title>
 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
 <!-- <script src='https://unpkg.com/@turf/turf/turf.min.js'></script> -->
 <!-- <script src="//unpkg.com/[email protected]/build/d3.min.js"></script> -->
 <script src="https://d3js.org/d3.v5.min.js"></script>
 <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
 <!-- <script src="https://unpkg.com/[email protected]/dist/Leaflet.VectorGrid.bundled.min.js"></script> -->
 <script src="https://unpkg.com/[email protected]/leaflet-hash.js"></script>
 <script src="https://unpkg.com/[email protected]/dist/pbf.js" ></script>
 <script src="https://unpkg.com/[email protected]/dist/geobuf.js" ></script>
 <script src="https://unpkg.com/[email protected]/geojson-vt.js"></script>

 <style>
 html,
 body {
  height: 100%;
  padding: 0;
  margin: 0;
  background: rgba(6, 6, 6, 0.8);
  height: 100%;
  font-size: 100%;
 }
 #map {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #333;
 }

 #map canvas {
  width: 256px;
  height: 256px;
  cursor: pointer;
 }

 .leaflet-tile-container canvas {
  pointer-events: auto;
 }
 </style>
 </head>

 <body>
 <div id="map" />


 <script>
  loadGeobuf("sample.buf", renderVectorTiles);

  function renderVectorTiles(data) {
    var tileOptions = {
      maxZoom: 20,
      tolerance: 5,
      extent: 4096,
      buffer: 64,
      debug: 0,
      indexMaxZoom: 0,
      indexMaxPoints: 100000
    };

    const tileIndex = geojsonvt(data, tileOptions);

    const grid = L.gridLayer({
          attribution: "<a href='https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03-v2_3.html'>「国土数値情報(行政区域データ)」(国土交通省)</a>を元に作成",
    });

    grid.createTile = function(coords, done) {
      var pad = 0;

      var canvas = document.createElement("canvas");
      canvas.width = 256;
      canvas.height = 256;
      var ctx = canvas.getContext("2d");

      ctx.strokeStyle = "black";

      var tile = tileIndex.getTile(coords.z, coords.x, coords.y);

      if (!tile) {
        //console.log('tile empty');
        return canvas;
      }

      var features = tile.features;

      for (var i = 0; i < features.length; i++) {
        var feature = features[i],
          type = feature.type;

        ctx.fillStyle = feature.tags.color ? feature.tags.color : "white";
        ctx.beginPath();
        ctx.setLineDash([1, 5]);

        for (var j = 0; j < feature.geometry.length; j++) {
          var geom = feature.geometry[j];

          if (type === 1) {
            ctx.arc(
              ~~geom[0] * ratio + pad,
              geom[1] * ratio + pad,
              2,
              0,
              2 * Math.PI,
              false
            );
            continue;
          }

          for (var k = 0; k < geom.length; k++) {
            var p = geom[k];
            var extent = 4096;

            var x = p[0] / extent * 256;
            var y = p[1] / extent * 256;
            if (k) ctx.lineTo(x + pad, y + pad);
            else ctx.moveTo(x + pad, y + pad);
          }
        }

        if (type === 3 || type === 1) ctx.fill("evenodd");
        ctx.stroke();
      }

      // test async
      setTimeout(function() {
        done(null, canvas);
      }, 0);

      return canvas;
    };

      const map = L.map("map", L.extend({}, L.Hash.parseHash(location.hash)))
      .setView([35.685175, 139.75279950000004], 9)
      .addLayer(grid);
      L.hash(map);
  }

  function loadGeobuf(file, callback) {
    var oReq = new XMLHttpRequest();
    oReq.open("GET", file, true);
    oReq.responseType = "arraybuffer";

    oReq.onload = function(oEvent) {
      var pd = new Pbf(new Uint8Array(oReq.response));
      callback(geobuf.decode(pd));
    };

    oReq.send();
  }
 </script>
 </body>
 </html>
diff --git a/sample.buf b/sample.buf
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
	<title>geobuf test(canvas)</title>
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
	<!-- <script src='https://unpkg.com/@turf/turf/turf.min.js'></script> -->
	<!-- <script src="//unpkg.com/[email protected]/build/d3.min.js"></script> -->
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
	<!-- <script src="https://unpkg.com/[email protected]/dist/Leaflet.VectorGrid.bundled.min.js"></script> -->
	<script src="https://unpkg.com/[email protected]/leaflet-hash.js"></script>
	<script src="https://unpkg.com/[email protected]/dist/pbf.js" ></script>
	<script src="https://unpkg.com/[email protected]/dist/geobuf.js" ></script>
	<script src="https://unpkg.com/[email protected]/geojson-vt.js"></script>

	<style>
	html,
	body {
	height: 100%;
	padding: 0;
	margin: 0;
	background: rgba(6, 6, 6, 0.8);
	height: 100%;
	font-size: 100%;
	}
	#map {
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: #333;
	}

	#map canvas {
	width: 256px;
	height: 256px;
	cursor: pointer;
	}

	.leaflet-tile-container canvas {
	pointer-events: auto;
	}
	</style>
	</head>

	<body>
	<div id="map" />


	<script>
	loadGeobuf("sample.buf", renderVectorTiles);

	function renderVectorTiles(data) {
	var tileOptions = {
	maxZoom: 20,
	tolerance: 5,
	extent: 4096,
	buffer: 64,
	debug: 0,
	indexMaxZoom: 0,
	indexMaxPoints: 100000
	};

	const tileIndex = geojsonvt(data, tileOptions);

	const grid = L.gridLayer({
	attribution: "<a href='https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03-v2_3.html'>「国土数値情報(行政区域データ)」(国土交通省)</a>を元に作成",
	});

	grid.createTile = function(coords, done) {
	var pad = 0;

	var canvas = document.createElement("canvas");
	canvas.width = 256;
	canvas.height = 256;
	var ctx = canvas.getContext("2d");

	ctx.strokeStyle = "black";

	var tile = tileIndex.getTile(coords.z, coords.x, coords.y);

	if (!tile) {
	//console.log('tile empty');
	return canvas;
	}

	var features = tile.features;

	for (var i = 0; i < features.length; i++) {
	var feature = features[i],
	type = feature.type;

	ctx.fillStyle = feature.tags.color ? feature.tags.color : "white";
	ctx.beginPath();
	ctx.setLineDash([1, 5]);

	for (var j = 0; j < feature.geometry.length; j++) {
	var geom = feature.geometry[j];

	if (type === 1) {
	ctx.arc(
	~~geom[0] * ratio + pad,
	geom[1] * ratio + pad,
	2,
	0,
	2 * Math.PI,
	false
	);
	continue;
	}

	for (var k = 0; k < geom.length; k++) {
	var p = geom[k];
	var extent = 4096;

	var x = p[0] / extent * 256;
	var y = p[1] / extent * 256;
	if (k) ctx.lineTo(x + pad, y + pad);
	else ctx.moveTo(x + pad, y + pad);
	}
	}

	if (type === 3 \|\| type === 1) ctx.fill("evenodd");
	ctx.stroke();
	}

	// test async
	setTimeout(function() {
	done(null, canvas);
	}, 0);

	return canvas;
	};

	const map = L.map("map", L.extend({}, L.Hash.parseHash(location.hash)))
	.setView([35.685175, 139.75279950000004], 9)
	.addLayer(grid);
	L.hash(map);
	}

	function loadGeobuf(file, callback) {
	var oReq = new XMLHttpRequest();
	oReq.open("GET", file, true);
	oReq.responseType = "arraybuffer";

	oReq.onload = function(oEvent) {
	var pd = new Pbf(new Uint8Array(oReq.response));
	callback(geobuf.decode(pd));
	};

	oReq.send();
	}
	</script>
	</body>
	</html>