使用效果高亮显示国家

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
const worldImagery = new TileLayer({
  portalItem: {
    id: "10df2279f9684e4a9f6a7f08febac2a9" // world imagery
  }
});

// clicked country feature will be added to this layer
const graphicsLayer = new GraphicsLayer({
  blendMode: "destination-in",
  title: "layer"
});

const tileLayer = new TileLayer({
  portalItem: {
    // bottom layer in the group layer
    id: "10df2279f9684e4a9f6a7f08febac2a9" // world imagery
  }
});

// this grouplayer has two layers
// destination-in blendMode set on the graphics layer
// country from the world imagery layer will show when user clicks on a country
const groupLayer = new GroupLayer({
  layers: [
    tileLayer,
    // world imagery layer will show where it overlaps with the graphicslayer
    graphicsLayer
  ],
  opacity: 0 // initially this layer will be transparent
});

const map = new Map({
  layers: [worldImagery, groupLayer]
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
async function highlightCountry(query, zoomGeometry){
  // country symbol - when user clicks on a country
  // we will query the country from the countries featurelayer
  // add the country feature to the graphics layer.
  const symbol = {
    type: "simple-fill",
    color: "rgba(255, 255, 255, 1)",
    outline: null
  }

  // query the countries layer for a country that intersects the clicked point
  const {
      features: [feature]
    } = await countries.queryFeatures(query);
    // user clicked on a country and the feature is returned
    if (feature) {
      graphicsLayer.graphics.removeAll();
      feature.symbol = symbol;
      // add the country to the graphics layer
      graphicsLayer.graphics.add(feature);
      // zoom to the highlighted country
      view.goTo(
        {
          target: zoomGeometry,
          extent: feature.geometry.extent.clone().expand(1.8)
        },
        { duration: 1000 }
      );
      // blur the world imagery basemap so that the clicked country can be highlighted
      worldImagery.effect = "blur(8px) brightness(1.2) grayscale(0.8)";
      // set the group layer opacity to 1
      // also increase the layer brightness and add drop-shadow to make the clicked country stand out.
      groupLayer.effect = "brightness(1.5) drop-shadow(0, 0px, 12px)";
      groupLayer.opacity = 1;
    }
}