Como integrar la API 3D TR3.js sobre OpenLayers 6

La posibilidad de acceder a un entorno 3D desde la base 2D es el propósito de la API TR3.js que no requiere de ningún tipo de suscripción y es totalmente gratuita. Es capaz de ofrecer la realidad del terreno 3D en el territorio español gracias al servicio de 5m que emite el IGN a través del WCS y además complementa con un catálogo de herramientas que lo hacer realmente usable.

http://servicios.idee.es/wcs-inspire/mdt?version=2.0.1&request=GetCapabilities&service=WCS

La integración la podemos examinar en el Github correspondiente de donde recogeremos el algoritmo para describirlo aquí.

Y nos remite al siguiente ejemplo:

Como se ve el resultado es una sección de mapa que se replica en 3D al realizar movimientos sobre openlayers, respondiendo dinámicamente a los eventos

Estructura de la API 3D TR3.js en GitHub

Tiene una estructura sencilla donde encontramos TR3-min, unas librarías de jquery para manejar algunos elementos gráficos y proj4js para hacer un cambio de proyección.

• TR3-min: Contiene algunos recursos extra lo acompañan como un pdf para hacerse unas gafas anaglifo caseras o imágenes para el panel de mandos.
• TR3.js: Este recurso no se encuentra en GitHub directamente si no que los ejemplos lo recogen de la ruta que centraliza este recurso en http://terre3.es/API/TR3.js De este modo las actualizaciones de la API afectan a toda la gama de ejemplos conservando su transversalidad y consistencia.
• Jquery: Se usa para dos utilidades que son los sliders y un selector de colores para las geometrías que se quieran dibujar de forma interactiva.
• Proj4js: Se utiliza para el ejemplo y se encarga de solicitar en EPSG:25830 el mapa de OpenStreetMap.
• Index: Ejecuta el código para la realización del ejemplo.

Código para implementar la API 3D TR3.js en Openlayers

El código son básicamente 3 líneas de TR3 introducido en un ejemplo base de Openlayers que pasamos a desglosar.

En el HEAD tenemos las llamadas internas de todas las librerías que hemos mencionado Jquery, OL6, TR3 y proj4js y un poco de estilo CSS. El orden de llamada es indiferente ya que son librerías independientes que no interfieren en su base de código.

En el BODY se crean algunos dív para alojar los elementos HTML del ejemplo

<div id="map" class="map"></div>
<div id="TR3" class="TR3"></div>
<div id="tools" class="tools" ></div>
<div id="progress" style=”display:none”></div>

Map contiene el mapa de OpenLayers que realizamos, TR3 es el lugar donde crea el CANVAS para el mapa 3D y tools es la zona donde se crea el diálogo de jQuery para alojar la caja de herramientas de TR3. Por lo demás progress es un añadido de OpenLayers que resulta útil pero no necesario, así que le introducimos un estilo para ocultarlo y no afecte al ejemplo.

La zona de SCRIPT resuelve la integración.

ol.proj.proj4.register(proj4);
var projection = ol.proj.get("EPSG:25830");
projection.setExtent([-1500000, 3000000, 2000000, 5000000]);

Iniciamos la declaración de la proyección que vamos a utilizar con los parámetros oportunos, que en este caso es EPSG:25830 ya que es el sistema en el que el servicio WCS responde las consultas, aunque en breve también podrá hacerse en sistema Google mejorando la compatibilidad y haciendo innecesario este paso.

var osmLayer = new ol.layer.Tile({
  source: new ol.source.OSM({ crossOrigin: "anonymous" }),
});

Resolvemos la llamada a la capa de OpenStreetMap e introducimos el parámetro de crossOrigin para acceder al CANVAS que genera con privilegios de edición web.

var map = new ol.Map({
  target: "map",
  layers: [osmLayer],
  view: new ol.View({
    center: [440000, 4440000],
    zoom: 3.4,
    projection: projection,
  }),
});

Iniciamos el mapa de OpenLayers como cualquier otro centrado en las coordenadas que nos interesa y a un zoom adecuado.

TR3.setLoader("TR3-min/");
document.getElementById("tools").innerHTML = TR3.setPanel();
$("#tools").dialog();

Aquí aparecen ya dos de las tres líneas de TR3 que se requieren. setLoader, es la línea que prepara el código e indica como parámetro la ruta a la carpeta donde obtiene el resto de recursos, que en este caso se llama TR3-min, así cualquier desarrollador puede manipular esta carpeta a su antojo y referenciarla como desee.

La siguiente setPanel, no tiene parámetro ya que simplemente trae el HTML de la caja de herramientas para incorporarlo al div preparado para ello en tools.

Finalmente se introduce este último en un diálogo de jQuery.

function setTR3() {
  var bbox = map.getView().calculateExtent(map.getSize());
  var code = map.getView().getProjection().getCode();
  var desty = document.getElementById("TR3");
  var ori = document.getElementsByTagName("CANVAS")[0];
  TR3.setStart(ori, desty, bbox, code, bbox);
}
map.on("moveend", setTR3);
//map.on('update', setTR3)

Para ejecutar la función que genera el mapa 3D propiamente necesitamos incluirlo en una función ya que dependerá de eventos de OpenLayers. Moveend es el evento que ejecuta cuando el usuario termina de mover el mapa, y update es el evento que ejecuta cuando las tiles terminan de cargar. Éste último no existe propiamente y tengo que apoyarlo en una serie de funciones que se puede ver más detenidamente en este ejemplo “tile load events”.

https://openlayers.org/en/latest/examples/tile-load-events.html

En cualquier caso, ambos eventos llaman a la función que creamos setTR3 y culmina en la llamada de la librería setStart.

Para ejecutar setStart se necesitan varios parámetros.

• Ori: Es el lugar concreto donde la imagen del mapa de OpenLayers se crea, que en este caso es un CANVAS.
• Desty: Es el div que hemos creado y llamado “TR3” para ubicar el mapa 3D resultante.
• Bbox: Son las coordenadas que contienen la imagen del mapa en el CANVAS, la esquina inferior izquierda y la superior derecha en un array [x,y,X,Y].
• Code: Es el sistema de coordenadas empleado según el formato EPSG.
• Bbox: Son las coordenadas que se fija para presentar el mapa 3D, que habitualmente serán las mismas que el parámetro anterior como es en este caso también.

Así que cada vez que se ejecute esta función se recogen los parámetros y se ejecuta la función que genera el mapa 3D.

De esta forma aplicando 3 sencillas funciones, setLoader, setPanel y setStart y algo de conociendo el entorno de Openlayers 6 para pasar los parámetros adecuados, logramos incluir en nuestro visor un completo entorno 3D con herramientas para utilizar de forma directa.

Utilizando además recursos totalmente gratuitos y sin ningún tipo de suscripción partiendo de datos fiables y públicos.

Si te interesa el tema del desarrollo de aplicaciones web 3D, puedes leer también la entrada Expresando magnitudes 3D sobre mapas con ThreeJS

Etiquetas: web mapping