Arcgis api4.x 实现绘制sketchViewModel、框选查询queryFeatures、框选高亮highlight、框选过滤featureEffect

 1.效果

2.思路 

实现上图中的效果，需要了解几个知识点；分别为sketchViewModel实现绘制、queryFeatures实现要素查询、highlight实现高亮效果、featureEffect实现过滤效果，下面将依次讲解。

  2.1  sketchViewModel 实现绘制

1. 创建了一个新的GraphicsLayer对象，用于存储和显示多边形图形；
2. 初始化一个SketchViewModel对象，这是用于在地图上绘制图形的视图模型；添加一个事件监听器，监听图形的创建事件，当事件发生时，将GraphicsLayer对象中的所有图形进行合并；
3. 调用写好的查询要素selectFeatures函数（后文会提到），将合并后的图形作为参数传入；

  polygonGraphicsLayer = new GraphicsLayer(); 
  map.add(polygonGraphicsLayer);

  sketchViewModel = new SketchViewModel({
    view: view,
    layer: polygonGraphicsLayer,
  });
  sketchViewModel.on("create", async (event) => {
    if (event.state === "complete") {
      const geometries = polygonGraphicsLayer.graphics.map(function (graphic) {
        return graphic.geometry;
      });

      const queryGeometry = await geometryEngineAsync.union(
        geometries.toArray()
      );
      // 调用查询要素函数
      selectFeatures(queryGeometry);
    }
  });

    执行下列代码即开启绘制，允许绘制多个图形，同时存储在polygonGraphicsLayer图层中。 

sketchViewModel.create("polygon");

---

 

  2.2  queryFeatures 实现要素查询

1. 首先解释 csvLayerView,这个是图层的layerView，更多扩展可以浏览arcgis api的官方文档；

   

2. 定义一个查询对象 query，查询的几何对象为geometry，这个其实就是上文提到的合并后的图形；几何对象将被用来与图层上的要素进行空间关联查询。
3. 使用queryFeatures方法查询要素，查询结果为空则清空图形图层中所有图形；查询结果不为空，则选结果中每个要素的属性信息的 __OBJECTID ，用于后续的要素高亮任务。
4. featureHighlight方法将在后文中讲解。

 function selectFeatures(geometry) {
    if (csvLayerView) {
      const query = {
        geometry: geometry,
        outFields: ["*"],
      };
      // 从 CSV 图层视图查询图形。为查询设置的几何图形
      // 对于点要素，可以是面，并且仅返回相交的几何
      csvLayerView.queryFeatures(query).then((results) => {
        if (results.features.length === 0) {
          polygonGraphicsLayer.removeAll();
        } else {
          results.features.forEach((feature) => {
            highlightIds.push(feature.attributes.__OBJECTID);
          });
          polygonGraphicsLayer.removeAll();

          // 高亮
          featureHighlight();
        }
      });
    }
  }

---

 

  2.3  highlight 实现高亮效果

   1.读下图：

  2.本文中高亮的关键代码： 

    highlightIds是一个存放所有需要被高亮元素的ID数组，在上文的查询要素讲解中，查询后的所有元素的ID将存到这个数组中。highlight方法除了可以接受一个数组，也可以接受数字。

    // 高亮函数
    function featureHighlight() {
      highlightSelect.push(csvLayerView.highlight(highlightIds));
    }

---

 

  2.4  featureEffect 实现过滤效果

1. 设置csvLayerView的featureEffect属性，这个属性用于定义图层上特定要素的视觉效果。
2. filter 定义应用效果的过滤器，即哪些要素会受到效果的影响。
3. excluderEffect 用于定义未被filter 选中的要素的视觉效果。在这个例子中，未选中（非高亮）的要素将被模糊处理（blur(5px)），转换为灰度（grayscale(90%)），并降低透明度（opacity(40%)）。

csvLayerView.featureEffect = {
  filter: {
    objectIds: highlightIds,
  },
  excludedEffect: "blur(5px) grayscale(90%) opacity(40%)",
};

 

---

Arcgis api4.x 框选要素并高亮，未被框选的要素应用模糊效果【vue3源码+示例数据】https://mbd.pub/o/bread/ZpqTmp9p

（如果文章对你有帮助，可以点个赞鼓励下博主噢！）