Openlayers 示例：如何使用它们？

Question

OpenLayers 社区在此页面上提供了许多很棒的示例： https : //openlayers.org/en/latest/examples/index.html

在每个示例上都有一个复制按钮来复制代码。 但是在这个复制的代码中，他们有如下导入：

 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';

对不起，这个可能很愚蠢的问题：

我从哪里得到这个*.js文件？

如何快速获得在本地机器上运行的示例？

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. 安装 npm ： https://www.npmjs.com/get-npm ，
2. 安装后检查，从命令提示符运行： node -v
3. 运行： npm -v
4. 确保您有上次更新 npm ，从命令提示符运行： npm install npm@latest -g
5. 创建一个新的项目文件夹
6. 从命令提示符： cd到在 nr 中创建的新项目。 5

• 要在您的项目文件夹中创建package.json ，请运行： npm init 。 我只是先保留默认值，之后您可以随时编辑文件
• 运行： npm install ol
• 运行： npm install --save-dev parcel-bundler
• 编辑package.json ，创建index.js和index.html ，如https://openlayers.org/en/latest/doc/tutorials/bundle.html所示
• 运行： npm start

结果在：http://localhost:1234/

Answer 3

所有这些 *.js 文件都定义在 ol 包中。 这是 ol 包中定义的所有类和命名空间的链接。

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