这个是真的学习笔记!不是教程
基于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. 控件与叠加层
这部分属于定制、扩展的功能