具有效果和混合的突出显示功能

此示例使用图层混合和对多个图层的效果来创建更艺术的方式来突出显示用户选择的特征。

工作原理

加载应用程序时，底图会显示在地图中的所有其他图层上。当用户点击某个国家/地区时，该国家/地区将突出显示，如下图所示：

将浅灰色画布矢量切片图层和国家/地区要素图层添加到图层组，并在图层组上设置 destination-over blendMode。使用 destination-over blendMode，背景层覆盖或放置在顶层之上。顶层的内容在两个层不重叠的地方是可见的。当应用程序加载时，您会在 groupLayer 顶部看到现代古董矢量切片底图。

// 该图层组将灰色画布矢量切片和
// 国家/地区要素图层分组。
// 使用 destination-over blendMode，背景层覆盖顶层。 
// 顶层放在目标层下面。
// 因此，当应用程序启动时，底图图层将显示在该图层上
const groupLayer = new GroupLayer({
  layers: [vtLayer, countries],
  blendMode: "destination-over"
});
map.add(groupLayer);

countryGraphicsLayer 使用 destination-in blendMode 创建并添加到底图中，如下所示。destination-in blendMode 显示与顶层重叠的背景层。其他一切都变得透明。当应用程序加载时，一个覆盖世界的白色多边形图形被添加到图形层。因为这个多边形覆盖了整个世界，所以您可以在图形图层上看到整个现代古董底图。

// 将 countryGraphicsLayer 添加到视图的底图中。
// 它将包含覆盖世界范围的黑色多边形，
// 当用户单击国家时，国家图形也将添加到该图层。
// 使用 destination-in混合模式，背景层的内容保留在与顶层重叠的位置。
//  其他一切都变得透明。
// 在这种情况下，countryGraphicsLayer 将显示在
// 现代古董矢量切片底图下方。
// 光晕效果将在所选国家周围添加光晕。
const countryGraphicsLayer = new GraphicsLayer({
  blendMode: "destination-in",
  countryGraphicsLayer
});

map.loadAll().then(async () => {
  addWorld(); // 添加了覆盖世界的黑色多边形图形
  // 将国家图形图层添加到底图
  map.basemap.baseLayers.add(countryGraphicsLayer);
});

然后当用户点击一个国家时，国家要素添加到 countryGraphicsLayer 然后我们缩放到点击的国家，同时将白色图形的不透明度降低到完全透明。此图形完全透明后，您将看到组图层的内容，其中组图层和底图不重叠。请记住，我们在 groupLayer 上设置了 destination-over blendMode。我们仍然可以看到点击国家的底图，因为图形图层正在显示点击国家的要素。

// 监听视图的点击事件
view.on("click", async (event) => {
  // 查询与用户点击的点相交的
  // 国家/地区要素图层
  const {
    features: [feature]
  } = await layerView.queryFeatures({
    geometry: view.toMap(event),
    returnGeometry: true,
    maxAllowableOffset: 10000,
    outFields: ["*"]
  }
  countryGraphicsLayer.graphics.removeAll();
  animation && animation.remove(
  let world = addWorld(
  // 将点击的国家要素添加到图形图层
  if (feature) {
    feature.symbol = symbol;
    countryGraphicsLayer.graphics.add(feature
    // 添加淡入淡出动画以显示
    // 所选国家/地区的高亮效果
    animation = fadeWorld(world
    // 放大到突出显示的国家
    view.goTo(
      {
        target: view.toMap(event),
        extent: feature.geometry.extent.clone().expand(1.8)
      },
      { duration: 1000 }
    );
  }
});