');}.md-tag.md-tag--3d{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--ananas{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--atlas{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--blender{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--brick{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--carte{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--cerveau{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--citrouille{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--code{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--commentaires{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--conference{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--database{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--drone{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--esri{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--facebook{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--feuille{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--gdal{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--gemeaux{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--geoloupe{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--git{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--globe{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--google{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--grass{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--html{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--institution{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--js{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--manette{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--maplibre{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--markdown{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--masques{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--mastodon{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--meridiens{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--oeuf{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--open{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--opensource{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--parquet{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--pingouin{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--python{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--qgis{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--raster{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--rezosocio{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--roue{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--route{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--rstats{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--satellite{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--streetview{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--tente{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--telephone{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--terrain{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--twitter{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--ubuntu{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--vector{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--wikipedia{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}.md-tag.md-tag--windows{--md-tag-icon:url('data:image/svg+xml;charset=utf-8, ');}
🏠 Accueil 📖 Articles 2010 JavaScript open source OpenLayers OpenLayers en 3D Date de publication initiale : 06 avril 2010
C'est fou ce qu'il est possible de faire maintenant avec un peu de JavaScript. Le cube en 3D, présenté ci-dessous, a été réalisé avec OpenLayers et cssSandPaper et tout ça en moins d'une quarantaine de lignes de code.
Bon d'accord, il n'y a pas de grande utilité, je vous l'accorde. Mais, j'aime assez le rendu
Pour visualiser le cube, un navigateur récent est obligatoire.
Info
Le serveur hébergeant la démonstration n'étant plus disponible depuis de nombreuses années, la démonstration, autre fois intégrée en iFrame est désactivée. <iframe src="http://geotribu.net/applications/tutoriaux/openlayers/cssPaper/cube_maps.html" scrolling="no" bordure="0px" width="100%" height="720"></iframe>
Auteur·ice L'équipe Geotribu
Toute l'actualité de la géomatique Open Source ! Mais aussi des tutoriels, des billets de blog, des tests et surtout une bonne humeur géographique !
4 mai 2024 31 mai 2020 Julien Moura, Florian Boret, Aurélien Chaumet, Geotribot GitHub +1 Merci d'activer JavaScript pour voir les commentaires. Retour en haut de la page