Skip to content

GeoJSON

IngenieroGeomatico edited this page Apr 1, 2024 · 39 revisions

GeoJSON, pese a no ser un estándar OGC (está camino de convertirse en ello), es un formato de intercambio de información geográfica muy extendido que, al igual que WFS, permite tener todos los elementos en el cliente. Es un formato estádar abierto diseñado para represetar objetos geográficos sencillos, junto con sus atributos no espaciales. Es ampliamente ultilizado en aplicaciones de cartografía en entornos web al permitir el intercambio de datos de manera rápida, ligera y sencilla. La grámatica del formato esta basada en WKT Well Known Text.

Un ejemplo del formato GeoJSON es:

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "name": "Dinagat Islands"
  }
}

Parámetros disponibles:

  • name: nombre de la capa.
  • legend: Indica el nombre que queremos que aparezca en el árbol de contenidos, si lo hay.
  • source: fuente de la capa. Si se indica source no se debe de indicar URL.
  • maxExtent: Restringe la visibilidad de la capa a una extensión.
  • url: url del fichero o servicio que genera el GeoJSON. Si se indica URL no se debe de indicar source.
  • infoEventType: Opcional Parametriza el método de activación del popup para obtener la información de una feature ('click' / 'hover'), por defecto 'click'.
  • extract: opcional, activa la consulta por click en el objeto geográfico, por defecto falso.
    • Si se desea personalizar un manejador propio para mostrar un "popup" o "label" al hacer click en alguno de los objetos geográficos, hay que establecer el atributo extract a true, para que no sólo se active nuestro manejador.

    • Las capas GeoJSON cuenta con métedos GET y SET para modificar el extract.

capa.extract = true; // activa consulta
capa.extract = false; // desactiva consulta
console.log(capa.extract); // muestra el estado de la propiedad
  • attribution: Atribución de la capa.

    • name. Nombre de la atribución
    • description. Descripción de la atribución.
    • url. URL de la atribución.
    • contentAttributions. Atribuciones por objetos geográficos, por defecto vacío.
    • contentType. Tipo de url de “contentAttributions” (KML o GeoJSON).
  • options: Estas opciones se mandarán a la implementación.

    • hide: Atributos ocultos.
    • show: Mostrar atributos.
    • minZoom: Zoom mínimo aplicable a la capa.
    • maxZoom: Zoom máximo aplicable a la capa.
    • visibility: Define si la capa es visible o no. Verdadero por defecto.
    • displayInLayerSwitcher: Indica si la capa se muestra en el selector de capas.
    • opacity: Opacidad de capa, por defecto 1.
    • style: Define el estilo de la capa.
    • predefinedStyles: Estilos predefinidos para la capa, aparecen en el selectir de capas "LayerSwitcher" para cambiar el estilo de la capa.
  • vendorOptions: Opciones para la biblioteca base (el código se envía directamente a la librería base para ejecutar la funcionalidad). Ejemplo vendorOptions:

{
 opacity: 0.1,
}

Ejemplo completo de creación de capa GeoJSON:

const layer = new M.layer.GeoJSON({
  name: "Provincias",
  url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/tematicos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=tematicos:Provincias&maxFeatures=50&outputFormat=application/json"
}, {
  maxZoom: 10, // Zoom mínimo aplicable a la capa
  // aplica un estilo a la capa
  style: new M.style.Polygon({
    fill: {
      color: 'red'
    }
  })
}, {
  opacity: 0.5 // aplica opacidad a la capa
});

Dependiendo la fuente del GeoJSON, para añadirlo al API-CNIG:

💡 En el caso de las capas de tipo GeoJSON, se diferencia si el mismo es servido (url) o si por el contrario lo tenemos en local (source).

1.- GeoJSON local:

// creamos la capa
const capa = new M.layer.GeoJSON({
    name: "capaJson",
    source: {
    "type": "FeatureCollection",
    "features": [{
        "properties": {
            "estado": 1,
            "vendor": {
                "mapea": {}
            },
            "sede": "/Sevilla/CHGCOR003-Oficina de la zona regable del Genil",
            "tipo": "ADSL",
            "name": "/Sevilla/CHGCOR003-Oficina de la zona regable del Genil"
        },
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [-5.278075, 37.69374444444444]
        }
    }],
    "crs": {
        "properties": {
            "name": "EPSG:4326"
        },
        "type": "name"
    }
})

// y la añadimos al mapa
mapajs.addLayers(capa);

// También es posible crear una capa vacía
const layer = new M.layer.GeoJSON({
  name: "Catastro",
  crs: "25830"
});
// Y añadirle posteriormente los objetos geográficos previamente creados
layer.addFeatures([feature1, feature2, feature3]);

⚠️ Hay que tener en cuenta que, en el caso de no establecer el crs, se tomará el establecido por defecto en el estándar: EPSG:4326

2.- GeoJSON servido:

const layer = new M.layer.GeoJSON(
  {
    name: "Provincias", 
    url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/tematicos/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=tematicos:Provincias&maxFeatures=50&outputFormat=application/json"
  } 
);

mapajs.addLayers(layer);

Ejemplos funcionales

1.INICIO
   1.1. Componentes de la API-CNIG
   1.2. Documentación y Puntos de acceso
   1.3. Primeros pasos
   1.4. Diagrama API CNIG

2. MAPA
2.1. Capas

 ■ 2.1.1. Fuentes
   • 2.1.1.1. Capas vectoriales
     + Vector
     + WFS
     + GeoJSON
     + KML
     + MVT
     + OGCAPIFeatures
     + MBTilesVector
     + GenericVector
   • 2.1.1.2. Capas ráster
     + WMS
     + WMTS
     + TMS
     + XYZ
     + OSM
     + MBTiles
     + GenericRaster
   • 2.1.1.3. Capas rápidas

 ■ 2.1.2. Simbolización
   • 2.1.2.1. Genérica
     + Puntos
     + Líneas
     + Polígonos
   • 2.1.2.2. Básica
     + Puntos
     + Líneas
     + Polígonos
   • 2.1.2.3. Avanzada
     + Coropletas
     + Proporcional
     + Categorías
     + Estadísticos
     + Mapas de Calor
     + Cluster
     + Línea de flujo
     + Composición

 ■ 2.1.3. Filtros

    2.3. Plugins

2.4. Paneles

  ■ Creación de panel desde cero sin controles

  ■ Tutorial Panel de un único control

  ■ Tutorial Panel de un único control con más de un botón

  ■ Tutorial Panel con más de un control

2.5. Eventos

  ■ Gestión de eventos
  ■ Gestión de eventos en controles personalizados

    2.6. Internacionalización

    2.7. Configuración

    2.8. Acceso librerías base

3. UTILIDADES

4. PROXY

5. API REST
 5.1. Parametrización API-REST
 5.2. Base de Datos API-REST
 5.3. API REST Actions
 5.4. Servicio de correos electrónicos
 5.5. Capas rápidas

6. PARAMETRIZACIÓN VISUALIZADORES

7. SOLUCIÓN DE PROBLEMAS

8. PROCESO DE VERSIONADO

9. GUÍA DE DESARROLLO
  > Guía de desarrollo de plugins
  > Guía de desarrollo de visualizadores con React
  > Guía de desarrollo de componentes
  > Guía para el desarrollo de API-CNIG
  > Compilación proyecto API-CNIG

Clone this wiki locally