Definition d'un perimetre de carte avec exterieur gris

Extraire des données OSM, créer sa carte, uMap, utiliser sur un GPS ou un smartphone...
piercol17

Definition d'un perimetre de carte avec exterieur gris

Message par piercol17 » dim. mai 26, 2013 12:59 am

Bonjour,
J'ai vu sur le net de nombreuses cartes OSM concernant un périmètre administratif (un ensemble de communes, par exemple ), avec l'extérieur de cette zone affiché en gris.
Quelqu'un saurait il m'expliquer comment on peut réaliser cela avec du javascript et openlayers ?
Merci par avance

Avatar de l’utilisateur
cquest
Messages : 1978
Inscription : ven. avr. 16, 2010 12:22 am
Localisation : Val de Marne
Contact :

Re: Definition d'un perimetre de carte avec exterieur gris

Message par cquest » dim. mai 26, 2013 8:36 am

Je n'ai encore pas eu besoin de faire cela, mais c'est quelque chose qu'il faudrait ajouter sur umap.

Si tu ne connais pas uMap, je pense que tu va pouvoir l'utiliser pour ton site: http://umap.openstreetmap.fr/

JB

Re: Definition d'un perimetre de carte avec exterieur gris

Message par JB » dim. mai 26, 2013 8:57 am

C'est un travail que j'ai fait sur Maperitive, pas forcément adapté à l'affichage web, mais des idées peuvent être reprises. La démo est là :
http://osm107.openstreetmap.fr/jbtopo/StComeComp.png
Tu as ton calque normal, sur lequel tu empiles le calque de gris. Reste à réaliser le calque de gris. Sous Maperitive/Tilemill, c'est pas sorcier, tu utilises la surface définie par la relation qui t'intéresse, transparent dedans, gris dehors. Tu sors soit une série de tuile unique, soit juste les grisées que tu empiles à l'affichage par Openlayers.

NicolasDumoulin
Messages : 95
Inscription : mar. nov. 20, 2012 3:41 pm

Re: Definition d'un perimetre de carte avec exterieur gris

Message par NicolasDumoulin » lun. mai 27, 2013 9:01 am

Salut,

J'ai bricolé quelquechose en javascript qui permet de le faire. Il faut d'abord récupérer le contour de la limite administrative, et ensuite tu dessines un gros carré autour (environ 10 fois l'aire d'étude) avec comme trou ton polygone administratif.
Pour ce polygone administratif, tu peux soit le sauver en statique, soit utiliser l'overpass pour le récupérer dynamiquement.

Voici mon proto d'exemple : http://osm.dumoulin63.net/aubiere-zone30/index2.html
Bon, dans cet exemple, il y a pas mal de choses en plus, mais tout le code pour la construction du masque gris est dans le fichier html, le reste servant à charger les couches supplémentaires.

piercol17

Re: Definition d'un perimetre de carte avec exterieur gris

Message par piercol17 » mer. mai 29, 2013 10:47 am

Merci pour ces conseils.

En bricolant un peu avec JOSM, j'ai créé une carte au format .osm (bordures.osm)
Elle contient un polygone fermé avec les 30 communes concernées par mon projet en prenant les tracés de la DGI (administrative boundaries).
J'ai créé autour une large zone rectangulaire, mais je ne sais pas quel attribut lui donner.
Et ensuite, je bute sur le code javascript à utiliser pour intégrer cette nouvelle couche dans ma carte, en définissant la règle de remplissage de la zone extérieure au polygone (couleur, intensité, etc)

L'état actuel de mon projet de carte est visible ici : http://www.histoirepassion.eu/test_cart ... TTTTTTTTTT

Merci par avance pour vos conseils.

NicolasDumoulin
Messages : 95
Inscription : mar. nov. 20, 2012 3:41 pm

Re: Definition d'un perimetre de carte avec exterieur gris

Message par NicolasDumoulin » mer. mai 29, 2013 11:16 am

Je n'ai pas trouvé de solution simple.
Tu peux effectivement exporter le polygone de contour des communes dans josm. Mais pour le cadre extérieur, je le crée en javascript, car de toutes façons, je ne crois pas que tu puisses charger ton .osm avec les deux polygones et avoir ton tracé directement.

Je te remets le code de mon exemple avec la partie qui t'intéresse (le reste concerne d'autres données, ou la récupération dynamique du polygone) :

Code : Tout sélectionner

// ici on a la géométrie de notre limite, tu dois avoir l'équivalent en chargeant ton fichier .osm ne contenant que la limite et pas le cadre
features = response.features;
// je définis le style d'affichage, du gris un poil transparent avec une bordure rouge
var style_poly = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style["default"]);    
style_poly.strokeColor = "red";
style_poly.fillColor = "grey";
style_poly.fillOpacity = 0.6;
// je construis un objet à partir des features, pour les ordonner correctement pour la suite
boundaryPolygone = buildLinearRingFromUnorderedWays(features);
// je fais un rectangle englobant ce polygone
outsideFrame = boundaryPolygone.getBounds().toGeometry();
// je l'agrandis pour couvrir suffisament la carte
outsideFrame.resize(10,outsideFrame.getCentroid());
// et là, je construis la forme ayant pour frontière extérieure le rectangle et pour frontière intérieure le polygone de ma limite
var polygonFeature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Polygon([outsideFrame.components[0],boundaryPolygone]),null,style_poly);
// je crée la couche, j'ajoute les données, et j'ajoute la couche à ma carte
var vectors= new OpenLayers.Layer.Vector("Limite de commune");
vectors.addFeatures(polygonFeature)
map.addLayer(vectors);
 
La fonction buildLinearRingFromUnorderedWays est bien sûr à récupérer, je te la donne sous la licence WTFPL.

Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 6 invités