1、前言
说起来虽然一直在做WebGIS
方面的工作,但却一直没怎么系统写过相关方面的博客。之前虽然写过几篇OpenLayers
方面的博客,却也是零零散散,前后关联不大。于是今晚下定决心,开始OpenLayers
系列的博客。由于个人水平有限,难免会有疏漏,所以还请大家多担待哈。下面开始进入正题。
2、加载一幅OSM地图
既然是第一篇博客,那就从最简单的加载地图开始吧。我们先来看一下如何利用OpenLayers
加载一幅OSM
地图。代码如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OpenLayers</title>
<link href="lib/ol/ol.css" rel="stylesheet" />
<script src="lib/ol/ol.js"></script>
</head>
<body>
<div id="map" style="width:800px;height:800px;"></div>
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
projection: 'EPSG:3857',
center: ol.proj.transform([120, 30], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
})
})
</script>
</body>
</html>
运行结果如下所示:
3、代码解析
大家可别被上面这段代码唬住了,这段代码从本质上来说就只有下面这一句话,至于target
、layers
、view
,这些不过是map
的一些相关属性而已。
var map = new ol.Map({...})
3.1、target属性
这个很好理解,WebGIS
的一个主要作用就是用来显示地图。既然要显示地图,那么就需要在浏览器页面里提供一块区域供它显示。如何确定这块区域呢?只需要把这块区域的id
告诉OpenLayers
就行了。所以target
属性其实就对应一个div
的id
值。
3.2、layers属性
我们可以看到传递给layers
属性的是一个数组变量,这也表明layers
可以接收一个或多个layer
。一般的系统开发中,我们可能会遇到地图的切换功能,比如将当前地图从天地图切换到百度地图等等,其实这里的天地图和百度地图的图层都存放在layers
属性对应的数组中。
3.3、view属性
顾名思义,view
就代表当前的视图。一切跟视图有关的属性都可以在view
中进行设置,如projection(地图投影)
、center(地图中心点)
、zoom(地图缩放等级)
。当然还有很多其他的属性,如minZoom(最小缩放等级)
、maxZoom(最大缩放等级)
等等。
4、结语
到此为止,我们已经学会如何利用OpenLayers
加载一副OSM
地图了,其实也不是很难,不是吗?。