#1 Mon 17 November 2014 10:32
- Martin Tov
- Juste Inscrit !
- Lieu: Grenoble
- Date d'inscription: 5 Jan 2013
- Messages: 6
GeoServer_OpenLayers: fonction Layer Switcher
Bonjour,
Je travaille actuellement sur la version 2.6.0 de GeoServer et cherche à réaliser une application web pour la visualisation des cartes via OpenLayers.
Mais je rencontre un problème pour ajouter un fonctionnalité de layer switcher qui permette de montrer/cacher les couches.
Cette fonctionnalité existe sur OpenLayers et elle se matérialise par un menu checkbox qui s'affiche après avoir cliqué sur une icone "+" en haut à droite du cadre d'affichage.
D'après la documentation que j'ai trouvé il suffit simplement de rajouter la ligne de commande map.addControl(new OpenLayers.Control.LayerSwitcher()); à la suite des autres dans le fichier source de la page web.
J'ai essayé mais le résultat n'est pas au rendez-vous. Non seulement le "+" et son menu checkbox n'apparaissent pas, mais en plus ceci me désactive l'options toolbar qui s'affiche normalement lorsque l'on clique sur l'icone située en haut à gauche du cadre.
La doc que j'ai trouvé date de 2008, peut-être que la configuration à évolué entre temps ou alors il y-a-t'il une subtilité du code que j'ai loupé??
Merci par avance de vos réponses,
Martin
Hors ligne
#2 Mon 17 November 2014 13:33
- VianneyD
- Participant assidu
- Date d'inscription: 30 May 2011
- Messages: 153
Re: GeoServer_OpenLayers: fonction Layer Switcher
Bonjour,
Il semble que la commande ajoutée ne soit pas correctement interprétée, bloquant les instructions qui suivent et (probablement) cause l'absence de l'option toolbar.
L'objet map est-il correctement défini ?
Je te conseille (si ce n'est pas déjà le cas) d'utiliser l'outil d'aide au développement de ton navigateur (touche F12) et raffraichir ta page pour faire apparaitre les messages d'erreurs renvoyés sur ta page.
Un extrait de ton code nous serait également utile pour t'aider.
Vianney Dugrain
Hors ligne
#3 Mon 17 November 2014 15:47
- Martin Tov
- Juste Inscrit !
- Lieu: Grenoble
- Date d'inscription: 5 Jan 2013
- Messages: 6
Re: GeoServer_OpenLayers: fonction Layer Switcher
Merci pour ce retour!
Et effectivement après analyse avec l'outil de développement il y a un bel et bien un problème d'interprétation. Le code est le suivant et il m'est notifié qu'il y a une erreur pour la ligne de commande map.addControl(new OpenLayers.Control.LayerSwitcher());. Le commentaire retourné est "Uncaught TypeError: undefined is not a function". C'est un problème de syntaxe ou de définition de variable?
Code:
<script>
var map;
var untiled;
var tiled;
var pureCoverage = false;
// pink tile avoidance
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
// make OL compute scale according to WMS spec
OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;
function init(){
// if this is just a coverage or a group of them, disable a few items,
// and default to jpeg format
format = 'image/png';
if(pureCoverage) {
document.getElementById('filterType').disabled = true;
document.getElementById('filter').disabled = true;
document.getElementById('antialiasSelector').disabled = true;
document.getElementById('updateFilterButton').disabled = true;
document.getElementById('resetFilterButton').disabled = true;
document.getElementById('jpeg').selected = true;
format = "image/jpeg";
}
var bounds = new OpenLayers.Bounds(
-74.047185, 40.679648,
-73.90782, 40.882078
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.0007907421875,
projection: "EPSG:4326",
units: 'degrees'
};
map = new OpenLayers.Map('map', options);
// setup tiled layer
tiled = new OpenLayers.Layer.WMS(
"tiger:poly_landmarks - Tiled", "http://localhost:8001/geoserver/tiger/wms",
{
"STYLES": '',
"LAYERS": 'tiger:poly_landmarks',
format: format
},
{
buffer: 0,
displayOutsideMaxExtent: true,
isBaseLayer: true,
yx : {'EPSG:4326' : true}
}
);
// setup single tiled layer
untiled = new OpenLayers.Layer.WMS(
"tiger:poly_landmarks - Untiled", "http://localhost:8001/geoserver/tiger/wms",
{
"STYLES": '',
"LAYERS": 'tiger:poly_landmarks',
format: format
},
{
singleTile: true,
ratio: 1,
isBaseLayer: true,
yx : {'EPSG:4326' : true}
}
);
map.addLayers([untiled, tiled]);
// build up all controls
map.addControl(new OpenLayers.Control.PanZoomBar({
position: new OpenLayers.Pixel(2, 15)
}));
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.Scale($('scale')));
map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
map.zoomToExtent(bounds);
map.addControl(new OpenLayers.Control.LayerSwitcher());
// wire up the option button
var options = document.getElementById("options");
options.onclick = toggleControlPanel;
// support GetFeatureInfo
map.events.register('click', map, function (e) {
document.getElementById('nodelist').innerHTML = "Loading... please wait...";
var params = {
REQUEST: "GetFeatureInfo",
EXCEPTIONS: "application/vnd.ogc.se_xml",
BBOX: map.getExtent().toBBOX(),
SERVICE: "WMS",
INFO_FORMAT: 'text/html',
QUERY_LAYERS: map.layers[0].params.LAYERS,
FEATURE_COUNT: 50,
"Layers": 'tiger:poly_landmarks',
WIDTH: map.size.w,
HEIGHT: map.size.h,
format: format,
styles: map.layers[0].params.STYLES,
srs: map.layers[0].params.SRS};
// handle the wms 1.3 vs wms 1.1 madness
if(map.layers[0].params.VERSION == "1.3.0") {
params.version = "1.3.0";
params.j = parseInt(e.xy.x);
params.i = parseInt(e.xy.y);
} else {
params.version = "1.1.1";
params.x = parseInt(e.xy.x);
params.y = parseInt(e.xy.y);
}
// merge filters
if(map.layers[0].params.CQL_FILTER != null) {
params.cql_filter = map.layers[0].params.CQL_FILTER;
}
if(map.layers[0].params.FILTER != null) {
params.filter = map.layers[0].params.FILTER;
}
if(map.layers[0].params.FEATUREID) {
params.featureid = map.layers[0].params.FEATUREID;
}
OpenLayers.loadURL("http://localhost:8001/geoserver/tiger/wms", params, this, setHTML, setHTML);
OpenLayers.Event.stop(e);
});
}
// sets the HTML provided into the nodelist element
function setHTML(response){
document.getElementById('nodelist').innerHTML = response.responseText;
};
// shows/hide the control panel
function toggleControlPanel(event){
var toolbar = document.getElementById("toolbar");
if (toolbar.style.display == "none") {
toolbar.style.display = "block";
}
else {
toolbar.style.display = "none";
}
event.stopPropagation();
map.updateSize()
}
// Tiling mode, can be 'tiled' or 'untiled'
function setTileMode(tilingMode){
if (tilingMode == 'tiled') {
untiled.setVisibility(false);
tiled.setVisibility(true);
map.setBaseLayer(tiled);
}
else {
untiled.setVisibility(true);
tiled.setVisibility(false);
map.setBaseLayer(untiled);
}
}
// Transition effect, can be null or 'resize'
function setTransitionMode(transitionEffect){
if (transitionEffect === 'resize') {
tiled.transitionEffect = transitionEffect;
untiled.transitionEffect = transitionEffect;
}
else {
tiled.transitionEffect = null;
untiled.transitionEffect = null;
}
}
// changes the current tile format
function setImageFormat(mime){
// we may be switching format on setup
if(tiled == null)
return;
tiled.mergeNewParams({
format: mime
});
untiled.mergeNewParams({
format: mime
});
/*
var paletteSelector = document.getElementById('paletteSelector')
if (mime == 'image/jpeg') {
paletteSelector.selectedIndex = 0;
setPalette('');
paletteSelector.disabled = true;
}
else {
paletteSelector.disabled = false;
}
*/
}
// sets the chosen style
function setStyle(style){
// we may be switching style on setup
if(tiled == null)
return;
tiled.mergeNewParams({
styles: style
});
untiled.mergeNewParams({
styles: style
});
}
// sets the chosen WMS version
function setWMSVersion(wmsVersion){
// we may be switching style on setup
if(wmsVersion == null)
return;
if(wmsVersion == "1.3.0") {
origin = map.maxExtent.bottom + ',' + map.maxExtent.left;
} else {
origin = map.maxExtent.left + ',' + map.maxExtent.bottom;
}
tiled.mergeNewParams({
version: wmsVersion,
tilesOrigin : origin
});
untiled.mergeNewParams({
version: wmsVersion
});
}
function setAntialiasMode(mode){
tiled.mergeNewParams({
format_options: 'antialias:' + mode
});
untiled.mergeNewParams({
format_options: 'antialias:' + mode
});
}
function setPalette(mode){
if (mode == '') {
tiled.mergeNewParams({
palette: null
});
untiled.mergeNewParams({
palette: null
});
}
else {
tiled.mergeNewParams({
palette: mode
});
untiled.mergeNewParams({
palette: mode
});
}
}
function setWidth(size){
var mapDiv = document.getElementById('map');
var wrapper = document.getElementById('wrapper');
if (size == "auto") {
// reset back to the default value
mapDiv.style.width = null;
wrapper.style.width = null;
}
else {
mapDiv.style.width = size + "px";
wrapper.style.width = size + "px";
}
// notify OL that we changed the size of the map div
map.updateSize();
}
function setHeight(size){
var mapDiv = document.getElementById('map');
if (size == "auto") {
// reset back to the default value
mapDiv.style.height = null;
}
else {
mapDiv.style.height = size + "px";
}
// notify OL that we changed the size of the map div
map.updateSize();
}
function updateFilter(){
if(pureCoverage)
return;
var filterType = document.getElementById('filterType').value;
var filter = document.getElementById('filter').value;
// by default, reset all filters
var filterParams = {
filter: null,
cql_filter: null,
featureId: null
};
if (OpenLayers.String.trim(filter) != "") {
if (filterType == "cql")
filterParams["cql_filter"] = filter;
if (filterType == "ogc")
filterParams["filter"] = filter;
if (filterType == "fid")
filterParams["featureId"] = filter;
}
// merge the new filter definitions
mergeNewParams(filterParams);
}
function resetFilter() {
if(pureCoverage)
return;
document.getElementById('filter').value = "";
updateFilter();
}
function mergeNewParams(params){
tiled.mergeNewParams(params);
untiled.mergeNewParams(params);
}
</script>Hors ligne
#4 Thu 04 December 2014 17:10
- Martin Tov
- Juste Inscrit !
- Lieu: Grenoble
- Date d'inscription: 5 Jan 2013
- Messages: 6
Re: GeoServer_OpenLayers: fonction Layer Switcher
Merci Alexandre!
Le problème vient en fait de la version de la librairie OpenLayers qu'utilise GeoServer.
Visiblement elle ne supporte pas la fonction Layer Switcher. Dans le code source de votre page web il faut remplacer le chemin d'import de la librairie qui est initialement sous la forme:
<script src="http://localhost:8001/geoserver/openlayers/OpenLayers.js" type="text/javascript"></script>
par le chemin pointant directement vers la librairie en ligne d'OpenLayers :
<script src="http://dev.openlayers.org/OpenLayers.js" type="text/javascript"></script>
Hors ligne
#5 Fri 05 December 2014 14:03
- VianneyD
- Participant assidu
- Date d'inscription: 30 May 2011
- Messages: 153
Re: GeoServer_OpenLayers: fonction Layer Switcher
Bien vu !
Merci pour le suivi.
Vianney Dugrain
Hors ligne
