Openlayers 作为webgis 开源库中比较经典的一个库，基于BSD许可发行，基于其良好的设计和扩展能力，在二维前端地图开发上面广受欢迎。笔者也是从ol3 一路使用，目前Openlayers也更新到ol7了。虽然ol不能支持三维方面的开发，但是个人认为学习其工程架构，设计理念和核心源码是值得的。

从ol工程结构说起

从github拉取ol代码 github.com/openlayers/…

从代码上看工程结构大致如下：

这里对几个主要目录进行说明：

config

里面是jsdoc 文档的配置，生成typescript 声明的配置和生成包含所有类的 ol.js

examples

顾名思义，官方的示例，基于webpack 去调试和构建

存放源码的目录

tasks

构建发布时的一些脚本，主要是用于发版前的一些预处理工作。

test

单元测试一些配置

package.json的一些内容

库的依赖

{
    "earcut": "^2.2.3",  // 面的三角剖分算法库
    "geotiff": "2.0.4",  // geotiff 图像解析库
    "ol-mapbox-style": "^9.2.0",  // 融合mapbox 规范样式到openlayers地图的库
    "pbf": "3.2.1",  // pbf数据解析库
    "rbush": "^3.0.1"  // 用于点和矩形的二维空间索引库
}

一些npm 命令

{
    "build-examples": "shx rm -rf build/examples && webpack --config examples/webpack/config.mjs --mode production",
    "build-package": "npm run build-full && npm run copy-css && npm run generate-types && node tasks/prepare-package.js",
    "build-index": "shx rm -f build/index.js && npm run transpile && node tasks/generate-index.js",
    "build-full": "shx rm -rf build/full && npm run build-index && npx rollup --config config/rollup-full-build.js",
    "generate-types": "tsc --project config/tsconfig-build.json --declaration --declarationMap --emitDeclarationOnly --outdir build/ol",
    "transpile": "shx rm -rf build/ol && shx mkdir -p build/ol && shx cp -rf src/ol build && node tasks/serialize-workers.cjs",
    "apidoc": "shx rm -rf build/apidoc && jsdoc -R config/jsdoc/api/index.md -c config/jsdoc/api/conf.json -P package.json -d build/apidoc"
  }

上面摘取了部分package.json的命令脚本，主要是构建相关的。

build-examples 构建打包样例。
build-package 构建要发布的lib包，包括ol库，ol css样式文件，ts类型声明文件，发包的package.json文件
build-index 拷贝src代码到构建目录，export 所有主要的类，组装成ol.xxx方式的链式调用的入口文件,并对webworker内容进行处理，主要worker目录的脚本。
build-full 对ol.xxx链式调用的入口文件通过rollup进行打包，最终生成一个在原生开发常用的ol.js脚本。
generate-types 生成ts类型声明文件。
transpile 中间命令，拷贝文件和序列化webworker脚本。
apidoc 基于jsdoc生成api文档

7.x 版本的构建命令与 6.x 大体上没有比较大的变化，tsc部分则有更改，声明文件也一起构建到库中和同名文件放置一起。

npm 脚本也是在不断的更新当中，这里就不再细究下去了，对构建感兴趣的同学可以自己去github看看。

总结

从源码的目录结构和命令来看，是比较通俗易懂，其整个src的目录结构也分离的较好，万事有两面性，结构清晰的同事，在使用过程中则难以避免需要import 大量的class。

下一节，将正式进入源码的学习，未完待续。。。。。。

1-Openlayers 源码学习

从ol工程结构说起

package.json的一些内容

库的依赖

一些npm 命令

总结