1. Introduction to openlayer development

First, you need to introduce the openlayer api development package. Two ways:

1. Import method, that is, npm installation, npm install ol

2. Introduction of external js.

Download address: https://github.com/openlayers/openlayers

Historical version address: Releases · openlayers/openlayers · GitHub

There is source code and packaged files inside.

After downloading, put it directly into the local project and import it in the html file

  <link href="/static/openlayer/ol/ol.css" rel="stylesheet" />
  <script type="text/javascript" src="/static/openlayer/ol/js/ol.js"></script> 

3. It is not recommended to quote online cdn. After all, online images are subject to network images, but it can be used as a demo sample

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css" type="text/css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>

Use the interface in your project:

You can use it directly like this: ol.Map, ol.layer

Personally, I like to define directly above: const Map = ol.Map; const View = ol.View; there is no need to add those class name attributes. At that time, if npm imported it, it was directly: import { Point } from "ol/geom"; 

Pay attention to the class name directory. For details, please see the official website API

OpenLayers v7.5.1 API - IndexOpenLayers v7.5.1 API - IndexOpenLayers v7.5.1 API - Index

There is also a Chinese version translated by Daniel:

OpenLayers v7.3.0 API - Index

Map example

Chinese:

OpenLayers Examples

English:

OpenLayers Examples