itowns
Version:
A JS/WebGL framework for 3D geospatial data visualization
107 lines (91 loc) • 3.47 kB
HTML
<html>
<head>
<title>Itowns - vector-tiles 2d </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/"
}
}
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
type="text/css"
href="css/example.css"
/>
<link
rel="stylesheet"
type="text/css"
href="css/LoadingScreen.css"
/>
</head>
<body>
<div id="viewerDiv"></div>
<script src="js/GUI/LoadingScreen.js"></script>
<script type="module">
import GuiTools from 'GuiTools';
import * as THREE from 'three';
import * as itowns from 'itowns';
import * as debug from 'debug';
import * as itowns_widgets from 'itowns_widgets';
const typeView = 'Planar';
// const typeView = 'Globe';
// `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
var viewerDiv = document.getElementById('viewerDiv');
let view;
if (typeView === 'Globe') {
const coord = new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712); // Paris
// const coord = new itowns.Coordinates("EPSG:4326", 60.599525, 56.834341); // Yekaterinburg
const placement = {
coord,
range: 950000,
};
view = new itowns.GlobeView(viewerDiv, placement);
} else if (typeView === 'Planar') {
// Define geographic extent: CRS, min/max X, min/max Y
var extent = new itowns.Extent(
'EPSG:3857',
-20037508.342789244, 20037508.342789244,
-20037508.342789255, 20037508.342789244);
// Instanciate PlanarView
view = new itowns.PlanarView(viewerDiv, extent, {
maxSubdivisionLevel: 20,
controls: {
// We do not want the user to zoom out too much
maxAltitude: 40000000,
// We want to keep the rotation disabled, to only have a view from the top
enableRotation: false,
// Don't zoom too much on smart zoom
smartTravelHeightMax: 100000,
},
});
}
const debugMenu = new GuiTools("menuDiv", view);
setupLoadingScreen(viewerDiv, view);
const source = new itowns.VectorTilesSource({
style: "mapbox://styles/mapbox/streets-v8",
accessToken:
"pk.eyJ1IjoiZnRvcm9tYW5vZmYiLCJhIjoiY2xrc2Zpa2o3MDQxNTNxcG5sczJyaTlncyJ9.5KFKdMLIiy-b_fAjSVhjCQ",
});
const layer = new itowns.ColorLayer("vector-map", {
source,
noTextureParentOutsideLimit: true,
addLabelLayer: true,
});
view.addLayer(layer).then(() => {
debugMenu.addLayerGUI.bind(debugMenu);
itowns.ColorLayersOrdering.moveLayerToIndex(view, "vector-map", 15);
});
debug.createTileDebugUI(debugMenu.gui, view);
</script>
</body>
</html>