ArcGISAPI开发文档解析——View.hitTest()

return–> 异步的 HitTestResult对象数组
官方释义&＃xff1a;返回与指定屏幕坐标相交的图形&＃xff08;具体可参考返回的数据结构示例&＃xff09; &＃xff0c;每次单击交互查找鼠标指针下的所有对象。

两个参数&＃xff1a;screenPoint, options
第一个参数&＃xff1a;screenPoint 单击视图获取的屏幕坐标&＃xff0c;一般可以通过View.on()事件触发得到&＃xff0c;这也是为什么通常情况下View.hitTest()方法通常写在View.on()方法内部的原因

第二个参数&＃xff1a;options 对象类型&＃xff0c; 官方释义&＃xff1a;相交的选项&＃xff0c;当默认情况下&＃xff0c;如果不透明度小于 1&＃xff0c;则排除 map.ground。
主要有属性&＃xff1a;include、exclude
Include&＃xff1a;包含的图层和图形&＃xff1b;不指定&＃xff0c;则包含所有的图层和图形。
Exclude&＃xff1a;排除的图层或图层&＃xff1b;不指定&＃xff0c;则包含所有的图层和图形。

返回的对象&＃xff1a;异步的HitTestResult对象数组&＃xff0c;当输入屏幕坐标的位置与视图中的图形相交时&＃xff0c;将返回结果。如果图形具有非覆盖 IconSymbol3DLayer 符号系统&＃xff0c;则只有第一个图形将从 hitTest 返回&＃xff0c;数据结构参考&＃xff1a;

{"screenPoint": {"x": 1110.666748046875,"y": 704.6666870117188},"results": [{"graphic": {"geometry": null,"symbol": null,"attributes": {"OBJECTID": 23259,"CNSTRCT_YR": 1950}},"mapPoint": {"spatialReference": {"latestWkid": 3857,"wkid": 102100},"x": -8237578.175357298,"y": 4972677.452421391,"z": 29.343255893327296},"distance": 6033.217135564263}],"ground": {"mapPoint": {"spatialReference": {"latestWkid": 3857,"wkid": 102100},"x": -8237575.894557083,"y": 4972679.5403643185,"z": 6.689946555570758},"distance": 6055.99127013477}
}


参考官方文档结构如下&＃xff1a;

graphic&＃xff1a; 视图中与输入屏幕坐标相交的图形。有些图层没有graphic.geometry&＃xff08;例如&＃xff1a;SceneLayer 和PointCloudLayer&＃xff09;。graphics.attributes 仅包含客户端加载的属性&＃xff0c;因此它可以是所有属性的子集。带有 [“*”] 的 FeatureLayer.outFields 可强制显示所有属性。graphics.symbol 仅存在于来自 GraphicsLayer 或 view.graphics 的图形&＃xff0c;但可以使用 getDisplayedSymbol 计算显示的符号系统。
mapPoint &＃xff1a;与输入屏幕坐标对应的视图空间参考中的点几何。
distance&＃xff1a;从相机位置到此图形上的点几何图形的距离。在全局场景中&＃xff0c;距离将以米为单位&＃xff0c;而在局部场景中&＃xff0c;距离将以视图的空间参考为单位。
ground &＃xff1a;地面相交结果。即使地面被从 hitTest 中排除&＃xff0c;也将始终返回地面撞击结果。
☞mapPoint&＃xff1a;执行 hitTest 时击中地面的点。当地面完全没有被击中时&＃xff08;例如通过点击天空&＃xff09;&＃xff0c;这可能为空。
☞distance&＃xff1a;从相机位置到地面的距离。如果地面完全没有被击中&＃xff0c;则距离将为 0。在全局场景中&＃xff0c;距离将以米为单位&＃xff0c;而在局部场景中&＃xff0c;距离将以视图的空间参考为单位。
☞screenPoint&＃xff1a;单击视图的屏幕坐标&＃xff08;或本机鼠标事件&＃xff09;

我觉得这个方法更深入的应用在于和地面的相交碰撞检测&＃xff0c;返回碰撞的结果&＃xff0c;如下面的第一个demo中涉及&＃xff0c;官方demo参考地址

