Contribución:
Ing. Aldo Algorry
Anal. de Sist. José Jachuf
Tecnología y Base de Datos, IDECOR


20 de mayo 2020.

Damos continuidad a las notas sobre publicación de geoservicios de IDECOR en aplicaciones de mapas.

En la nota anterior “Cómo publicar (geo) webservice de IDECOR en una App Móvil híbrida – Parte 1”, presentamos una aplicación con funcionalidades mínimas, usando Openlayers y Quasar Framework.

En esta segunda parte veremos cómo modificar la aplicación desarrollada, incorporando funcionalidades más avanzadas. Seguiremos manteniendo como producto final una SPA (Single Page App). Durante el ejercicio, se añadirán las siguientes herramientas:

  • Controles de mapa.
  • Consultar (Identificar) elementos, obteniendo los datos desde los geoservicios de IDECOR.

El paso a paso

1. Abrir el proyecto. Para comenzar debemos abrir el proyecto que en la parte 1 hemos llamados mapa-idecor.

2. Instalar Dependencias. Antes de continuar necesitamos instalar Axios, un cliente http que se ejecuta en javascript, que nos permitirá hacer consultas sobre el conjunto de datos, en nuestro ejemplo “parcelas”. Para esta parte, será la única dependencia a instalar.

En el directorio mapa-idecor ejecutamos:
$ yarn add axios

3. Arrancando el Servidor de Desarrollo. Dentro del directorio mapa-idecor ejecutamos (como ya vimos en parte 1):
$ quasar dev

4. Editando el Proyecto. Para la edición del proyecto vamos a trabajar sobre el archivo src/pages/Index.vue

5. Agregar Controles al Mapa. Lo primero que haremos es importar los controles que se usarán de ejemplo. En la sección <script> del archivo src/pages/Index.vue agregamos el siguiente código:

import { ScaleLine, OverviewMap, ZoomSlider } from 'ol/control'

En los componentes vue se define una sección para declarar los métodos; aquí vamos a escribir el método onMapMounted que capturará el evento mounted del mapa (es cuando el mapa se monta en la página):

data () {
    return {      
      zoom: 14,
      center: [-64.2071193, -31.4133892],
      rotation: 0
    }
  },
  methods: {
    onMapMounted () {
      this.$refs.map.$map.getControls().extend([
        new ScaleLine(),
        new ZoomSlider(),
        new OverviewMap({ collapsed: true, collapsible: true })        
      ])     
    }
 }

Por último, asociaremos este método al evento mounted de mapa:

    <vl-map
      ref="map"      
      :load-tiles-while-animating="true"
      :load-tiles-while-interacting="true"
      data-projection="EPSG:4326"
      style="height: 86vh; width: 100%;"      
      @mounted="onMapMounted"
    >

Guardados los cambios podremos ver en el mapa los controles agregados (Figura 1). También pueden cambiarse la ubicación y los estilos de los controles, a través de css.

6. Consultar Información. Para agregar la funcionalidad de consulta o identificación de entidades, en este caso “parcelas”, primero deben importarse algunos componentes necesarios; para ello en la sección <script> agregamos el siguiente código:

import { transformExtent } from 'ol/proj'
import axios from 'axios'

Ahora, creamos el método onClickHandler, para asociarlo al evento click del mapa. En el tag vl-map agregamos:

@click="onClickHandler"

y en la sección methods escribimos la función onClickHandler:

