openlayers原理小故事(1)

办公室来了一个新同事，女的，挺漂亮，名叫柳飘飘。做了多年孤寡老人的王大锤仿佛看到了一丝希望，愉悦之情溢于言表。

第二天柳飘飘小姐姐主动搭讪，王大锤心里仿佛有千万只锤同时在敲，原来是一个问题：

// 柳：请问ol是如何调用这个OSM地图的呢？
// 王：……
const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  target: "map",
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

王大锤心中一喜，心想这还不是我的看家本领。于是洋洋洒洒的答道：

OSM是OpenStreetMap公司开发的地图切片服务，采用Web Mecator投影，除了两极地区，可以实现全球范围内的覆盖。所谓的切片服务本质上就是将球面投影而成的图片经过切片，拆分，编号，放在服务器里，前端渲染的时候根据显示的范围和缩放层级而去请求对应的图片。通常Web端绘制图片的方式有Image标签，canvas，和WebGL，现在的高性能前端地图框架会采用WebGL绘制，更高效，还支持三维。

说这段话的时候，王大锤特意把本质上这三个字着重强调了一下，看着柳飘飘在耐心的听着，心里眉飞色舞，好不自在。他现在急需对方的一个肯定，结果他并没有等到，他等来的是“一记重拳”，柳飘飘又提了三个问题。

一张草稿纸上写了几行字，写得很秀气，内容如下:

1. 初始化Map时，传入的属性做了哪些处理
2. TileLayer和OSM是如何设计的，两者的关系是什么
3. canvas的绘制是如何一步步触发的

王大锤心中一惊，仿佛又千万只锤同时在敲。本来打算想在妹子前表现一下自己的，没想到弄巧成拙，刘三炮的挤眉弄眼更是让自己更加尴尬。刘三炮和王大锤同是GIS开发组的，平时都是自己的手下败将，想到自己被他嘲笑更是气不过。

第二天一大早，枯木逢春的王大锤特意吹了一个时髦的发型，在镜子前看了很久。在得出自己依然风华无限，光彩照人的结论后出了门。诚惶诚恐地把昨天晚上苦思冥想的答案放在柳飘飘的桌上后，心里忐忑不安，上面写道：

1. 初始化Map时，传入的属性做了哪些处理？
初始化视口viewport的div;监视地图属性值变化，如监视layer和view的变化;初始化控件(旋转，缩放和属性)和默认交互(拖拽，双击等);
Map类继承自Object类，Object类型继承自EventTarget类，这也是ol中大部分类的继承框架。Object类用于设置属性值，EventTarget用于注册事件和触发事件。

2. TileLayer和OSM是如何设计的，两者的关系是什么？
实例化TileLayer的主要目的是监视source的变化，等待source的加载; OSM是一种XYZ切片格式的数据源，继承自TileImage类，TileImage类用于创建切片，创建缓存等。

3. canvas的绘制是如何一步步触发的
以OSM为例，OSM其实是封装的切片图层。初始化Map时，layers属性的注入，会触发渲染机制，将解析出来的切片地图按照一定的规则排列在canvas中。

如果关注了一个人，即时不看到他，也知道对方出现了。柳飘飘出现了，一身针织衬衫，走过后王大锤能感受到一阵温柔的风吹过后脖领。

柳飘飘似乎并没有注意到王大锤的新发型，但是发现了桌上的字。