OpenLayers是一个用于开发WebGIS客户端的Js类库包,用于实现标准格式发布的地图数据访问。目前OpenLayers有两种版本,即较老版本ol2和经过底层重写架构过的ol3。根据项目需要,我学习的是ol3版本。
基本概念
Map
ol3的核心部件是Map(ol.Map)。Map通常要呈现出来,在页面中用div元素来容纳Map,而这个容纳Map的元素叫做target容器
<div id="map"></div>
<script>
var map = new ol.Map({target: 'map'});
</script>
View
ol.view负责地图的中心点,放大,投影的设置。
ol.view实例常见的属性有
投影projection,该投影决定center的坐标系及分辨率的单位。如果没有指定,默认的投影是球墨卡托(EPSG:3857),以米为地图单位
zoom是用来指定地图的分辨率,主要的缩放级别有
-maxZoom | 28
-zoomFactor | 2
-maxResolution | 由投影在像素瓦片的有效程度来计算
map.setView(new ol.View({
center: [0, 0],
zoom: 2
}));
Source
ol3使用ol.source.Source子类获取远程数据图层,可以获取免费或者商业的地图瓦片Tile服务以及矢量数据
var osmSource = new ol.source.OSM();
Layer
图层包含了数据的可视化显示部分,ol3有三种基本的图层类型
-ol.layer.Tile
用于显示(预渲染)瓦片资源,是由特定分辨率的缩放级别组织的瓦片图片网格组成
-ol.layer.Image
用于显示(支持渲染服务)图片,这些图片可用于任意范围和分辨率
-ol.layer.Vector
用于显示在客户端渲染的矢量数据
var osmLayer = new ol.layer.Tile({source: osmSource});
map.addLayer(osmLayer);
创建一个简单的地图
<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>