[OpenLayers-Users] problems with loading speed
Michael
mdm at yachtpc.com
Fri Sep 16 11:49:04 EDT 2011
Andreas, your performance tips page,
http://ol-performance.appspot.com/,
is splendid!
Michael
On 9/16/2011 8:35 AM, Andreas Hocevar wrote:
> 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
>> Users at lists.osgeo.org
>> http://lists.osgeo.org/mailman/listinfo/openlayers-users
>
>
More information about the Users
mailing list