基础概念
地图(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(
newol.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是在矢量格式数据。
varosmSource =
newol.source.OSM();
图层(Layer)
一个图层就是来自source数据的一个可视化表达。Openlayers3有三个基本格式的图层:瓦片图层、图片图层和矢量图层。
ol.layer.tile是一种提供预渲染、平铺图像网格的图层资源,它通过特定分辨率缩放级别来组织管理。
ol.layer.image是一种可用于任意范围和分辨率的,在服务器端渲染的图像。
ol.layer.vector是一种在客户端渲染的矢量数据。
varosmLayer =
newol.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>