OGCFeatureLayerView

const layerView = await view.whenLayerView(layer);

// availableFields will become available once the
// layerView finishes updating
await reactiveUtils.whenOnce(() => !layerView.updating);

try {
  const results = await layerView.queryFeatures({
    outFields: layerView.availableFields,
    where: "DEW_POINT > 10"
  });
  console.log(results.features.length, " features returned");
} catch(error) {
  console.log("query failed: ", error);
}

// watch layer view updating and dataUpdating to get the count of features
// available in layer view. Only execute the query once new features are fetched.
let dataWasUpdated = lv.dataUpdating;
reactiveUtils.watch(() => [lv.updating, lv.dataUpdating],
  ([updating, dataUpdating]) => {
  dataWasUpdated ||= dataUpdating;
  if (!updating && dataWasUpdated) {
   dataWasUpdated = false;
   lv.queryFeatureCount().then((results)=>{
      console.log("number of features in layerView", results);
    });
  }
});

// gray out features that fall outside of the 3 mile buffer of the mouse's location
// by setting feature effect on excluded features
layerView.featureEffect = new FeatureEffect({
  filter: new FeatureFilter({
    geometry: filterGeometry,
    spatialRelationship: "intersects",
    distance: 3,
    units: "miles"
  }),
  excludedEffect: "grayscale(100%) opacity(30%)"
});

// Apply a drop-shadow feature effect to the features that intersect the borough boundaries,
// while applying blur and brightness effects to the features that are excluded from filter criteria.
// The resulting map will make it easier to spot if the residents are more likely to experience deprivation
// if they live on a borough boundary.
const featureFilter = new FeatureFilter({
  where: "BoroughEdge='true'"
});
layerView.featureEffect = new FeatureEffect({
  filter: featureFilter,
  includedEffect: "drop-shadow(3px, 3px, 3px, black)",
  excludedEffect: "blur(1px) brightness(65%)"
});

// display rain gauges where their water percent is over 30%
// and if the gauges are completely contained by the 10-mile
// buffer around the filter geometry
featureLayerView.filter = new FeatureFilter({
  where: "percentile >= 30",
  geometry: filterPolygon,
  spatialRelationship: "contains",
  distance: 10,
  units: "miles"
});

const viewElement = document.querySelector("arcgis-map");
const layerView = await viewElement.whenLayerView(layer);

// Wait until the initial layer load completes
const layerView = await viewElement.whenLayerView(airQualityLayer);
await reactiveUtils.whenOnce(() => !layerView.updating);

// Set up query with outStatistics to compute min, max, and average PM2.5 of all data
const query = airQualityLayer.createQuery();
query.outStatistics = [
  {
    statisticType: "avg",
    onStatisticField: "pm25",
    outStatisticFieldName: "avg_pm25"
  },
  {
    statisticType: "min",
    onStatisticField: "pm25",
    outStatisticFieldName: "min_pm25"
  },
  {
    statisticType: "max",
    onStatisticField: "pm25",
    outStatisticFieldName: "max_pm25"
  }
];

// Run the query on all features to get the min, max, and average values.
// If `hasAllFeatures` is true, all features from the layer are loaded
// and available on the client, so use layerView.queryFeatures for faster performance.
// Otherwise, use layer.queryFeatures to run the query against all features
const results = layerView.hasAllFeatures
  ? await layerView.queryFeatures(query)
  : await airQualityLayer.queryFeatures(query);

// process the result
updateAirQualityStatus(results);

const layerView = await viewElement.whenLayerView(featureLayer);

reactiveUtils.when(
  () => !layerView.dataUpdating,
  async () => {
    // wait till the layerView finishes fetching its data
    // layerView has all expected features
    if (layerView.hasAllFeaturesInView) {
      const count = await layerView.queryFeatureCount({
        geometry: view.extent
      });
      // use the feature count
      console.log(count, "features in the layerView within the extent");
    } else {
      // LayerView does not have all expected features
      // for example, the layer may have displayFilterInfo applied
      // in this case, not all features from the layer will be available
      // in the layer view as they are filtered out
      const count = await layer.queryFeatureCount({
        geometry: view.extent
      });
      // use the count
      console.log(count, "features in the layer within the extent");
    }
  }
);

