itowns
Version:
A JS/WebGL framework for 3D geospatial data visualization
229 lines (200 loc) • 8.86 kB
HTML
<html>
<head>
<title>Itowns - WFS (geojson) example</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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="description">
<p>Key bindings</p>
<ul>
<li>Left-Click: camera translation (drag)</li>
<li>Right-Click: camera translation (pan)</li>
<li>Ctrl + Left-Click: camera rotation (orbit)</li>
<li>Spacebar / Wheel-Click: smart zoom</li>
<li>Mouse Wheel: zoom in/out</li>
<li>T: orient camera to a top view</li>
<li>Y: move camera to start position</li>
</ul>
<br />
<p><b>Information Batiment</b></p>
<ul id="info"></ul>
</div>
<div id="viewerDiv"></div>
<script src="../dist/itowns.js"></script>
<script src="js/GUI/LoadingScreen.js"></script>
<script type="text/javascript">
// Define projection that we will use (taken from https://epsg.io/3946, Proj4js section)
itowns.proj4.defs('EPSG:3946', '+proj=lcc +lat_1=45.25 +lat_2=46.75 +lat_0=46 +lon_0=3 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
/* global itowns,document, setupLoadingScreen, window */
var extent;
var viewerDiv;
var view;
var meshes;
var p;
var wmsImagerySource;
var wmsImageryLayer;
var rgb;
var lyonTclBusSource;
var color = new itowns.THREE.Color();
// Define geographic extent: CRS, min/max X, min/max Y
extent = new itowns.Extent(
'EPSG:3946',
1837816.94334, 1847692.32501,
5170036.4587, 5178412.82698);
// `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
viewerDiv = document.getElementById('viewerDiv');
// Instanciate PlanarView*
view = new itowns.PlanarView(viewerDiv, extent, { disableSkirt: true });
setupLoadingScreen(viewerDiv, view);
wmsImagerySource = new itowns.WMSSource({
url: 'https://download.data.grandlyon.com/wms/grandlyon',
networkOptions: { crossOrigin: 'anonymous' },
version: '1.3.0',
name: 'Ortho2009_vue_ensemble_16cm_CC46',
projection: 'EPSG:3946',
extent: extent,
format: 'image/jpeg',
});
// Add a WMS imagery layer
wmsImageryLayer = new itowns.ColorLayer('wms_imagery', {
transparent: false,
source: wmsImagerySource,
});
view.addLayer(wmsImageryLayer);
p = {
coord: new itowns.Coordinates('EPSG:3946', 1840839, 5172718, 0),
heading: -45,
range: 1800,
tilt: 30,
};
itowns.CameraUtils.transformCameraToLookAtTarget(view, view.camera.camera3D, p);
// eslint-disable-next-line no-new
new itowns.PlanarControls(view, {});
function setMaterialLineWidth(result) {
result.traverse(function _setLineWidth(mesh) {
if (mesh.material) {
mesh.material.linewidth = 5;
}
});
}
function colorLine(properties) {
if (properties) {
rgb = properties.couleur.split(' ');
return color.setRGB(rgb[0] / 255, rgb[1] / 255, rgb[2] / 255);
}
return color.setRGB(1, 1, 1);
}
lyonTclBusSource = new itowns.WFSSource({
url: 'https://download.data.grandlyon.com/wfs/rdata?',
protocol: 'wfs',
version: '2.0.0',
id: 'tcl_bus',
typeName: 'tcl_sytral.tcllignebus',
projection: 'EPSG:3946',
extent: {
west: 1822174.60,
east: 1868247.07,
south: 5138876.75,
north: 5205890.19,
},
zoom: { min: 2, max: 2 },
format: 'geojson',
});
var lyonTclBusLayer = new itowns.GeometryLayer('lyon_tcl_bus', new itowns.THREE.Group(), {
update: itowns.FeatureProcessing.update,
convert: itowns.Feature2Mesh.convert({
color: colorLine }),
onMeshCreated: setMaterialLineWidth,
source: lyonTclBusSource,
});
view.addLayer(lyonTclBusLayer);
function colorBuildings(properties) {
if (properties.id.indexOf('bati_remarquable') === 0) {
return color.set(0x5555ff);
}
if (properties.id.indexOf('bati_industriel') === 0) {
return color.set(0xff5555);
}
return color.set(0xeeeeee);
}
function extrudeBuildings(properties) {
return properties.hauteur;
}
meshes = [];
function scaler(/* dt */) {
var i;
var mesh;
if (meshes.length) {
view.notifyChange();
}
for (i = 0; i < meshes.length; i++) {
mesh = meshes[i];
mesh.scale.z = Math.min(
1.0, mesh.scale.z + 0.1);
mesh.updateMatrixWorld(true);
}
meshes = meshes.filter(function filter(m) { return m.scale.z < 1; });
}
function acceptFeature(properties) {
return !!properties.hauteur;
}
view.addFrameRequester(itowns.MAIN_LOOP_EVENTS.BEFORE_RENDER, scaler);
var wfsBuildingSource = new itowns.WFSSource({
url: 'https://wxs.ign.fr/3ht7xcw6f7nciopo16etuqp2/geoportail/wfs?',
version: '2.0.0',
typeName: 'BDTOPO_BDD_WLD_WGS84G:bati_remarquable,BDTOPO_BDD_WLD_WGS84G:bati_indifferencie,BDTOPO_BDD_WLD_WGS84G:bati_industriel',
projection: 'EPSG:4326',
ipr: 'IGN',
format: 'application/json',
zoom: { min: 4, max: 4 },
extent: {
west: 4.568,
east: 5.18,
south: 45.437,
north: 46.03,
},
});
var wfsBuildingLayer = new itowns.GeometryLayer('wfsBuilding', new itowns.THREE.Group(), {
update: itowns.FeatureProcessing.update,
convert: itowns.Feature2Mesh.convert({
color: colorBuildings,
batchId: function (property, featureId) { return featureId; },
extrude: extrudeBuildings }),
onMeshCreated: function scaleZ(mesh) {
mesh.scale.z = 0.01;
meshes.push(mesh);
},
filter: acceptFeature,
overrideAltitudeInToZero: true,
projection: 'EPSG:3946',
source: wfsBuildingSource,
});
view.addLayer(wfsBuildingLayer);
function picking(event) {
var htmlInfo = document.getElementById('info');
var intersects = view.pickObjectsAt(event, 2, 'wfsBuilding');
var properties;
var info;
var batchId;
htmlInfo.innerHTML = ' ';
if (intersects.length) {
batchId = intersects[0].object.geometry.attributes.batchId.array[intersects[0].face.a];
properties = intersects[0].object.feature.geometry[batchId].properties;
Object.keys(properties).map(function (objectKey) {
var value = properties[objectKey];
var key = objectKey.toString();
if (key[0] !== '_' && key !== 'geometry_name') {
info = value.toString();
htmlInfo.innerHTML +='<li><b>' + key + ': </b>' + info + '</li>';
}
});
return properties;
}
}
window.addEventListener('mousemove', picking, false);
</script>
</body>
</html>