FeatureView 样式设置

FeatureView 素材资源中地图项的样式是使用 JavaScript 对象中定义的规则指定的。样式可以在初始定义 FeatureViewLayer 期间设置，也可以在之后的任何时间设置。借助样式系统，您可以设置适用于大量地图项的宽泛样式规则，以及适用于特定地图项的更具体的规则。地图项样式可以根据地图项特征通过常量值或数据驱动方式进行定义。

样式对象

样式对象的基本结构如下所示。规则分为两种：广泛规则和具体规则。宽泛规则会影响 FeatureView 素材资源中的所有功能，而具体规则会影响部分功能。

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

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

宽泛规则

如需将样式属性应用于所有地图项（或特定几何图形类型的地图项），请在样式对象的顶级指定样式属性。

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

专用规则

如需将样式属性应用于部分地图项，请使用 rules 字段。rules 字段接受 JavaScript 对象的列表，每个对象都有一个 filter，用于根据 ee.Filter 对象定义的条件选择地图项，后跟一系列样式属性。在下面的示例中，有一个规则，仅当“REP_AREA”属性小于 100 时，才会设置 polygonStrokeWidth 和 polygonFillColor。具体规则会替换宽泛规则的样式属性，并且 rules 列表末尾的规则会替换开头附近的规则（具体规则的评估顺序为从前到后）。

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

设置样式

您可以在声明 FeatureViewLayer 时或之后的任何时间设置地图项样式。

FeatureViewLayer 声明

如需在声明 FeatureViewLayer 时设置可视化参数，请使用 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);

现有的FeatureViewLayer

如需为现有 FeatureViewLayer 设置可视化参数，请使用 setVisParams 函数。它会替换之前指定的所有样式规则；未指定的属性会设为默认值。

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

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

符号学

对于每个样式属性，您可以指定常量样式规则或数据驱动型样式规则。数据驱动型选项使用地图项属性值来确定符号化，符号化可以是分类符号化或插值符号化。如需查看样式属性的完整列表，请参阅样式属性表。

常量

常量样式规则由要设置的样式属性及其值组成。以下示例将多边形填充颜色设置为蓝色。

var visParams = {
  polygonFillColor: 'blue'
};

分类

分类样式规则由要设置的样式属性和一个具有以下三个属性的 JavaScript 对象组成：

  • property - 地图项属性名称，其值会影响样式。
  • categories - 用于将地图项属性值映射到样式属性符号法的列表列表。每个类别都包含一个属性值，后跟要应用的符号值。用于定义类别的属性值必须为字符串。
  • defaultValue - 适用于 categories 中未定义属性值的地图项的默认符号法。如果为 null/undefined，系统会应用默认样式设置。

例如，以下对象会根据“MARINE”地图项属性设置 color 样式属性。“海洋”类别“0”中的地图项设为紫色，“1”设为绿色，“2”设为蓝色，任何其他类别设为白色。

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

插值

插值样式规则由要设置的样式属性和一个 JavaScript 对象组成，该对象最多包含 5 个属性：

  • property - 地图项属性名称，其值会影响样式。
  • mode - 插值模式，即 'linear' 或 'interval'。
  • palette - 用于在输入属性值之间插值的颜色、不透明度或宽度列表。格式取决于 mode，如需了解详情，请参阅线性和间隔部分。

仅适用于 'linear' 模式

  • min - 要映射到 palette 列表中第一个元素的属性值。
  • max - 要映射到 palette 列表中的最后一个元素的属性值。

线性

线性插值模式会在 palette 属性中定义的符号值列表之间，将 min 到 max 范围内的输入值线性映射，从而设置地图项样式属性。输入值会被限制在 min 和 max 设置的范围内。

例如，以下对象会根据“REP_AREA”地图项属性设置 color 样式属性。palette 属性是一个颜色列表，表示介于 min 和 max 之间的输入值应从黄色到红色再到蓝色线性分级。介于 1 到 500 之间的值会在黄色和红色之间插值，介于 500 到 1000 之间的值会在红色和蓝色之间插值。

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

间隔

间隔插值模式通过将输入值映射到类别间隔，然后应用特定于类别的符号法来设置地图项样式属性。系统会将所选地图项属性中的输入值舍入到最接近的类别分界值。palette 属性的格式为列表的列表，其中每个内部列表都包含一个类分隔符值，后跟一个样式属性值。属性值低于最小类别分界值的特征会保留其默认样式属性设置。

在以下示例中，地图项填充不透明度是根据“REP_AREA”属性的分级类设置的。类定义和样式符号在 palette 属性中以列表的形式提供。这表示应该有 4 个类别，分别在值 0、80、2000 和 5000 处有断点，相应的地图项不透明度分别为 0.5、0.35、0.22 和 0.15。换句话说，如果地图项的“REP_AREA”值在 $ 0 \le x < 80 $ 范围内，则填充不透明度为 0.5；如果值在 $ 80 \le x < 2000 $ 范围内，则填充不透明度为 0.35，以此类推。

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

所有样式属性

以下是您可以在样式对象中指定的所有样式属性。为特定几何图形类型设置样式属性会替换为“所有几何图形”设置的相应样式属性（例如，设置 polygonFillColor 会替换 fillColor 中设置的值）。

属性 类型 说明 支持插值规则
所有几何图形
isVisible Boolean 设置地图项是否可见。 否
color String 设置所有几何图形类型的填充/描边颜色。必须是十六进制值或 CSS3 颜色。 是
opacity Double 为所有几何图形类型设置填充/描边不透明度。 必须是介于 0 到 1 之间的双精度值。 是
width Double 为所有几何图形类型设置描边宽度。 是
fillColor String 设置所有几何图形类型的填充颜色。必须是十六进制值或 CSS3 颜色。 是
点几何图形
pointShape String 设置点几何图形的形状。支持与 ee.FeatureCollection.style 相同的形状（圆形、方形、菱形、十字、加号、五芒星、六芒星、三角形、triangle_up、triangle_down、triangle_left、triangle_right、五边形、六边形、star5、star6）。 否
pointSize Double 设置点几何图形的宽度（以像素为单位）。 是
pointFillColor String 设置点几何图形的填充颜色。必须是十六进制值或 CSS3 颜色。 是
pointFillOpacity Double 设置点几何图形的填充不透明度。必须是介于 0 到 1 之间的双精度值。 是
线几何图形
lineType String 设置线条类型。支持与 ee.FeatureCollection.style 相同的类型（实线、虚线、点线）。 否
lineWidth Double 设置线条宽度（以像素为单位）。 是
lineColor String 设置线条几何图形的颜色。必须是十六进制值或 CSS3 颜色。 是
lineOpacity Double 设置线几何图形的不透明度。必须是介于 0 到 1 之间的双精度值。 是
多边形几何图形
polygonStrokeWidth Double 设置多边形的描边宽度（以像素为单位）。 是
polygonStrokeType String 设置多边形的线条类型。支持与 ee.FeatureCollection.style 相同的类型（实线、虚线、点线）。 否
polygonStrokeColor String 设置多边形几何图形的描边颜色。必须是十六进制值或 CSS3 颜色。 是
polygonStrokeOpacity Double 为多边形几何图形设置笔触不透明度。必须是介于 0 到 1 之间的双精度值。 是
polygonFillColor String 设置多边形几何图形的填充颜色。必须是十六进制值或 CSS3 颜色。 是
polygonFillOpacity Double 为多边形几何图形设置填充不透明度。必须是介于 0 到 1 之间的双精度值。 是