Tutorial para la integración de servicios de IDECanarias con OPENLAYERS
Version 1.00 (01/02/2016): Visualización de servios WMS externos. Petición de información sobre los servicios.
Este tutorial muestra como integrar los servicios de mapas WMS de IDECanarias dentro de la API de OpenLayers. Se ha intentado simplificar lo más posible las llamadas de inicialización y configuración de capas. Esto permitirá a los usuarios generar visores con los servicios de mapas de IDECanarias de manera muy sencilla para integrarlos en sus webs. El usuario deberá tener unos conocimientos básicos de HTML y JavaScript.
Comenzaremos con un sencillo ejemplo de mapa usando servicios de IDECanarias:
Código fuente:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Ejemplo Mapa IDECanarias</title>
<!-- Cargamos JavaScript de IDECanarias para acceso a mapas en WMS -->
<script type="text/javascript" src="http://visor.grafcan.es/ol3/grafcan/IDECanarias_wms_ol_v2.js"></script>
<script type="text/javascript">
var map;
function initialize() {
map = IDECanarias_InicializarMapa("wms_OE,wms_CA,wms_MIX,wms_TOPO");
IDECanarias_Busqueda(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="position:absolute;width: 500px; height: 380px"></div>
</body>
</html>
En la cabecera HTML hay que añadir la librería de funciones de IDECanarias.
<script type="text/javascript" src="http://visor.grafcan.es/ol3/grafcan/IDECanarias_wms_ol_v2.js"></script>
Tambien debemos declarar la variable global map y la funcion para inicializar la API
<script type="text/javascript">
var map;
function initialize() {
map = IDECanarias_InicializarMapa("wms_OE,wms_CA,wms_MIX,wms_TOPO");
}
</script>
Carga del mapa al inicializar la página
<body onload="initialize()">
Por último debemos declar el objeto <div> que contendrá el mapa y que debe tener el atributo id="map_canvas", también es importante el estilo position:absolute, para que los objetos queden bien ubicados.
<div id="map_canvas" style="position:absolute;width: 500px; height: 380px"></div>
Listado de funciones disponibles en la libreria de IDECanarias. En un futuro se añadiran nuevas funciones a la libreria.
IDECanarias_InicializarMapa(Servicios,[Lat],[Lon],[Zoom])
Esta función añadirá un mapa con los servicios establecidos, opcionalmente se puede poner una localización y un nivel de Zoom. Los servicios irán entre comillas (string) y separados por comas. Se respeta el orden en que hayan sido declarados. El servicio por defecto será el primer servicio declarado.
Ejemplo de llamada:
map = IDECanarias_InicializarMapa("wms_OU,wms_CA,wms_MIX", 421559, 3130695, 11);
Catálogo de Servicios disponibles para usar con esta función
En un futuro se irán añadiendo nuevos servicios a este catálogo.
IDECanarias_CrearMarkers(infoMARKER,icono)
Función para añadir uno o varios Markers al mapa, para ello se necesitan dos parámetros, el primero es un ARRAY con la información de cada Marker, y el segundo parámetro es el icono con el que representará el marker en el mapa (El icono habrá que haberlo declarado previamente).
El array de Markers debe contener:
Coordenadas X,Y y opcionalmente código html para la ventana de información del marker.
Ejemplo:
var infoMARKER = new Array(); var html = < div style = 'line-height:60%' >< h3 > Playas < img src = 'http://visor.grafcan.es/ol3/grafcan/icons/playa.png' /> < / h3 >< hr/ >< p > Playa Blanca < / p>< p >Lanzarote< hr / >/ infoMARKER[0] = new Array(614150,3193300,html); var icono = "http://visor.grafcan.es/ol3/grafcan/icons/playa.png"; IDECanarias_CrearMarkers(infoMARKER,icono);
En la siguiente sección de Ejemplos pueden verse varios casos de uso de esta función
IDECanarias_EliminarMarkers()
Esta función elimina los Markers previamente cargados con la función IDECanarias_CrearMarkers().
Nuevo : IDECanarias_Busqueda(map, [Municipio/Isla])
Esta función habilita una caja para búsquedas en la base de datos de nombres geográficos y callejeros de IDECanarias
La búsqueda se realizará principalmente sobre las siguientes capas de información:
Opcionalmente se puede filtrar la búsqueda por municipios o isla usando el código de municipio o isla en el segundo parámetro.
Listado de códigos de municipio/islas:
Ejemplo simple:IDECanarias_Busqueda(map);
IDECanarias_Busqueda(map,"38002");
Se pueden utilizar listas de municipios separados por comas:
Ejemplo filtrando por varios municipios (Las Palmas de Gran Canaria / Telde)IDECanarias_Busqueda(map,"35016,35026");
IDECanarias_Busqueda(map,"6");
Ejemplos de búsquedas posibles:
Nuevo : IDECanarias_KML(map,url_kml,[minzoom],[maxzoom],[infowindow])
Esta función facilita la carga de ficheros KML permitiendo también tener control sobre los niveles de zoom en que queremos visualizarlo.
Opcionalmente podemos especificar los niveles de zoom sobre los que queremos visualizar la capa (por defecto:todos) y si queremos que se muestre una ventana de información (infowindow:true|false) al hacer click sobre la capa (por defecto:false).
Ejemplo de carga de KML:IDECanarias_KML(map,'http://visor.grafcan.es/ol3/grafcan/kml/candelaria2.kml',9,15,false);
IDECanarias_EliminarKML()
Esta función eliminar la visualización del fichero KML cargado con la anterior función. Actualmente no es posible cargar varias capas KML simultaneamente usando estas funciones.
Ejemplo:IDECanarias_EliminarKML();
Nuevo : IDECanarias_Info(info)
Esta función habilita/deshabilita la opción de pedir información de la capa activa en el mapa.
Realiza una llamada al metodo GetFeatureInfo del servicio WMS
Ejemplo de uso:IDECanarias_Info(true); //Activar IDECanarias_Info(false); //Desactivar
Nuevo : IDECanarias_AgregarWMS(nombre,urlwms,capas,formato,transparencia,[activar])
Esta función permite al usuario añadir al mapa un servicio WMS externo como capa overlay. Automáticamente se añade un botón con el que se podrá Activar/Desactivar la capa.
capas: nombre de las layers del servicio WMS
formato: formato MIME del servicio wMS
trasparencia: valor entre 0.0 y 1.0 (opaco)
activar: permite visualizar el servicio por defecto
Se pueden añadir varios servicios a la vez.
Ejemplo de uso:
IDECanarias_AgregarWMS("MOS","http://idecan2.grafcan.es/ServicioWMS/MOS?","MOS","image/png",0.6)
Nuevo : IDECanarias_crearBotones(servicios, combo)
Esta función permite crear botones para controlar los servicios que queramos añadir, primero se añaden los servicios con la función de la api map.addLayer y luego se añaden los botones.
Ejemplo de uso:
// Añadimos un servicio WMS externo como capas BASE (en este caso el Mapa de Ocupacion de Suelo de IDECanarias y Fincas Registrales)
map.addLayer(loadWMSParam("MOS","http://idecan3.grafcan.es/ServicioWMS/MOS?","WMS_MOS","image/png",0.4))
map.addLayer(loadWMSParam("FR","http://idecan.grafcan.com/ServicioWMS/FincasReg?","FR","image/png",0.8))
// Creamos los botones de las capas nuevas, podemos establecer el estilo y que aparezca un ComboBox
var bCombo = false;
IDECanarias_crearBotones("MOS, FR", bCombo)
Nuevo : IDECanarias_crearLogo()
Esta función añade el logo de IDECanarias al mapa
Ejemplo de uso:IDECanarias_CrearLogo();
Nuevo : IDECanarias_crearLogoUsuario(icono)
Esta función permite al usuario añadir un Logo personalizado al mapa
Ejemplo de uso:
IDECanarias_CrearLogoUsuario("images/gobcan2.png");
Para ver el codigo fuente de los ejemplos usar la opcion del navegador (botón derecho del ratón->ver código fuente).
Para cualquier consulta o soporte respecto al uso de esta librería escribir un correo a : desarrollo@grafcan.es
IDECanarias. Cartográfica de Canarias, S.A. (GRAFCAN) - Gobierno de Canarias