Se usó la API de Cloud Translation para traducir esta página.

Aplicación de diseño a FeatureView

El estilo de los componentes de un recurso FeatureView se especifica con reglas definidas en un objeto JavaScript. El estilo se puede establecer durante la definición inicial de un FeatureViewLayer o en cualquier momento después. El sistema de diseño te permite establecer reglas de diseño generales que se apliquen a grandes grupos de componentes, así como reglas más específicas para componentes particulares. El estilo de los componentes se puede definir con valores constantes o basados en datos, según las características de los componentes.

Objeto de estilo

A continuación, se muestra la estructura básica de un objeto de estilo. Existen dos tipos de reglas: generales y específicas. Las reglas generales afectan a todas las funciones de un activo FeatureView, mientras que las reglas específicas afectan a un subconjunto de funciones.

{
  // Broad style rules.
  opacity: …,
  polygonFillColor: …,

  // Specific style rules.
  rules: [
    { … },
    { … }
  ]
};

Reglas generales

Para aplicar propiedades de diseño a todos los componentes (o a los de un tipo de geometría específica), especifica las propiedades de diseño en el nivel superior del objeto de diseño.

{
  opacity: 0.5,
  pointShape: 'triangle',
  lineWidth: 10,
  polygonFillColor: 'green'
};

Reglas específicas

Para aplicar propiedades de diseño a un subconjunto de componentes, usa el campo rules. El campo rules acepta una lista de objetos JavaScript, cada uno con un filter que selecciona componentes según las condiciones definidas por un objeto ee.Filter, seguido de una serie de propiedades de estilo. En el siguiente ejemplo, hay una regla que establece polygonStrokeWidth y polygonFillColor solo si la propiedad "REP_AREA" es inferior a 100. Las reglas específicas anulan las propiedades de estilo de las reglas generales, y las reglas cercanas al final de la lista rules anulan las que están cerca del principio (las reglas específicas se evalúan de la primera a la última).

{
  rules: [
    {
      filter: ee.Filter.lt('REP_AREA', 100),
      polygonStrokeWidth: 0.5,
      polygonFillColor: 'blue'
    },
    { … }  // Optionally include additional rules.
  ]
};

Cómo establecer el estilo

El diseño de componentes se puede establecer cuando se declara un FeatureViewLayer o en cualquier momento después.

Declaración de `FeatureViewLayer`

Para establecer los parámetros de visualización cuando declares un FeatureViewLayer, usa el parámetro visParams.

var visParams = {
  opacity: 0.5,
  lineWidth: 10,
  polygonFillColor: 'purple'
};

var layer = ui.Map.FeatureViewLayer({
  assetId: 'WCMC/WDPA/current/polygons_FeatureView',
  visParams: visParams
});

Map.add(layer);

Recursos existentes: `FeatureViewLayer`

Para configurar los parámetros de visualización de un FeatureViewLayer existente, usa la función setVisParams. Reemplaza las reglas de diseño especificadas anteriormente. Las propiedades no especificadas se establecen en su valor predeterminado.

var layer = ui.Map.FeatureViewLayer('WCMC/WDPA/current/polygons_FeatureView');
Map.add(layer);

layer.setVisParams({
  opacity: 0.5,
  lineWidth: 10,
  polygonFillColor: 'purple'
});

Simbología

Para cada propiedad de diseño, puedes especificar una regla de diseño constante o una regla de diseño basada en datos. La opción basada en datos usa valores de propiedades de componentes para determinar la simbolización, que puede ser categórica o interpolada. Para obtener una lista completa de las propiedades de estilo, consulta la tabla de propiedades de estilo.

Constante

Una regla de diseño constante consta de una propiedad de diseño para establecer y su valor. En el siguiente ejemplo, se establece el color de relleno del polígono en azul.

var visParams = {
  polygonFillColor: 'blue'
};

Categórico

Una regla de diseño categórica consta de una propiedad de diseño para establecer y un objeto JavaScript con tres propiedades:

property: Es un nombre de propiedad de componente cuyo valor afectará el estilo.
categories: Es una lista de listas que asignan valores de propiedades de componentes a simbologías de propiedades de diseño. Cada categoría incluye un valor de propiedad seguido de un valor de simbología para aplicar. El valor de la propiedad que define una categoría debe ser una cadena.
defaultValue: Es una simbología predeterminada que se aplica a los componentes cuyo valor de propiedad no se define en categories. Si es nulo o no está definido, se aplicará la configuración de estilo predeterminada.

Por ejemplo, el siguiente objeto establece la propiedad de diseño color según la propiedad de componente “MARINE”. Los componentes de la categoría “MARINE” “0” se establecen como púrpura, “1” como verde, “2” como azul y cualquier otra categoría como blanco.

var visParams = {
  color: {
    property: 'MARINE',
    categories: [
      ['0', 'purple'],
      ['1', 'green'],
      ['2', 'blue']
    ],
    defaultValue: 'white'
  }
};

Interpolación

Una regla de estilo interpolada consta de una propiedad de estilo para establecer y un objeto de JavaScript con hasta cinco propiedades:

property: Es un nombre de propiedad de componente cuyo valor afectará el estilo.
mode: Es el modo de interpolación, ya sea 'linear' o 'interval'.
palette: Es una lista de colores, opacidades o anchos para interpolar los valores de la propiedad de entrada. El formato depende de mode. Consulta las secciones Lineal y Intervalo para obtener más detalles.

Solo se aplica al modo 'linear'

min: Es el valor de la propiedad que se asignará al primer elemento de la lista palette.
max: Es el valor de la propiedad que se asignará al último elemento de la lista palette.

Lineal

