Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rework view #2356

Draft
wants to merge 5 commits into
base: master
Choose a base branch
from
Draft

Rework view #2356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2a860a2
refactor(PrefabView): homogeneisation constructor
ftoromanoff Jun 21, 2024
8f4c4e3
refactor(TileDebug): typo
ftoromanoff Jul 4, 2024
c609e23
feat(PlanarView): add clippingPlanes options
ftoromanoff Jul 4, 2024
d1a5fbc
refactor(PlanarLayer): homogeneisation with GlobeLayer in args
ftoromanoff Jul 4, 2024
3cb4a7a
refactor(example): add example TMS on PlanarView
ftoromanoff Jul 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
290 changes: 290 additions & 0 deletions examples/view_25d_map3857.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,290 @@
<html>
<head>
<title>Itowns - Planar 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">
<link rel="stylesheet" type="text/css" href="css/widgets.css">

<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">
Key bindings
<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 travel</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>
</div>
<div id="viewerDiv" class="viewer"></div>

<script src="../dist/itowns.js"></script>
<script src="js/GUI/LoadingScreen.js"></script>
<script src="../dist/debug.js"></script>
<script src="../dist/itowns_widgets.js"></script>
<script src="js/GUI/GuiTools.js"></script>
<script type="text/javascript">

function xml2json(xml) {
try {
var obj = {};
if (xml.children.length > 0) {
for (var i = 0; i < xml.children.length; i++) {
var item = xml.children.item(i);
var nodeName = item.nodeName;
if (item.attributes.length > 1) {
for (var j = 0; j < item.attributes.length; j++) {
const attribute = item.attributes.item(j);
const newEl = document.createElement(attribute.name);
const newText = document.createTextNode(attribute.value);
newEl.appendChild(newText);
item.appendChild(newEl)
}
}

if (typeof (obj[nodeName]) == "undefined") {
obj[nodeName] = xml2json(item);
} else {
if (typeof (obj[nodeName].push) == "undefined") {
var old = obj[nodeName];

obj[nodeName] = [];
obj[nodeName].push(old);
}
obj[nodeName].push(xml2json(item));
}
}
} else {
obj = xml.textContent;
}
return obj;
} catch (e) {
console.log(e.message);
}
}

// const urlTMS = 'https://www.opengis.net/def/crs/EPSG/0/3857';
// const getTMS = itowns.Fetcher.xml('./layers/TMS_EPSG-3857.xml')
// .then(xml => {
// return xml2json(xml);
// });

// // Define crs 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, setupLoadingScreen, GuiTools, debug */

// const urlWMS = 'https://imagerie.data.grandlyon.com/wms/grandlyon?';
// const getCapabilities = itowns.Fetcher.xml(`${urlWMS}SERVICE=WMS&REQUEST=GetCapabilities`)
// .then(xml => {
// return xml2json(xml);
// });


