如何快速将openlayers6官网示例本地化

openlayers官方提供了很多示例,非常值得阅读学习。但是在学习过程中，如果光只是看它的代码，简单一些的示例还好，遇到复杂的示例，我们势必要通过代码调试工具，才能更加具体的了解到其背后的逻辑。

目前，openlayers3、openlayer4、openlayer6官网示例页面都提供编辑功能，点击页面上的Edit可以打开在线编辑器，去编辑修改代码。openlayers5示例页面没看到Edit。在线编辑器虽然很方面，甚至不用注册也可以用。但偶尔会受网络的限制，甚至无法打开。

从openlayrs5开始，官网示例开始采用前端工程化开发。可以看到js中使用import写法，同时有package.json文件。工程化写法很方便，如果在在线编辑器中使用，还OK。但是遇到网络不给力的情况，或者遇到在线编辑难以调试等等各种原因，我们希望能看快速拿代码在本地开发调试。

下面了解下快速构建openlayers6本地化开发的方法。

开发工具

vscode
node 版本12+

过程

1. 创建ol应用

npx create-ol-app my-app

my-app为你的项目名。
执行完成后会创建my-app目录.目录结构如下：

2. cd 到 my-app目录

cd map-app

然后运行

npm start

启动项目。

3. 复制官网代码

找到你想本地跑的示例，如：https://openlayers.org/en/latest/examples/canvas-tiles.html
复制main.js、index.html代码，粘贴到相应的文件。
在index.html中，引用main.js的位置，加上type=‘module’。如图

4. 代码微调

• 底图
  有些示例，引起的底图需要key才能显示。如果底图不能显示，可以试试更换其它底图。
• 资源
  数据资源：代码中直接加上完整的资源地址去请求，或者下载到项目本地，再去加载。
  图片资源：可以直接下载到本地，然后在代码中修改图片地址 。

5. 启动项目

运行

npm start

如果已经项目已经启动了，可以跳过这步，或者在终端ctrl + C后，确认后，重新运行。

6. 代码调试

正常情况，到这里项目就可以正常跑起来了。这时，如果想了解代码运行中的一些变化，就可以去浏览器里打断点来调试了。
项目虽然经过打包，但是支持源文件调试。因此可以在浏览器中找到mian.js，来进行调试。