Annonce
L'appel à participation est ouvert jusqu'au 19 janvier 2025!
Pages: 1
- Sujet précédent - [openLayers] changer le style d'une couche WMS sur un clic - Sujet suivant
#1 Mon 15 June 2009 13:28
[openLayers] changer le style d'une couche WMS sur un clic
Bonjour 
,
j'ai une page dans laquelle je choisis le mode d'analyse thématique pour une même couche WMS.
Un clic sur un lien doit déclencher le changement d'analyse. J'utilise la librairie jquery pour déclencher des actions sur le clic d'un lien.
Par contre, je n'arrive pas à faire fonctionner mon script. Lors du clic, la carte se redessine bien mais l'analyse reste identique....Je pense que le problème se situe au niveau de la fonction addOptions.
Si quelqu'un a une idée....
Le scipt javascript est le suivant:
Code:
<script defer="defer" type="text/javascript">
var map, MyLayer, style;
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;
function init(){
//JQUERY Part//
$("#choixAnalyse>a").click(function () {
//style=styles[$(this).attr("id")];
style='Access-Geo_Communes-SITUATION_URBANISME';
[b]MyLayer.addOptions({styles:style});[/b]
MyLayer.redraw();
});
///
var bounds = new OpenLayers.Bounds(
509235.36720909027, 4165874.0048436252,
600524.0683167534, 4312185.509794008
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 571.5293162124326,
projection: "EPSG:27574",
units: 'm'
};
map = new OpenLayers.Map('map', options);
// setup tiled layer
MyLayer = new OpenLayers.Layer.WMS(
"topp:Access-Geo_AnalyseCommunes2 - Tiled", "http://localhost:8080/geoserver/wms",
{
srs: 'EPSG:27574',
width: '393',
height: '550',
layers: 'topp:Access-Geo_AnalyseCommunes2',
format: 'image/png',
tiled: 'true',
tilesOrigin : "509235.36720909027,4165874.0048436252",
styles:style
},
{buffer: 0}
);
map.addLayer(MyLayer);
// 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);
};
</script>la page HTML complète:
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers map preview</title>
<!-- Import OL CSS, auto import does not work with our minified OL.js build -->
<link rel="stylesheet" type="text/css" href="http://localhost:8080/geoserver/openlayers/theme/default/style.css"/>
<!-- Basic CSS definitions -->
<style type="text/css">
/* General settings */
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: small;
#map {
clear: both;
position: relative;
width: 393px;
height: 550px;
border: 1px solid black;
}
<
/style>
<!-- Import OpenLayers, reduced, wms read only version -->
<script src="OpenLayers-2.7/OpenLayers.js" type="text/javascript">
</script>
<script src="jquery/jquery-1.3.2.js" type="text/javascript"></script>
<script defer="defer" type="text/javascript">
var map, MyLayer, style;
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;
function init(){
//JQUERY Part//
$("#choixAnalyse>a").click(function () {
//style=styles[$(this).attr("id")];
style='Access-Geo_Communes-SITUATION_URBANISME';
MyLayer.addOptions({styles:style});
MyLayer.redraw();
});
///
var bounds = new OpenLayers.Bounds(
509235.36720909027, 4165874.0048436252,
600524.0683167534, 4312185.509794008
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 571.5293162124326,
projection: "EPSG:27574",
units: 'm'
};
map = new OpenLayers.Map('map', options);
// setup tiled layer
MyLayer = new OpenLayers.Layer.WMS(
"topp:Access-Geo_AnalyseCommunes2 - Tiled", "http://localhost:8080/geoserver/wms",
{
srs: 'EPSG:27574',
width: '393',
height: '550',
layers: 'topp:Access-Geo_AnalyseCommunes2',
format: 'image/png',
tiled: 'true',
tilesOrigin : "509235.36720909027,4165874.0048436252",
styles:style
},
{buffer: 0}
);
map.addLayer(MyLayer);
// 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);
};
</script>
</head>
<body onload="init()">
<div id="choixAnalyse">
<a href=# id="PREF_SSPREF">PREF-SS-PREF</a>
<a href=# id="CO_COMMUNES">COMMUNAUTE DE COMMUNES</a>
<a href=# id="PAYS">PAYS</a>
<a href=# id="CANTON">CANTON</a>
<a href=# id="LOI">LOI</a>
<a href=# id="OPPOSABILITE">OPPOSABILITE</a>
<a href=# id="SITUATION_URBANISME">SITUATION URBANISME</a>
<a href=# id="SITUATION_ACTUELLE">SITUATION ACTUELLE</a>
</div>
<div id="map">
<img id="options" title="Toggle options toolbar" src="http://localhost:8080/geoserver/options.png"/>
</div>
<div id="nodelist">
<em>Click on the map to get feature info</em>
</div>
</body>
</html>j'ai simplifié le code javascript avant publication sur le forum.
normalement, mon code jquery récupère l'id de l'élément cliqué. Le style de la couche est alors fonction de cet id...
Merci!
Dernière modification par baobazz (Mon 15 June 2009 14:46)
geodata au cerema et petits billets en géomatique
Hors ligne
#2 Tue 16 June 2009 08:23
Re: [openLayers] changer le style d'une couche WMS sur un clic
bon, en, fait, c'était pas layer.redraw qu'il fallait que j'utilise mais la fonction layer.mergeNewParams({styles:'Access-Geo_Communes-SITUATION_URBANISME'})
Dernière modification par baobazz (Tue 16 June 2009 08:23)
geodata au cerema et petits billets en géomatique
Hors ligne
Pages: 1
- Sujet précédent - [openLayers] changer le style d'une couche WMS sur un clic - Sujet suivant