// Features in the layerview will be highlighted with bright
// yellow colors in the map.
const layerView = await view.whenLayerView(layer);
layerView.highlightOptions = {
  color: [255, 255, 0, 1],
  haloOpacity: 0.9,
  fillOpacity: 0.2
};

// Check for the first time layerView.updating becomes false. Then query for
// features that are visible within the view associated with the layer view.
await reactiveUtils.whenOnce(() => !layerView.updating);
const query = layerView.createQuery();
query.geometry = layerView.view.extent;
const result = layerView.queryFeatures(query);

// Check for the first time layerView.updating becomes false. Then query for
// features that are visible within the view associated with the layer view.
await reactiveUtils.whenOnce(() => !layerView.updating);
const query = layerView.createQuery();
query.geometry = layerView.view.extent;
const result = layerView.queryFeatures(query);

const query = csvLayerView.createQuery();
query.where = "magnitude > 4";
csvLayerView.queryFeatures(query).then(function(results) {
  console.log(results);
})
.catch(function(error) {
  console.log(error);
});

// Highlight features based on a query result

// Add a new set of highlight options to the view's highlights collection
view.highlights.push({
  name: "oaks",
  color: "forestgreen",
  haloOpacity: 0.8,
  fillOpacity: 0.3
});

// A handler can be used to remove any previous highlight when applying a new one
let highlight;

// Query for particular features in a layer and then highlight them with the specified options
view.whenLayerView(treesLayer).then((layerView) => {
  let query = treesLayer.createQuery();
  query.where = "type = 'Quercus'";

  treesLayer.queryFeatures(query).then((result) => {
    // Remove any previous highlight, if it exists
    highlight?.remove();
    // Apply the "oaks" highlight options to the corresponding tree features
    highlight = layerView.highlight(result.features, {name: "oaks"});
  });
});

// Use the default highlights collection to apply a highlight to features when you hover over them

// A handler can be used to remove any previous highlight when applying a new one
let hoverHighlight;

view.on("pointer-move", (event) => {
  // Search for the first feature in the featureLayer at the hovered location
  view.hitTest(event, { include: layer }).then((response) => {
    if (response.results[0]) {
      const graphic = response.results[0].graphic;
      view.whenLayerView(graphic.layer).then((layerView) => {
        // Remove any previous highlight, if it exists
        hoverHighlight?.remove();
        // Highlight the hit features with the temporary highlight options, which are pre-configured for this use case
        hoverHighlight = layerView.highlight(graphic, { name: "temporary" });
      });
    }
  });
});

view.on("click", function(event){
  // event is the event handle returned after the event fires.
  console.log(event.mapPoint);
});

// clustered point layer
const layer = new FeatureLayer({
  featureReduction: { type: "cluster" }
});

const layerView = await view.whenLayerView(layer);
await reactiveUtils.whenOnce(() => !layerView.updating);

// features represents all the clusters in the view
const { features } = await layerView.queryAggregates();

// Query the temperature field in the feature layer and create a histogram
// Analyze temperature data over a year, create 100 bins for different temperature ranges
// to assess frequency and identify patterns.
const binQuery = new AttributeBinsQuery({
  where: "UnitTop = 0",
  binParameters: new AutoIntervalBinParameters({
    bins: 100,
    field: "temp",
    start: 0, // lowest temp value to be included in the bin query
    end: 30 // highest temp value to be included
  })
});

