Cómo exportar su proyecto QGis a una página html en dos clics: el plugin Qgis2Web

¿Cómo compartir su trabajo de QGis con colegas que no cuentan con herramientas GIS? Como una página html disponible en cualquier navegador de Internet, esta es la opción más apropiada.

El plugin QSGis2Web proporciona una manera fácil de distribuir y visualizar su trabajo de QGIS como un mapa web utilizando, sin tener que ser un experto, OpenLayers o LeafLet.

Con este plugin, en unos pocos clics usted exporta su proyecto QGis como una página html. Crea un directorio que contiene la página index.html y los subdirectorios con todo lo necesario para ver su mapa, así como los datos utilizados.
Un proyecto típico de QGIS contiene diferentes datos: vector y   raster. QGIS2WEBf exporta capas vectoriales en formato GeoJSON, crea la base del mapa web utilizando la versión vigente de Leaflet o OpenLayers (opcional). Además, el plugin agrega los datos raster como una superposición de imágenes con un cursor de opacidad. Instale el plugin QGis2Web a partir del administrador de plugins ( Extensiones -> Administrar / Instalar Extensiones ).  

Se puede acceder al plugin a partir  del menú  Internet -> QGis2web

Generalidades

Puede elegir entre varias capas de base de mapa y definir la extensión inicial del mapa, así como las dimensiones del mapa en su documento HTML. Para facilitar la exportación de capas de gran tamaño, puede deshabilitar la opción de carga automática de datos en su proyecto QGis, o desactivar la vista de la capa. El mapa web generado cuenta con un control de visualización de las capas, y puede ser activado cuando se haya completado la creación del mapa. Si su capa tiene más de 1000 registros, no se mostrará en la ventana de vista previa, pero se incluirá en los datos exportados. La interfaz del plugin qgis2web

Encontrará 4 paneles, 3 pestañas y una barra de botones.

Vamos a empezar con este último. La barra de herramientas

El plugin tiene dos opciones de biblioteca de códigos para generar la página HTML. Si pretende utilizar el plugin  para crear una base de mapa y desea agrandarlo o modificarlo más adelante, obviamente elegirá la opción que más le convenga. Si no, depende de las características de su proyecto. De hecho, el plugin intenta reproducir lo mejor posible su proyecto (simbología, etiquetas, transparencia, …). Pero no todo puede reproducirse. Los Leaflet y OpenLayers no tienen las mismas posibilidades, según el caso, su proyecto será reproducido mejor por uno u otro.

Si cambia la opción en la interfaz, la vista de la ventana de vista previa se actualiza automáticamente y observará la representación con la nueva biblioteca de códigos. Por otro lado, para todas las demás modificaciones realizadas en los otros paneles, la actualización de la vista previa solo se realizará si hace clic en el botón Actualizar vista previa .

El botón Exportar genera la página html y exporta los datos a Json. La ventana de vista previa.

Puede ver una vista previa de la representación final en esta ventana. No olvide hacer clic en el botón Update preview para ver los cambios realizados en la configuración del complemento. No todos los elementos estarán, necesariamente, en la escala final. Como puede ver en la imagen anterior, la barra de leyenda tiene el tamaño final, pero no el mapa en sí.

Esta ventana no es solo una imagen, sino que también, reacciona como lo hará la página final (clics, realce, etc.) El panel de capas y grupos.

Este panel permite configurar dos cosas:

  • el hecho de que la capa se muestre de forma predeterminada o no: si marca la casilla Visible, la capa se visualizará tan pronto como se cargue la página HTML. Si la casilla no está marcada, su capa aparecerá en la barra de leyenda y tendrá que marcar su casilla en la página HTML para visualizarla.
  • La representación de las ventanas emerge con los atributos de las entidades: esta opción solo se aplicará en caso de que marque Show popups on hover en el panel de configuración general del plugin.

La gestión del grupo no siempre funciona. Si ha agrupado capas y no las ve en este panel, desagrupe las capas en su proyecto. Las tres opciones propuestas para el formateo de las ayudas visuales proporcionan los siguientes resultados:

