Getting currently selected Graphic: Graphic is empty object

DavidDrennan

Hello!

We are trying to calculate the distance/area of a user drawn graphic with the Sketch widget, which they've selected by clicking on the graphic on the map. However, it seems that the graphic is always an empty object.

The follow is a sample of what we have:

reactiveUtils.on(
  () => mapView,
    "click",
    (event) => {
        // graphicLayer is, you guessed it, a GraphicLayer
        mapView?.hitTest(event, { include: graphicLayer }).then(function (response) {
          const graphicHits = response.results?.filter(
            (hitResult) => hitResult?.type === "graphic"
          );

          console.log(graphicHits);

          if (graphicHits?.length > 0) {
            // hitObj, currGraphic, and currMeasurements are initially defined
            // somewhere else as null
            hitObj = graphicHits?.at(0);
            currGraphic = hitObj?.graphic;

            console.log(currGraphic); // <- will always show a blank object

            // simplyGeo just calls geometryEngine.simplify()
            const simplified = simplifyGeo(currGraphic);

            // creates an object with keys geodisc and planar that are
            // assigned a value based on the results of 
            // geometryEngine.geodesicArea / geometryEngine.geodesicLength or
            // geometryEngine.planarArea / geometryEngine.planarLength
            // respectively
            currMeasurements = getGraphicMeasurements(simplified);
          }
        });
      }
    );

 

Is there something else we have to do to get the graphic's data, instead of a blank object?

DavidDrennan

We're using the ES module, version 4.29.7. We tried on 4.29.10 and it made no difference.

If it helps, the sample code isn't 100% the same as what we have, as it's inside of a Vue 3 application. So as a better example, we have more or less the following in a Vue 3 script-setup tag:

 

const map = new Map({
  basemap: 'arcgis-light-gray',
});

const mapView = ref(null);

const graphicLayer = new GraphicsLayer({
  title: 'Graphics'
});

// some other code...

onMounted(() => {
    // https://vuejs.org/api/reactivity-advanced.html#markraw
    mapView.value = markRaw(useMapView({ map, ...mergedOpts.value }));
    mapView.value.when(() => {
      // bunch of other code here as well...
    });
});

// https://vuejs.org/guide/essentials/watchers.html#watcheffect
watchEffect(() => {
  if (mapView.value) {
    // all more or less the same as before
    reactiveUtils.on(
      () => mapView.value,
      "click",
      (event) => {
        mapView.value?.hitTest(event, { include: graphicLayer }).then(function (response) {
          const graphicHits = response.results?.filter(
            (hitResult) => hitResult?.type === "graphic"
          );
          console.log(graphicHits); // <- an empty object no matter what
          if (graphicHits?.length > 0) {
            // again, these variables are defined elsewhere
            hitObj = graphicHits?.at(0);
            currGraphic = hitObj?.graphic;
            console.log(currGraphic);
            const simplified = simplifyGeo(currGraphic);
            currMeasurements = getGraphicMeasurements(simplified);
          }
        });
      }
    );
  }
});