VectorTileLayer hitTest | Sample | ArcGIS Maps SDK for JavaScript

This sample shows how to use the hitTest() method on the Map component to access features in a VectorTileLayer. This is done by setting up a pointer-move event handler on the Map component and passing the returned x, y screen coordinates to the hitTest() method, along with additional options to only include graphics from the VectorTileLayer. The method returns a promise, resolving to an array of objects containing any features retrieved from the VectorTileLayer. Subsequently, the content is generated to include contours information and is presented in a tooltip.

// Listen to map component's pointer move event and call hittest
// Display the contours info if the hittest result
// contains contours information from vector tile layer
viewElement.addEventListener("arcgisViewPointerMove", async (event) => {
  let hits;
  try {
    hits = await hitTest(event.detail);
    if (hits) {
      let displayContent;
      for (let hit of hits) {
        displayContent = hits.map((hit) => {
          const styleLayer = layer.getStyleLayer(hit.graphic.origin.layerId);
          const mapPoint = viewElement.toMap({ x: event.detail.x, y: event.detail.y });
          graphic.geometry = mapPoint;

          let depressionValue;
          // check the values returned in depression attributes and assign descriptive info
          switch (hit.graphic.attributes["DEPRESSION"]) {
            case 0:
              depressionValue = "Depression status is indeterminate";
              break;
            case 1:
              depressionValue = "Depression contour";
              break;
            case 2:
              depressionValue = "Feature is a normal contour";
              break;
            default:
              depressionValue = hit.graphic.attributes["DEPRESSION"];
          }
          const content = {
            Contour: hit.graphic.attributes["Contour"],
            Depression: depressionValue,
            Unit: hit.graphic.attributes["Unit"],
          };
          return content;
        });
      }
      // clean up the tooltip content to show contours info
      displayContent[0] = JSON.stringify(displayContent[0])?.replace(/[{}]/g, "");
      displayContent[0] = displayContent[0].replace(/\"/g, "").replace(/:/g, ": ");
      displayContent[0] = displayContent[0].split(",").join("<br />");
      const screenPoint = hits.screenPoint;
      vtlTooltip.show(screenPoint, displayContent[0]);
    } else {
      vtlTooltip.hide();
    }
  } catch {}
});

The following snippet shows how the hitTest method returns label features from a VectorTileLayer.

// debounce the hittest as user moves the mouse over the map to improve performance
const hitTest = promiseUtils.debounce(async (event) => {
  // get hit test results only from the vector tile layer
  const hit = await viewElement.hitTest(event, { include: layer });
  if (hit.results.length) {
    // check if the hit test results from the vector tile layer contains
    // results for label layers defined in styleLayerIds
    const results = hit.results.filter((result) => {
      return result.graphic;
    });
    results.screenPoint = hit.screenPoint;
    if (!results.length) {
      return null;
    }
    return results;
  } else {
    return null;
  }
});