layerView.queryAttributeBins(query).then((results) => {
  const bins = results.features.map((bin) => {
    return {
      minValue: bin.attributes.lowerBoundary,
      maxValue: bin.attributes.upperBoundary,
      count: bin.attributes.temperature_count,
    };
  });

  // get the lower boundary of the first bin
  const min = results.features[0].attributes.lowerBoundary;
  // get the upper boundary of the last bin
  const max = results.features[results.features.length - 1].attributes.upperBoundary;
  // calculate the average for the bins
  const average = results.features[0].attributes.lowerBoundary + results.features[results.features.length - 1].attributes.upperBoundary) / 2;

  const histogram = new Histogram({
    container: "histogramDiv",
    bins: bins,
    min: min,
    max: max,
    average: average,
    barCreatedFunction:(index, element) => {
      element.setAttribute("fill", "#FFA500");
      element.setAttribute("opacity", 0.5);
    },
    labelFormatFunction: (value, type) => {
      return (Math.round(value)).toLocaleString();
    },
    dataLines: [{
      value: histogram.min,
      label: histogram.min.toLocaleString()
    }, {
      value: histogram.average,
      label: histogram.average.toLocaleString()
    }, {
      value: histogram.max,
      label: histogram.max.toLocaleString()
    }]
  });
});

let layer = new CSVLayer({
  url: csvUrl  // URL to a csv file
});

const layerView = await view.whenLayerView(layer);
await reactiveUtils.whenOnce(() => !layerView.updating);

const results = await layerView.queryExtent()
view.goTo(results.extent);  // go to the extent of all the graphics in the layerView

// Expand the extent so that a feature (i.e. point feature)
// won't be off screen after the end of goTo animation.
const { extent } = await layerView.queryExtent()
const zoomScale = 16000;
extent.expand((zoomScale / view.scale) * view.resolution);
view.goTo(extent);

view.on("click", (event) => {
  let query = new Query();
  query.geometry = event.mapPoint;  // obtained from a view click event
  query.spatialRelationship = "intersects";

  const layerView = await view.whenLayerView(layer);
  await reactiveUtils.whenOnce(() => !layerView.updating);

  const count = await layerView.queryFeatureCount(query);
  console.log(count);  // prints the number of the client-side graphics that satisfy the query
});

const layerView = await view.whenLayerView(layer);
const count = await layerView.queryFeatureCount()
console.log(count);  // prints the total number of client-side graphics to the console

let layer = new FeatureLayer({
  url: fsUrl  // points to a Feature Service layer url
});

let query = new Query();
query.geometry = new Extent({
 xmin: -9177811,
 ymin: 4247000,
 xmax: -9176791,
 ymax: 4247784,
 spatialReference: 102100
});
query.spatialRelationship = "intersects";

const layerView = await view.whenLayerView(layer);
await reactiveUtils.whenOnce(() => !layerView.updating);

const results = await layerView.queryFeatures(query);
console.log(results.features);  // prints the array of client-side graphics to the console

let layer = new FeatureLayer({
  url: fsUrl  // points to a Feature Service layer url
});

// returns all the graphics from the layerView
const layerView = await view.whenLayerView(layer);
await reactiveUtils.whenOnce(() => !layerView.updating);

const results = await layerView.queryFeatures()
console.log(results.features); // prints all the client-side graphics to the console

layerView.queryFeatures({
  geometry: mapPoint,
  // 6 pixels around a point at the view resolution to query around a finger.
  distance: view.resolution * 6,
});

view.on("click", async (event) => {
  let query = new Query();
  query.geometry = event.mapPoint;  // obtained from a view click event
  query.spatialRelationship = "intersects";

  const layerView = await view.whenLayerView(layer)
  await reactiveUtils.whenOnce(() => !layerView.updating);

  const ids = await layerView.queryObjectIds(query);
  console.log(ids);  // prints the ids of the client-side graphics to the console=
});

// returns all the Ids from the graphics in the layerView
view.whenLayerView(layer).then(function(layerView){
  return layerView.queryObjectIds()
}).then(function(ids){
  console.log(ids);  // prints the ids of all the client-side graphics to the console
});

// Although this example uses MapView, any class instance that is a promise may use when() in the same way
let view = new MapView();
view.when(function(){
  // This function will execute once the promise is resolved
}, function(error){
  // This function will execute if the promise is rejected due to an error
});