How to get geometry object when I inquiry with Point of Sketch Tool

Question

Hi.

The version of arcgis javascript I'm using now is 4.24.
I am currently implementing the highlight processing of the selected object on the layer using the tool of the Sketch Object, but if I select polygon, square, or circle, the geometry object is inquired and returned, but if you select the object on the layer using the point tool, the geometry object is not returned. I'll write my source, so if there's anything wrong, please correct it.

In the source below, if I select with point tool, I get zero in the red letter of the bold part.

Please, help me.

let allLayerUrl = 'https://services-ap1.arcgis.com/Hs0yGgyc5IFRgIXc/arcgis/rest/services/GEOIS/FeatureServer';
let boreholeLayerUrl = 'https://services-ap1.arcgis.com/Hs0yGgyc5IFRgIXc/arcgis/rest/services/GEOIS/FeatureServer/0';
let projectLayerUrl = 'https://services-ap1.arcgis.com/Hs0yGgyc5IFRgIXc/arcgis/rest/services/GEOIS/FeatureServer/1';
let projectPointLayerUrl= 'https://services-ap1.arcgis.com/Hs0yGgyc5IFRgIXc/arcgis/rest/services/GEOIS/FeatureServer/2';

const boreholeLayer = new FeatureLayer({
url: boreholeLayerUrl,
outFields: ["*"]
});

const projectLayer = new FeatureLayer({
url: projectLayerUrl,
outFields: ["*"]
});

const projectPointLayer = new FeatureLayer({
url: projectPointLayerUrl,
outFields: ["*"]
});

gisMap = new WebMap({
portalItem: {
id: "a706f1759f9944ebb3888bdecf3bc6f7"
},
layers:[projectPointLayer, projectLayer, boreholeLayer] 
});

gisView = new MapView({
container: "viewDiv", 
map: gisMap, 
extent: { 
xmin: 1.4143672753287151E7,
ymin: 4523114.166998532,
xmax: 1.4144828455598556E7,
ymax: 4523429.5509626325,
spatialReference: 102100
},
zoom: 17
});

graphicsLayerSketch = new GraphicsLayer();
gisMap.add(graphicsLayerSketch);

let removeLayerIds = ['WebTiled_5481', 'WebTiled_5071', 'WebTiled_7927', 'WebTiled_509'];

gisMap.loadAll().then(async () => {
$.each(removeLayerIds, function(i, v){
let removeLayer = gisMap.findLayerById(v);
gisMap.remove(removeLayer);
});

let dllLayer = gisMap.allLayers.find(function(layer){
return layer.title === "GEOIS - TB DLL LC";
});

let prjctLayer = gisMap.allLayers.find(function(layer){
return layer.title === "GEOIS - TB PRJCT LC";
});

let prjctPointLayer = gisMap.allLayers.find(function(layer){
return layer.title === "GEOIS - TB PRJCT LC POINT";
});

gisMap.reorder(dllLayer, 7);
gisMap.reorder(prjctLayer, 6);
gisMap.reorder(prjctPointLayer, 5);

if(isFindGis == 'Y'){
moveToSelectedArea();
}
})
.then(function() {
return gisMap.basemap.load();
})
.then(function() {
allLayers = gisMap.allLayers;
const promises = allLayers.map(function(layer) {
return layer.load();
});

setLayerVisible(true);

return Promise.all(promises.toArray());
})
.then(function(layers) {})
.catch(function(error) {});

const sketch = new Sketch({
layer: graphicsLayerSketch,
view: gisView,
creationMode: "update",
updateOnGraphicClick: true,
visibleElements: {
createTools: {
point: true,
polyline: false
},
selectionTools:{
"lasso-selection": false,
"rectangle-selection":false,
},
settingsMenu: false,
undoRedoMenu: true
}
});

gisView.ui.add(sketch, "top-right");

sketch.on("update", (event) => {

unitGraphic = event.graphics[0];

if (event.state === "start") {
queryFeaturelayer(unitGraphic.geometry);
}
if (event.state === "complete"){
graphicsLayerSketch.remove(unitGraphic); 
}

if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type === "move-stop")) {
queryFeaturelayer(unitGraphic.geometry);
}

});

const parcelLayer = new FeatureLayer({
url: boreholeLayerUrl,
});

function queryFeaturelayer(geometry) {
let type = geometry.type;

const parcelQuery = {
spatialRelationship: "intersects", 
geometry: geometry, 
outFields: ['*'], 
returnGeometry: true
};

parcelLayer.queryFeatures(parcelQuery).then((results) => {
console.log("Feature count: " + results.features.length)
displayResults(results);
}).catch((error) => {
console.log(error);
});
}

function displayResults(results) {
results.features.map((feature) => {
feature.symbol = highlightSymbol;

addedFeatureMap.set(parseInt(feature.attributes.DLL_SN), feature);

return feature;
});

gisView.graphics.addMany(results.features);

if(results.features.length > 0){
processSelectedArea(results.features);
}
}

squre_tool.PNG

squre_tool_get_count_3.PNG

point_tool.PNG

point_tool_get_count_0.PNG

yangheekim · Answer

Thank you for your interest in my question and for making a sample yourself. But it doesn't work.

JoelBennett · Answer

If that was going to work, you'd have to click exactly on the very same coordinates as the point feature, but that's virtually impossible.  Therefore, for point queries, you should use MapView.hitTest instead - as long as you click on the point's symbology it should work.  Maybe try something like this:

function queryFeaturelayer(geometry) {
	if (geometry.type == "point") {
		gisView.hitTest(gisView.toScreen(geometry), {include:parcelLayer}).then(function(hitTestResult) {
			var graphics = [];

hitTestResult.results.forEach(function(result) {
				graphics.push(result.graphic);
			});

console.log("Feature count: " + graphics.length);
			displayResults({features:graphics});
		});
	} else {
		const parcelQuery = {
			spatialRelationship: "intersects", 
			geometry: geometry, 
			outFields: ['*'], 
			returnGeometry: true
		};

parcelLayer.queryFeatures(parcelQuery).then((results) => {
			console.log("Feature count: " + results.features.length);
			displayResults(results);
		}).catch((error) => {
			console.log(error);
		});
	}
}