El panel de configuración general.

Ajustes de exportación de datos

Puede exportar el resultado a un directorio o a un sitio ftp en su servidor. Según sea el caso, haga clic en el botón … para definir el directorio o los parámetros de conexión.

La ubicación de la biblioteca de mapping le permite cargar las bibliotecas OpenLayers o Leaflet en el directorio que se creará, o poner una línea de llamada para estas bibliotecas en línea. La primera opción es más voluminosa pero más segura operativamente.

La opción Minify GeoJson files elimina los espacios innecesarios en los archivos GeoJson. Si sus datos son voluminosos, es una forma de reducir su tamaño.

La otra forma de reducir el tamaño de los datos es manipular el nivel de detalle de las geometrías. Opcion de Precision permite generalizar geometrías de tipo línea y polígono. La opción de Maintain no cambia las geometrías. Los valores del 1 al 15 determinan el grado de generalización de las geometrías, antes de su exportación. El valor 1 corresponde a la mayor generalización, el valor 15 a la menor.

Configuración de la escala y el zoom.

Extent permite definir la extensión del mapa. Canvas extent considera el alcance de la vista actual de su proyecto QGis. Fit to layers extent mostrará la extensión del mapa correspondiente a la extensión de la capa más grande. Esto se calcula solo en las capas locales, ya sean vectoriales o raster, no en las posibles capas provenientes de conexiones WFS o WMS.

Max and min zoom level permite definir el rango de zoom autorizado para el mapa.

Restrict to extent , si está marcado, evita salir del marco definido del mapa.

Ajustes de apariencia

  • Add address search  agrega un campo que le permite ingresar una dirección y ubicar el mapa en ella, usando la geocodificación de direcciones.
  • Add layers list agrega la barra de leyenda de las capas.
  • Geolocate habilita un botón que permite, al hacer clic en él, centrar el mapa en la posición del usuario. Tenga cuidado, con Chrome esta opción solo funciona si su mapa  está localizado en HTTPS.
  • Highlight on hover resalta las entidades cuando es barrido por el mouse.
  • Layer search permite configurar un campo de búsqueda en un atributo de una de las capas. Una vez que se ingresa un valor en este campo, si el valor se existe en la tabla de atributos, el mapa se centra en la entidad
  • Match project CRS define el sistema de coordenadas del mapa de salida. Si la casilla está marcada, el sistema utilizado por la tarjeta será el mismo que el del proyecto QGis. De forma predeterminada, si la casilla no está marcada, se aplicará es el sistema esférico Mercator (EPSG: 3857).
  • Add measure tool agrega una herramienta de medición al mapa resultante.
  • Show popups on hover, si está marcado, muestra información sobre las herramientas para los atributos
  • Template permite elegir el modelo de mapa de salida. La opción de pantalla completa creará un mapa con el mismo tamaño de la pantalla del usuario, y el tamaño del canvas creará un mapa del mismo tamaño que la ventana del mapa en su proyecto QGis. Puede agregar otros modelos al directorio de usuario / nombre / .qgis2 / qgis2web / templates.

El panel de control del mapa.

Este panel permite definir uno o más mapas. Puede hacer una selección múltiple presionando la tecla CTRL y haciendo clic en un elemento de la lista. El resultado en el mapa producido será un bloque en la leyenda para activar el fondo deseado.  

Preparación del proyecto QGis.

Parte de la representación del mapa final debe prepararse directamente en su proyecto QGis. En la pestaña Proyecto-> Propiedades del proyecto-> General , encontrará tres propiedades del mapa para configurarlo: título del proyecto, color de resaltado y color de fondo.   

El título solo aparecerá si selecciona Leaflet como biblioteca  

En Propiedades de la capa-> General puede cambiar el texto del nombre de la capa, que aparecerá en la barra de leyenda de su mapa, para hacerlo más comprensible, así como definir la escala de la capa.   

