OpenLayers3的简单总结

世界和平��

已于 2022-06-20 11:28:12 修改

阅读量1k

点赞数

分类专栏： GIS JavaScript 文章标签： javascript

于 2022-05-06 23:27:30 首次发布

本文链接：https://blog.csdn.net/huangzhixin1996/article/details/124614788

版权

JavaScript 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

GIS

3 篇文章 1 订阅

订阅专栏

一、介绍

OpenLayers 3简称ol3，它是一个开源的Web GIS引擎，使用了JavaScript、最新的HTML5技术及CSS技术，支持dom，canvas和webgl三种渲染方式。除了支持网页端，还支持移动端（目前移动端还不成熟，有待进一步完善）。在地图数据源方面，支持各种类型的瓦片地图，既支持在线的，也支持离线的。比如OSM, Bing, MapBox, Stamen, MapQuest等等；还支持各种矢量地图，比如GeoJSON，TopoJSON，KML，GML等等。随着OpenLayers 3的进一步发展，将支持更多的地图类型。

二、OpenLayers的组成

1.地图(Map)：对应的类是ol.Map，之前已有接触。从代码上来看，它就像是一个空壳子，感觉没做什么实事，因为具体事务都由其他组成部分处理了。但没有它，整个地图的其他组成部分就不能有效协调，组织在一起。同时对于开发者而言，它就是第一个入口，我们必须要掌握。（一个用于盛放数据视图的容器）
2.视图(View): 对应的类是ol.View，之前已有接触，控制地图显示的中心位置，范围，层级等。（相当于视角，我们拖动的时候就是在移动放大缩小的时候就是在变换视图）
3.图层(Layer)：每一个图层都像是一张透明的纸覆盖在我们的地图上，我们可以定义不同的类型图层，在这张纸上去画图，注解，做一些需要在地图容器上显示的视图数据。就比如我们的影像瓦片数据，点，线，面各种数据。
4.数据源(Source)：这是一个与图层一一对应的元素，如果没有数据，那么地图将毫无意义。我们需要各种数据填充到我们的图层上，这样才能直观有效地将我们需要展现的事物在地图上精确地显示。所有的视图都是基于底层的数据才能够搭建，这是地图不可缺失的重要部分。
5.控件(Control)：它为用户提供了和地图交互的入口。针对不同的用途，具有不同的控件。其实现类都放在包ol.control下面，在此之前还没有具体接触过，但我们在地图上看到的放大缩小按钮就是众多控件中的一种。控件具备相同的一个特性，就是一直保持在地图的某个固定位置，不会随着地图移动而移动，也不会随着地图放大缩小而变化，一直处于地图的最上层。
6.交互(Interaction)，这是所有软件都具备的一个组成部分，直观地是看不见的，其实现类放在包ol.interaction下面，之前也没具体接触过，但其实是使用到了，如果没有它，我们就没有办法直接用鼠标控制地图放大、缩小、移动。这并不仅仅存在于GIS引擎中，它存在于任何产品中。任何优秀的产品必然有着良好的交互能力，即使没有任何GIS知识，也能体会到它的作用和重要性。

三、投影坐标系

首先，我们需要明白一件事情，在不同坐标系上的坐标数据所代表的含义和位置都不尽相同。我们可以将不同坐标系上的点的数值对应为不同的单位。
在OpenLayers中默认的投影坐标系有这样两种：WGS84（EPSG:4326）和Mercator（EPSG:3857）。一般来说WGS84上的点就是我们常说的经纬度值，当然正常情况下还有个高度，至于mercator坐标系上的点都是很大的一个数值，它同时也是具有X,Y,Z三个参数的一组数据。

四、瓦片金字塔

关于渲染我们的地图数据，比如矢量图，影像图等，它是如何去坐到一个多层级多维度的一个缩放功能。这就涉及到了一个叫做瓦片金字塔的模型，这个模型充分说明了它渲染地图图片数据的一个方式。
在这里插入图片描述
当我们拥有一个地图容器之后，GIS引擎通常情况下会在容器中划分出若干大小相等的格子，然后它便会根据坐标系的定位，去获取到其相关中心点周围的网格瓦片数据，并把每一个对应的图片数据加载到其对应的表格位置中。通常我们称这样的一个个的图片数据为瓦片，这些瓦片不仅对应一个坐标中的X,Y值，同时他们还有一个Z值代表高度纬度数据，三个参数XYZ值就构成了一个三维立体的瓦片数据模型，这也就是我们常说的瓦片金字塔。