vscode创建openlayer项目demo

最近开始感兴趣openlayer框架显示地图，测试使用vscode+nodejs

参考openlayer官网的例子，在这了记录遇到的坑

（https://openlayers.org/en/v5.3.0/doc/tutorials/bundle.html）

使用和编写模块时，现代JavaScript效果最佳。建议使用OpenLayers的方法是安装ol软件包。本教程将引导您建立一个简单的开发环境，该环境需要节点（nodejs）才能正常工作。

在本教程中，我们将使用Parcel捆绑我们的应用程序。还有其他几个选项，其中一些是从README链接的。

（需要安装Parcel 

npm install --save-dev parcel-bundler ）

初步步骤

为您的项目创建一个新的空目录，然后通过运行导航到该目录mkdir new-project && cd new-project。使用初始化您的项目，npm init并回答所提出的问题。

使用以下方式将OpenLayers添加为对您的应用程序的依赖

npm install ol

此时，您可以要求NPM通过运行来添加所需的开发依赖项

npm install --save-dev parcel-bundler

应用程序代码和index.html

将您的应用程序代码放在中index.js。这是一个简单的起点：

import'ol/ol.css';import {Map, View} from'ol';import TileLayer from'ol/layer/Tile';import OSM from'ol/source/OSM';constmap =newMap({target:'map',layers: [newTileLayer({source:newOSM()})],view:newView({center: [0,0],zoom:0})});

您还需要一个index.html将使用捆绑软件的文件。这是一个简单的示例：

创建捆绑

使用简单的脚本，您可以引入命令npm run build并npm start手动构建捆绑包并观察更改。将以下内容添加到的脚本部分中package.json：

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "parcel index.html","build": "parcel build --public-url . index.html"}

而已。现在运行您的应用程序，输入

npm start

在您的控制台中。要测试您的应用程序，请在浏览器中打开http：// localhost：1234 /。每当您更改某些内容时，页面都会自动重新加载以显示更改结果。

请注意，已经创建了一个包含所有应用程序代码和应用程​​序中使用的所有依赖项的JavaScript文件。在OpenLayers软件包中，它仅包含必需的组件。

要创建应用程序的生产包，只需键入

npm run build

并将dist/文件夹复制到生产服务器。