Annonce
L'appel à participation est ouvert jusqu'au 19 janvier 2025!
#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
