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,来进行调试。