Annonce
#1 Thu 27 October 2016 12:14
- infostar31
- Participant occasionnel
- Date d'inscription: 5 Mar 2015
- Messages: 11
Afficher un LayerSwitcher OpenLayers 3 dans un Sidebar
Bonjour,
Je voudrais afficher la liste des Cartes de fonds ainsi que les Couches de données comme dans un Layerswitcher mais en dehors de la Carte dans un Div nommé Sidebar.
J'ai pas réussi en testant avec les ol.control.LayerSwitcher dans OpenLayers 3.
sur le HTML :
Code:
<body> ... <div id="layerswitcher"></div> <div id="map"> </div> ... </body>
sur le JS :
Code:
(function() {
/*var controls = [
new ol.control.Attribution(),
new ol.control.MousePosition({
undefinedHTML: 'outside',
projection: 'EPSG:4326',
coordinateFormat: function(coordinate) {
return ol.coordinate.format(coordinate, '{x}, {y}', 4);
}
})
];*/
var thunderforestAttributions = [
new ol.Attribution({
html: 'Tiles © <a href="http://www.thunderforest.com/">Thunderforest</a>'
}),
ol.source.OSM.ATTRIBUTION
];
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Group({
'title': 'Carte de Base',
layers: [
new ol.layer.Tile({
title: 'Stamen - Water color',
type: 'base',
visible: false,
source: new ol.source.Stamen({
layer: 'watercolor'
})
}),
new ol.layer.Tile({
title: 'BingMap',
type: 'base',
visible: true,
source: new ol.source.BingMaps({
key: 'AqiqAsk3FrUgtrNsRFEjhSUIQsVvfuiTkDfUGm99aKWAe-ALF4L_gLKRZ5b3tU2q',
imagerySet: 'AerialWithLabels'
})
}),
new ol.layer.Tile({
title: 'Stamen - Toner',
type: 'base',
visible: false,
source: new ol.source.Stamen({
layer: 'toner'
})
}),
new ol.layer.Tile({
title: 'MapQuest - OSM',
type: 'base',
visible: false,
source: new ol.source.MapQuest({
layer: 'osm'
})
}),
new ol.layer.Tile({
title: 'MapQuest - Satellite',
type: 'base',
visible: false,
source: new ol.source.MapQuest({
layer: 'sat'
})
}),
new ol.layer.Tile({
title: 'MapQuest - Hybrid',
type: 'base',
visible: false,
source: new ol.source.MapQuest({
layer: 'hyb'
})
}),
new ol.layer.Tile({
title: 'Thunderforest - OpenCycleMap',
type: 'base',
visible: false,
source: new ol.source.OSM({
url: 'http://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png',
attributions: thunderforestAttributions
})
}),
new ol.layer.Tile({
title: 'Thunderforest - Outdoors',
type: 'base',
visible: false,
source: new ol.source.OSM({
url: 'http://{a-c}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png',
attributions: thunderforestAttributions
})
}),
new ol.layer.Tile({
title: 'Thunderforest - Landscape',
type: 'base',
visible: false,
source: new ol.source.OSM({
url: 'http://{a-c}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png',
attributions: thunderforestAttributions
})
}),
new ol.layer.Tile({
title: 'Thunderforest - Transport',
type: 'base',
visible: false,
source: new ol.source.OSM({
url: 'http://{a-c}.tile.thunderforest.com/transport/{z}/{x}/{y}.png',
attributions: thunderforestAttributions
})
}),
new ol.layer.Tile({
title: 'Thunderforest - Transport Dark',
type: 'base',
visible: false,
source: new ol.source.OSM({
url: 'http://{a-c}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png',
attributions: thunderforestAttributions
})
}),
new ol.layer.Tile({
title: 'OSM',
type: 'base',
visible: false,
source: new ol.source.OSM()
})
]
}),
new ol.layer.Group({
title: 'Couches vecteur',
layers: [
......
]
})
],
view: new ol.View({
center: [-59101, 3570862],
zoom: 5,
maxZoom: 18,
minZoom: 2
})
});
map.addControl(new ol.control.LayerSwitcher());
map.addControl(new ol.control.MousePosition({
undefinedHTML: 'Coordonnées',
projection: 'EPSG:4326',
coordinateFormat: function(coordinate) {
return ol.coordinate.format(coordinate, '{x}, {y}', 5);
}
}));
map.addControl(new ol.control.OverviewMap({
collapsed: false
}));
map.addControl(new ol.control.ScaleLine());
var layerswitcher = new ol.control.LayerSwitcher({
div: document.getElementById('layerswitcher') }
);
map.addControl(layerswitcher);
layerswitcher.showPanel();
})
();Si quelqu'un aurait une idée ce serait bien aimable, je suis débutante et je sens que ce n'est qu'une erreur de syntaxe ou un petit détail qui manque.
merci à tous.
Hors ligne