view.on("immediate-click", (event) &＃61;> {// get the returned hitTestResult// and draw points on all return mappoints and connect to a line// (using promise chaining for cleaner code and error handling)view.hitTest(event, { exclude: [view.graphics] }).then((hitTestResult) &＃61;> {// print the information to the panelhitresultground.textContent &＃61; &＃96;${Math.round(hitTestResult.ground.distance)} m&＃96;;hitresultcount.textContent &＃61; hitTestResult.results.length;let lastHit &＃61; null;// 点击后有命中对象if (hitTestResult.results.length > 0) {// 最后一个命中对象赋给地面lastHit &＃61;hitTestResult.results[hitTestResult.results.length - 1];// 为每个命中对象创建点图形hitTestResult.results.forEach((result, index) &＃61;> {const hitObject &＃61; new Graphic({geometry: result.mapPoint,symbol:index &＃61;&＃61;&＃61; 0 ? firstObjectPointSymbol : objectPointSymbol //第一个命中点和其他点样式区分});view.graphics.add(hitObject);// 修改点击命中图层的透明度let graphic &＃61; result.graphic;// change the layer to be transparentgraphic.layer.opacity &＃61; 0.8;// highlight the hit objectview.whenLayerView(graphic.layer).then((layerView) &＃61;> {highlightedList.push(layerView.highlight(graphic));});});}// 地面相交点if (hitTestResult.ground.mapPoint) {if (lastHit) {// 确保地面点离相机最远if (hitTestResult.ground.distance > lastHit.distance) {// an object under the ground could be more far away,// check first the distance before set the ground as last pointlastHit &＃61; hitTestResult.ground;}} else {lastHit &＃61; hitTestResult.ground;}// create point graphic for the groundconst hitGround &＃61; new Graphic({geometry: hitTestResult.ground.mapPoint,symbol: groundPointSymbol});view.graphics.add(hitGround);}//添加相机点到命中地面点的线图形if (lastHit) {// Draw a line to connect all hit objects and groundlet linePoints &＃61; [[view.camera.position.x,view.camera.position.y,view.camera.position.z],[lastHit.mapPoint.x, lastHit.mapPoint.y, lastHit.mapPoint.z]];view.graphics.add({geometry: {type: "polyline",paths: linePoints,spatialReference: view.spatialReference},symbol: lineSymbol});}}).catch((error) &＃61;> {console.error(error);});});


第二个demo 更多的主要展示视图的加载和事件间的交互&＃xff0c;在hitTest的应用主要是拿到结果的graphic进行查询高亮

view.on("pointer-move", eventHandler);view.on("pointer-down", eventHandler);function eventHandler(event) {// only include graphics from hurricanesLayer in the hitTestconst opts &＃61; {include: hurricanesLayer};// the hitTest() checks to see if any graphics from the hurricanesLayer// intersect the x, y coordinates of the pointerview.hitTest(event, opts).then(getGraphics);}let highlight, currentYear, currentName;function getGraphics(response) {// the topmost graphic from the hurricanesLayer// and display select attribute values from the// graphic to the userif (response.results.length) {const graphic &＃61; response.results[0].graphic;const attributes &＃61; graphic.attributes;const category &＃61; attributes.CAT;const wind &＃61; attributes.WIND_KTS;const name &＃61; attributes.NAME;const year &＃61; attributes.YEAR;const id &＃61; attributes.OBJECTID;if (highlight &&(currentName !&＃61;&＃61; name || currentYear !&＃61;&＃61; year)) {highlight.remove();highlight &＃61; null;return;}if (highlight) {return;}document.getElementById("info").style.visibility &＃61; "visible";document.getElementById("name").innerHTML &＃61; name;document.getElementById("category").innerHTML &＃61;"Category " &＃43; category;document.getElementById("wind").innerHTML &＃61; wind &＃43; " kts";// highlight all features belonging to the same hurricane as the feature// returned from the hitTestconst query &＃61; layerView.createQuery();query.where &＃61; "YEAR &＃61; " &＃43; year &＃43; " AND NAME &＃61; &＃39;" &＃43; name &＃43; "&＃39;";layerView.queryObjectIds(query).then((ids) &＃61;> {if (highlight) {highlight.remove();}highlight &＃61; layerView.highlight(ids);currentYear &＃61; year;currentName &＃61; name;});} else {// remove the highlight if no features are// returned from the hitTestif (highlight) {highlight.remove();highlight &＃61; null;}document.getElementById("info").style.visibility &＃61; "hidden";}}