1.2.3 下载OpenLayers文件

打开OpenLayers官网，找到并单击“Get the Code”，如图1-20所示。在打开的页面中单击“v6.0.0-dist.zip”，如图1-21所示，即可下载OpenLayers文件的压缩包，解压缩后，将其中的ol.css文件和ol.js文件复制到自己的项目中。

图1-20 单击“Get the Code”

图1-21 单击“v6.0.0-dist.zip”

读者也可以直接引用OpenLayers文件，如图1-22所示。

图1-22 直接引用OpenLayers文件

此时，我们可以创建一个名为app的文件夹，首先在该文件夹下创建一个文件夹lib，用于存放项目需要引用的本地资源；然后在 lib 文件夹中创建 Vue 文件夹、Element 文件夹、OpenLayers文件夹，将下载的Vue文件、Element文件和OpenLayers文件分别存放在对应的文件夹中。项目的目录结构如图1-23所示，读者也可以按照个人习惯自定义项目的目录结构。

图1-23 项目的目录结构

选择一款适合自己的编辑器（本书使用的编辑器是Visual Studio Code），在app文件夹中创建一个HTML文件，将刚刚下载的各种库文件引入到HTML文件中，如图1-24所示。

图1-24 在HTML文件中引入各种库文件