Annonce
#1 Sun 30 July 2017 14:32
- Meyko
- Participant occasionnel
- Lieu: Heidelberg
- Date d'inscription: 1 Oct 2013
- Messages: 10
[OpenLayers 3, HTML] Affichage de fonds de cartes
Bonjour à vous tous,
je souhaite vous faire part d'une problématique basique au niveau des 'events' entre html et js.
En m'inspirant de l'exemple de "Bing Maps example" sur le site officiel d'OpenLayers, j'aimerais pouvoir alterner entre un fonds OSM, Bing Aerial et Bing Road. Vous noterez mon amateurisme dans le domaine ^^
Je créé mes variables pour les fonds carte
Code:
var OSMmap = new ol.layer.Tile({
source: new ol.source.OSM()
});
var bingMapsAerial = new ol.layer.Tile({
preload: Infinity,
source: new ol.source.BingMaps({
key: 'AhoORAPFEOvh1KwnGZw5neMs-Ids3YZN6Lkenp4QNRo0v2fZ3nhinRrLK3oKNsCM',
imagerySet: 'Aerial'
})
});
var bingMapsRoad = new ol.layer.Tile({
preload: Infinity,
source: new ol.source.BingMaps({
key: 'AhoORAPFEOvh1KwnGZw5neMs-Ids3YZN6Lkenp4QNRo0v2fZ3nhinRrLK3oKNsCM',
imagerySet: 'Road'
})
});J'applique le processus <select> pour changer de fond de carte
HTML:
Code:
<div id="select">
<select id="layer-select" onchange="displayMap(this.value)">
<option value="bingMapsAerial">Bing aérienne</option>
<option value="bingMapsRoad">Carte routière</option>
<option value="OSMmap" selected>OSM Map</option>
</select>
</div> Je créé une variable fondMap qui collectera le nom de la variable du fond de carte choisi
Javascript:
Code:
var fondMap = [];
function displayMap(value) {
if(value=='OSMmap') {
fondMap.push(OSMmap);
}
else
if(value=='bingMapsRoad'){
fondMap.push(bingMapsRoad);
}
else
if(value=='bingMapsAerial'){
fondMap.push(bingMapsAerial);
}
}Je prépare ensuite l'intégration de la carte
Code:
var map = new ol.Map({
layers:fondMap, // appel de la variable fondMap
target: 'map',
view: new ol.View({
center: [311484, 6249684],
zoom: 15,
minZoom:10
})
};Je sais que lien entre <select> et le code js pour activer ma fonction displayMap() marche, mais mon code js ne fonctionnement pour modifier ma variable 'fondMap'....
Je ne demande pas de réponse exact, mais des conseils pour trouver la solution car je bloque vraiment 
Merci de votre aide!
Dernière modification par Meyko (Sun 30 July 2017 14:36)
"Nous sommes ce que nous pensons. Tout ce que nous sommes résulte de nos pensées. Avec nos pensées, nous bâtissons notre monde." Bouddha
Hors ligne
#2 Sun 30 July 2017 15:45
- Meyko
- Participant occasionnel
- Lieu: Heidelberg
- Date d'inscription: 1 Oct 2013
- Messages: 10
Re: [OpenLayers 3, HTML] Affichage de fonds de cartes
C'est bon je me suis autorépondu!!
Voici la solution ==> la réponse se trouvait bien dans le code js
Code:
var fondMap = [OSMmap];
function displayMap(value) {
if(value=='OSMmap') {
/*fondMap.push(OSMmap);*/
map.addLayer(OSMmap);
}
else
if(value=='bingMapsRoad'){
/*fondMap.push(bingMapsRoad);*/
map.addLayer(bingMapsRoad);
}
else
if(value=='bingMapsAerial'){
/*fondMap.push(bingMapsAerial);*/
map.addLayer(bingMapsAerial);
}
}"Nous sommes ce que nous pensons. Tout ce que nous sommes résulte de nos pensées. Avec nos pensées, nous bâtissons notre monde." Bouddha
Hors ligne
