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.
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.
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%)"
};
};