transparent-layer-test

Este ejemplo demuestra como establecer la capa cartográfica de CartoCiudad como capa transparente.

Para ello es necesario indicar una nueva capa cartográfica que sirva como capa base de Cartovisor. Esta capa puede ser cualquiera de las permitidas por el API de OpenLayers, framework en el que se basa Cartovisor.

La capa utilizada en este ejemplo (Openlayers http://labs.metacarta.com/wms/vmap0) es especificada en el momento de la declaración de Cartovisor.

Para poder utilizar el API de OpenLayers antes de declarar el componente Cartovisor es necesario incluir el script 'OpenLayers.js' dentro de la cabecera del documento html.
Este script siempre se localiza en la ruta 'js/openlayers/OpenLayers.js' relativa respecto a la del script de Cartovisor (CartoVisor.js)

A su vez, se hace uso del parámetro "useCartoCiudadZoomLevels:false", para desactivar los niveles de zoom predefinidos para CartoVisor, así como del parámetro 'zoomBar:false' para sustituir la barra de zoom por el control de zoom estándar

Junto a estos parámetros, se especifica la proyección por defecto a utilizar mediante el parámetro 'projection' (Se especifica AUTO para indicar que se utilice la proyección de la capa base, en este caso ETRS89, compatible con la capa de CartoCiudad)

Ejemplo

Código fuente


            <html>

              <head>

                <title>transparent-layer-test</title>

                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

                <script src="http://www.cartociudad.es/VisualizadorCartografico/CartoVisor.js" type="text/javascript"></script>

                <script src="http://www.cartociudad.es/VisualizadorCartografico/js/openlayers/OpenLayers.js" type="text/javascript"></script>

              </head>

              <body>

                  <div id="container"></div>

                  <script type="text/javascript">

                      var cartovisor;

                      function loadlayer()

                      {

                            cartovisor.activateLayerSwitcherControl(true);

                      }

                      var wms_layer = new OpenLayers.Layer.WMS("OpenLayers WMS",

                                                               "http://labs.metacarta.com/wms/vmap0",

                                                               {layers: 'basic'});

                      cartovisor = new CartoVisor({elementId:'container',

                                                   longitude:-3.6935,

                                                   latitude:40.5308,

                                                   zoom:2,

                                                   onLoadFunction:loadlayer,

                                                   baseLayer:wms_layer,

                                                   useCartoCiudadZoomLevels:false,

                                                   zoomBar:false,

                                                   projection:'AUTO'});

                  </script>

              </body>

            </html>

Cartovisor. Transparent-layer-test

Ejemplo

Código fuente