OpenLayers 6 学习笔记

这个是真的学习笔记！不是教程

转载请声明：https://www.cnblogs.com/onsummer/p/12159366.html

基于openlayers 6.x

api不太好查，就基于腾讯课堂老胡的课做记录。

openlayers与arcgis jsapi最大的不同，喜欢用setXXX/getXXX这种非常具有“java/C++”风格的封装方法来封装对象的属性，arcgis jsapi喜欢用类似于C#.NET一样的属性访问；构造时则与arcgis jsapi一样。

ol支持非常复杂的坐标系（通过proj4支持），仅支持2d，支持使用npm&webpack进行包管理，系原生sdk（arcgis jsapi基于dojo封装），ol5/6支持es6语法。

ol支持二维数据格式很多，可以是ogc规范的网络GIS数据服务，可以是独立的数据文件等；ol支持空间分析扩展，例如d3/turf/jsts。

1. 一组概念 map&view

与arcgis jsapi不同，ol的map对象占据了非常高的位置

[ol.Map]模块

• 负责数据管理（layers属性，又叫图层管理）
• 负责数据渲染（render，并由target属性绑定dom元素）
• 负责处理交互和触发事件
• 负责管理控件（controls属性）
• 负责管理叠加层（overlay属性）

在ol5中，当Map模块不足以支撑海量数据时，需要用WebGLMap模块来加速。在ol6里默认使用WebGL，不存在WebGLMap模块。

[ol.View]模块

视图的意思，负责管理页面端的视图参数：

• 缩放等级（zoom属性）
• 坐标系（projection属性）
• 中心点（center属性）
• 旋转角度（rotation属性）
• 分辨率
• 范围框
• ...

2. 数据

ol的数据由layer管理、加载。

layer（图层）是数据的容器，它负责把别处弄来的数据源（source）“翻译”成map能渲染的东西。

[ol.layer]模块

• 承载并解析数据源（source属性）
• 管理图层样式（styles属性）
• 管理图层属性（叠加顺序/透明度）
• （补充中）...

常见图层

• ol.layer.Tile
• ol.layer.Vector
• ol.layer.GeoJson
• ...（补充中）

常见数据源

• ol.source.OSM
• ...

3. 样式与制图

有了数据，当然还要给数据加点嫁妆。由第2节得知，style（样式）由图层管理。

格网、导出pdf也是制图的一部分

4. 前端交互

包括ol.interaction这个交互模块对数据进行交互，也包括前端交互的效果（跳转、限制等）

5. 坐标系转换

所有的坐标系概念、定义有关的类均位于ol.proj模块下。

其中，ol.proj.Projection类代表坐标系统本身的定义，通常使用ProjectionLike字符串来表示。ProjectionLike的意思是类似"EPSG:XXXX"的字符串，EPSG这个专有词必须大写，XXXX代表的是坐标系的WKID。

[ol.proj]模块

主要提供坐标系的转换等操作，默认是4326和3857的转换。

• proj.addCoordinateTransforms()：添加地理转换方法
• proj.fromLonLat()：将经纬度坐标转换到目标坐标系的坐标（默认4326到3857）
• proj.get()：根据给定ProjectionLike字符串获取Projection对象
• proj.getTransform()：获取地理转换方法
• proj.toLonLat()：和fromLonLat是反运算
• proj.transform()：转换坐标值，根据给定的原坐标系和目标坐标系，有可能需要地理转换
• proj.transformExtent()：转换矩形边界框，参数同transform

[ol.proj.proj4]模块

需要引入proj4.js库，通过调用其register方法为页面注册一个ol本身没有的坐标系。

将proj4全局变量传递给register()方法后，ol即获取一个自定义坐标系。proj4全局变量通过defs()方法注册一个坐标系。

6. 细品矢量数据

可以从各种手段获取第三和第四层数据，及要素、要素对应的几何与属性数据。

7. 高级绘图与性能优化

这里肯定有WebGL和canvas，但是我不太会也不太擅长。

8. 控件与叠加层

这部分属于定制、扩展的功能