This sample shows how to use the hitTest() method on the MapView to access features in a VectorTileLayer. This is done by setting up a pointer-move event handler on the view and passing the returned x, y screen coordinates to the hit method of the view, 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 MapView's pointer move event and call hittest
// Display the contours info if the hittest result
// contains contours information from vector tile layer
view.on("pointer-move", async (event) => {
let hits;
try {
hits = await hitTest(event);
if (hits) {
let displayContent;
for (let hit of hits) {
displayContent = hits.map((hit) => {
const styleLayer = layer.getStyleLayer(hit.graphic.origin.layerId);
const mapPoint = view.toMap({x: event.x, y: event.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 hit 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 view.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;
}
});