OpenLayers is a JavaScript Library for providing maps or GIS services in a web browser. Among GIS libraries, it has the steepest entry barrier, but it offers correspondingly powerful features.

BASH
 # Install OpenLayers
yarn add ol

OpenLayers can be installed as shown above.

OpenLayers' core Map object contains a variety of objects. These objects come together and interconnect to form a single interactive map.

Since so many objects are tied to a single map, if you don't grasp what each object represents, you'll end up not knowing which one to use to implement what you want. Unfortunately, if you don't even know the relevant keywords, finding related information becomes difficult as well. To make matters worse, in the GIS field there simply isn't a large amount of material available domestically in Korea.

To avoid wasting time like this, understanding the characteristics of each OpenLayers object and what structure it contains will make implementation considerably smoother.

The diagram above illustrates OpenLayers' main objects. (The objects shown in the diagram aren't the entirety of OpenLayers.)

• Feature: elements like points, lines, and polygons (vector layers only)
• Source: the data source of a layer. It's similar to a collection of Features. (SHP, GeoJSON, etc.)
• Layer: a dataset defined based on a data source (vector, image)
• View: information about how the user is currently viewing the map
• Interaction: the map's interactive elements (zoom in/out buttons, etc.)
• Overlay: elements to display on the map

Beyond these, various other objects combine to make up a single map, and this map is what gets shown to the user.

Understanding this well lets you design which object to access based on the information you need.

For example, if you want to access each Feature, you need to access the Layer object within Map.

Also, if you need the center or extent of the area the user is looking at, you need to access the View object.

Want to build a button? Interaction will have the answer.

For a variety of other information, refer to the OpenLayers Docs. Note that the official documentation isn't particularly detailed or friendly.

Oh, and of course, it's in English.