Hi,
having 22 layers on the map not only results in slow loading, but also in slow
dragging performance, expecially if these layers are tiled layers. Just imagine
the number of DOM elements the browser's rendering engine has to reposition
while drawing. As already suggested by others, it does make sense to combine
layers when they come from the same server. In the case of WMS, this can easily
be done by configure the layers param with a list of layers instead of a single
one, e.g.
new OpenLayers.Layer.WMS("my layer", "http://my/url";, {layers: ["a","b","c"]});
instead of
new OpenLayers.Layer.WMS("my layer", "http://my/url";, {layers: "a"});
new OpenLayers.Layer.WMS("my layer", "http://my/url";, {layers: "b"});
new OpenLayers.Layer.WMS("my layer", "http://my/url";, {layers: "c"});
You can also look at http://ol-performance.appspot.com/, which covers this and
other performance improvement tips.
Andreas.
On Sep 16, 2011, at 07:47 , boho wrote:
> hi ...
> I have 22 layers to be displayed with OpenLayers wms service.
> All layers have been displayed properly by the browser, but for loading, the
> browser takes a very long time, about almost 3 minutes ...
>
> the question then becomes, is there a way to speed up loading the browser
> with OpenLayers?
>
> My code looks like this:
>
> function init(){
>
>
> var lon = 99.09668;
> var lat = 2.890000;
> var zoom = 14;
>
> var map = new OpenLayers.Map('map',{ controls: [] });
> var myStyles = new OpenLayers.StyleMap({
> "default": new OpenLayers.Style({
> pointRadius: "${type}", // sized according to type
> attribute
> fillColor: "#ffcc66",
> strokeColor: "#ff9933",
> strokeWidth: 2,
> graphicZIndex: 1
> }),
> "select": new OpenLayers.Style({
> fillColor: "#66ccff",
> strokeColor: "#3399ff",
> graphicZIndex: 2
> })
> });
>
>
> var layer = new
> OpenLayers.Layer.WMS('Batas_Kab_region','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'Batas_Kab_region',transparent:true,
> format: 'image/gif'}, {isBaseLayer: true});
>
> var KEC = new
> OpenLayers.Layer.WMS('KEC','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'KEC',transparent:true,
> format: 'image/gif'}, {isBaseLayer: false});
> var BANK = new
> OpenLayers.Layer.WMS('BANK','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'BANK',transparent:true,
> format: 'image/gif'}, {isBaseLayer: false});
>
> var FASILITAS_IBADAH = new
> OpenLayers.Layer.WMS('FASILITAS_IBADAH','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'FASILITAS_IBADAH',transparent:true,
> format: 'image/gif'}, {isBaseLayer: false});
>
> var FASILITAS_LAINNYA = new
> OpenLayers.Layer.WMS('FASILITAS_LAINNYA','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'FASILITAS_LAINNYA',transparent:true,
> format: 'image/gif'}, {isBaseLayer: false});
>
> var FASILITAS_PENDIDIKAN = new
> OpenLayers.Layer.WMS('FASILITAS_PENDIDIKAN','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'FASILITAS_PENDIDIKAN',transparent:true,
> format: 'image/gif'}, {isBaseLayer: false});
>
> var Jembatan = new
> OpenLayers.Layer.WMS('Jembatan','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'Jembatan',transparent:true,
> format: 'image/gif'}, {isBaseLayer: false});
>
> var KANTOR_CAMAT = new
> OpenLayers.Layer.WMS('KANTOR_CAMAT','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'KANTOR_CAMAT',transparent:true,
> format: 'image/gif'}, {isBaseLayer: false});
>
> var KANTOR_LURAH = new
> OpenLayers.Layer.WMS('KANTOR_LURAH','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'KANTOR_LURAH',transparent:true,
> format: 'image/gif'}, {isBaseLayer: false});
>
> var KANTOR_WALIKOTA_PEMATANGSIANTAR = new
> OpenLayers.Layer.WMS('KANTOR_WALIKOTA_PEMATANGSIANTAR','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'KANTOR_WALIKOTA_PEMATANGSIANTAR',transparent:true,
> format: 'image/gif'}, {isBaseLayer: false});
>
> var Kel_Siantar = new
> OpenLayers.Layer.WMS('Kel_Siantar','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'Kel_Siantar',transparent:true,
> format: 'image/gif'}, {isBaseLayer: false});
>
> var KOTA_PEMATANGSIANTAR = new
> OpenLayers.Layer.WMS('KOTA_PEMATANGSIANTAR','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'KOTA_PEMATANGSIANTAR',transparent:true,
> format: 'image/gif'}, {isBaseLayer: false});
>
> var KTR_PEMERINTAHANPOLISI = new
> OpenLayers.Layer.WMS('KTR_PEMERINTAHAN_&_POLISI','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'KTR_PEMERINTAHAN_&_POLISI',transparent:true,
> format: 'image/gif'}, {isBaseLayer: false});
>
> var REL_KERETA_API = new
> OpenLayers.Layer.WMS('REL_KERETA_API','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'REL_KERETA_API',transparent:true,
> format: 'image/gif'}, {isBaseLayer: false});
>
> var RUMAH_SAKIT_UMUM = new
> OpenLayers.Layer.WMS('RUMAH_SAKIT_UMUM','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'RUMAH_SAKIT_UMUM',transparent:true,
> format: 'image/gif'}, {isBaseLayer: false});
>
> var Siantar_RingRoad = new
> OpenLayers.Layer.WMS('Siantar_RingRoad','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'Siantar_RingRoad',transparent:true,
> format: 'image/gif'}, {isBaseLayer: false});
>
> var SIANTAR_GANG = new
> OpenLayers.Layer.WMS('SIANTAR_GANG','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'SIANTAR_GANG',transparent:true,
> format: 'image/gif'}, {isBaseLayer: false});
>
> var SIANTAR_JALAN_KOTA = new
> OpenLayers.Layer.WMS('SIANTAR_JALAN_KOTA','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'SIANTAR_JALAN_KOTA',transparent:true,
> format: 'image/gif'}, {isBaseLayer: false});
>
> var SIANTAR_JALAN_PROPINSI = new
> OpenLayers.Layer.WMS('SIANTAR_JALAN_PROPINSI','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'SIANTAR_JALAN_PROPINSI',transparent:true,
> format: 'image/gif'}, {isBaseLayer: false});
>
> var SIANTAR_JALAN_NEGARA = new
> OpenLayers.Layer.WMS('SIANTAR_JALAN_NEGARA','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'SIANTAR_JALAN_NEGARA',transparent:true,
> format: 'image/gif'}, {isBaseLayer: false});
>
> var SPBU = new
> OpenLayers.Layer.WMS('SPBU','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'SPBU',transparent:true,
> format: 'image/gif'}, {isBaseLayer: false});
>
> var SUNGAI = new
> OpenLayers.Layer.WMS('SUNGAI','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'SUNGAI',transparent:true,
> format: 'image/gif'}, {isBaseLayer: false});
> vlayer = new OpenLayers.Layer.Vector( "Editable" );
> map.addLayer(vlayer);
>
>
> zb = new OpenLayers.Control.ZoomBox(
> {title:"Zoom box: Selecting it you can zoom on an area by
> clicking and dragging."});
> var panel = new OpenLayers.Control.Panel({defaultControl: zb});
> panel.addControls([
> new OpenLayers.Control.MouseDefaults(
> {title:'You can use the default mouse configuration'}),
> zb,
> new OpenLayers.Control.DrawFeature(vlayer,
> OpenLayers.Handler.Path,
> {title:'Draw a feature'}),
> new OpenLayers.Control.ZoomToMaxExtent({title:"Zoom to the
> max extent"})
> ]);
>
>
> map.addLayers([layer,KEC,Kel_Siantar,SUNGAI,Siantar_RingRoad,SIANTAR_GANG,SIANTAR_JALAN_KOTA,SIANTAR_JALAN_PROPINSI,SIANTAR_JALAN_NEGARA,BANK,FASILITAS_IBADAH,FASILITAS_LAINNYA,FASILITAS_PENDIDIKAN,Jembatan,KANTOR_CAMAT,KANTOR_LURAH,KANTOR_WALIKOTA_PEMATANGSIANTAR,KTR_PEMERINTAHANPOLISI,REL_KERETA_API,RUMAH_SAKIT_UMUM,SPBU]);
> map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
>
> I really hope the answer from my friends ...
>
>
> --
> View this message in context:
> http://osgeo-org.1803224.n2.nabble.com/problems-with-loading-speed-tp6800977p6800977.html
> Sent from the OpenLayers Users mailing list archive at Nabble.com.
> _______________________________________________
> Users mailing list
> us...@lists.osgeo.org
> http://lists.osgeo.org/mailman/listinfo/openlayers-users
--
Andreas Hocevar
OpenGeo - http://opengeo.org/
Expert service straight from the developers.
_______________________________________________
Users mailing list
us...@lists.osgeo.org
http://lists.osgeo.org/mailman/listinfo/openlayers-users
