Project name:

Openlayers

Project description:

“A l’occasion de ses 40 ans, le Conservatoire du littoral souhaite donner à comprendre l’évolution de l’urbanisation du littoral en France depuis les années 60 tout en visualisant la progression de l’intervention du Conservatoire du littoral sur la bande littorale:” Projet visible ici

Ma mission pour ce projet à été de construire les maquettes 3D à l’aide du logiciel LandSim3D de Bionatics.Logo-LandSim-highPour rendre ce travail accessible au plus grand nombre, j’ai développé une maquette de webmapping permettant de visualisé des animations élaborées à partir des maquettes LandSim. Il y a plusieurs widget utilisés dans cette maquette. Voici le code développer pour obtenir, par exemple, plusieurs boutons associés à différents zooms :

Le css pour changer les images des boutons de zoom:

/* ---------------------
Style pour chaque Bouton
-----------------------*/
.customExtentZoomClass {
		/* Copied from ol-zoom-extent */
		top: 4.643em;  
		left: .7em;
		}
.customExtentZoomClass button {
		background: url( //ici l'url de l'image);
		width:19px;
		height:19px;
		background-size: 18px;
		}

Le .js pour la construction des zooms les controls de la map avec OpenLayers:

new ol.control.ZoomToExtent({ 
	extent: ol.proj.transformExtent([10, 41,-6.5,51],'EPSG:4326', 'EPSG:3857'),
	label:  ' ',
	className: 'customExtentZoomClass', //nom de classe de style définies dans le .css
	tipLabel : 'Retour a l\'emprise de Metropole'}),

Pour plus d’informations sur cette maquette, n’hésitez pas à me contacter.

Leave a Reply

Your email address will not be published. Required fields are marked *