Annonce
#1 Tue 23 November 2010 10:30
- geobrie
- Participant actif
- Date d'inscription: 31 Jan 2010
- Messages: 120
Afficher plusieurs couches interogeables
Bonjour,
J'ai suivis attentivement excellent tutoriel décrit ici http://www.geotribu.net/node/144, mais j'ai un souci pour l'affichage de l'infobulle sur plusieurs couche à la fois.
Merci
Hors ligne
#2 Tue 23 November 2010 12:54
Re: Afficher plusieurs couches interogeables
Bonjour,
Un peu plus de détails serait le bienvenue pour vous répondre.
A priori, il vous manque une fonction qui s'applique sur les autres couches employées.
Voir l'exemple http://openlayers.org/dev/examples/sele … layer.html qui illustre ce cas.
Cordialement
ThomasG
Hors ligne
#3 Mon 29 November 2010 15:23
- geobrie
- Participant actif
- Date d'inscription: 31 Jan 2010
- Messages: 120
Re: Afficher plusieurs couches interogeables
Bonjour,
J'ai pris un peu de temps pour répondre car j'ai tenté plusieurs chose sans succès. Voici mon code :
Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
font: normal 12px verdana;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
background-color:#d2d9df;
}
#header{
background:url(./img/GeoExt.png) no-repeat;
margin : 0;
background-color:#12395F;
height : 100%;
width :100%;
}
#header p{
color : white;
text-align : right;
font-size: 1.2em;
font-weight: bold;
padding-right : 20px;
padding-top : 10px;
}
#header a{
color : white;
}
</style>
<head>
<link rel="stylesheet" type="text/css" href="../ext-3.2.1/resources/css/ext-all.css"></link>
<link rel="stylesheet" type="text/css" href="../GeoExt/resources/css/geoext-all-debug.css"></link>
<link rel="stylesheet" type="text/css" href="../GeoExt/resources/css/popup.css"></link>
<link rel="stylesheet" type="text/css" href="./css/ext-carto.css"></link>
<script type="text/javascript" src="../ext-3.2.1/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="../ext-3.2.1/ext-all.js"></script>
<script type="text/javascript" src="../OpenLayers/lib/OpenLayers.js"></script>
<script type="text/javascript" src="../GeoExt/lib/GeoExt.js"></script>
<script type="text/javascript">
var map=null;
var rowCliked = false;
Ext.QuickTips.init();
Ext.onReady(function() {
var scan = new OpenLayers.Layer.WMS( "scan",
"http://www.monsite.com/cgi-bin/mapserv?map=/var/www/monsite/htdocs/foret.map&",
{layers: 'scan'}
);
var 2009 = new OpenLayers.Layer.WFS( "2009",
"http://monsite/cgi-bin/mapserv?map=/var/www/monsite/htdocs/foret.map&",
{typename: '2009'}, { extractAttributes: true, styleMap: new OpenLayers.StyleMap({
strokeColor: "black",
fillColor : "rgb(255, 255, 153)",
strokeWidth: 2,
strokeOpacity: 1,
fillOpacity: 1
})
});
var 2010 = new OpenLayers.Layer.WFS( "2010",
"http://monsite/cgi-bin/mapserv?map=/var/www/monsite/htdocs/foret.map&",
{typename: '2010'}, { extractAttributes: true, styleMap: new OpenLayers.StyleMap({
strokeColor: "black",
fillColor : "rgb(221, 255, 170)",
strokeWidth: 2,
strokeOpacity: 1,
fillOpacity: 1
})
});
var parcellaire = new OpenLayers.Layer.WFS( "parcellaire",
"http://monsite/cgi-bin/mapserv?map=/var/www/monsite/htdocs/foret.map&",
{typename: 'parcellaire'}, { extractAttributes: true, styleMap: new OpenLayers.StyleMap({
strokeColor: "red",
fillColor : "rgb(255, 255, 255)",
strokeWidth: 2,
strokeOpacity: 1,
fillOpacity: 0
})
});
// [1] - ZoomSlider
var zSlider = new GeoExt.ZoomSlider({
vertical: true
,height: 110
,x: 18
,y: 85
,map: mapPanel
,plugins: new GeoExt.ZoomSliderTip({
template: '<div>Zoom Level: <b>{zoom}</b></div>'
})
});
//MapPanel
var mapPanel = new GeoExt.MapPanel({
map : {
maxExtent: new OpenLayers.Bounds(768621, 2375694, 780500, 2380814 ),
projection: new OpenLayers.Projection("EPSG:27582"),
displayProjection: new OpenLayers.Projection("EPSG:27582"),
maxResolution: 6.0,
numZoomLevels: 11,
units: 'meters',
controls: [
new OpenLayers.Control.Navigation()
,new OpenLayers.Control.PanPanel()
,new OpenLayers.Control.ZoomPanel()
]
,allOverlays : false
}
,region : 'center'
,title : 'Foret'
,layers : [2009,2010,parcellaire]
,items : [zSlider]
});
/* tree layer */
var treeConfig = new OpenLayers.Format.JSON().write([
{
text : 'Couches'
,icon : './img/maps-stack.png'
,expanded : true
,children : [
{
nodeType : 'gx_layer'
,draggable : false
,layer : 'coupes_2009'
,qtip : "coupes 2009"
,icon : './img/coupes_2009.png'
},{
nodeType : 'gx_layer'
,draggable : false
,layer : 'coupes_2010'
,qtip : "coupes 2010"
,icon : './img/coupes_2010.png'
}
]
}
], true);
var layerTree = new Ext.tree.TreePanel({
title : "Couches(pour ouvrir cliquer ici)"
,root: {
nodeType : "async"
,expanded : true
,children : Ext.decode(treeConfig)
}
,loader: new Ext.tree.TreeLoader({
applyLoader: false
})
,animate : true
,enableDD : true
,useArrows : true
,rootVisible: false
});
/* GRID */
// [1] - Creation de l'entrepot de donnees
store = new GeoExt.data.FeatureStore({
layers : [2010, 2009]
,fields : [
{name: 'annee', type: 'string'}
,{name: 'type', type: 'string'}
,{name: 'volume', type: 'real'}
]
});
// create grid panel configured with feature store
gridPanel = new Ext.grid.GridPanel({
store: store
,columns : [{
header : "Annee"
,width : 100
,dataIndex : "annee"
}, {
header : "Type"
,width : 100
,dataIndex : "type"
}, {
header : "Volume"
,width : 100
,dataIndex : "volume"
}
]
,sm: new GeoExt.grid.FeatureSelectionModel()
});
var grid = new Ext.Panel({
title : 'Données (pour ouvrir cliquer ici)'
,layout :'fit'
,items : [gridPanel]
});
2010.events.on({
featureselected: function(e) {
if(typeof(popup) != "undefined"){
popup.destroy();
}
var content = "<b>Année :"+e.feature.attributes.annee+"</b><br /> Type : "+e.feature.attributes.type+"</b><br /> Volume prélèvé : "+e.feature.attributes.volume+" m³";
var tab = new Ext.TabPanel({
activeTab : 0
,frame: true
,border:false
,items: [{
title: 'Descriptif'
,html: content
},{
title: 'Coordonnées',
html:"nom"
}]
});
2009.events.on({
featureselected: function(e) {
if(typeof(popup) != "undefined"){
popup.destroy();
}
var content = "<b>Année :"+e.feature.attributes.annee+"</b><br /> Type : "+e.feature.attributes.type+"</b><br /> Volume prélèvé : "+e.feature.attributes.volume+" m³";
var tab = new Ext.TabPanel({
activeTab : 0
,frame: true
,border:false
,items: [{
title: 'Descriptif'
,html: content
},{
title: 'Coordonnées',
html:"nom"
}]
});
popup = new GeoExt.Popup({
feature : e.feature
,closable : true
,unpinnable : false
,collapse : false
,collapsible: false
,resizable : false
,width : 250
,height : 150
,anchored : true
,layout : 'fit'
,items: [ tab ]
});
popup.show();
}
});
var accordion = new Ext.Panel({
margins : '5 0 5 5'
,split : true
,width : 150
,layout :'accordion'
,items : [layerTree, grid]
});
//Data Panel
var dataPanel = new Ext.Panel({
title : 'Legende & couche'
,region : 'west'
,layout : 'fit'
,width : 200
,items : [accordion]
});
//Final User Interface
new Ext.Viewport({
layout: "border"
,items: [ mapPanel,dataPanel]
});
});
</script>
</head>
<body>
<div id="map">
</div>
</body>
</html>Merci
Dernière modification par geobrie (Thu 02 December 2010 00:17)
Hors ligne
