banniere

Le portail francophone de la géomatique


Toujours pas inscrit ? Mot de passe oublié ?
Nom d'utilisateur    Mot de passe              Toujours pas inscrit ?   Mot de passe oublié ?

Annonce

Rencontres QGIS 2025

L'appel à participation est ouvert jusqu'au 19 janvier 2025!

Pages: 1

 

#1 Wed 18 April 2012 10:30

ppluvinet
Participant assidu
Lieu: VALENCE
Date d'inscription: 6 Aug 2007
Messages: 617

Openlayers : IE n'affiche pas une couche vecteur

Bonjour,
J'ai créé une petite application avec Openlayer qui marche plutôt bien sur FireFox et qui marche beaucoup moins bien sur IE9.
Les problèmes rencontrés sont :
- des problèmes de lenteur
- une des couches ne s'affiche pas du tout sur IE9. Il s'agit de la couche masse_eau_simpl

Auriez-vous quelques suggestions ? Merci d'avance,

voici le code que j'utilise :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OGR2Layers</title>
<style>
 #map{width:700px;height:550px;}
</style>
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<!-- <script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script> -->
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(win_onload);

var map, selectsControls
function init(xmin, ymin, xmax, ymax){
    this.xmin = xmin;
    this.xmax = xmax;
    this.ymin = ymin;
    this.ymax = ymax;
    var option = {
        projection: new OpenLayers.Projection("EPSG:900913"),  
        displayProjection: new OpenLayers.Projection("EPSG:4326")
    };
    map = new OpenLayers.Map('map', option);
    olmapnik = new OpenLayers.Layer.OSM("OpenStreetMap Mapnik", "http://tile.openstreetmap.org/${z}/${x}/${y}.png");
    

    map.addLayer(olmapnik);
    map.setBaseLayer(olmapnik);
    var ls= new OpenLayers.Control.LayerSwitcher(); 
    map.addControl(ls); 
    ls.maximizeControl(); 
    map.addControl(new OpenLayers.Control.MousePosition());
    map.addControl(new OpenLayers.Control.Scale());
    map.addControl(new OpenLayers.Control.Permalink());
    map.addControl(new OpenLayers.Control.Attribution());
    map.addControl(new OpenLayers.Control.OverviewMap());
    map.addControl(new OpenLayers.Control.PanZoomBar());
    var masse_eau_simpl_template = { 
        strokeColor: "#0000ff",
        strokeOpacity: 1,
        strokeWidth: 5.0,
        fillColor: "0",
        fillOpacity: 1,
        label: "${EU_CD}",
        fontColor: "#0000ff",
        fontSize: "14px",
        fontFamily: "Courier New, monospace",
        fontWeight: "bold",
        labelAlign: "cm",
        labelXOffset: 16,
        labelYOffset: 6
    }
    var masse_eau_simpl_style = new OpenLayers.Style(masse_eau_simpl_template)
    //START QUERY masse_eau_simpl
    function onPopupClosemasse_eau_simpl(evt) {
        selectControl.unselect(selectedFeature);
    }
    function onFeatureSelectmasse_eau_simpl(feature){
        selectedFeature = feature;
        tablemasse_eau_simpl="<html><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'><body><table><tr><td><b>EU_CD:</b></td><td><i>"+feature.attributes.EU_CD+"</i></td></tr><tr><td><b>NAME:</b></td><td><i>"+feature.attributes.NAME+"</i></td></tr><tr><td><b>MODIFIED:</b></td><td><i>"+feature.attributes.MODIFIED+"</i></td></tr><tr><td><b>ARTIFICIAL:</b></td><td><i>"+feature.attributes.ARTIFICIAL+"</i></td></tr><tr><td><b>GEOL_CAT:</b></td><td><i>"+feature.attributes.GEOL_CAT+"</i></td></tr><tr><td><b>LAT:</b></td><td><i>"+feature.attributes.LAT+"</i></td></tr><tr><td><b>LON:</b></td><td><i>"+feature.attributes.LON+"</i></td></tr><tr><td><b>CRITMDO:</b></td><td><i>"+feature.attributes.CRITMDO+"</i></td></tr><tr><td><b>HYDROECOR:</b></td><td><i>"+feature.attributes.HYDROECOR+"</i></td></tr><tr><td><b>CTX_PISCI:</b></td><td><i>"+feature.attributes.CTX_PISCI+"</i></td></tr><tr><td><b>TYPE_FR:</b></td><td><i>"+feature.attributes.TYPE_FR+"</i></td></tr><tr><td><b>STRAH_MAX:</b></td><td><i>"+feature.attributes.STRAH_MAX+"</i></td></tr><tr><td><b>STRAH_MIN:</b></td><td><i>"+feature.attributes.STRAH_MIN+"</i></td></tr><tr><td><b>LENGTH:</b></td><td><i>"+feature.attributes.LENGTH+"</i></td></tr><tr><td><b>AVALTYPE:</b></td><td><i>"+feature.attributes.AVALTYPE+"</i></td></tr><tr><td><b>EUCDAVAL:</b></td><td><i>"+feature.attributes.EUCDAVAL+"</i></td></tr><tr><td><b>HERAMONT:</b></td><td><i>"+feature.attributes.HERAMONT+"</i></td></tr><tr><td><b>HERAVAL:</b></td><td><i>"+feature.attributes.HERAVAL+"</i></td></tr><tr><td><b>HERPLS:</b></td><td><i>"+feature.attributes.HERPLS+"</i></td></tr></table></body></html>"; 
        popup = new OpenLayers.Popup.FramedCloud("chicken", 
            feature.geometry.getBounds().getCenterLonLat(),
            new OpenLayers.Size(1000,500),
            tablemasse_eau_simpl,
            null,
            true,
            onPopupClosemasse_eau_simpl
        ); 
        feature.popup = popup;
        map.addPopup(popup);
    }
    function onFeatureUnselectmasse_eau_simpl(feature) {
        map.removePopup(feature.popup);
        feature.popup.destroy();
        feature.popup = null;
    }
    //STOP QUERY masse_eau_simpl
    var masse_eau_simpl = new OpenLayers.Layer.GML("masse eau", "masse_eau_simpl.GeoJSON", {format: OpenLayers.Format.GeoJSON, styleMap: masse_eau_simpl_style});
    map.addLayer(masse_eau_simpl);
    var RJ_point_template = { 
        pointRadius: 7.5,
        strokeColor: "#000000",
        strokeOpacity: 1,
        strokeWidth: 0.36,
        fillColor: "#fb6fcf",
        fillOpacity: 1
    }
    var RJ_point_style = new OpenLayers.Style(RJ_point_template)
    //START QUERY RJ_point
    function onPopupCloseRJ_point(evt) {
        selectControl.unselect(selectedFeature);
    }
    function onFeatureSelectRJ_point(feature){
        selectedFeature = feature;
        tableRJ_point="<html><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'><body><table><tr><td><b>NUMERO:</b></td><td><i>"+feature.attributes.NUMERO+"</i></td></tr><tr><td><b>TYPE:</b></td><td><i>"+feature.attributes.TYPE+"</i></td></tr><tr><td><b>LIBELLE:</b></td><td><i>"+feature.attributes.LIBELLE+"</i></td></tr><tr><td><b>NUM_STEP:</b></td><td><i>"+feature.attributes.NUM_STEP+"</i></td></tr><tr><td><b>NOM_STEP:</b></td><td><i>"+feature.attributes.NOM_STEP+"</i></td></tr><tr><td><b>NUMERO_MO:</b></td><td><i>"+feature.attributes.NUMERO_MO+"</i></td></tr><tr><td><b>LIBELLE_MO:</b></td><td><i>"+feature.attributes.LIBELLE_MO+"</i></td></tr><tr><td><b>ETAT:</b></td><td><i>"+feature.attributes.ETAT+"</i></td></tr><tr><td><b>INSEE:</b></td><td><i>"+feature.attributes.INSEE+"</i></td></tr><tr><td><b>COMMUNE:</b></td><td><i>"+feature.attributes.COMMUNE+"</i></td></tr><tr><td><b>ZONE_HYDRO:</b></td><td><i>"+feature.attributes.ZONE_HYDRO+"</i></td></tr><tr><td><b>X:</b></td><td><i>"+feature.attributes.X+"</i></td></tr><tr><td><b>Y:</b></td><td><i>"+feature.attributes.Y+"</i></td></tr><tr><td><b>GEO:</b></td><td><i>"+feature.attributes.GEO+"</i></td></tr><tr><td><b>COURS_EAU:</b></td><td><i>"+feature.attributes.COURS_EAU+"</i></td></tr><tr><td><b>MASDO_SUP:</b></td><td><i>"+feature.attributes.MASDO_SUP+"</i></td></tr><tr><td><b>RECEPTEUR:</b></td><td><i>"+feature.attributes.RECEPTEUR+"</i></td></tr></table></body></html>"; 
        popup = new OpenLayers.Popup.FramedCloud("chicken", 
            feature.geometry.getBounds().getCenterLonLat(),
            new OpenLayers.Size(1000,500),
            tableRJ_point,
            null,
            true,
            onPopupCloseRJ_point
        ); 
        feature.popup = popup;
        map.addPopup(popup);
    }
    function onFeatureUnselectRJ_point(feature) {
        map.removePopup(feature.popup);
        feature.popup.destroy();
        feature.popup = null;
    }
    //STOP QUERY RJ_point
    var RJ_point = new OpenLayers.Layer.GML("RJ", "RJ_point.GeoJSON", {format: OpenLayers.Format.GeoJSON, styleMap: RJ_point_style});
    map.addLayer(RJ_point);
    var RJI_point_template = { 
        pointRadius: 7.5,
        strokeColor: "#000000",
        strokeOpacity: 1,
        strokeWidth: 0.36,
        fillColor: "#e54c00",
        fillOpacity: 1
    }
    var RJI_point_style = new OpenLayers.Style(RJI_point_template)
    //START QUERY RJI_point
    function onPopupCloseRJI_point(evt) {
        selectControl.unselect(selectedFeature);
    }
    function onFeatureSelectRJI_point(feature){
        selectedFeature = feature;
        tableRJI_point="<html><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'><body><table><tr><td><b>NUMERO:</b></td><td><i>"+feature.attributes.NUMERO+"</i></td></tr><tr><td><b>TYPE:</b></td><td><i>"+feature.attributes.TYPE+"</i></td></tr><tr><td><b>LIBELLE:</b></td><td><i>"+feature.attributes.LIBELLE+"</i></td></tr><tr><td><b>NUMERO_MO:</b></td><td><i>"+feature.attributes.NUMERO_MO+"</i></td></tr><tr><td><b>LIBELLE_MO:</b></td><td><i>"+feature.attributes.LIBELLE_MO+"</i></td></tr><tr><td><b>TYPE_AMONT:</b></td><td><i>"+feature.attributes.TYPE_AMONT+"</i></td></tr><tr><td><b>AMONT:</b></td><td><i>"+feature.attributes.AMONT+"</i></td></tr><tr><td><b>AMONT0:</b></td><td><i>"+feature.attributes.AMONT0+"</i></td></tr><tr><td><b>ETAT:</b></td><td><i>"+feature.attributes.ETAT+"</i></td></tr><tr><td><b>INSEE:</b></td><td><i>"+feature.attributes.INSEE+"</i></td></tr><tr><td><b>COMMUNE:</b></td><td><i>"+feature.attributes.COMMUNE+"</i></td></tr><tr><td><b>ZONE_HYDRO:</b></td><td><i>"+feature.attributes.ZONE_HYDRO+"</i></td></tr><tr><td><b>X:</b></td><td><i>"+feature.attributes.X+"</i></td></tr><tr><td><b>Y:</b></td><td><i>"+feature.attributes.Y+"</i></td></tr><tr><td><b>GEO:</b></td><td><i>"+feature.attributes.GEO+"</i></td></tr><tr><td><b>COURS_EAU:</b></td><td><i>"+feature.attributes.COURS_EAU+"</i></td></tr><tr><td><b>MASDO_SUP:</b></td><td><i>"+feature.attributes.MASDO_SUP+"</i></td></tr></table></body></html>"; 
        popup = new OpenLayers.Popup.FramedCloud("chicken", 
            feature.geometry.getBounds().getCenterLonLat(),
            new OpenLayers.Size(1000,500),
            tableRJI_point,
            null,
            true,
            onPopupCloseRJI_point
        ); 
        feature.popup = popup;
        map.addPopup(popup);
    }
    function onFeatureUnselectRJI_point(feature) {
        map.removePopup(feature.popup);
        feature.popup.destroy();
        feature.popup = null;
    }
    //STOP QUERY RJI_point
    var RJI_point = new OpenLayers.Layer.GML("RJI", "RJI_point.GeoJSON", {format: OpenLayers.Format.GeoJSON, styleMap: RJI_point_style});
    map.addLayer(RJI_point);
    var Station_template = { 
        pointRadius: 8.5,
        strokeColor: "#000000",
        strokeOpacity: 1,
        strokeWidth: 0.36,
        fillColor: "#a40052",
        fillOpacity: 1,
        label: "${CodeStatio}",
        fontColor: "#a40052",
        fontSize: "14px",
        fontFamily: "Courier New, monospace",
        fontWeight: "bold",
        labelXOffset: 16,
        labelYOffset: 16
    }
    var Station_style = new OpenLayers.Style(Station_template)
    //START QUERY Station
    function onPopupCloseStation(evt) {
        selectControl.unselect(selectedFeature);
    }
    function onFeatureSelectStation(feature){
        selectedFeature = feature;
        tableStation="<html><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'><body><table><tr><td><b>CodeStatio:</b></td><td><i>"+feature.attributes.CodeStatio+"</i></td></tr><tr><td><b>code_stq:</b></td><td><i>"+feature.attributes.code_stq+"</i></td></tr><tr><td><b>code_masdo:</b></td><td><i>"+feature.attributes.code_masdo+"</i></td></tr><tr><td><b>Station:</b></td><td><i>"+feature.attributes.Station+"</i></td></tr><tr><td><b>X:</b></td><td><i>"+feature.attributes.X+"</i></td></tr><tr><td><b>Y:</b></td><td><i>"+feature.attributes.Y+"</i></td></tr></table></body></html>"; 
        popup = new OpenLayers.Popup.FramedCloud("chicken", 
            feature.geometry.getBounds().getCenterLonLat(),
            new OpenLayers.Size(1000,500),
            tableStation,
            null,
            true,
            onPopupCloseStation
        ); 
        feature.popup = popup;
        map.addPopup(popup);
    }
    function onFeatureUnselectStation(feature) {
        map.removePopup(feature.popup);
        feature.popup.destroy();
        feature.popup = null;
    }
    //STOP QUERY Station
    var Station = new OpenLayers.Layer.GML("Station", "Station.GeoJSON", {format: OpenLayers.Format.GeoJSON, styleMap: Station_style});
    map.addLayer(Station);
    selectControl = new OpenLayers.Control.SelectFeature(
        [masse_eau_simpl, RJ_point, RJI_point, Station, ],
        {
            clickout: true, toggle: false, 
            multiple: false, hover: false, 
            toggleKey: "ctrlKey", // ctrl key removes from selection
            multipleKey: "shiftKey" // shift key adds to selection
        }
    );
    map.addControl(selectControl);
    selectControl.activate();
    masse_eau_simpl.events.on({
        "featureselected": function(e) {
            onFeatureSelectmasse_eau_simpl(e.feature);
        },
        "featureunselected": function(e) {
            onFeatureUnselectmasse_eau_simpl(e.feature);
        }
    });
    
    RJ_point.events.on({
        "featureselected": function(e) {
            onFeatureSelectRJ_point(e.feature);
        },
        "featureunselected": function(e) {
            onFeatureUnselectRJ_point(e.feature);
        }
    });
    
    RJI_point.events.on({
        "featureselected": function(e) {
            onFeatureSelectRJI_point(e.feature);
        },
        "featureunselected": function(e) {
            onFeatureUnselectRJI_point(e.feature);
        }
    });
    
    Station.events.on({
        "featureselected": function(e) {
            onFeatureSelectStation(e.feature);
        },
        "featureunselected": function(e) {
            onFeatureUnselectStation(e.feature);
        }
    });
    extent = new OpenLayers.Bounds(xmin, ymin, xmax, ymax).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
    map.zoomToExtent(extent);
};


</script>

</head>

<body onload="init()">

Merci d'avance,

Pascal PLUVINET

Hors ligne

 

#2 Wed 18 April 2012 21:24

ppluvinet
Participant assidu
Lieu: VALENCE
Date d'inscription: 6 Aug 2007
Messages: 617

Re: Openlayers : IE n'affiche pas une couche vecteur

J'ai résolu le problème de la couche qui ne s'affichait pas avec Internet Explorer.
Par contre, le temps d'affichage est vraiment long sur IE ! L'image s'affiche qu'au bout d'une 15aine de secondes sur IE et moins de 2 secondes sur FireFox. Y'aurait-t-il quelque chose à faire?
Merci d'avance,

Pascal PLUVINET

Hors ligne

 

#3 Tue 24 April 2012 10:15

sigdu80
Participant actif
Date d'inscription: 2 Sep 2010
Messages: 112

Re: Openlayers : IE n'affiche pas une couche vecteur

Bonjour Pascal,

c'est vrai que j'ai observé de la lenteur côté IE, mais je n'ai pas non plus la solution.
La lenteur vient aussi des couches vecteur non ?

Hors ligne

 

 

Pages: 1

Pied de page des forums

Powered by FluxBB