openlayers6环境部署详细步骤

一.根据官方教程，首先安装node.js

          　　　　

 

 

 

 

二.打开node.js命令提示符：

       　　　

　　

　　　　　

 

 

         　　

 

 　　新建的文件夹如下

　　　　

 

   下载ol官网（https://openlayers.org/download/）的库文件：

         　　　　

 

 

将库文件解压到新建的openlayers6文件夹下， 将官网的库文件中ol.js和ol.css分别放到新建的script和styles文件夹下：：

　　 　   　　　 

 

 　　　　

 

 

三.　　　　　　

　　　　　　　　　　

 　　　　按照上面的步骤：

　　　　①npm init -y  ，生成package.json文件

　　　　　　　　　　　　

 

 

　　　　②  npm install ol ,生成

 

 　　　 

 

　　　　

 

 ③ npm install --save-dev parcel-bundler，受影响的文件：

　　　　　　　　

 

 

四.  新建index.html和index.js文件

  

　　　　

 

 

      ②在根目录（E:\cy\web\openlayers6）下新建index.html文件，将官方文档的代码拷贝到文件中：　　

　　　　　　

 

③在script文件夹里新建index.js文件，并将官方文档代码拷贝到该文件里：

　　　　

 

 五.创建绑定

 

 ①手动复制两行代码到package.json

　　　　

② 命令提示符 npm start ：

 

 

 

③将index.js移出后，重新运行npm start:

 

        

 

 

 ④访问： http://localhost:1234  即可：　　

  　　　　　　　　

　　　后记：ol5以后，openlayers采用ES6,以前ol4那种简单的加库的方法已经不适用了。对ES6还不了解，貌似chrome和火狐对ES6的支持度已经很高了，这说明ES6是大势。

　　　　　　官网对环境搭建这块的教程说的太简略了，自己搞了一天没搞出来，很久没有那种感觉了，直接郁闷。中午在陆同事的帮助下，终于可以了，发现很神奇，VSCode中修改代码后，不用刷新直接同步到浏览器。