Arcgis -使用特效让国家高亮显示出来

​​​​​​​ 

这个例子在多个图层上使用图层特效和图层混合来使一个国家在地图中突出显示出来。在这个例子中，当APP加载的时候，你会看到法国会从地图中突出显示出来。用户可以点击任何国家使其从地图中高亮显示出来。

工作原理

我们先从添加下面的图层到地图上开始，我们在图形层上设置blendMode为destination-in并在图层组中将其添加到世界图像贴图层的顶部。然后，我们在图层组下面添加另一个实例的世界图像贴图层。

const worldImagery = new TileLayer({   portalItem: {     id: "10df2279f9684e4a9f6a7f08febac2a9" // world imagery   } }); // 被点击的国家的特征将会被添加到这个图层上 const graphicsLayer = new GraphicsLayer({   blendMode: "destination-in",   title: "layer" }); const tileLayer = new TileLayer({   portalItem: {     // 图层给中的底部图层     id: "10df2279f9684e4a9f6a7f08febac2a9" // world imagery   } }); // 这个图层组有两个图层 // 在图像图层上设置blendMode 为destination-in  //在世界图像层中的国家将会在用户点击之后显示出来 const groupLayer = new GroupLayer({   layers: [     tileLayer,     // 世界图像层将显示它与图形层重叠的地方     graphicsLayer   ],   opacity: 0 // initially this layer will be transparent }); const map = new Map({   layers: [worldImagery, groupLayer] });

在APP加载或用户在世界地图上点任何一个国家的时候，我们会调用highlightCountry函数（如下所示）。这个函数会查询国家特征图层，并返加被点击国家的特征。之后APP会将这个图家的特征添加到图形层上。因为图形层的blendMode设置成了destination-in，APP将会在图形层边界范围之内将世界图像贴图层的内容显示出来。我们在图层组上使用drop-shadow 和brightness特效使被点击的国家从其它部分中突出显示出来。对于在图层组下层显示的其它的世界图像地图，我们把其特效设置成blur，减少其brightness值，并应用grayscale。

async function highlightCountry(query, zoomGeometry){   //国家符号- 当用户在某个国家上点击的时候   //我们将从国家特征图层中查询国家   //添加国家特征到图形层上.   const symbol = {     type: "simple-fill",     color: "rgba(255, 255, 255, 1)",     outline: null   }   //查询国家层中与点击点相交的国家   const {       features: [feature]     } = await countries.queryFeatures(query);     //用户某个国家上点击，然后返回这个国家的特征     if (feature) {       graphicsLayer.graphics.removeAll();       feature.symbol = symbol;       // 把国家添加到图形层上       graphicsLayer.graphics.add(feature);       // 放大被高亮显示的国家       view.goTo(         {           target: zoomGeometry,           extent: feature.geometry.extent.clone().expand(1.8)         },         { duration: 1000 }       );       //模糊世界底图，使被点击的国家高亮显示出来       worldImagery.effect = "blur(8px) brightness(1.2) grayscale(0.8)";       // 图层组透明度设置成1       // also increase the layer brightness and add drop-shadow to make the clicked country stand out.同样增图层brightness 值并增加drop-shadow来使被点击的国家突出显示       groupLayer.effect = "brightness(1.5) drop-shadow(0, 0px, 12px)";       groupLayer.opacity = 1;     } }