[Tilecache] TileCache Transparent Overlays. Is it possible?

Rupert de Guzman Jr rupert at mapcentral.ph
Thu Mar 29 21:08:41 EDT 2007


Hi Everybody,

Has anyone ever displayed a transparent overlay using TileCache 1.4?
It just doesn't seem to work for me.. 

Anyhow, I have two files up for viewing. "test1.cfm" is using tilecache both
on the baselayer (basemap) and the overlay (roads). The baselayer shows up
without any problems. The roads shows up but the layer is not transparent..

http://222.128.19.19/tilecache/test1.cfm 

I have added "test2.cfm" which shows transparent layers but not using TC...

http://222.128.19.19/tilecache/test2.cfm

tilecache.cfg http://222.128.19.19/tilecache/ (viewable)
+++++++++++++++++++++++++++++++++++
[basemap]
type=WMSLayer
url=http://127.0.0.1/cgi-bin/mapserv?map=/home/map/beijing/new/wms.map
layers=district,greens,major_river,minor_river
bbox=-180,-90,180,90
#maxresolution=1.40625
metaTile=true
extension=png

[roads]
type=WMSLayer
url=http://127.0.0.1/cgi-bin/mapserv?map=/home/map/beijing/new/wms.map
#layers=road4,road4label,road3,road3label,road2,road2label,road1,road1label,
road11,road11label
#bbox=116.1737,39.8211,116.5640,40.0799
#maxresolution=1.40625
bbox=-180,-90,180,90
layers=road1,road1label,road11,road11label
extension=png
metaTile=true

test1.cfm
+++++++++++++++++++++++++++++++++++++

     13     <cfset request.mapserv_plain = "/cgi-bin/mapserv" />
     14     <cfset request.mapserv_tile = "/tilecache/tilecache.py" />
     15
     16     <cfset request.basemap_plain =
"district,greens,major_river,minor_river" />
     17     <cfset request.basemap_tile = "basemap" />
     18
     19     <cfset request.roads_plain =
"road4,road4label,road3,road3label,road2,road2label,road1,road1label,road11,
road11label" />
     20     <cfset request.roads_tile = "roads" />
     21
     22     <script src="/OpenLayers/lib/OpenLayers.js"></script>
     23     <script type="text/javascript">
     24         <!--
     25         //var lon = 116.3842;
     26         //var lat = 39.9150;
     27         var lon = 116.3846;
     28         var lat = 39.9202;
     29         var zoom = 15;
     30         var map;
.....
     36         function init(){
     37
     38         OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
     39
     40         var options = {
     41                         controls: [new
OpenLayers.Control.MouseDefaults()],
     42                         'numZoomLevels': 20
     43                       };
     44
     45         map = new OpenLayers.Map( $('map'), options);
     46
     47         var layer_base = new OpenLayers.Layer.WMS(
     48                     "Base Layer",
     49                     "#request.mapserv_tile#",
     50                     {
     51                         map: '/home/map/beijing/new/wms.map',
     52                         layers: '#request.basemap_tile#',
     53                         format: 'image/png', 'transparent': 'false'
     54                     },
     55                     {
     56                         'numZoomLevels': 20 ,
     57                         maxExtent: new OpenLayers.Bounds(-180, -90,
180, 90)
     58                     }
     59                     );
     60
     61         var layer_road = new OpenLayers.Layer.WMS(
     62                     "Road Layer",
     63                     "#request.mapserv_tile#",
     64                     {
     65                         map: '/home/map/beijing/new/wms.map',
     66                         layers: '#request.roads_tile#',
     67                         format: 'image/png', 'transparent': 'TRUE'
     68                     },
     69                     {
     70                         'numZoomLevels': 20 ,
     71                         maxExtent: new OpenLayers.Bounds(-180, -90,
180, 90),
     72                         reproject: false
     73                     }
     74                     );
     75
     76         map.addLayer(layer_base);
     77         layer_base.setIsBaseLayer(true);
     78
     79         layer_road.setIsBaseLayer(false);
     80         map.addLayer(layer_road);
     81
     82
     83         map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
     84         map.addControl( new OpenLayers.Control.LayerSwitcher() );
     85         map.addControl( new OpenLayers.Control.PanZoomBar());
     86
     87         }

Appreciate it if someone could post some code snippets showing transparent
overlays in TC..

Best Regards,

Rupert




More information about the Tilecache mailing list