Openlayers3的基础概念

基础概念

地图（Map）

Openlayers3的核心组件就是map（ol.Map）。地图通常被渲染到一个target容器上（例如，网页上的一个div元素）。所有的地图属性都可以在创建时设置或者通过setter方法设置，例如setTarget()。

<div id="map"style="width: 100%, height: 400px"></div>

<script>

 var map = new ol.Map({target: 'map'});

</script>

 

试图（View）

ol.Map没有操控地图中心点、缩放级别与投影的能力。取而代之的是，这些都是ol.View的属性。

map.setView(new ol.View({

    center: [0, 0],

    zoom: 2

  }));

一个ol.View通常都有一个投影。投影确定了中心点的坐标系统与地图分辨率计算的单位。如果没有指定投影（例如上面的代码段），默认的投影为球形墨卡托投影（EPSG:3857）,地图以米为单位。

缩放选项是指定地图分辨率的便捷方式。可用的缩放级别是由maxzoom（默认值：28），zoomfactor（默认值：2）和maxresolution（默认的计算，投影的有效范围为一个256x256像素瓦片）确定的。缩放级别从0级别以像素为单位开始，一直放大到最大级别为止。

资源（Source）

Openlayers3用 ol.source.Source的子类，来获取远程图层的数据。像OpenStreetMap或Bing，OGC WMS或WMTS，这些都是免费的和商业的瓦片地图服务，GeoJSON或KML是在矢量格式数据。

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

 

图层（Layer）

一个图层就是来自source数据的一个可视化表达。Openlayers3有三个基本格式的图层：瓦片图层、图片图层和矢量图层。

ol.layer.tile是一种提供预渲染、平铺图像网格的图层资源，它通过特定分辨率缩放级别来组织管理。

ol.layer.image是一种可用于任意范围和分辨率的，在服务器端渲染的图像。

ol.layer.vector是一种在客户端渲染的矢量数据。

var osmLayer = new ol.layer.Tile({source: osmSource});

  map.addLayer(osmLayer);

把它们放在一块

上述代码片断可以合并到一个包含视图和图层的地图之中：

<divid="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>