frogcat/2020430.md

## 2020430.md

      
    Raw
  

              2020430.md
            
          
    ダウンローダー

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

<head>
  <meta charset="UTF-8">
  <title>shizuoka-point-cloud</title>
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
  <script src="https://unpkg.com/leaflet.vectorgrid@1.3.0/dist/Leaflet.VectorGrid.bundled.min.js"></script>
</head>

<body>
  <div id="container" style="margin:auto;width:640px;">
    <h1>About</h1>
    <p>これは <a href="https://www.geospatial.jp/ckan/dataset/shizuoka-2019-pointcloud/resource/498f3cf6-d63a-4fd8-a649-48ce40c59e48">
        G空間情報センター 静岡県　富士山南東部・伊豆東部　点群データ : ALB データ</a> を矩形選択してダウンロードするためのツールです</p>

    <h1>Usage</h1>
    <ol>
      <li>地図上のマーカーをドラッグしてください</li>
      <li>選択された矩形に応じて URL list が更新されます</li>
      <li>URL list はダウンローダー等でご利用ください</li>
    </ol>
    <h1>Map</h1>
    <div id="map" style="width:100%;height:640px;"></div>
    <h1>URL list</h1>
    <textarea id="urls" style="width:100%;height:20em;"></textarea>
    <footer style="text-align:center;margin:2em auto;">©2020 <a href='https://github.com/frogcat'>frogcat</a></footer>
  </div>
  <script>
    const inactive = {
      color: "navy",
      weight: 1
    };

    const active = {
      color: "orange",
      weight: 1
    };

    const map = L.map("map", {
      maxZoom: 19,
      zoom: 10,
      center: [34.9223, 138.8457],
    });

    L.tileLayer('https://maps.gsi.go.jp/xyz/hillshademap/{z}/{x}/{y}.png', {
      attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
    }).addTo(map);


    const bounds = L.latLngBounds({
      lat: 35.06147690849717,
      lng: 139.19815063476565
    }, {
      lat: 35.00975247399124,
      lng: 139.1239929199219
    });

    const group = L.geoJson({
      type: "FeatureCollection",
      features: []
    }, {
      style: inactive
    }).addTo(map);

    const update = function() {
      var box = L.latLngBounds(markers.map(m => m.getLatLng()));
      rectangle.setBounds(box);
      var urls = [];
      group.getLayers().forEach((layer, i) => {
        if (layer.getBounds().intersects(box)) {
          layer.setStyle(active);
          urls.push(layer.feature.properties.URL);
        } else {
          layer.setStyle(inactive);
        }
      });
      document.getElementById("urls").textContent = urls.join("\n");
    };

    const rectangle = L.rectangle(bounds, {
      color: "green",
      weight: 1
    }).addTo(map);

    const markers = [
      bounds.getNorthWest(),
      bounds.getSouthEast()
    ].map(p => L.marker(p, {
      draggable: true
    }).on("move", update).addTo(map));

    update();

    Object.assign(L.gridLayer({
      maxZoom: 18,
      maxNativeZoom: 10,
      minZoom: 10
    }), {
      createTile: function(coords) {
        var template = "https://gic-shizuoka.s3-ap-northeast-1.amazonaws.com/2020/Vectortile/ALB00/{z}/{x}/{y}.pbf";
        fetch(L.Util.template(template, coords)).then(a => a.arrayBuffer()).then(buffer => {
          var layers = new VectorTile(new Pbf(buffer)).layers;
          Object.keys(layers).forEach(name => {
            var layer = layers[name];
            for (var i = 0; i < layer.length; i++) {
              group.addData(layer.feature(i).toGeoJSON(coords.x, coords.y, coords.z));
            }
          });
          update();
        });
        return document.createElement('div');
      }
    }).addTo(map);
  </script>
</body>

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

	<head>
	<meta charset="UTF-8">
	<title>shizuoka-point-cloud</title>
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
	<script src="https://unpkg.com/leaflet.vectorgrid@1.3.0/dist/Leaflet.VectorGrid.bundled.min.js"></script>
	</head>

	<body>
	<div id="container" style="margin:auto;width:640px;">
	<h1>About</h1>
	<p>これは <a href="https://www.geospatial.jp/ckan/dataset/shizuoka-2019-pointcloud/resource/498f3cf6-d63a-4fd8-a649-48ce40c59e48">
	G空間情報センター静岡県　富士山南東部・伊豆東部　点群データ : ALB データ</a> を矩形選択してダウンロードするためのツールです</p>

	<h1>Usage</h1>
	<ol>
	<li>地図上のマーカーをドラッグしてください</li>
	<li>選択された矩形に応じて URL list が更新されます</li>
	<li>URL list はダウンローダー等でご利用ください</li>
	</ol>
	<h1>Map</h1>
	<div id="map" style="width:100%;height:640px;"></div>
	<h1>URL list</h1>
	<textarea id="urls" style="width:100%;height:20em;"></textarea>
	<footer style="text-align:center;margin:2em auto;">©2020 <a href='https://github.com/frogcat'>frogcat</a></footer>
	</div>
	<script>
	const inactive = {
	color: "navy",
	weight: 1
	};

	const active = {
	color: "orange",
	weight: 1
	};

	const map = L.map("map", {
	maxZoom: 19,
	zoom: 10,
	center: [34.9223, 138.8457],
	});

	L.tileLayer('https://maps.gsi.go.jp/xyz/hillshademap/{z}/{x}/{y}.png', {
	attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
	}).addTo(map);


	const bounds = L.latLngBounds({
	lat: 35.06147690849717,
	lng: 139.19815063476565
	}, {
	lat: 35.00975247399124,
	lng: 139.1239929199219
	});

	const group = L.geoJson({
	type: "FeatureCollection",
	features: []
	}, {
	style: inactive
	}).addTo(map);

	const update = function() {
	var box = L.latLngBounds(markers.map(m => m.getLatLng()));
	rectangle.setBounds(box);
	var urls = [];
	group.getLayers().forEach((layer, i) => {
	if (layer.getBounds().intersects(box)) {
	layer.setStyle(active);
	urls.push(layer.feature.properties.URL);
	} else {
	layer.setStyle(inactive);
	}
	});
	document.getElementById("urls").textContent = urls.join("\n");
	};

	const rectangle = L.rectangle(bounds, {
	color: "green",
	weight: 1
	}).addTo(map);

	const markers = [
	bounds.getNorthWest(),
	bounds.getSouthEast()
	].map(p => L.marker(p, {
	draggable: true
	}).on("move", update).addTo(map));

	update();

	Object.assign(L.gridLayer({
	maxZoom: 18,
	maxNativeZoom: 10,
	minZoom: 10
	}), {
	createTile: function(coords) {
	var template = "https://gic-shizuoka.s3-ap-northeast-1.amazonaws.com/2020/Vectortile/ALB00/{z}/{x}/{y}.pbf";
	fetch(L.Util.template(template, coords)).then(a => a.arrayBuffer()).then(buffer => {
	var layers = new VectorTile(new Pbf(buffer)).layers;
	Object.keys(layers).forEach(name => {
	var layer = layers[name];
	for (var i = 0; i < layer.length; i++) {
	group.addData(layer.feature(i).toGeoJSON(coords.x, coords.y, coords.z));
	}
	});
	update();
	});
	return document.createElement('div');
	}
	}).addTo(map);
	</script>
	</body>

	</html>