El modo de interpolación lineal establece una propiedad de diseño de componentes asignando valores de entrada del rango min a max de forma lineal entre una lista de valores de simbología definidos en la propiedad palette. Los valores de entrada se fijan en el rango establecido por min y max.

Por ejemplo, el siguiente objeto establece la propiedad de diseño color según la propiedad de componente “REP_AREA”. La propiedad palette es una lista de colores que indica que los valores de entrada entre min y max deben graduarse de forma lineal de amarillo a rojo y a azul. Un valor entre 1 y 500 se interpola entre amarillo y rojo, y un valor entre 500 y 1,000 se interpola entre rojo y azul.

var visParams = {
  color: {
    property: 'REP_AREA',
    mode: 'linear',
    palette: ['yellow', 'red', 'blue'],
    min: 1,
    max: 1000
  }
};

Intervalo

El modo de interpolación de intervalos establece una propiedad de diseño de componentes asignando valores de entrada a las divisiones de clase y, luego, aplicando una simbología específica de la clase. Los valores de entrada de la propiedad de componentes seleccionados se asignan al valor de corte de clase más cercano redondeando hacia abajo. La propiedad palette tiene el formato de una lista de listas, en la que cada lista interna contiene un valor de pausa de clase seguido de un valor de propiedad de diseño. Los componentes cuyos valores de propiedad son menores que el valor mínimo de la pausa de clase mantienen su configuración predeterminada de la propiedad de estilo.

En el siguiente ejemplo, la opacidad del relleno de componentes se establece según las clases graduadas de la propiedad “REP_AREA”. La definición de clase y la simbología de estilo se proporcionan en la propiedad palette como una lista de listas. Indica que debe haber 4 clases con pausas en los valores 0, 80, 2000 y 5000, con las opacidades de componentes correspondientes de 0.5, 0.35, 0.22 y 0.15. En otras palabras, los componentes con valores de "REP_AREA" en el intervalo $0 \le x < 80$ tendrán una opacidad de relleno de 0.5, los valores en el intervalo $80 \le x < 2000$ tendrán una opacidad de relleno de 0.35, y así sucesivamente.

var visParams = {
  fillOpacity: {
    property: 'REP_AREA',
    mode: 'interval',
    palette: [
      [0, 0.5],
      [80, 0.35],
      [2000, 0.22],
      [5000, 0.15]
    ]
  }
};

Todas las propiedades de estilo

A continuación, se muestran todas las propiedades de diseño que puedes especificar en el objeto de diseño. La configuración de propiedades de diseño para tipos de geometría específicos anula las propiedades de diseño correspondientes establecidas para "Todas las geometrías" (por ejemplo, la configuración de polygonFillColor anula el valor establecido en fillColor).

Propiedad	Tipo	Descripción	Admite la regla interpolada
Todas las geometrías
`isVisible`	`Boolean`	Establece si la función es visible.	No
`color`	`String`	Establece el color de relleno o trazo para todos los tipos de geometría. Debe ser un valor hexadecimal o un color CSS3.	Sí
`opacity`	`Double`	Establece la opacidad de relleno o trazo para todos los tipos de geometría. Debe ser un número doble entre 0 y 1.	Sí
`width`	`Double`	Establece el ancho del trazo para todos los tipos de geometría.	Sí
`fillColor`	`String`	Establece el color de relleno para todos los tipos de geometría. Debe ser un valor hexadecimal o un color CSS3.	Sí
Geometrías de punto
`pointShape`	`String`	Establece la forma de las geometrías de punto. Admite las mismas formas que `ee.FeatureCollection.style` (círculo, cuadrado, rombo, cruz, signo más, pentagrama, hexagrama, triángulo, triángulo hacia arriba, triángulo hacia abajo, triángulo hacia la izquierda, triángulo hacia la derecha, pentágono, hexágono, estrella 5 y estrella 6).	No
`pointSize`	`Double`	Establece el ancho de las geometrías de punto (en píxeles).	Sí
`pointFillColor`	`String`	Establece el color de relleno para las geometrías de punto. Debe ser un valor hexadecimal o un color CSS3.	Sí
`pointFillOpacity`	`Double`	Establece la opacidad del relleno para las geometrías de punto. Debe ser un número doble entre 0 y 1.	Sí
Geometrías de línea
`lineType`	`String`	Establece el tipo de línea. Admite los mismos tipos que `ee.FeatureCollection.style` (sólido, punteado, discontinuo).	No
`lineWidth`	`Double`	Establece el ancho de la línea (en px).	Sí
`lineColor`	`String`	Establece el color para las geometrías de línea. Debe ser un valor hexadecimal o un color CSS3.	Sí
`lineOpacity`	`Double`	Establece la opacidad para las geometrías de línea. Debe ser un número doble entre 0 y 1.	Sí
Geometrías de polígonos
`polygonStrokeWidth`	`Double`	Establece el ancho del trazo de los polígonos (en px).	Sí
`polygonStrokeType`	`String`	Establece el tipo de línea para los polígonos. Admite los mismos tipos que `ee.FeatureCollection.style` (sólido, punteado, discontinuo).	No
`polygonStrokeColor`	`String`	Establece el color del trazo para las geometrías de polígono. Debe ser un valor hexadecimal o un color CSS3.	Sí
`polygonStrokeOpacity`	`Double`	Establece la opacidad del trazo para las geometrías de polígonos. Debe ser un número doble entre 0 y 1.	Sí
`polygonFillColor`	`String`	Establece el color de relleno para las geometrías de polígono. Debe ser un valor hexadecimal o un color CSS3.	Sí
`polygonFillOpacity`	`Double`	Establece la opacidad del relleno para las geometrías de polígonos. Debe ser un número doble entre 0 y 1.	Sí