itowns
Version:
A JS/WebGL framework for 3D geospatial data visualization
98 lines (86 loc) • 3.98 kB
HTML
<html>
<head>
<title>Cloud Optimized GeoTiff</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/example.css">
<link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
<style type="text/css">
#description {
z-index: 2;
left: 10px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
</head>
<body>
<div id="description">
<div>Specify the URL of a COG to load:
<input type="text" id="cog_url" />
<button onclick="readCOGURL()">Load</button>
</div>
<button onclick="loadRGBSample()">Load RGB sample</button>
<button onclick="load1BandSample()">Load 1 band sample</button>
</div>
<div id="viewerDiv"></div>
<script src="js/GUI/GuiTools.js"></script>
<script src="../dist/itowns.js"></script>
<script src="../dist/debug.js"></script>
<script src="js/GUI/LoadingScreen.js"></script>
<script src="https://cdn.jsdelivr.net/npm/geotiff"></script>
<script src="js/plugins/COGParser.js"></script>
<script src="js/plugins/COGSource.js"></script>
<script type="text/javascript">
itowns.proj4.defs('EPSG:2154', '+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
var viewerDiv = document.getElementById('viewerDiv');
var view;
function readCOGURL() {
var url = document.getElementById('cog_url').value || new URLSearchParams(window.location.search).get('geotiff');
if (url) {
loadCOG(url);
document.getElementById('cog_url').value = url;
}
}
function loadRGBSample() {
document.getElementById('cog_url').value = 'https://cdn.jsdelivr.net/gh/iTowns/iTowns2-sample-data/cog/nantes/nantes.tif';
readCOGURL();
}
function load1BandSample() {
document.getElementById('cog_url').value = 'https://oin-hotosm.s3.amazonaws.com/60fbca155a90f10006fd2fc3/0/60fbca155a90f10006fd2fc4.tif';
readCOGURL();
}
function removeAllChildNodes(parent) {
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
}
function loadCOG(url) {
// create a source from a Cloud Optimized GeoTiff
var cogSource = new COGSource({
url: url,
crs: "EPSG:2154",
// Default resample method is 'nearest', 'bilinear' looks better when zoomed
resampleMethod: 'bilinear'
});
cogSource.whenReady.then(() => {
if (view !== undefined) {
view.dispose(true);
removeAllChildNodes(viewerDiv);
}
view = new itowns.PlanarView(viewerDiv, cogSource.extent, {
// Default maxSubdivisionLevel is 5, so with huge geotiff it's not enough to see details when zoomed
maxSubdivisionLevel: 10,
disableSkirt: true,
placement: { tilt: 90 }
});
setupLoadingScreen(viewerDiv, view);
var cogLayer = new itowns.ColorLayer('cog', {
source: cogSource,
});
view.addLayer(cogLayer);
});
}
readCOGURL();
</script>
</body>
</html>