Manual de uso de los ejemplos de IDEE-API
Anuncio
Manual de uso de los ejemplos de IDEE‐API
ÍNDICE
1.
Introducción......................................................................................................................................i
2.
Conceptos básicos de la IDEE_API ...................................................................................................ii
3.
Ejemplos .........................................................................................................................................iv
3.1.
Ejemplo 1....................................................................................................................................iv
3.2.
Ejemplo 2.....................................................................................................................................v
3.3.
Ejemplo 3................................................................................................................................... vii
3.4.
Ejemplo 4.....................................................................................................................................x
3.5.
Ejemplo 5................................................................................................................................... xii
3.6.
Ejemplo 6.................................................................................................................................. xiv
3.7.
Ejemplo 7................................................................................................................................. xvii
4.
Documentación para desarrolladores ......................................................................................... xxii
1. Introducción La IDEE‐API nace con el objetivo de proporcionar a los desarrolladores Web una forma sencilla de integrar en sus páginas, portales y aplicaciones, clientes de mapas interactivos basados en servicios IDEE y en otros servicios. Se basa en la librería libre de visualización de mapas OpenLayers para ofrecer una interfaz sencilla que permite la conexión de dichos clientes con ciertos servicios propios de la IDEE (IGN‐Base, PNOA, Cartociudad, Nomenclátor…), así como con cualquier otro servicio de mapas, incluido GoogleMaps, además de facilitar la creación de una sencilla interfaz de usuario con todas las herramientas básicas de este tipo de aplicaciones. Como elemento adicional permite asignar la estética de dicho visualizador de entre las incluidas por defecto, así como crear una propia de manera sencilla. Esta herramienta ofrece la posibilidad de crear desde el visualizador de mapas más básico hasta otros de mayor complejidad en el que distintos servicios de mapas de distintas fuentes sean accesibles al mismo tiempo, además de disponer desde una serie de funciones básicas para tratar los mapas, como el aumento o disminución del nivel de zoom, a otras más avanzadas, como la medición de áreas o distancias. Para entender la funcionalidad y uso de la IDEE‐API se listan en el capítulo 3 de este manual una serie de ejemplos propuestos en los que incrementalmente se irán usando las distintas características que dicha herramienta ofrece para la construcción de clientes de mapas. i
2. Conceptos básicos de la IDEE_API Un visualizador realizado a partir de la IDEE‐API sigue el siguiente esquema: <head>
...
<style type="text/css">
#map {
width: 512px;
height: 320px;
top: 5px;
left: 5px;
border: 1px solid darkblue;
}
</style>
<script type="text/javascript" language="javascript">
function init() {
...
}
</script>
...
</head>
<body onload="init()">
...
<div id="map"></div>
...
</body>
Dentro del código HTML se crea un contenedor DIV en el que se situará el visualizador. Las características estéticas básicas (tamaño, borde, etc.) del visualizador se definen mediante CSS. Al cargar el fichero HTML se ejecutará una función JavaScript, especificada dentro de la etiqueta BODY mediante el parámetro ONLOAD, que será la que cree el visualizador propiamente dicho. Será dentro de la función init(), que se ejecuta en la carga del fichero HTML, donde se defina todo lo relacionado con el visualizador a implementar, cuyo contenido cambiará en función de las características requeridas. En el capítulo 3 se muestran ejemplos de visualizadores con distintas características y por tanto con diferentes funciones init(), para cada uno de ellos se detallará y explicará el contenido de dicha función. El elemento fundamental de los visualizadores es el servicio de mapas. Los servicios de mapas que suministran tanto los mapas que muestra el visualizador, como información diversa de los mismos que se emplea en las diferentes herramientas disponibles en el visualizador. Para facilitar al usuario la creación de visualizadores, la IDEE_API cuenta con servicios de mapas predefinidos, para los que se define por defecto la información concerniente al nombre del servicio y a la dirección del servidor de mapas entre otras características. Estos servicios predefinidos son los siguientes: ii
-
IDEE_API.WMS.IDEEBase: Servicio de mapas IGN_Base. -
IDEE_API.WMS.Cartociudad: Servicio de mapas de Cartociudad. -
IDEE_API.WMS.PNOA: Servicio de mapas del Plan Nacional de Ortografía Aerea (PNOA). -
IDEE_API.WMS.GoogleMaps: Servicio de mapas de Google. Para el resto de características que se encuentran especificadas en estos servicios predefinidos, se obtiene la información realizando una petición GetCapabilities al servidor de mapas del servicio. En función de que se disponga de información al respecto en la respuesta a la petición, se definen las siguientes características: -
Capa a visualizar: en el caso de que no se especifique ninguna capa en la llamada al servicio predefinido, se asigna una por defecto. -
Información sobre leyendas: se define la información de las leyendas con respecto a cada capa y estilo de capa disponible. -
Información de copyright: se define la información concerniente tanto a las condiciones de uso del servicio, como a la propia información de copyright del servicio de mapas y de las capas del mismo. La información de copyright se define siguiendo el estándar OGC. Dicha información puede contener tres elementos, una descripción textual del copyright, una dirección web y la dirección de un logotipo. -
Información sobre el soporte de peticiones GetFeatureInfo: se define si el servicio soporta la realización de una petición GetFeatureInfo sobre cada una de sus capas disponibles. El uso de las características mencionadas y del resto de funcionalidades propias de la IDEE_API se muestra y explica en profundidad mediante los ejemplos del capítulo siguiente. iii
3. Ejemplos A continuación se muestran los distintos ejemplos creados para explicar el funcionamiento de la IDEE‐API desde su lado más básico hasta otros más complejos. En ellos se juega tanto con la funcionalidad para acceder a distintos servicios de mapas (propios de IDEE o no) como con las distintas herramientas a nivel de interfaz de usuario que se ofrecen, además de mostrar algunas de las diversas propiedades estéticas que se pueden configurar por parte del usuario. 3.1.Ejemplo 1 El primer ejemplo construye un visualizador básico que se surte de dos servicios de mapas ya definidos en la propia IDEE‐API (Cartociudad, capa por defecto; e IGN‐Base, capas IGNBase:RedHidrografica y IGN-Base:RedHidrografica_S), con el SRS por defecto. Esta parte se realiza en el siguiente fragmento de código: mapa = new IDEE_API.Map('map');
var wms_1 = new IDEE_API.WMS.Cartociudad();
mapa.addWMS(wms_1);
var layers = ["IGN-Base:RedHidrografica", "IGNBase:RedHidrografica_S"];
var wms_2 = new IDEE_API.WMS.IDEEBase({layers: layers, transparent:
true});
mapa.addWMS(wms_2);
iv
Una vez definidos los servicios de mapas a los que accederá el visualizador, hay que definir el área inicial mostrada. Como puede verse en el código, las coordenadas de esta área pueden definirse en cualquier SRS, coincida o no con el del mapa (por defecto, EPSG:4258). var extent = new IDEE_API.Bounds(671433.52398, 4608969.85769,
681919.79650, 4618763.69196, "EPSG:23030");
mapa.setExtent(extent);
Por último, hay que declarar las herramientas que se desea incluir en el interfaz de usuario. La IDEE‐
API ofrece todo tipo de ellas bien sea para moverse sobre el mapa visualizado o bien para obtener algún tipo de información del mismo. Existen dos tipos: las que llevan asociadas un icono que el usuario seleccionará cuando desee usarlas y las que están funcionando todo el tiempo sin necesidad de icono. Las primeras irán incluidas en una barra de herramientas, que podrá o no ser declarada; las segundas se incluirán en donde corresponda a cada caso. La posición de todas estas herramientas será configurable a nivel básico (si queremos la barra de escala a la izquierda o a la derecha, por ejemplo); en caso contrario se usarán las posiciones por defecto. En este ejemplo, se añaden al visualizador la barra de escala, la barra de navegación con información de coordenadas, el control que permite realizar zooms con la rueda del ratón, la barra que informa mientras los mapas se están cargando y una barra de herramientas por defecto, que incluye volver a la posición inicial, desplazarse sobre el mapa y aumentar y disminuir el zoom. Cualquiera de estas herramientas de la barra podría haberse incluido por separado, en el orden deseado, junto a otras que se mostrarán más adelante. var scaleBar = new IDEE_API.Tool.ScaleBar();
var navBar = new IDEE_API.Tool.NavBarInfo();
var mouse = new IDEE_API.Tool.MouseWheelZoom();
var loading = new IDEE_API.Tool.LoadingMap();
var toolbar = new IDEE_API.Tool.DefaultToolBar();
mapa.addTools([toolbar, scaleBar, navBar, mouse, loading]);
Y con esto ya tenemos creado nuestro primer visualizador básico. 3.2.Ejemplo 2 El segundo ejemplo hace uso de un mayor número de funcionalidades de la IDEE‐API a nivel de interfaz que el caso anterior, con la inclusión de, entre otras cosas, pestañas. v
Esta herramienta sirve para asociar unos determinados servicios de mapas a cada uno de los iconos incluidos en una nueva barra superior de forma que podemos alternar entre ver los mapas asociados a unos u otros servicios, manteniendo siempre el mismo área visualizada. También se incluyen otras herramientas nuevas, que se citarán más adelante. Pero, en primer lugar, la creación del visualizador con sus servicios de mapas. mapa = new IDEE_API.Map('map');
var wms_1 = new IDEE_API.WMS.IDEEBase();
mapa.addWMS(wms_1);
var wms_2 = new IDEE_API.WMS.GoogleMaps({type:
G_PHYSICAL_MAP});
mapa.addWMS(wms_2);
En este caso se han incluido dos servicios de mapas ya definidos, al igual que antes, en la propia IDEE‐API: IGN‐BASE, capa por defecto; y GoogleMaps, capa física. En esta ocasión, antes de definir el área visualizada inicial, se indican las herramientas a incluir. Están las mismas que antes más otras nuevas, que son: mapa de situación, medidor de áreas y distancias y acceso al geolocalizador de IDEE Nomenclator, el cual permite realizar búsquedas de entidades geográficas y centrar el mapa en las mismas. Por otra parte, se incluyen las antes citadas pestañas, que funcionan de la siguiente forma: se crean tantas como se quiera, indicando el nombre para cada una y asociándoles los servicios de mapas previamente creados que se desean ser visualizados al seleccionar cada una de ellas. En este caso, se crea una pestaña para cada servicio añadido, de tal forma que al seleccionar una u otra veremos la vi
misma área visualizada solicitando la información bien a IGN‐Base o bien a GoogleMaps. Si hubiese un servicio de mapas no incluido en ninguna pestaña este se mostraría en todas ellas. Por otra parte, un mismo servicio puede ir en más de una pestaña. var scaleBar = new IDEE_API.Tool.ScaleBar();
var navBar = new IDEE_API.Tool.NavBarInfo();
var mouse = new IDEE_API.Tool.MouseWheelZoom();
var loading = new IDEE_API.Tool.LoadingMap();
var toolbar = new IDEE_API.Tool.DefaultToolBar();
var overMap = new IDEE_API.Tool.OverviewMap();
var area = new IDEE_API.Tool.Area();
var distance = new IDEE_API.Tool.Distance();
var nom = new IDEE_API.Tool.Nomenclator();
mapa.addTools([toolbar, navBar, mouse, loading, overMap, nom,
distance, area, scaleBar]);
var tab1 = new IDEE_API.Tool.Tab("IGN-Base", [wms_1]);
var tab2 = new IDEE_API.Tool.Tab("GoogleMaps", [wms_2]);
mapa.addTools([tab1, tab2]);
Y por último se define el área inicial. var extent = new IDEE_API.Bounds(-3.90, 40.30, -3.50, 40.55,
"EPSG:4258");
mapa.setExtent(extent);
Cabe recordar que, al haber añadido una capa de GoogleMaps, el HTML en el que se encuentra nuestro visualizador debe incluir la clave que Google proporciona gratuitamente para el uso de su IDEE‐API. Esta puede obtenerse en la siguiente Web: http://code.google.com/intl/es‐
ES/apis/maps/signup.html. <script>
src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=..."
type="text/javascript"></script>
3.3.Ejemplo 3 El tercer ejemplo hace uso de todas las funcionalidades a nivel de interfaz de la IDEE‐API incluidas en la primera versión, además de aprovechar todas las posibilidades que ofrece para incluir diversos servicios de mapas, incluso con distintos sistemas de coordenadas y resoluciones. vii
Esta vez no se hace uso del SRS por defecto, si no que se usa el EPSG:4230, y se incluyen servicios de mapas teselados o no indistintamente. También se define el área inicial. mapa = new IDEE_API.Map('map', {srs: "EPSG:4230"});
var wms_1 = new IDEE_API.WMS.IDEEBase({layers:
["IGNBaseTodo"]});
mapa.addWMS(wms_1);
var wms_2 = new IDEE_API.WMS.GoogleMaps();
mapa.addWMS(wms_2);
var wms_3 = new IDEE_API.WMS.Cartociudad();
mapa.addWMS(wms_3);
var wms_4 = new IDEE_API.WMS("Hidrografia",
"http://www.ign.es/wms-inspire/ign-base",
{layers: ["IGN-Base:RedHidrografica", "IGNBase:RedHidrografica_S"],
transparent: true,
format: "image/png",
srsList: ["EPSG:23030"],
tiled: false});
mapa.addWMS(wms_4);
var wms_5 = new IDEE_API.WMS("Catastro",
"http://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx",
{layers: ["Catastro"],
transparent: true,
version: "1.1.1",
viii
format: "image/png",
srsList: ["EPSG:25830"],
tiled: false});
mapa.addWMS(wms_5);
var extent = new IDEE_API.Bounds(-3.90, 40.30, -3.50, 40.55,
"EPSG:4258");
mapa.setExtent(extent);
Como puede verse, se incluyen tanto servicios propios de la IDEE‐API (IGN‐Base, Cartociudad, GoogleMaps) como otros definidos por el usuario. Se definen distintos SRS, se cambian las capas y estilos por defecto de algunos servicios, se pide teselado o no según convenga, etc. Posteriormente, estos servicios se separarán en distintos conjuntos que se asociarán a las distintas pestañas. Por último, se definen las herramientas a incorporar al visualizador, que son las mismas que en el ejemplo anterior, con algún cambio a nivel de configuración (la barra de escala cambia su aspecto, por ejemplo; también el orden de las herramientas). var scaleBar = new IDEE_API.Tool.ScaleBar("left", "big");
var navBar = new IDEE_API.Tool.NavBarInfo();
var mouse = new IDEE_API.Tool.MouseWheelZoom();
var loading = new IDEE_API.Tool.LoadingMap();
var toolbar = new IDEE_API.Tool.DefaultToolBar();
var overMap = new IDEE_API.Tool.OverviewMap();
var area = new IDEE_API.Tool.Area();
var distance = new IDEE_API.Tool.Distance();
var nom = new IDEE_API.Tool.Nomenclator();
mapa.addTools([toolbar, scaleBar, navBar, mouse, loading,
overMap, distance, area, nom]);
var tab1 = new IDEE_API.Tool.Tab("Catastro + IGN-Base",
[wms_1, wms_5]);
var tab2 = new IDEE_API.Tool.Tab("GoogleMaps + Hidrografia
IGN-Base", [wms_2, wms_4]);
var tab3 = new IDEE_API.Tool.Tab("Cartociudad", [wms_3]);
mapa.addTools([tab3, tab2, tab1]);
Con la inclusión de las pestañas tenemos los distintos servicios de mapas agrupados en paquetes según nos conviene. Además, en este ejemplo ha habido un cambio de estética a nivel de colores en todas las herramientas. Esto se ha conseguido añadiendo a la cabecera la siguiente línea: <script type="text/javascript" language="javascript"
src="http://www.idee.es/IDEE_API/styles/red.js"></script>
Con esto conseguimos una estética, definida por defecto, basada en el color rojo. También está disponible en azul (por defecto), verde, gris y naranja. Como posibilidad adicional está la opción de definir nuestro propio fichero de propiedades (basado en uno de los ofrecidos por defecto) con los ix
iconos que deseemos. También existe la posibilidad de definir unos iconos específicos para cada herramienta al inicializarla. 3.4.Ejemplo 4 El cuarto ejemplo, partiendo de las funcionalidades a nivel de interfaz y de cargar distintos tipos de servicios de mapas antes descritas, incluye la posibilidad de cargar distintos ficheros GML, cuya ubicación deberá ser siempre local respecto al visualizador. Además permite definir manualmente el estilo con el que se mostrarán los elementos extraídos de los ficheros GML indicados. En primer lugar, al igual que antes, se define el mapa con los distintos servicios asociados así como las herramientas a nivel de interfaz que se incorporarán. También se hace una distribución en pestañas de los distintos servicios incluidos. mapa = new IDEE_API.Map('map');
var wms_1 = new IDEE_API.WMS.IDEEBaseTeselado();
mapa.addWMS(wms_1);
var wms_2 = new IDEE_API.WMS.GoogleMaps({type:
G_PHYSICAL_MAP});
mapa.addWMS(wms_2);
var wms_3 = new IDEE_API.WMS.Cartociudad();
mapa.addWMS(wms_3);
var
var
var
var
scaleBar = new IDEE_API.Tool.ScaleBar();
navBar = new IDEE_API.Tool.NavBarInfo();
mouse = new IDEE_API.Tool.MouseWheelZoom();
loading = new IDEE_API.Tool.LoadingMap();
x
var toolbar = new IDEE_API.Tool.DefaultToolBar("", "", true,
250);
var overMap = new IDEE_API.Tool.OverviewMap();
var area = new IDEE_API.Tool.Area();
var distance = new IDEE_API.Tool.Distance();
var nom = new IDEE_API.Tool.Nomenclator();
mapa.addTools([toolbar, navBar, mouse, loading, overMap, nom,
distance, area, scaleBar]);
var tab1 = new IDEE_API.Tool.Tab("IGN-Base WMS-C", [wms_1]);
var tab2 = new IDEE_API.Tool.Tab("GoogleMaps", [wms_2]);
var tab3 = new IDEE_API.Tool.Tab("Cartociudad", [wms_3]);
mapa.addTools([tab3, tab2, tab1]);
var extent = new IDEE_API.Bounds(-11.10, 35.50, 2.40, 44.50,
"EPSG:4258");
mapa.setExtent(extent);
Una vez especificadas todas las características del mapa y definida el área inicial a visualizar, se incluyen los distintos ficheros GML cuyo contenido se quiere visualizar sobre dicho mapa. Para ello se indica la ruta local de cada fichero GML y se carga. Además, opcionalmente, puede definirse el estilo de visualización para las geometrías contenidas en los ficheros GML que se van a pintar. En estos casos se han definido algunas de las propiedades de visualización para dos de los ficheros GML a cargar, tales como el color de relleno de los polígonos o el grosor de las líneas. var myGML = new
IDEE_API.File.GML("temp/GML/Zaragoza_municipio.gml");
mapa.loadGML(myGML);
var myStyle2 = {
fillColor: "#B40404",
fillOpacity: 0.2,
strokeColor: "#B40404",
strokeWidth: 2
};
var myGML2 = new
IDEE_API.File.GML("temp/GML/Comunidad_de_Madrid.gml", myStyle2);
mapa.loadGML(myGML2);
var myGML3 = new
IDEE_API.File.GML("temp/GML/Construcciones.gml");
mapa.loadGML(myGML3);
var myStyle3 = {
strokeColor: "#0000FF",
strokeWidth: 1
};
var myGML3 = new IDEE_API.File.GML("temp/GML/Rios.gml",
myStyle3);
mapa.loadGML(myGML3);
xi
El listado completo de propiedades de estilo configurables puede obtenerse en la correspondiente documentación de la IDEE_API, cuyo enlace se cita al final del documento. Si no se especifica ningún estilo, se establece por defecto uno asociado al estilo indicado para el visualizador. Como resultado obtenemos un visualizador con los distintos servicios (y sus características) especificados y, sobre dicho mapa, todos los elementos extraídos de los ficheros GML cargados, con el estilo de visualización definido en cada caso. 3.5.Ejemplo 5 El quinto ejemplo, al igual que el anterior, parte de todas las funcionalidades a nivel de interfaz y de cargar distintos tipos de servicios de mapas propias de la IDEE_API, e incluye la posibilidad de cargar distintos ficheros KML, cuya ubicación, al igual que antes, deberá ser local. En primer lugar, como en todos los ejemplos, se define el mapa con los distintos servicios asociados así como las herramientas a nivel de interfaz que se ofrecen. También distribuyen dichos servicios en pestañas. mapa = new IDEE_API.Map('map', {srs: "EPSG:4258"});
var wms_1 = new IDEE_API.WMS.IDEEBase();
mapa.addWMS(wms_1);
var wms_2 = new IDEE_API.WMS.GoogleMaps({type:
G_PHYSICAL_MAP});
mapa.addWMS(wms_2);
var wms_3 = new IDEE_API.WMS.Cartociudad();
xii
mapa.addWMS(wms_3);
var
var
var
var
scaleBar = new IDEE_API.Tool.ScaleBar();
navBar = new IDEE_API.Tool.NavBarInfo();
mouse = new IDEE_API.Tool.MouseWheelZoom();
loading = new IDEE_API.Tool.LoadingMap();
El tercer parámetro en la definición de la barra de herramientas es el que especifica si es externa al mapa del visualizador o no. En este ejemplo dicho parámetro toma el valor true por lo que la barra de herramientas se situará fuera del mapa del visualizador. var toolbar = new IDEE_API.Tool.DefaultToolBar("", "", true,
250);
var overMap = new IDEE_API.Tool.OverviewMap();
var area = new IDEE_API.Tool.Area();
var distance = new IDEE_API.Tool.Distance();
var nom = new IDEE_API.Tool.Nomenclator();
mapa.addTools([toolbar, navBar, mouse, loading, overMap, nom,
distance, area, scaleBar]);
var tab1 = new IDEE_API.Tool.Tab("IGN-Base", [wms_1]);
var tab2 = new IDEE_API.Tool.Tab("GoogleMaps", [wms_2]);
var tab3 = new IDEE_API.Tool.Tab("Cartociudad", [wms_3]);
mapa.addTools([tab3, tab2, tab1]);
var extent = new IDEE_API.Bounds(-11.10, 35.50, 16.40, 53.50,
"EPSG:4258");
mapa.setExtent(extent);
Cuando ya se han definido todas las características del mapa y el área inicial a visualizar, se incluyen los distintos ficheros KML cuyo contenido se quiere visualizar sobre dicho mapa. Para ello se indica la ruta local de cada fichero KML y se carga. Si el sistema de referencia de las distintas coordenadas que componen alguno de los KML difiere del propio del mapa, se ofrece la posibilidad de indicarlo como un segundo parámetro. En el caso no indicarlo, los datos del fichero KML pueden no mostrarse sobre los mapas que tengan diferente sistema de referencia asociado. var myKML = new IDEE_API.File.KML("temp/KML/European-roadtrip.kml", "EPSG:4230");
mapa.loadKML(myKML);
var myKML2 = new IDEE_API.File.KML("temp/KML/Sundials.kml");
mapa.loadKML(myKML2);
Finalmente se obtiene un visualizador con las características definidas y, sobre el mapa resultante, los distintos elementos definidos en los ficheros KML cargados. Además se permite mostrar la información asociada a cada uno de estos elementos mediante popups. Para ello, se añade un control al mapa de tal forma que al pasar el ratón por encima de los distintos elementos se muestra un popup con la información que contiene. Este popup se cierra al hacer click con el ratón sobre él o xiii
bien situando el puntero del ratón fuera del mismo. Al mostrar un popup, el icono sobre el que se ha situado el puntero del ratón se resalta aumentando su tamaño. Para saber la estructura correcta de los ficheros KML a incluir en un visualizador pueden tomarse como ejemplo los cargados en este caso. Así, para indicar, por ejemplo, la información que se mostrará en el popup, se incluirá la etiqueta “description” siguiendo la siguiente estructura <description><![CDATA[contenido_del_popup]></description>. 3.6.Ejemplo 6 El sexto ejemplo, como los anteriores, parte de todas las funcionalidades a nivel de interfaz y de cargar distintos tipos de servicios de mapas propias de la IDEE_API, además de añadir la funcionalidad de selección de tipo de capa de GoogleMaps a visualizar y de posibilitar la carga de un fichero GeoRSS, cuya ubicación, como en ejemplos anteriores, deberá ser local. En primer lugar, como en todos los ejemplos, se define el mapa con los distintos servicios asociados, distribuidos en pestañas, y las distintas herramientas a nivel de interfaz que se ofrecen. mapa = new IDEE_API.Map('map');
var wms_1 = new IDEE_API.WMS("IDEZar",
"http://idezar.zaragoza.es/IDEZar_Base_Tiled/WMSTileCache",
{version: "1.1.1",
layers: ["base"],
transparent: false,
format: "image/png",
srsList: ["EPSG:23030"],
isWMSC: true,
maxExtent: new IDEE_API.Bounds(651500, 4590500, 694100,
4645000, "EPSG:23030"),
xiv
resolutions:
["53.125201382285255","26.562600691142627","14.062553307075499",
"6.718775468936064","3.7500142152201517","1.7187565153092277",
"0.9375035538050343","0.5000018953626857","0.26375099980381617",
"0.131875499901908"]
});
mapa.addWMS(wms_1);
var wms_2 = new IDEE_API.WMS.GoogleMaps({type: G_NORMAL_MAP});
mapa.addWMS(wms_2);
var
var
var
var
var
scaleBar = new IDEE_API.Tool.ScaleBar();
navBar = new IDEE_API.Tool.NavBarInfo();
mouse = new IDEE_API.Tool.MouseWheelZoom();
loading = new IDEE_API.Tool.LoadingMap();
toolbar = new IDEE_API.Tool.DefaultToolBar("", "", true,
var
var
var
var
overMap = new IDEE_API.Tool.OverviewMap();
area = new IDEE_API.Tool.Area();
distance = new IDEE_API.Tool.Distance();
nom = new IDEE_API.Tool.Nomenclator();
250);
A continuación se añade la herramienta que permite seleccionar el tipo de capa de GoogleMaps (Mapa, Satélite o híbrida) que se desea visualizar. var googleSelector = new
IDEE_API.Tool.GoogleLayerSwitcher(wms_2, 25, 25, "left");
mapa.addTools([toolbar, navBar, mouse, loading, overMap, nom,
distance, area, scaleBar, googleSelector]);
var tab1 = new IDEE_API.Tool.Tab("IDEZar", [wms_1]);
var tab2 = new IDEE_API.Tool.Tab("GoogleMaps", [wms_2]);
mapa.addTools([tab2, tab1]);
La siguiente función define la pestaña que se encuentra activa y visible en el visualizador tras la carga inicial del mismo, en este ejemplo es la pestaña que contiene el servicio de GoogleMaps. mapa.setInitialTab(tab2);
var extent = new IDEE_API.Bounds(-1.02, 41.59, -0.81, 41.73,
"EPSG:4258");
mapa.setExtent(extent);
Una vez definido el mapa y sus características ya se pueden cargar los distintos ficheros GeoRSS, indicando su ruta, y añadiéndolos después al mapa. Al igual que sucedía antes, si el sistema de referencia en que está basado el fichero GeoRSS no es el mismo que el usado en el mapa, es necesario indicarlo. xv
var myGeoRSS = new
IDEE_API.File.GeoRSS("temp/GeoRSS/incidencias_Zaragoza.xml",
"EPSG:23030");
mapa.loadGeoRSS(myGeoRSS);
Con esto se consigue visualizar sobre el mapa, cuyas propiedades han sido definidas, el conjunto de elementos extraídos de los distintos GeoRSS. Al pasar el ratón por encima de los distintos iconos se muestra la información asociada a cada uno en un popup, que desaparece al movernos sobre el resto del mapa o se cambia por otro distinto al pasar sobre otro elemento. Respecto a la forma en la que el fichero GeoRSS tiene que estar construido para que el visualizador lo interprete correctamente, hay que tener en cuenta que las coordenadas de los distintos puntos tienen que ser de la forma “Y X”. El contenido del popup asociado a cada uno se extraerá del campo “description”, junto a lo indicado en “title” y, opcionalmente, en “link”. A modo orientantivo, para conocer la estructura correcta del fichero, puede obtenerse como ejemplo el GeoRSS aquí cargado. Existe una restricción con respecto al resto de ficheros de información que pueden cargarse en un visualizador, es decir, con los ficheros de tipo KML y GML. En caso de que se desee cargar la información de otro tipo de fichero (de cualquiera de los dos mencionados o de los dos a la vez), el fichero GeoRSS nunca deberá cargarse en último lugar. Como ejemplo práctico se supondrá que además del fichero GeoRSS “incidencias_Zaragoza.xml”, se desea cargar el fichero GML “Zaragoza_municipio.gml” y el fichero KML “Unizar.kml”. Para obtener un resultado correcto existen cuatro posibilidades de definición del orden de carga de dichos ficheros y cuya definición se muestra a continuación: •
Opción 1: GeoRSS ‐> KML ‐> GML var myGeoRSS = new IDEE_API.File.GeoRSS(
"temp/GeoRSS/incidencias_Zaragoza.xml", "EPSG:23030");
mapa.loadGeoRSS(myGeoRSS);
var myKML2 = new IDEE_API.File.KML("temp/KML/Unizar.kml");
mapa.loadKML(myKML2);
var myGML = new IDEE_API.File.GML("temp/GML/Zaragoza_municipio.gml");
mapa.loadGML(myGML);
•
Opción 2 : GeoRSS ‐> GML ‐> KML var myGeoRSS = new IDEE_API.File.GeoRSS(
"temp/GeoRSS/incidencias_Zaragoza.xml", "EPSG:23030");
mapa.loadGeoRSS(myGeoRSS);
var myGML = new IDEE_API.File.GML("temp/GML/Zaragoza_municipio.gml");
mapa.loadGML(myGML);
var myKML2 = new IDEE_API.File.KML("temp/KML/Unizar.kml");
mapa.loadKML(myKML2);
xvi
•
Opción 3: GML ‐> GeoRSS ‐> KML var myGML = new IDEE_API.File.GML("temp/GML/Zaragoza_municipio.gml");
mapa.loadGML(myGML);
var myGeoRSS = new IDEE_API.File.GeoRSS(
"temp/GeoRSS/incidencias_Zaragoza.xml", "EPSG:23030");
mapa.loadGeoRSS(myGeoRSS);
var myKML2 = new IDEE_API.File.KML("temp/KML/Unizar.kml");
mapa.loadKML(myKML2);
•
Opción 4: KML ‐> GeoRSS ‐> GML var myKML2 = new IDEE_API.File.KML("temp/KML/Unizar.kml");
mapa.loadKML(myKML2);
var myGeoRSS = new IDEE_API.File.GeoRSS(
"temp/GeoRSS/incidencias_Zaragoza.xml", "EPSG:23030");
mapa.loadGeoRSS(myGeoRSS);
var myGML = new IDEE_API.File.GML("temp/GML/Zaragoza_municipio.gml");
mapa.loadGML(myGML);
3.7.Ejemplo 7 El séptimo ejemplo, como todos los anteriores, parte de todas las funcionalidades a nivel de interfaz y de cargar distintos tipos de servicios de mapas propias de la IDEE_API. En este ejemplo, a diferencia de los anteriores, se añade una barra de herramientas externa al mapa del visualizador. Además, se añaden las herramientas de visualización de leyendas, copyright e información de servidores. Se añade también la herramienta que permite mostrar y ocultar capas en el visualizador, el árbol de capas. Por último se cargan dos ficheros KML y un fichero GML, cuya ubicación, al igual que en los ejemplos anteriores, deberá ser local. xvii
En primer lugar, como en todos los ejemplos, se define el mapa con los distintos servicios asociados que posteriormente se distribuirán en pestañas. mapa = new IDEE_API.Map('map');
var wms_1 = new IDEE_API.WMS.IDEEBase({
layers: ["IGN-Base:NucleosPob_mayores", "IGNBase:VialUrbano", "IGN-Base:CarreteraNacional"],
styles: ["NucleoPob_mayores", "VialUrbano",
"CarreteraNacional"]
});
mapa.addWMS(wms_1);
var wms_2 = new IDEE_API.WMS.GoogleMaps();
mapa.addWMS(wms_2);
var wms_3 = new IDEE_API.WMS.Cartociudad();
mapa.addWMS(wms_3);
Para el siguiente servicio se introduce la definición de dos parámetros nuevos en la definición del servicio, legend y copyright. El primer parámetro (legend), especifica la dirección de la imagen que contiene la información de la leyenda de las capas IGN‐Base:RedHidrografica y IGN‐
Base:RedHidrografica_S. El segundo (copyright), contiene la información correspondiente al copyright del servicio. En este segundo parámetro se definen las condiciones de uso del servicio (useConstraints) y la información del propio copyright del servicio (cprMainServ). La información de copyright se compone a su vez de otros dos parámetros, una cadena de texto (info) y una url (url), con la información y la dirección del proveedor del servicio respectivamente. Más información al xviii
respecto de los parámetros de definición de copyright, se puede encontrar en la correspondiente documentación de la IDEE_API, el enlace a la misma se cita al final del documento. var wms_4 = new IDEE_API.WMS("Hidrografia IGN-Base",
"http://www.ign.es/wms-inspire/ign-base",
{version: "1.3.0",
layers: ["IGN-Base:RedHidrografica", "IGNBase:RedHidrografica_S"],
styles: ["RedHidrografica", "RedHidrografica_S"],
legend: ["http://www.ign.es/wms-inspire/ignbase/leyendas/RedHidrografica.png", "http://www.ign.es/wmsinspire/ign-base/leyendas/RedHidrografica_S.png"],
copyright: {
useConstraints: "Este servicio se puede usar de modo
libre y gratuito en cualquier caso, siempre " +
"que se mencione al IGN como autor y propietario de la
información. Para más información" +
" Orden FOM 956/2008 (BOE 2008-08-04).",
cprMainServ:{
info: "© Instituto Geográfico Nacional de España",
urlDir: "http://www.ign.es/"
}
},
queryables: [true],
transparent: true,
format: "image/png",
srsList: ["EPSG:23030"],
tiled: false});
mapa.addWMS(wms_4);
Otro parámetro nuevo que se introduce para el servicio anterior es queryables que define si el servicio soporta la petición de GetFeatureInfo para las capas que se añaden al visualizador. Esta información se muestra mediante la herramienta Información de los servidores. var wms_5 = new IDEE_API.WMS("Catastro",
"http://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx",
{version: "1.1.0",
layers: ["Catastro"],
queryables: [true],
legend:
["http://ovc.catastro.meh.es/Cartografia/WMS/simbolos.png"],
copyright: {
useConstraints: "Acceso libre, pero se prohibe la
descarga masiva de porciones de cartografía."
},
transparent: true,
format: "image/png",
srsList: ["EPSG:4230"],
tiled: false
});
mapa.addWMS(wms_5);
var wms_6 = new IDEE_API.WMS.IDEEBase({
xix
layers: ["IGN-Base:NucleosPob_mayores", "IGNBase:NucleoPoblacion"],
transparent: true
});
mapa.addWMS(wms_6);
var extent = new IDEE_API.Bounds(-0.9819, 41.5804, -0.771,
41.721, "EPSG:4258");
mapa.setExtent(extent);
var
var
var
var
var
scaleBar = new IDEE_API.Tool.ScaleBar("left", "big");
navBar = new IDEE_API.Tool.NavBarInfo();
mouse = new IDEE_API.Tool.MouseWheelZoom();
loading = new IDEE_API.Tool.LoadingMap();
toolbar = new IDEE_API.Tool.DefaultToolBar("", "", true,
250);
var overMap = new IDEE_API.Tool.OverviewMap();
A continuación se definen la herramienta del árbol de capas (tree) y las de muestra de información de leyendas (legend), información de copyright (copyright) e información de servidores (featureInfo). La herramienta del árbol de capas no se añade a la barra de herramientas como el resto, se sitúa en el lateral derecho del mapa, bajo la apariencia de un icono en forma de cruz. Al pulsar con el botón izquierdo del ratón sobre el icono, se despliega una lista que contiene todas las capas visibles. Pulsando a la izquierda de los nombres de las capas, se define si la capa es visible o no. Para ocultar el árbol de capas, se ha de volver a pulsar con el botón izquierdo del ratón sobre la cruz. Cabe destacar que, los cambios en la visibilidad de las capas afectan a la información obtenida al emplear las herramientas muestran leyendas, copyright o información de servidores. var tree = new IDEE_API.Tool.LayerTree(true);
var legend = new IDEE_API.Tool.Legend();
var copyright = new IDEE_API.Tool.Copyright();
var featureInfo = new IDEE_API.Tool.GetFeatureInfo();
mapa.addTools([toolbar, scaleBar, navBar, mouse, loading,
overMap, tree, legend, copyright, featureInfo]);
var tab1 = new IDEE_API.Tool.Tab("Catastro + IGN-Base",
[wms_1, wms_5, wms_4]);
var tab2 = new IDEE_API.Tool.Tab("GoogleMaps + Ríos", [wms_2,
wms_4]);
var tab3 = new IDEE_API.Tool.Tab("Cartociudad +
Construcciones", [wms_3, wms_6]);
mapa.addTools([tab2, tab3, tab1]);
Una vez definido el mapa y sus características se cargan los distintos ficheros KML y GML, indicando su ruta, y añadiéndolos después al mapa. var myGML = new
IDEE_API.File.GML("temp/GML/Zaragoza_municipio.gml");
mapa.loadGML(myGML);
xx
var myKML = new IDEE_API.File.KML("temp/KML/European-roadtrip.kml");
mapa.loadKML(myKML);
var myKML2 = new IDEE_API.File.KML("temp/KML/Unizar.kml");
mapa.loadKML(myKML2);
El resultado final es similar al de ejemplos anteriores, un visualizador con las características definidas y, sobre el mapa resultante, los distintos elementos definidos en los ficheros KML y GML cargados. Por último, es necesario añadir que la información necesaria para la definición de las características introducidas en este ejemplo (leyendas, copyright y soporte de GetFeatureInfo) se obtiene a partir de la respuesta a una petición GetCapabilities al servicio de mapas. Se recomienda al usuario la consulta del estándar de OGC para los servicios de mapas que se puede encontrar en http://www.opengeospatial.org/standards/wms, en él se detalla la forma de realizar peticiones GetCapabilites y la información que se obtiene de las mismas. xxi
4. Documentación para desarrolladores Para obtener más información todas las funcionalidades ofrecidas por la IDEE‐API, así como conocer más en detalle como está estructurada la misma a nivel de desarrollador, puede consultarse la documentación en http://www.idee.es/IDEE_API/doc/. xxii
