• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar al pie de página
logo web Geoinnova

Geoinnova

Consultoría y Formación en SIG y Medio Ambiente

  • Geoinnova
    • Asociación
    • Equipo
    • Visor de proyectos Geoinnova
    • Geolibrería
    • Alianzas Estratégicas
  • Consultoría
    • Consultoría y Desarrollo en Sistemas de Información Geográfica
    • Consultora Ambiental
    • Turismo sostenible
    • Planificación urbana y ordenación del territorio
    • Planes Urbanos de Actuación Municipal – PUAM
    • Geomarketing
  • Servicios
    • Planero Web
    • QElectricGIS
    • Plugins
  • Formación
    • Todos los cursos
    • Webinars
    • Máster y Diplomas
    • Cursos de ArcGIS
    • Cursos de QGIS
    • Cursos de Teledetección
    • Cursos de Medioambiente
  • Medio Ambiente
    • Consultora Ambiental
    • Estudios ambientales para proyectos de energías renovables
    • Estudios de Impacto e Integración Paisajística
    • Evaluación Ambiental Estratégica de planes y programas
    • Estudio de Impacto Ambiental para proyectos
    • Cálculo huella de carbono
    • Educación Ambiental
    • Cursos de Medioambiente
  • Coworking
  • Blog
    • SIG
    • Medio Ambiente
    • Teledetección
    • Programación y Desarrollo SIG
    • Corporativo
  • Contacto
    • Soporte de Clientes – Tickets
Programación y Desarrollo SIG

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

14/12/2020 Deja un comentario

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:

La posibilidad de acceder a un entorno 3D desde la base 2D es el propósito de esta la API TR3.js
Integración de Terre3 con OL6

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

Estructura de carpetas de la API 3D TR3.js en GitHub
Estructura de carpetas 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.

La posibilidad de acceder a un entorno 3D desde la base 2D es el propósito de esta la API TR3.js
Imagen animado del visor 3D con Terre3

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

Apúntate a nuestra newsletter semanal

"*" señala los campos obligatorios

Consentimiento*
Este campo es un campo de validación y debe quedar sin cambios.

Información legal

Cumplimos el RGPD (Reglamenteo General de Protección de Datos) y esta en la primera información que debes saber. Responsable: Asociación Geoinnova. Finalidad: Apuntarte en nuestra base de datos para poder enviarte nuestra newsletter y cualquier otra información de interes. Legitimidad: Nos das tu consentimiento para comunicarnos contigo. Derechos: Tienes derecho a acceder, rectificar, limitar y suprimir tus datos. Para una información más ampliada entra a nuestra política de privacidad.

Artículos relacionados

100 herramientas y recursos SIG aplicados al medio ambiente
29/03/2022
Visor NATURALMENTE BENAMAHOMA
Trabajo Fin de Máster TGIS de Geoinnova: Visor web ayuntamiento de Grazalema
11/11/2020
Nuevo Curso de Desarrollo de aplicaciones de mapas web en 3D con tecnologías de código abierto (ThreeJS)
13/03/2022

Agustín Costa

Desarrollador de web en entornos geoespaciales con una larga trayectoria profesional vinculado a proyectos del IGN y el CNIG en proyectos como la fototeca o iberpix. Mi experiencia ligada a proyectos de I+D e inquietud por los recursos gráficos como WebGL me ha llevado a crear proyectos personales como https://terre3.es donde trato de innovar libremente y aportar prototipos a la comunidad que resuelvan nuevas maneras de aplicar la información geoespacial en 3D. En Geoinnova soy tutor del Curso de Desarrollo de aplicaciones de mapas web en 3D con tecnologías de código abierto (ThreeJS)

Interacciones con los lectores

¿Quieres comentarnos algo? Adelante! Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Footer

Menú Legal

  • Aviso Legal
  • Política de privacidad
  • Política de cookies
  • Términos y condiciones

Otras páginas de interes

  • Promociones y descuentos en formación
  • Formación bonificada FUNDAE

Contacto

Calle Luis Morondo Urra nº 8 Bajo A
31006 Pamplona (Navarra)
info@geoinnova.org
+34 948 117 137

Horario de atención

Lunes a Viernes - 09:00 a 14:00 y de 16:00 a 19:00.
Fines de semana y Festivos - Exclusivamente por mail.
Horario de Verano (01 de julio al 30 de agosto): De lunes a viernes de 8 a 15h.

Síguenos en Redes Sociales

Apúntate a nuestra newsletter

"*" señala los campos obligatorios

Consentimiento*
Este campo es un campo de validación y debe quedar sin cambios.

Entidad adherida a Confianza Online Certificado de inscripción en el Registro de huella de carbono, compensación y proyectos de absorción Logo Plazox

© 2023 · Desarrollada por Geoinnova en colaboración con OikosMSP

Gestionar el Consentimiento de las Cookies
Utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. Lo hacemos para mejorar la experiencia de navegación y para mostrar anuncios personalizados. El consentimiento a estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.
Funcional Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Preferencias
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos. El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos anónimos. Sin una requerimiento, el cumplimiento voluntario por parte de su proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarlo.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en un sitio web o en varios sitios web con fines de marketing similares.
Administrar opciones Gestionar los servicios Gestionar proveedores Leer más sobre estos propósitos
Preferencias
{title} {title} {title}