arcgisjs之圖層濾鏡

arcgisjs之圖層濾鏡

效果：

 圖層準備：

1.底圖（天地圖）tdtlayer()方法見：https://www.cnblogs.com/s313139232/p/17682138.html

mapObj.layerYx = await tdtlayer().then((res) => {
          return res;
        });

2.邊界圖層，通過矢量裁剪獲取突出顯示區域

// 影像地圖
const tileLayerYx = await tdtlayer().then((res) => {
          return res;
        });

// 矢量邊界圖層
mapObj.graphicsLayerYx = new GraphicsLayer({
        blendMode: 'destination-in',
        title: 'layer',
      });

// 切割圖層
mapObj.groupLayerYx = new GroupLayer({
          layers: [
            tileLayerYx,
            // 世界圖像層將顯示與圖形殺手重疊的位置
            mapObj.graphicsLayerYx,
          ],
          opacity: 0, // 最初該層將是透明的
        });
map.add(mapObj.groupLayerYx)

// 濾鏡添加
mapObj.layerYx.effect = "blur(8px) brightness(1.2) grayscale(0.8)";
// mapObj.layerYxBz.effect = "blur(8px) brightness(1.2) grayscale(0.8)";
mapObj.groupLayerYx.effect = "brightness(1) drop-shadow(0, 0px, 20px)";
mapObj.groupLayerYx.opacity = 1;

// 通過修改圖層中的feature可控制突出顯示面積
mapObj.graphicsLayerYx.graphics.removeAll();
mapObj.graphicsLayerYx.graphics.add(feature);

 

 

 

 

 

 

鑽研不易，轉載請註明處處......