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. 控件与叠加层

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

posted @ 2020-01-07 03:49  秋意正寒  阅读(...)  评论(...编辑  收藏