onClickHandler (e) {
      if (this.selectedTool === 'identify') {
        var wmsServer = 'https://idecor-ws.mapascordoba.gob.ar/geoserver/idecor/wms'
        var bBOX = transformExtent(this.$refs.map.getView().calculateExtent(this.$refs.map.$map.getSize()),
          'EPSG:3857',
          'EPSG:4326'
        )
        var mapSize = this.$refs.map.$map.getSize()
        var x = Math.round(e.pixel[0])
        var y = Math.round(e.pixel[1])
        var paramsWMS = {
          SERVICE: 'WMS',
          VERSION: '1.1.1',
          REQUEST: 'GetFeatureInfo',
          LAYERS: 'idecor:parcelas',
          QUERY_LAYERS: 'idecor:parcelas',
          BBOX: bBOX.join(),
          FEATURE_COUNT: 1,
          WIDTH: mapSize[0],
          HEIGHT: mapSize[1],
          INFO_FORMAT: 'application/json',
          SRS: 'EPSG:4326',
          X: x,
          Y: y
        }
        axios.get(wmsServer, { params: paramsWMS })
          .then(response => {
            console.log(response.data)
            alert(JSON.stringify(response.data))
          })
          .catch(error => {
            console.log(error)
          })
      }
    }

Por último, vamos a crear un atributo selectedTool y una barra de herramientas simple, que cambiará el valor de este atributo.

En data agregamos el atributo:

data () {
    return {
      selectedTool: 'pan',
      zoom: 14,
      center: [-64.2071193, -31.4133892],
      rotation: 0
    }
  }

En el template y arriba del tag vl-map agregamos el siguiente código:

  <q-page class="flex flex-center">
    <q-toolbar class="bg-cyan text-white">
      <q-btn flat round dense icon="pan_tool" @click="selectedTool='pan'"/>
      <q-btn flat round dense icon="info" @click="selectedTool='identify'" />      
    </q-toolbar>
    <vl-map
      ref="map"
      :load-tiles-while-animating="true"
      :load-tiles-while-interacting="true"
      data-projection="EPSG:4326"
      style="height: 86vh; width: 100%;"
      @click="onClickHandler"
      @mounted="onMapMounted"
    >

Guardando los cambios obtenemos:

Si tocamos el icono info y clickeamos sobre una parcela podemos ver sus datos:

La aplicación vista en un dispositivo móvil queda de la siguiente manera:

Descargá el código!

Compartimos el código fuente de lo descripto en este artículo, disponible en el siguiente link.

Para usar descomprimir en una carpeta teniendo instalado node y/o yarn, y estando dentro de la carpeta se ejecuta:
$ yarn install
o
$ npm install

Automáticamente descargará todas las dependencias dentro de la misma carpeta. Luego para ver el proyecto usando Quasar, dentro de la carpeta debe ejecutarse: $ quasar dev para abrir el entorno de programación.

Si te interesan estos temas suscribite a IDECOR-Dev y mantenete en contacto con otros desarrolladores e interesados en aplicaciones y servicios geográficos, en el marco de la IDE provincial.

Categorías Novedades

Noticias Similares

Novedades

Esto pasó en el 4to Webinar: “MapasCordoba y Ciencia de Datos en aplicaciones urbanas”

20 de mayo 2020 Dando continuidad a la propuesta de capacitación #NosQuedamosEnCasa de IDECOR, el pasado viernes 15 de mayo se dictó el cuarto webinar sobre la temática “MapasCordoba y Ciencia de Datos en aplicaciones Leer más

Novedades

3 claves del Catastro de Córdoba hoy: 100% digital, abierto e integrado a la IDE provincial

Contribución:Ing. Agrim. Gustavo GarcíaDirector de la Dirección General de Catastro, Provincia de CórdobaAgrim. Mario A. PiumettoCoordinador de Infraestructura de Datos Espaciales (IDECOR) 12 de mayo 2020. Luego de un sostenido proceso de digitalización y modernización Leer más

Novedades

Cómo utilizar los datos de MapasCordoba para el Agro

Contribución: Lic. Geog. Natalia Raptópulos Infraestructura de Datos Espaciales (IDECOR) 12 de mayo 2020. ¿Sabías que en MapasCordoba podés encontrar numerosos recursos y datos de gran utilidad para el agro? En el geoportal MapasCordoba pueden Leer más