Published
Edited
Sep 28, 2020
1 star
viewerDiv = html`<div style='height:400px;' />`
itowns.proj4.defs("EPSG:3857","+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs");
// Define geographic extent: CRS, min/max X, min/max Y
extent = new itowns.Extent( 'EPSG:3857',510927.4,6880931.1, 516303.7,6885672.7);
cameraCoord = new itowns.Coordinates('EPSG:3857', 514302,6883704, 3000)
view = new itowns.PlanarView(viewerDiv, extent, { placement: {
coord: cameraCoord, heading: -30, range: 4000, tilt: 30 } });
// Add a WMS imagery source
wmsImagerySource = new itowns.WMSSource({
extent: extent,
name: 'bgt',
url: 'https://saturnus.geodan.nl/mapproxy/bgt/service',
version: '1.1.1',
projection: 'EPSG:3857',
format: 'image/png',
});
// Add a WMS imagery layer
wmsImageryLayer = new itowns.ColorLayer('wms_imagery', {
updateStrategy: {
type: itowns.STRATEGY_DICHOTOMY,
options: {},
},
source: wmsImagerySource,
});
view.addLayer(wmsImageryLayer);
new itowns.PlanarControls(view, {});
$3dTilesLayer = new itowns.C3DTilesLayer(
'3d-tiles-layer-building', {
name: 'Velsen_buildings',
source: new itowns.C3DTilesSource({
url:
'https://beta.geodan.nl/maquette_nl/data/buildingtiles_velsen_3857/tileset.json',
}),
}, view);
{
var dirLight = new itowns.THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(-0.9, 0.3, 1);
dirLight.updateMatrixWorld();
view.scene.add( dirLight );
var ambLight = new itowns.THREE.AmbientLight(0xffffff, 0.2);
view.scene.add( ambLight );
// Pick 3D Tiles features when hovering them with the mouse and
// display their semantic information in an html div
var pickingArgs = {};
pickingArgs.htmlDiv = document.getElementById('featureInfo');
pickingArgs.view = view;
pickingArgs.layer = $3dTilesLayer;
itowns.View.prototype.addLayer.call(view, $3dTilesLayer);
// Request redraw
view.notifyChange();
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
itowns = require('https://cdn.jsdelivr.net/npm/itowns@2.24.1/dist/itowns.js')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
