');}.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 Google Maps hillshading ombrage OpenStreetMap Hillshading or not Date de publication initiale : 24 novembre 2010
Vous reprendrez bien un peu d'ombrage ... Je trouve les rendus OSM ou Google Maps un peu trop lisse à mon goût. Par contre, j'aime bien le relief que propose la vue TERRAIN de Google ; alors comment concilier les rendus Mapnik et Google Maps normal avec de l'ombrage ?
Pour cela, nous avons utilisé les bibliothèques ExtJS , GeoExt et OpenLayers pour avoir une mise en page sympathique des 4 cartes. Une synchronisation a été mise en place afin d'avoir une vue simultanée sur chacune. L'ombrage a quant à lui été ajouté à la carto en utilisant la classe Layer TMS d'OpenLayers et d'une fonction de récupération d'URL :
function osm_getTileURL ( bounds ) {
var res = this . map . getResolution ();
var x = Math . round (( bounds . left - this . maxExtent . left ) / ( res * this . tileSize . w ));
var y = Math . round (( this . maxExtent . top - bounds . top ) / ( res * this . tileSize . h ));
var z = this . map . getZoom ();
var limit = Math . pow ( 2 , z );
if ( y < 0 || y >= limit ) {
return OpenLayers . Util . getImagesLocation () + "404.png" ;
} else {
x = (( x % limit ) + limit ) % limit ;
return this . url + z + "/" + x + "/" + y + "." + this . type ;
}
}
Les tuiles nous ont été fournies par Hike & Bike Map . Merci à Colin !
Cliquez sur l'image pour lancer l'application :-)
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 GitHub +1 Merci d'activer JavaScript pour voir les commentaires. Retour en haut de la page