OpenLayers3基础教程——OL3基本概念

「爱情、让人受尽委屈。」 2022-05-14 11:41 242阅读 0赞

# 个人分类： [● 综合开发][Link 1][● 3S技术][3S][——【GIS二次开发】][GIS] #

所属专栏： [GIS加油站][GIS 1] [Openlayers3专栏][Openlayers3]

从本节开始，我会陆陆续续的更新有关OL3的相关文章——OpenLayers3基础教程，欢迎大家关注我的博客，同时也希望我的博客能够给大家带来一点帮助。

**概述：**

OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计。版本2虽然被广泛使用，但从JavaScript开发的早期发展阶段开始，已日益现实出它的落后。 OL3已运用现代的设计模式从底层重写。OpenLayers 3同时设计了一些主要的新功能，如显示三维地图，或使用WebGL快速显示大型矢量数据集，这些功能将在以后的版本中加入。

**基本概念：**

![Center][]

OL3结构图

1、Map

OpenLayers 3的核心部件是Map（ol.Map）。它被呈现到对象target容器（例如，包含在地图的网页上的div元素）。所有地图的属性可以在构造时进行配置，或者通过使用setter方法，如setTarget（）。

![Center 1][]

1.  `<div id="map" style="width: 100%, height: 400px"></div>`
2.  `<script>`
3.  `var map = new ol.Map({target: 'map'});`
4.  `</script>`

2、View

ol. View负责地图的中心点，放大，投影之类的设置。

一个ol.View实例包含投影projection，该投影决定中心`center` 的坐标系以及分辨率的单位，如果没有指定（如下面的代码段），默认的投影是球墨卡托（EPSG：3857），以米为地图单位。

放大`zoom` 选项是一种方便的方式来指定地图的分辨率，可用的缩放级别由`maxZoom` （默认值为28）、`zoomFactor` （默认值为2）、`maxResolution` （默认由投影在256×256像素瓦片的有效成都来计算） 决定。起始于缩放级别0，以每像素`maxResolution` 的单位为分辨率，后续的缩放级别是通过zoomFactor区分之前的缩放级别的分辨率来计算的，直到缩放级别达到`maxZoom` 。

1.  `map.setView(new ol.View({`
2.  `center: [0, 0],`
3.  `zoom: 2`
4.  `}));`

3、Source

OpenLayers 3使用ol.source.Source子类获取远程数据图层，包含免费的和商业的地图瓦片服务，如OpenStreetMap、Bing、OGC资源（WMS或WMTS）、矢量数据（GeoJSON格式、KML格式…）等。

var osmSource = new ol.source.OSM();

4、Layer

一个图层是资源中数据的可视化显示，OpenLayers 3包含三种基本图层类型：`ol.layer.Tile`、`ol.layer.Image` 和 `ol.layer.Vector`。

ol.layer.Tile 用于显示瓦片资源，这些瓦片提供了预渲染，并且由特定分别率的缩放级别组织的瓦片图片网格组成。

ol.layer.Image用于显示支持渲染服务的图片，这些图片可用于任意范围和分辨率。

ol.layer.Vector用于显示在客户端渲染的矢量数据。

1.  `var osmLayer = new ol.layer.Tile({source: osmSource});`
2.  `map.addLayer(osmLayer);`

**总结：**

上述片段可以合并成一个自包含视图和图层的地图配置：

1.  `<div id="map" style="width: 100%, height: 400px"></div>`
2.  `<script>`
3.  `new ol.Map({`
4.  `layers: [`
5.  `new ol.layer.Tile({source: new ol.source.OSM()})`
6.  `],`
7.  `view: new ol.View({`
8.  `center: [0, 0],`
9.  `zoom: 2`
10. `}),`
11. `target: 'map'`
12. `});`
13. `</script>`

[Link 1]: https://blog.csdn.net/GISShiXiSheng/article/category/1379104
[3S]: https://blog.csdn.net/GISShiXiSheng/article/category/1379105
[GIS]: https://blog.csdn.net/GISShiXiSheng/article/category/1379106
[GIS 1]: https://blog.csdn.net/column/details/lzugis.html
[Openlayers3]: https://blog.csdn.net/column/details/13523.html
[Center]: /images/20220514/47c9ec163d9d4e038548ff4700de8d64.png
[Center 1]: /images/20220514/088a7ea6f38045e09b2d118a3ee9f8d8.png