1.效果
2.思路
实现上图中的效果,需要了解几个知识点;分别为sketchViewModel实现绘制、queryFeatures实现要素查询、highlight实现高亮效果、featureEffect实现过滤效果,下面将依次讲解。
2.1 sketchViewModel 实现绘制
- 创建了一个新的
GraphicsLayer
对象,用于存储和显示多边形图形; - 初始化一个
SketchViewModel
对象,这是用于在地图上绘制图形的视图模型;添加一个事件监听器,监听图形的创建事件,当事件发生时,将GraphicsLayer
对象中的所有图形进行合并; - 调用写好的查询要素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 实现要素查询
- 首先解释 csvLayerView,这个是图层的layerView,更多扩展可以浏览arcgis api的官方文档;
- 定义一个查询对象 query
,
查询的几何对象为geometry,这个其实就是上文提到的合并后的图形;几何对象将被用来与图层上的要素进行空间关联查询。 - 使用queryFeatures方法查询要素,查询结果为空则清空图形图层中所有图形;查询结果不为空,则选结果中每个要素的属性信息的 __OBJECTID ,用于后续的要素高亮任务。
- 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 实现过滤效果
- 设置
csvLayerView
的featureEffect
属性,这个属性用于定义图层上特定要素的视觉效果。 - filter 定义应用效果的过滤器,即哪些要素会受到效果的影响。
- 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
(如果文章对你有帮助,可以点个赞鼓励下博主噢!)