En Propiedades de la Capa-> Estilo , puede definir el estilo de su capa como un símbolo único, categorizado y graduado. Según los diseñadores del plugin, el estilo 2.5D, también debería funcionar, pero no tuve éxito … Continuará. En las propiedades de los campos capa-> puede definir el nombre que se mostrará para cada campo, rellenando la columna Alias.

El campo Editar herramienta controla lo que aparecerá en la información sobre las herramientas si selecciona la configuración Show popups on hover . Si hace clic en el valor de una casilla en la Herramienta de edición , tendrá la siguiente ventana:

Puede elegir entre tres opciones (las otras no tienen ningún efecto en el mapa generado):

  • Oculto: el campo no aparecerá en la información sobre herramientas.
  • Editar texto: la opción predeterminada, muestra el valor del campo de atributo en la información sobre herramientas
  • Foto: Si su campo contiene un enlace a una imagen, la imagen se incluirá en la información sobre herramientas.

Un ejemplo de la última opción se muestra aquí:  

Finalmente, el etiquetado de su proyecto QGis se exportará al mapa resultante, con algunas limitaciones:

  • No se admiten expresiones para etiquetas,
  • Los buffers alrededor de las etiquetas solo se exportan con OpenLayers 3,
  • Los fondos y los límites solo se exportan con Leaflet.
  • La exportación indica la fuente utilizada, pero no la incluye en el directorio exportado. Si el usuario no tiene la fuente utilizada, la etiqueta no aparecerá.
Si cet article vous a intéressé et que vous pensez qu'il pourrait bénéficier à d'autres personnes, n'hésitez pas à le partager sur vos réseaux sociaux en utilisant les boutons ci-dessous. Votre partage est apprécié !

5 thoughts on “Cómo exportar su proyecto QGis a una página html en dos clics: el plugin Qgis2Web

    1. El plugin crea una carpeta que contiene una pagina index.html con el mapa. Tienes que copiar esta carpeta en tu www del servidor ( o en u subdirectorio accesible). Patra acceder à la pagina sera tu dirección de servidor/nombre de la carpeta qgis2web/index.html

  1. Buena ayuda para quienes estamos ingresando a utilizar esta herramienta. Quisiera saber si es posible modificar datos en linea (ir corrigiendo en terreno) nuestra informaciòn. Si no se puede a travès de qgis2web, cual es la herramienta adecuada para ello. Muy agradecido. Gracias.

    1. Qgis2web, salvo excepciones, copia los datos en el servidor. Así que la posibilidad de modificarlos en línea no tiene gran utilidad puesto que luego habría que importarlos y actualizar las capas de orígen.
      La herramienta mas utilizada para actualizar capas en el terreno es QField que tiene la ventaja de no precisar computadora (tableta o teléfono)
      Si por el contrario, el tipo de trabajo de terreno necesita un acceso a los datos de orígen, una de las soluciones es a través de Geoserver en modo WFS-t

  2. Buenos días, me ha sido de mucha ayuda su explicación, sin embargo una vez realizado el plano ya en HTML, tengo ciertos problemas que no sé como resolver.
    El principal es que al buscar el nombre de una calle me aparece desplazado, imagino que es por el SRC, he probado a cambiarlo, pero no doy con el que tiene ese buscador.
    Otro problema es que cuando pongo un icono sobre el que pulsar para ver la información de un punto (para conseguir que fuera al pulsar y no al pasar por encima, he tenido que cambiar «mouseover» o «mouseout» por click, en el index, desconozco también si hay una forma más rápida), aunque lo ponga a un tamaño en la capa original, una capa shp de puntos, por ejemplo, 2m a escala, en la HTML no respeta esta escala o tamaño.
    ¿cómo puedo arreglarlo? ¿hay alguna otra herramienta que me permita cambiar el tipo de imagen final? por ejemplo la forma de las ventanas o el color de la leyenda. ¿me recomendáis algún curso que me pueda ayudar?.
    Muchas Gracias. Un saludo.

Deja una respuesta

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