Openlayers Examples: how to use them?

Question

The OpenLayers community provides many great examples on this page: https://openlayers.org/en/latest/examples/index.html

On each example there is a copy button to copy the code. But in this copied code they have imports like:

 import Feature from 'ol/Feature.js'; import Map from 'ol/Map.js'; import View from 'ol/View.js'; import Polyline from 'ol/format/Polyline.js'; import Point from 'ol/geom/Point.js'; import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js'; import BingMaps from 'ol/source/BingMaps.js'; import VectorSource from 'ol/source/Vector.js'; import {Circle as CircleStyle, Fill, Icon, Stroke, Style} from 'ol/style.js';

Sorry for the maybe stupid question:

Where do I get this *.js files from?

How can I get quickly the examples to run on my local machine?

Answer 1

在此处的有用提示之后，我在此处的 npm 文档中找到了有用的文档https://www.npmjs.com/package/ol以及 github 上的 ol 示例，用于使用 webpack https://github.com/openlayers/ol-webpack或使用包裹https://github.com/openlayers/ol-parcel 。

Answer 2

1. Install npm : https://www.npmjs.com/get-npm ,
2. Check after installation, from command prompt run : node -v
3. run : npm -v
4. Make sure that you have last update npm , from command prompt run: npm install npm@latest -g
5. Create a new project folder
6. From command prompt: cd to the new project created in nr. 5

• To create package.json in your project folder ,run: npm init . I just leave the default value for first, you could always edit the file after that
• run : npm install ol
• run : npm install --save-dev parcel-bundler
• edit package.json , create index.js and index.html as shown in https://openlayers.org/en/latest/doc/tutorials/bundle.html
• run : npm start

Result in: http://localhost:1234/

Answer 3

All these *.js file are define in ol package. Here is a link for all classes and namespace defined in ol package.

https://openlayers.org/en/latest/apidoc/ol.html