Vector - Desarrollos-IDEE/API-IDEE GitHub Wiki

Las capas de tipo Vector son la base de todas las capas vectoriales, de esta capa heredan todas las capas vectoriales de la API-IDEE.

const capaVectorial = new IDEE.layer.Vector({ 
      name: 'capaVectorial',
      legend: 'Capa Vector'
});

Para añadir los objetos geográficos (features) a la capa, se tienen que crear con IDEE.Feature e incluirlo a la capa utilizando el método addFeatures().

// Creamos feature
const feature= new IDEE.Feature("featurePrueba002", {
                  "type": "Feature",
                  "id": "prueba_pol_wfst.1985",
                  "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                          [263770.72265536943,4085361.4590256726],
                          [230910.00600234355,4031901.3328427672],
                          [288293.77947248437,4017678.0840030923],
                          [263770.72265536943,4085361.4590256726]
                        ]
                      ]
                  },
                  "geometry_name": "geometry",
                  "properties": {
                    "cod_ine_municipio": "41091", 
                    "cod_ine_provincia": "-", 
                    "area": 1234,
                    "perimetro": 345, 
                    "cod_ine_comunidad": "-",
                    "nombre": "feature2",
                    "nom_provincia": "Cádiz",
                    "alias": "f2",
                    "nom_ccaa": "Andalucía"
                  }
              });
// lo añadimos a la capa
capaVectorial.addFeatures([feature])

⚠️ El parámetro extract en las capas vectoriales activa la consulta por clic en el objeto geográfico.

⚠️ Las capas Vector deben de estar previamente cargadas en el mapa antes de añadir los objetos geográficos.

Parámetros:

  • name: nombre de la capa.
  • legend: leyenda de la capa.
  • isBase: 'true' si se quiere definir la capa como capa base, 'false' en caso contrario.
  • maxExtent: Restringe la visibilidad de la capa a una extensión.
  • 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 clic en el objeto geográfico, por defecto verdadero.
    • Las capas Vector cuentan con métodos 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
  • template: Opcional Plantilla que se mostrará al consultar un objeto geográfico.
    • Las capas Vector cuentan con métodos get y set para modificar el template.
capa.template = `<div>My custom popup</div>`; // especifica la plantilla
console.log(capa.template); // 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 de la capa.
    • style. Define el estilo de la capa.
    • predefinedStyles: Estilos predefinidos para la capa, aparecen en el selector de capas "LayerSwitcher" para cambiar el estilo de la capa.
    • 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.
    • minScale: Escala mínima.
    • maxScale: Escala máxima.

Ejemplo completo de creación de capa Vector:

const capaVectorial = new IDEE.layer.Vector({
  name: 'capaVectorial'
}, {
  // aplica un estilo a la capa
  style: new IDEE.style.Point({
    radius: 5,
    fill: {
      color: 'red'
    }
  }),
  minZoom: 10 // zoom mínimo aplicable a la capa
});

Ejemplo:

⚠️ **GitHub.com Fallback** ⚠️