OpenLayers 3基本概念简介

SmileHuang

China University of Geosciences, Wuhan

School of Computer, Network Engineering

Email：SmileHuang94AT yahoo
DOT com

一、地图（Map）

OpenLayers3的核心组件是map（ol.Map）,map通常都是和目标容器关联起来（包含在网页中的div标签中），所有与map相关的属性都是可以在初始化map时通过setter方法（例如：setTarget()）设定的。

<span style="font-family:Courier New;"><div id="map" style="width: 100%, height: 400px"></div>
<script>
  var map = new ol.Map({target: 'map'});
</script></span>

二、视图（View）

ol.View可以让我们修改如地图居中、缩放等级、地图投影等一些无法通过ol.Ma控制的属性。

<span style="font-family:Courier New;"> map.setView(new ol.View({
    center: [0, 0],
    zoom: 2
  }));</span>

任何一个ol.View都是有投影的，这个投影决定了坐标系统的中心和地图的计量单位。默认的投影是使用Spherical Mercator（EPSG:3857），以米为单位。

我们可以通过zoom来快捷的指定地图的分辨率。zoom的缩放范围由maxZoom（默认：28）、zoomFactor（默认：2）和maxResolution（只要默认的投影有效部分能够适应256×256 px的像素块，我的个人理解就是投影有效部分是由整数个256 x 256px的像素块组成）决定。

三、源（Source）

OpenLayers3通过ol.source.Source子类来为图层获取远程数据。现在有很多商用的免费的地图层服务，例如：OpenStreet或者Bing，针对OGC源的WMS或WMTS，针对矢量数据格式的GeoJSON或KML。

<span style="font-family:Courier New;">var osmSource = new ol.source.OSM();</span>

四、图层（Layer）

图层是源端获取的数据的具体呈现，OpenLayers3有三种基本的图层类型：ol.layer.Tile、ol.layer.Image和ol.layer.Vector。

• ol.layer.Tile：即针对提供基于特定解决方案，从而根据缩放等级而决定的基于网格的预渲染的图层的图层源。
• ol.layer.Image：即针对可用于任意部分和解决方案中的由服务器渲染的图层。
• ol.layer.Vector：即针对由客户端渲染的矢量数据。

<span style="font-family:Courier New;"> var osmLayer = new ol.layer.Tile({source: osmSource});
  map.addLayer(osmLayer);</span>

五、奇妙的组合

我们可以将上面的代码段神奇般的组合在一起，形成包含view和layers的地图配置信息。

<span style="font-family:Courier New;"><div id="map" style="width: 100%, height: 400px"></div>
<script>
  new ol.Map({
    layers: [
      new ol.layer.Tile({source: new ol.source.OSM()})
    ],
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    }),
    target: 'map'
  });
</script></span>

上述翻译仅供参考，在后续学习中根据理解的深入会返回修改部分翻译，如果大家发现更好的翻译请在下方留言，谢谢！

原文网址：http://openlayers.org/en/v3.1.1/doc/tutorials/concepts.html

转载自：https://blog.csdn.net/hxh1994/article/details/42743379