async function main() {

let viewCRS;
viewCRS = 'EPSG:3857';

// const TMS = await getTMS;
// console.log(TMS);
// console.log(capabilities.WMS_Capabilities.Capability.Layer);

// const capabilities = await getCapabilities;
// console.log(capabilities);
// console.log(capabilities.WMS_Capabilities.Capability.Layer);

// const ortho_latest_Capa = capabilities.WMS_Capabilities.Capability.Layer.Layer.filter(l => l.Name === 'ortho_latest')[0];
// console.log('Ortho_latest crs', ortho_latest_Capa.CRS);
// const boundingBox = ortho_latest_Capa.BoundingBox.filter(bb => bb.crs === viewCRS)[0];
// const extentOrthoLatest = new itowns.Extent(
// viewCRS,
// +boundingBox.minx, +boundingBox.maxx,
// +boundingBox.miny, +boundingBox.maxy,
// );

var extent0;
var viewerDiv;
var view;
var p;
var menuGlobe;
var d;

// origin extent (the data to display)
extent0 = new itowns.Extent(
'EPSG:3946',
1837816.94334, 1847692.32501,
5170036.4587, 5178412.82698);

// EPSG:3946 global extent
extent = new itowns.Extent(
'EPSG:3946',
621509.63, 4660562.44,
2320724.18, 5891430.09,
);

extent3857 = new itowns.Extent('EPSG:3857', -20037508.3427892, 20037508.3427892, -20037508.3427892, 20037508.3427892)
// var extent3857 = new itowns.Extent(
// 'EPSG:3857',
// -20026376.39, 20026376.39,
// -20048966.10, 20048966.10);

// console.log(extent, extent0, extentOrthoLatest);


// `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
viewerDiv = document.getElementById('viewerDiv');
// console.log(extent0.center(), extent0.center().as(viewCRS), extent0.as(viewCRS))

const placement = { coord: extent0.center().as(viewCRS), heading: 49.6, range: 6200, tilt: 17 };
// Instanciate PlanarView*
view = new itowns.PlanarView(viewerDiv, extent0.as(viewCRS), { placement });
// view = new itowns.PlanarView(viewerDiv, extent3857, { placement });
setupLoadingScreen(viewerDiv, view);


// -> WMTS Layer
itowns.Fetcher.json("./layers/JSONLayers/Ortho.json").then(
function _(config) {
config.source = new itowns.WMTSSource(config.source);// crs: 'EPSG:3857',
var layer = new itowns.ColorLayer("Ortho", config);
view.addLayer(layer);
}
);


// -> TMS imagery source and layer
var opensmSource = new itowns.TMSSource({
isInverted: true,
url: 'https://tile.openstreetmap.org/${z}/${x}/${y}.png',
networkOptions: { crossOrigin: 'anonymous' },
extent: extent3857,
crs: 'EPSG:3857',
attribution: {
name: 'OpenStreetMap',
url: 'http://www.openstreetmap.org/',
},
});
var opensmLayer = new itowns.ColorLayer('OPENSM', {
updateStrategy: {
type: itowns.STRATEGY_DICHOTOMY,
},
source: opensmSource,
});
view.addLayer(opensmLayer);


// -> WMS imagery layer
var wmsImagerySource = new itowns.WMSSource({
extent: extent3857,
name: 'ortho_latest',
url: 'https://imagerie.data.grandlyon.com/wms/grandlyon',
version: '1.3.0',
crs: viewCRS,
format: 'image/jpeg',
});

var wmsImageryLayer = new itowns.ColorLayer('wms_imagery', {
updateStrategy: {
type: itowns.STRATEGY_DICHOTOMY,
options: {},
},
source: wmsImagerySource,
});

view.addLayer(wmsImageryLayer);

// -> WMS elevation layer
var wmsElevationSource = new itowns.WMSSource({
extent: extent3857,
url: 'https://imagerie.data.grandlyon.com/wms/grandlyon',
name: 'MNT2018_Altitude_2m',
crs: viewCRS,
width: 256,
format: 'image/jpeg',
});

var wmsElevationLayer = new itowns.ElevationLayer('wms_elevation', {
useColorTextureElevation: true,
colorTextureElevationMinZ: 144,
colorTextureElevationMaxZ: 622,
source: wmsElevationSource,
});

view.addLayer(wmsElevationLayer);

// -> WFS layer for label (Not working)
var wfsCartoSource = new itowns.WFSSource({
url: 'https://data.geopf.fr/wfs/ows?',
version: '2.0.0',
typeName: 'BDCARTO_V5:zone_d_habitation',
crs: viewCRS,
ipr: 'IGN',
format: 'application/json',
});

var wfsCartoStyle = {
zoom: { min: 0, max: 20 },
text: {
field: '{toponyme}',
color: 'white',
transform: 'uppercase',
size: 15,
haloColor: 'rgba(20,20,20, 0.8)',
haloWidth: 3,
},
};

var wfsCartoLayer = new itowns.LabelLayer('wfsCarto', {
source: wfsCartoSource,
style: wfsCartoStyle,
});

// view.addLayer(wfsCartoLayer);

// Add a scale :
const scale = new itowns_widgets.Scale(view, {
position: 'bottom-right',
translate: { x: -70 },
});

// Request redraw
view.notifyChange();

view.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
if (view.isDebugMode) {
menuGlobe = new GuiTools('menuDiv', view);
menuGlobe.addImageryLayersGUI(view.getLayers(function gui(l) { return l.isColorLayer; }));
menuGlobe.addElevationLayerGUI(wmsElevationLayer);
debug.createTileDebugUI(menuGlobe.gui, view);
}

const extent3 = extent0.as(viewCRS)

clipPlanes = [
new itowns.THREE.Plane(new itowns.THREE.Vector3(1, 0, 0), -extent3.west),
new itowns.THREE.Plane(new itowns.THREE.Vector3(-1, 0, 0), extent3.east),
new itowns.THREE.Plane(new itowns.THREE.Vector3(0, -1, 0), extent3.north),
new itowns.THREE.Plane(new itowns.THREE.Vector3(0, 1, 0), -extent3.south),
];
const helpers = new itowns.THREE.Group();
helpers.add( new itowns.THREE.PlaneHelper( clipPlanes[0], 2000000, 0xff0000 ) );
helpers.add( new itowns.THREE.PlaneHelper( clipPlanes[1], 2000000, 0xff0000 ) );
helpers.add( new itowns.THREE.PlaneHelper( clipPlanes[ 2 ], 2000000, 0x0000ff ) );
helpers.add( new itowns.THREE.PlaneHelper( clipPlanes[ 3 ], 2000000, 0xff00ff ) );
helpers.visible = true;
view.tileLayer.object3d.add( helpers );

});
};

