openlayer源码学习1

地图的渲染过程

1、地图的简单示例

 import Map from 'ol/Map';
 import View from 'ol/View';
 import TileLayer from 'ol/layer/Tile';
 import OSM from 'ol/source/OSM
 var map = new Map({
   view: new View({
     center: [0, 0],
     zoom: 1
   }),
   layers: [
     new TileLayer({
       source: new OSM()
     })
   ],
   target: 'map'
 });

这个最简单的demo需要导入四个模块，最外层的Map模块，Map属性中View，layer/Tile模块，数据源source/OSM模块，接下来我们看看OSM地图是如何渲染在浏览器中的。

2、渲染过程

1）属性注入

初始化Map时传入一个对象，对象中简单包含了view，layers，target属性。Map是一个类，继承了PluggableMap类，Map类初始化时会将属性对象option传入PluggableMap类，对父类初始化。PluggableMap类初始化的时候会将view，layers，target等属性赋值到对应的实例属性上。

2）渲染OSM

初始化Map的过程也会构造canvas渲染环境，然后会解析OSM切片地址，将特定分辨率的每张图片加载到canvas中。