OpenLayers 6 学习笔记

Stella981
• 阅读 714

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

转载请声明: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. 控件与叠加层

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

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Wesley13 Wesley13
3年前
PPDB:今晚老齐直播
【今晚老齐直播】今晚(本周三晚)20:0021:00小白开始“用”飞桨(https://www.oschina.net/action/visit/ad?id1185)由PPDE(飞桨(https://www.oschina.net/action/visit/ad?id1185)开发者专家计划)成员老齐,为深度学习小白指点迷津。
Stella981 Stella981
3年前
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解2016年09月02日00:00:36 \牧野(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fme.csdn.net%2Fdcrmg) 阅读数:59593
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
1. 容器化部署一套云服务 第一讲 Jenkins(Docker + Jenkins + Yii2 + 云服务器))
容器化部署一套云服务系列1\.容器化部署一套云服务之Jenkins(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.cnblogs.com%2Fjackson0714%2Fp%2Fdeploy1.html)一、购买服务器服务器!caeef00
Wesley13 Wesley13
3年前
ES6 新增的数组的方法
给定一个数组letlist\//wu:武力zhi:智力{id:1,name:'张飞',wu:97,zhi:10},{id:2,name:'诸葛亮',wu:55,zhi:99},{id:3,name:'赵云',wu:97,zhi:66},{id:4,na
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Stella981 Stella981
3年前
C++笔记002:VS2010报错:LINK fatal error LNK1123 转换到 COFF 期间失败文件无效或损坏
 原创笔记,转载请注明出处!点击【关注】,关注也是一种美德~错误描述:1已启动生成:项目:FirstCode,配置:DebugWin321生成启动时间为2018/2/521:00:30。1InitializeBuildStatus:1 正在
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这