itowns
Version:
A JS/WebGL framework for 3D geospatial data visualization
129 lines (112 loc) • 5.27 kB
HTML
<html>
<head>
<title>Cloud Optimized GeoTiff</title>
<script type="importmap">
{
"imports": {
"itowns": "../dist/itowns.js",
"debug": "../dist/debug.js",
"dat": "https://unpkg.com/dat.gui@0.7.9/build/dat.gui.module.js",
"GuiTools": "./jsm/GUI/GuiTools.js",
"LoadingScreen": "./jsm/GUI/LoadingScreen.js",
"itowns_widgets": "../dist/itowns_widgets.js",
"three": "https://unpkg.com/three@0.170.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.170.0/examples/jsm/",
"COGParser": "./jsm/plugins/COGParser.js",
"COGSource": "./jsm/plugins/COGSource.js",
"geotiff": "https://esm.sh/geotiff@2.1.3"
}
}
</script>
<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">
</head>
<body>
<div id="description">
<div>Specify the URL of a COG to load:
<input type="text" id="cog_url" />
<button id="readCOGURLButton">Load</button>
</div>
<button id="loadRGBSampleButton">Load RGB sample</button>
<button id="load1BandSampleButton">Load 1 band sample</button>
</div>
<div id="viewerDiv"></div>
<script type="module">
import GuiTools from 'GuiTools';
import setupLoadingScreen from 'LoadingScreen';
import * as THREE from 'three';
import * as itowns from 'itowns';
import * as debug from 'debug';
import * as itowns_widgets from 'itowns_widgets';
import COGParser from 'COGParser';
import COGSource from 'COGSource';
itowns.CRS.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();
const loadRGBSampleButton = document.getElementById('loadRGBSampleButton');
const load1BandSampleButton = document.getElementById('load1BandSampleButton');
const readCOGURLButton = document.getElementById('readCOGURLButton');
loadRGBSampleButton.addEventListener('click', loadRGBSample);
load1BandSampleButton.addEventListener('click', load1BandSample);
readCOGURLButton.addEventListener('click', readCOGURL);
window.view = view;
window.itowns = itowns;
window.THREE = THREE;
</script>
</body>
</html>