main();
</script>
</body>
</html>
2 changes: 1 addition & 1 deletion examples/view_multi_25d.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@
obj.updateMatrixWorld(true);

const tileLayer = new itowns.PlanarLayer('planar' + wms.name + index,
extent, obj, { disableSkirt: true });
obj, { disableSkirt: true, extent });

view.addLayer(tileLayer);

Expand Down
21 changes: 16 additions & 5 deletions src/Core/Prefab/GlobeView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,19 +81,25 @@ class GlobeView extends View {
*
* @param {HTMLDivElement} viewerDiv - Where to attach the view and display it
* in the DOM.
* @param {CameraTransformOptions|Extent} placement - An object to place view
* @param {object=} options - See options of {@link View}.
* @param {Object} options.controls - See options of {@link GlobeControls}
* @param {CameraTransformOptions|Extent} options.placement - An object to place view
*/
constructor(viewerDiv, placement = {}, options = {}) {
constructor(viewerDiv, options = {}) {
THREE.Object3D.DEFAULT_UP.set(0, 0, 1);

if (arguments.length > 2 || options.isExtent || options.coord || options.tilt || options.heading || options.range) {
console.warn("Deprecated: change in arguments, 'placement' should be set in options");
// eslint-disable-next-line prefer-rest-params
const [, pla, opt = {}] = arguments;
opt.placement = pla;
options = opt;
}

// Setup View
super('EPSG:4978', viewerDiv, options);
this.isGlobeView = true;

this.camera3D.near = Math.max(15.0, 0.000002352 * ellipsoidSizes.x);
this.camera3D.far = ellipsoidSizes.x * 10;

const tileLayer = new GlobeLayer('globe', options.object3d, options);
this.mainLoop.gfxEngine.label2dRenderer.infoTileLayer = tileLayer.info;

Expand All @@ -105,6 +111,11 @@ class GlobeView extends View {
this.addLayer(tileLayer);
this.tileLayer = tileLayer;

// Configure camera
this.camera3D.near = Math.max(15.0, 0.000002352 * ellipsoidSizes.x);
this.camera3D.far = ellipsoidSizes.x * 10;

const placement = options.placement;
if (!placement.isExtent) {
placement.coord = placement.coord || new Coordinates('EPSG:4326', 0, 0);
placement.tilt = placement.tilt || 89.5;
Expand Down
Loading
Loading