The biggest difference between WFS and WMS lies in the result of the data. WFS returns spatial elements as GeoJSON, while WMS directly renders a map based on the spatial elements and provides that.

OpenLayers renders objects onto a canvas based on WFS data. Think of it as drawing a kind of shape based on the spatial information.

Unlike images, since these are objects drawn directly on the web, the web has the great advantage of being able to recognize or manipulate them.

In this document, we'll add interactions to the WFS map we previously implemented.

We use the WFS map covered in Chapter 15 as-is. Through the Select object, you can add styles for each interaction.

You can visually express interactions with objects by assigning the desired style based on states such as mouse hover, click, etc.

When expressing interaction design, using the Select object makes it easy to implement.

States like hover and click are called conditions. The basic usage is as follows.

TYPESCRIPT
import { Select } from 'ol/interaction';
import { click, pointerMove } from 'ol/events/condition';

const hoverSelect = new Select({
	condition: pointerMove,
	style: feature => { ... }
});

const clickSelect = new Select({
	condition: click,
	style: feature => { ... }
});

Since basic interactions are already declared in ol/events/condition-Condition, you only need to bring in the interaction you need and assign it.

Through style, you can display the design you want when the specified interaction occurs.

The complete information for Select can be found in the official documentation.

Let's apply the created Select to the Map.

TYPESCRIPT
import { Map } from 'ol';
import { defaults } from 'ol/interaction';

const map = new Map({
	// ...
	interactions: defaults().extend([ clickSelect, hoverSelect ])
	// ...
});

You can apply it as shown above. The default() method is the default interaction object. It's a method of extending existing interactions with new ones using the extend method.

If you assign interactions directly without this kind of extension, other interactions won't work. This also includes basic interactions like map panning and zooming!

TYPESCRIPT
// Add an interaction
map.addInteraction();

// Return the list of interactions
map.getInteractions();

// Remove an interaction
map.removeInteraction();

The related methods are as above. They can be called on the created Map object. When using map.addInteraction(), since it's an action that adds an interaction, you don't need to use the defaults().extend() mentioned above.

You can check an example implementing this at OpenLayers6 Sandbox - Feature Click.