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.

Responder a Lidia Cancelar la respuesta

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