OGCFeatureLayer

This sample shows how to access an OGC API Features service using an OGCFeatureLayer. Since this layer type brings the data in as features, you can perform your own rendering, labeling, clustering, etc. See the API Reference for more information on what is supported.

The url and collectionId properties are required when creating a new OGCFeatureLayer.

Use dark colors for code blocksCopy
1
2
3
4
5
6
const wineryLayer = new OGCFeatureLayer({
  url: "https://demo.ldproxy.net/vineyards", // url to the OGC service
  collectionId: "vineyards", // unique id of the collection
  labelingInfo: [{ ... }],
  renderer: { ... }
});

Filter the features on the OGCFeatureLayerView

The OGCFeatureLayer supports working with your features on the client through the OGCFeatureLayerView. We can use the filter button in the top-left of the view to filter the layerView by the area of the winery. When a filter is selected, we call the following function to apply the filter and effect.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const filterByType = (event) => {
  // close the popup if it's open
  if (view.popup.visible) {
    view.closePopup();
  }
  // determine filter definition based on the selected type
  const selectedType = event.target.getAttribute("data");
  if (!selectedType) {
    return; // do not set filter if one of the filters has not been clicked
  }
  let filterDef = "";
  switch (selectedType) {
    case "lessThan50":
      filterDef = "area_ha < 50";
      break;
    case "fiftyTo100":
      filterDef = "area_ha >= 50 AND area_ha <= 100";
      break;
    case "greater100":
      filterDef = "area_ha >= 100";
      break;
    default:
  }
  // apply the effect to the features
  wineryLayerView.featureEffect = {
    filter: {
      where: filterDef
    },
    excludedEffect: "opacity(20%)"
  };
};

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.