FeatureEffect

// 对不符合过滤要求的要素应用要素效果
const featureFilter = new FeatureFilter({
  geometry: filterGeometry,
  spatialRelationship: "intersects",
  distance: distance,
  units: units
});

// 设置对排除功能的影响
// 使它们变灰透明
layer.featureEffect = new FeatureEffect({
  filter: featureFilter,
  excludedEffect: "grayscale(100%) opacity(30%)"
});

属性列表

属性详细说明

declaredClass Stringreadonly inherited

类名。类的名称声明格式为 geoscene.folder.className。

excludedEffect Effect

应用于不符合过滤器要求的要素的效果。效果允许您将类似 css 滤镜的功能应用于图层和图层视图，以创建自定义视觉效果，从而提高地图的制图质量。

示例:

• 示例 - 将效果应用于要素

• 示例 - 将阴影效果应用到 layerView

• 所有使用效果的示例

示例代码:

const excludedEffect = "grayscale(50%) opacity(30%)";

layer.featureEffect = new FeatureEffect({
  filter: new FeatureFilter({
    where: "POPULATION > 1000000"
  }),
  excludedEffect: excludedEffect
});

excludedLabelsVisible Boolean

指示标签对于从过滤器中排除的要素是否可见。 必须将此属性设置为 true 才能将 FeatureEffect 持久保存到 WebMap。

默认值:false

filter FeatureFilter

驱动效果的过滤器。 满足过滤器中指定要求的功能将应用 includedEffect ，而不满足过滤器要求的功能将应用excludedEffect。 如果 attribute 过滤器是 FeatureFilter上设置的唯一属性，则 FeatureEffect 只能持久保存到 WebMap 。

includedEffect Effect

应用于满足过滤器要求的要素的效果。效果允许您将类似 css 滤镜的功能应用于图层和图层视图，以创建自定义视觉效果，从而提高地图的制图质量。

示例:

• 示例 - 将效果应用于要素

• 示例 - 将阴影效果应用到 layerView

• 示例 - 将多个效果应用于 layerView

• 所有使用效果的示例

示例代码:

const includedEffect = "sepia(70%) saturate(150%) hue-rotate(320deg) opacity(60%)";
layer.featureEffect = new FeatureEffect({
  filter: new FeatureFilter({
    where: "POPULATION > 1000000"
  }),
  includedEffect: includedEffect
});

方法列表

方法详细说明

clone(){FeatureEffect}

创建 FeatureEffect 对象的深度克隆。

返回值:

类型	描述
FeatureEffect	FeatureEffect 的新实例

fromJSON(json){*}static

创建此类的新实例，并使用从 GeoScene 产品生成的 JSON 对象的值对其进行初始化。传递给输入 json 参数的对象通常来自对 REST API 中的查询操作的响应，或者来自另一个 GeoScene产品的 toJSON() 方法。有关何时以及如何使用此函数的详细信息和示例，请参阅指南中的 使用 fromJSON() 主题。

参数:

json Object 实例的 json 表达式，以geoscene 格式显示。

返回值:

类型	描述
*	返回一个该类的新实例。

toJSON(){Object}

将此类的实例转换为 GeoScene portal JSON 格式。 有关更多信息，请参阅 使用 fromJSON() 指南。

返回值:

类型	描述
Object	此类实例的 GeoScene portal JSON 格式。

类型定义

Effect Object[]|String

Effect 提供各种滤镜功能，可以在图层或图层视图上执行，以实现类似于图像滤镜（照片应用程序）工作方式的不同视觉效果。 API 中支持CSS 过滤器作为效果，但有以下区别：

• url() 没有 url() css 过滤器支持。
• 对于接受长度的效果，只允许使用绝对长度单位。
• 除了 CSS 过滤器之外，还支持 bloom 效果。

支持以下效果： bloom, blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate 和sepia。可以通过两种不同的方式设置效果。 它可以设置为字符串或对象数组。

已知限制

• 3D SceneViews不支持该效果。
• 无法将效果应用于具有热图渲染器的图层。
• 启用 featureReduction 类型为 cluster 的图层不支持此效果。
• 请参阅打印了解已知的打印限制。

将效果设置为字符串

