ダウンローダー
Created
April 30, 2020 10:17
-
-
Save frogcat/c16b2c4cab28c9e0e4e39e6be6a082c0 to your computer and use it in GitHub Desktop.
ダウンローダー
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment