Le portail francophone de la géomatique

Ext.onReady(function() {

//declarer le proxy cgi  a utiliser
OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
// [1] - layer
var lieu1 = new OpenLayers.Layer.WMS(
"lieunordtest"
,"geoserver/test1/wms?"
,{
                                       //width: '426',
                                       srs: 'EPSG:22391',
                                        layers: 'lieunordtest',
                                         //height: '1024',
                                        //styles: style1',
                                        format:'image/png',
                                        isBaseLayer: true
                                                                               
                                }
                                
                                
);
// [1] - layer
var Info1 = new OpenLayers.Layer.WMS(
"Info_nord"
,"geoserver/test1/wms?"
,{
                                       //width: '426',
                                       srs: 'EPSG:22391',
                                        layers: 'Info_nord',
                                         //height: '1024',
                                        styles: 'Nimp',
                                        format:'image/png',
                                        transparent: 'true'
                                        //isBaseLayer: true
                                                                               
                                }
                                                                
);
                
var mapUI = new GeoExt.MapPanel({
map: {
//niveau de zoom
numZoomLevels: 25,
//le systeme de projection par defaut est le 4326

//systeme de projection 
//unité
//max extent
 
projection: "EPSG:22391",
units: 'm',
maxExtent: new OpenLayers.Bounds(512118, 383858, 541842, 409867),
controls: [
new OpenLayers.Control.Navigation()
,new OpenLayers.Control.PanPanel()
,new OpenLayers.Control.ZoomPanel(),
new OpenLayers.Control.MousePosition(),//renvoie la position de la souris
new OpenLayers.Control.LayerSwitcher(),//selectionnneur de couche
new OpenLayers.Control.SelectFeature,
new OpenLayers.Control.Snapping

]
}
,region : 'center'
,title : 'map'
,layers: [lieu1,Info1]           
}
);
//ajout du vecteur a editer
var vectorLayer = new OpenLayers.Layer.Vector("Editable features");
mapUI.map.addLayer(vectorLayer);

//ajouter des controls
var modifyControl = new OpenLayers.Control.ModifyFeature(
    vectorLayer, {autoActivate: true},{standalone: true}
);
var drawControl = new OpenLayers.Control.DrawFeature(
    vectorLayer,
    OpenLayers.Handler.Polygon,
    {handlerOptions: {multi: true}}
);
mapUI.map.addControl(modifyControl);
mapUI.map.addControl(drawControl);
//modifyControl.activate();
vectorLayer.events.on({
    featureselected: function(evt) { modifyControl.activate(); },
    featureunselected: function(evt) { modifyControl.deactivate(); } 
});

// [3] - Data Panel
var dataPanel = new Ext.Panel({
region : 'west'
,layout : 'fit'
,width : 150
});
var tab=[];

//tree panel
tab.push({
    xtype: "treepanel",
    ref: "tree",
    region: "west",
    width: 200,
    autoScroll: true,
    enableDD: true,
    root: new GeoExt.tree.LayerContainer({
        expanded: true
    }),
    bbar: [{
        text: "Remove from Map",
        handler: function() {
            var node = app.tree.getSelectionModel().getSelectedNode();
            if (node && node.layer instanceof OpenLayers.Layer.WMS) {
                mapUI.map.removeLayer(node.layer);
            }
        }
    }]});
    
// appeler les couches du stock pour les afficher
tab.push({
    xtype: "grid",
    ref: "capsGrid",
    title: "Available Layers",
    region: "north",
    height: 150,
    viewConfig: {forceFit: true},
    store: new GeoExt.data.WMSCapabilitiesStore({
        url: "geoserver/test1/wms?SERVICE=WMS&REQUEST=GetCapabilities&VERSION=1.1.1",
        autoLoad: true
    }),
    columns: [
    {header: "Name", dataIndex: "name", sortable: true},
    {header: "Title", dataIndex: "title", sortable: true},
    {header: "Abstract", dataIndex: "abstract"}
],
bbar: [{
    text: "Add to Map",
    handler: function() {
        app.capsGrid.getSelectionModel().each(function(record) {
            var clone = record.clone();
            clone.getLayer().mergeNewParams({
                format: "image/png",
                transparent: true
            });
            mapUI.layers.add(clone);
            mapUI.map.zoomToExtent(
                OpenLayers.Bounds.fromArray(clone.get("llbbox"))
            );
        });
    }
}]
});


// wfs affichage de store et synchronisation avec la map 
tab.push({
    xtype: "editorgrid",
    ref: "featureGrid",
    title: "Feature Table",
    region: "south",
    height: 150,
    sm: new GeoExt.grid.FeatureSelectionModel(),
    store: new GeoExt.data.FeatureStore({
        fields: [
            {name: "id", type: "string"},
            {name: "name", type: "string"},
            {name: "nom", type: "string"}

        ],
        proxy: new GeoExt.data.ProtocolProxy({
            protocol: new OpenLayers.Protocol.WFS({
                    version: "1.1.0",
                    url: "http://localhost:8081/geoserver/wfs",
                    featurePrefix: 'test1', //geoserver worspace name
                    featureType: "Info_nord", //geoserver Layer Name
                    srsName: "EPSG:22391",
                    featureNS: "test1", // 
                    geometryName: "the_geometry" // field in Feature Type details with type "Geometry"
            })
        }),
        autoLoad: true
    }),
    columns: [
        {header: "id", dataIndex: "id", editor: {xtype: "textfield"}},
        {header: "name", dataIndex: "name", editor: {xtype: "textfield"}},
        {header: "nom", dataIndex: "nom", editor: {xtype: "textfield"}}
    ],
    bbar:
    [{
        text: "Delete",
    handler: function() {
        app.featureGrid.store.featureFilter = new OpenLayers.Filter({
            evaluate: function(feature) {
                return feature.state != OpenLayers.State.DELETE;
            }
        });
        app.featureGrid.getSelectionModel().each(function(rec) {
            var feature = rec.getFeature();
            //modifyControl.unselectFeature(feature);
            vectorLayer.removeFeatures([feature]);
            if (feature.state != OpenLayers.State.INSERT) {
                feature.state = OpenLayers.State.DELETE;
                vectorLayer.addFeatures([feature]);
            }
        });
    }}, new GeoExt.Action({
        control: drawControl,
        text: "Create",
        enableToggle: true
    }),
     {
    text: "Save",
    handler: function() {
        app.featureGrid.store.proxy.protocol.commit(
            vectorLayer.features, {
                callback: function() {
                    var layers = mapUI.layers;
                    for (var i=layers.length-1; i>=0; --i) {
                        layers[i].redraw(true);
                    }
                    app.featureGrid.store.reload();
                }
        });
    }
}]
    });


//fonction qui lit les attributs de la couche
var rawAttributeData;
var read = OpenLayers.Format.WFSDescribeFeatureType.prototype.read;
OpenLayers.Format.WFSDescribeFeatureType.prototype.read = function() {
    rawAttributeData = read.apply(this, arguments);
    return rawAttributeData;
};

//fonction qui reconfigure les parametres de l'affichage du grid selon la selection du node
function reconfigure(store, url) {
    var fields = [], columns = [], geometryName, geometryType;
    // regular expression to detect the geometry column
    var geomRegex = /gml:(Multi)?(Point|Line|Polygon|Surface|Geometry).*/;
    // mapping of xml schema data types to Ext JS data types
    var types = {
        "xsd:int": "int",
        "xsd:short": "int",
        "xsd:long": "int",
        "xsd:string": "string",
        "xsd:dateTime": "string",
        "xsd:double": "float",
        "xsd:decimal": "float",
        "Line": "Path",
        "Surface": "Polygon"
    };
    store.each(function(rec) {
        var type = rec.get("type");
        var name = rec.get("name");
        var match = geomRegex.exec(type);
        if (match) {
            // we found the geometry column
            geometryName = name;
            // Geometry type for the sketch handler:
            // match[2] is "Point", "Line", "Polygon", "Surface" or "Geometry"
            geometryType = types[match[2]] || match[2];
        } else {
            // we have an attribute column
            fields.push({
                name: name,
                type: types[type]
            });
            columns.push({
                xtype: types[type] == "string" ?
                    "gridcolumn" :
                    "numbercolumn",
                dataIndex: name,
                header: name,
                // textfield editor for strings, numberfield for others
                editor: {
                    xtype: types[type] == "string" ?
                        "textfield" :
                        "numberfield"
                }
            });
        }
    });
    app.featureGrid.reconfigure(new GeoExt.data.FeatureStore({
        autoLoad: true,
        proxy: new GeoExt.data.ProtocolProxy({
            protocol: new OpenLayers.Protocol.WFS({
                url: url,
                version: "1.1.0",
                featureType: rawAttributeData.featureTypes[0].typeName,
                featureNS: rawAttributeData.targetNamespace,
                srsName: "EPSG:22391",
                geometryName: geometryName,
                //nombre de champ maximal a afficher
                maxFeatures: 250
            })
        }),
        fields: fields
    }), new Ext.grid.ColumnModel(columns));
    app.featureGrid.store.bind(vectorLayer);
    app.featureGrid.getSelectionModel().bind(vectorLayer);
    // Set the correct sketch handler according to the geometryType
    drawControl.handler = new OpenLayers.Handler[geometryType](
        drawControl, drawControl.callbacks, drawControl.handlerOptions
    );
}

//appel de la fonction de changement d'attributs
function setLayer(model, node) {
    if(!node || node.layer instanceof OpenLayers.Layer.Vector) {
        return;
    }
    vectorLayer.removeAllFeatures();
    app.featureGrid.reconfigure(
        new Ext.data.Store(),
        new Ext.grid.ColumnModel([])
    );
    var layer = node.layer;
    var url = layer.url.split("?")[0]; // the base url without params
    var schema = new GeoExt.data.AttributeStore({
        url: url,
        // request specific params
        baseParams: {
            "SERVICE": "WFS",
            "REQUEST": "DescribeFeatureType",
            "VERSION": "1.1.0",
            "TYPENAME": layer.params.LAYERS
        },
        autoLoad: true,
        listeners: {
            "load": function(store) {
                app.featureGrid.setTitle(layer.name);
                reconfigure(store, url);
            }
        }
    });
}


//appeler le popup, layers fixera les couches a afficher

info = new OpenLayers.Control.WMSGetFeatureInfo({
    autoActivate: true,
    //choisir les couches a afficher
    layers: mapUI.map.layers,
    infoFormat: "application/vnd.ogc.gml",
    maxFeatures: 1,
    eventListeners: {
        "getfeatureinfo": function(e) {
            var items = [];
            Ext.each(e.features, function(feature) {
                items.push({
                    xtype: "propertygrid",
                    title: feature.fid,
                    source: feature.attributes
                });
            });
            new GeoExt.Popup({
                title: "Feature Info",
                width: 200,
                height: 200,
                layout: "accordion",
                anchored: true,
                map: mapUI.map,
                location: e.xy,
                items: items
            }).show();
        }
    }
});
//rajouter le control popup        
//mapUI.map.addControl(info);
//activer le popup
//info.activate();



//integrer la carte dans le tableau
tab.push(mapUI);

//interface finale
// [4] - Final User Interface
app=new Ext.Viewport({
layout: "border"
,items:tab
});
    
app.tree.getSelectionModel().on(
        "selectionchange", setLayer
    );

app.featureGrid.store.bind(vectorLayer);
app.featureGrid.getSelectionModel().bind(vectorLayer);

var sm = app.featureGrid.getSelectionModel();
sm.unbind();

sm.bind(vectorLayer);
sm.on("beforerowselect", function() { sm.clearSelections(); });
});    //EOF Ext.onReady

</script>
</head>
<body>
<div id="gxmap"></div>
</body>
</html>