效果可以链接在一起，由空格字符分隔。效果按其设置的顺序应用。设置为字符串时，效果将应用于所有比例。

 //下面的效果将应用于所有尺度的图层
  //先应用亮度，然后是色调旋转，然后是对比度
  //改变效果的顺序会改变最终结果
 layer.effect = "brightness(5) hue-rotate(270deg) contrast(200%)";

将效果设置为对象数组

一些效果（例如 bloom 和drop-shadow ）对比例很敏感。 应使用与比例相关的效果来微调或控制不同比例的效果参数，以便产生所需的效果。 比例相关效果可以设置为对象数组，您可以在其中指定 scale 和该比例的效果 value 。 当您设置与比例相关的效果时，API 将在比例之间插入效果。 例如，如果您将 opacity(0%) 设置为一种比例，而 opacity(100%) 设置为另一种，API 将在不同比例之间插入 opacity 值。 效果的类型和顺序应在所有尺度上保持一致，以便可以对其进行插值。 如果类型和顺序不一致，效果会被设置为null，并且会在控制台显示警告。

// 这是4622324比例的有效比例依赖效果，亮度下降后不会应用。
layer.featureEffect = new FeatureEffect({
  filter: featureFilter,
  includedEffect: [
    {
      scale: 36978595, // small scale
      value: "drop-shadow(3px, 3px, 4px) brightness(400%)",
   },
   {
      scale: 18489297, // large scale
      value: "drop-shadow(2px, 2px, 3px) brightness(200%)",
   },
   {
      scale: 4622324, // larger scale
      value: "drop-shadow(1px, 1px, 2px)",
   }
  ],
  // 应用所有 scales
  excludedEffect: "brightness(80%)"
});

// 这是一种不合法的规模依赖效应。
// 不能像这样混合比例依赖的效果。
// 不会对图层应用任何效果。
// 控制台会抛出无效效果警告。
layer.effect = [
  {
    scale: 36978595,
    value: "opacity(50%)"
  },
  {
    scale: 4622324,
    value: "brightness(500%)"
  }
];

// 山体阴影层显示在水彩层下
hillShadelayer.effect = "saturate(400%) contrast(100%) blur(10px)";
waterColorLayer.effect = "sepia(50%) saturate(100%) contrast(100%)"; 

如果以下四个属性都被应用，那么它们将按以下顺序应用： featureEffect, effect, opacity 和blendMode。

bloom(strength, radius, threshold)  - 绽放效果产生从图层中明亮区域的边界延伸的光条纹。 它会导致比指定 threshold 更亮的颜色发光。 在映射火灾、火山爆发和夜灯时，您可以为图层添加光晕。

参数	描述
strength	绽放效果的强度。此值可以是百分比或数字。默认值为 1。值越高，辉光越亮。不允许使用负值。
radius	确定绝对长度的模糊半径。默认值为 0。不允许使用负值。使半径内的要素保持不变。
threshold	确定颜色在绽放或发光之前必须有多亮。可接受的值为 0%-100% 或 0-1。默认值为 0。

layer.effect = "bloom(200%, 1px, 0.2)";
 // 与上面的行相同
layer.effect = "bloom(2, 1px, 20%)";

// 规模相关的绽放效果应用于美国任务图层，如上面的屏幕截图所示
layer.effect = [
  {
   value: "bloom(3, 1px, 0.4)",
   scale: 9244648.868618
  },
  {
    value: "bloom(1, 0.75px, 0.3)",
    scale: 4622324.434309
  },
  {
    value: "bloom(3, 0.5px, 0.2)",
    scale: 577790.5542885
  }
];

blur(radius)  - 对 layer 或 layerView 应用高斯模糊。 它使您看起来像是通过半透明屏幕查看图层，使其看起来失焦或模糊。 模糊的 radius 参数以绝对长度指定。 它定义了屏幕上有多少像素相互融合。 较大的值会产生更多的模糊。 不允许使用负值。

blur 效果可用于柔化参考图层或其他重要图层下方的图层，因此可以更清晰地突出上述要素。 对于 layerView，它可以用来模糊过滤器中排除的要素，以便包含的要素清晰地突出。

// 将效果应用于图层
layer.effect = "blur(5px)";

brightness(percent | number) - 将线性乘数应用于图层或图层视图，使其看起来更亮或更暗。

值	效果
brightness(0%) or brightness(0)	产生完全黑色的层
brightness(100%) or brightness(1)	不更改图层
> 100% or > 1	更亮的图层
< 100% or < 1	较暗的图层

contrast(percent | number) – 调整图层或图层视图的对比度。不允许使用负值。

值	效果
contrast(0%) or contrast(0)	完全是灰色层
contrast(100%) or contrast(1)	不更改图层
> 100% or > 1	图层对比度更高
< 100% or < 1	图层中的对比度较低

drop-shadow(offsetX, offsetY, blurRadius?, color?) - 将阴影效果应用于跟随图层或图层视图轮廓的图层或图层视图。 当您希望某些要素从繁忙地图上的其他要素中脱颖而出时， drop-shadow 效果非常有用。 例如，您可以将此效果应用于标签（参考图层）以使其清晰易读。

参数	描述
offset-x	一个绝对长度值，用于确定水平距离中的阴影偏移。负值将阴影放置在图层的左侧。如果 x 和 y 偏移均为 0，则阴影将直接放置在图层下方。
offset-y	一个绝对长度值，用于确定垂直距离中的阴影偏移。负值将阴影置于图层上方。
blur-radius	确定模糊半径的绝对长度值。值越大，阴影就越大，越模糊。如果未指定，则默认为 0，从而产生清晰、无模糊的边缘。不允许使用负值。
color	阴影的颜色。如果未指定，则默认为黑色。

const featureFilter = new FeatureFilter({
  where: "BoroughEdge='true'"
});
layer.featureEffect = new FeatureEffect({
  filter: featureFilter,
  includedEffect: "drop-shadow(3px, 3px, 3px, black)",
  excludedEffect: "blur(1px) brightness(65%)"
});

grayscale(percent | number) - 将图层或图层视图转换为灰度。数值定义了转化的比例。如果缺少 amount 参数，则使用 100% 的值。不允许使用负值。

值	效果
grayscale(0%) or grayscale(0)	不更改图层
grayscale(100%) or grayscale(1)	完全灰色图层
< 100% or < 1	不同的灰色阴影
> 100% or > 1	与 100% 或 1 相同

hue-rotate(angle) - 在图层或图层视图上应用色调旋转。 角度值定义了色轮周围的度数。 图层中的颜色将转换为指定角度的颜色。 值  0deg使输入保持不变。 最大值为  360deg。 正色调旋转顺时针移动色调，而负旋转逆时针移动色调。

参数	描述
angle	输入样本色调的相对变化，指定为角度，如 deg, rad, grad and turn。

invert(percent | number) -  反转图层中的样本。数值定义了转化的比例。不允许使用负值。

值	效果
invert(0%) or invert(0)	不更改图层
invert(100%) or invert(1)	完全反转层
< 100% or < 1	不同程度的反转
> 100% or > 1	与 100% 或 1 相同

opacity(percent | number) -将透明度应用于图层或图层视图。数值定义了转化的比例。不允许使用负值。

值	效果
opacity(0%) or opacity(0)	完全透明的层
opacity(100%) or opacity(1)	完全不透明的图层
< 100% or < 1	不同程度的不透明度
> 100% or > 1	与 100% 或 1 相同

saturate(percent | number) - 使layer或layerView饱和或不饱和。

值	效果
saturate(0%) or saturate(0)	完全不饱和层
saturate(100%) or saturate(1)	使layer或layerView保持不变
< 100% or < 1	不同程度的去饱和度
> 100% or > 1	不同程度的饱和度

sepia(percent | number) - 将图层或图层中的颜色转换为棕褐色，使其具有更温暖、更黄/棕色的外观。不允许使用负值。

值	效果
sepia(0%) or sepia(0)	不更改的图层或图层视图
sepia(100%) or sepia(1)	完全棕褐色
< 100% or < 1	不同程度的棕褐色
> 100% or > 1	与 100% 或 1 相同

属性:

scale Number 要发生的效果的视图比例。仅在设置与比例相关的效果时使用。

value String 要应用于图层或图层的效果以相应的比例查看。仅在设置与比例相关的效果时使用。

示例:

• 使用效果的 SDK 示例