OpenLayers 3 之加载地图
摘要
在浏览器中加载一幅地图，而且是可交互（包含缩放、平移、查询和分析等高级功能）的，该怎么做呢？我们当然知道要想网页中的内容是动态的，可交互的，要使用JavaScript，地图应用也不例外，不过要从底层开发的话，要费老鼻子的劲儿了！OpenLayers便是一个减轻你的工作量的框架，利用它可以轻松地加载一幅动态可交互的地图到浏览器中！
下面便是一个利用OpenLayers加载地图的小例子，我们先看看运行结果，并分析一下原理，捋一捋源码！
正文
例程如下：
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://openlayers.org/en/v3.3.0/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="http://openlayers.org/en/v3.3.0/build/ol.js" type="text/javascript"></script>
<title>OpenLayers 3 example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
})
],
view: new ol.View({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
</script>
</body>
</html>
在浏览器中打开，Duang Duang Duang 。。 。 - -| ，运行结果如下：
为什会有这些效果，咱来个庖丁解牛，分解分解，捋一捋！这是一个普通的Html网页，没错，但是它引用了OpenLayers的CSS样式和js文件：
<link rel="stylesheet" href="http://openlayers.org/en/v3.3.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.3.0/build/ol.js" type="text/javascript"></script>
然后又扯了一段代码：
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
})
],
view: new ol.View({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
</script>
在这段代码中，主要是实例化了一个OpenLayers的Map对象，于是就显示了地图！Map是何许人也？它是OpenLayers中最主要的对象！要初始化一幅地图，需要一个view，一个或多个图层（layers），一个目标容器（target）。在GitHub上的OpenLayers主页上的Map定义可以看到：
ol.MapProperty = {
LAYERGROUP: 'layergroup',
SIZE: 'size',
TARGET: 'target',
VIEW: 'view'
};
定义了一个数组，主要有layers、target和view，代表map对象 的三个主要属性。
ol.Map.prototype.getTarget = function() {
return /** @type {Element|string|undefined} */ (this.get(ol.MapProperty.TARGET));
};
goog.exportProperty(
ol.Map.prototype,
'getTarget',
ol.Map.prototype.getTarget);
getTarget主要是取得以上的数组的TARGET属性值，而exportProperty是Google的Closure库的一个函数，函数原型是：
goog.exportProperty = function(object, publicName, symbol) {
object[publicName] = symbol;
};
就是将一个自定义的属性symbol导出到object定义的对象中，而publicName就是导入后的属性名。
ol.Map.prototype.getTargetElement = function() {
var target = this.getTarget();
return goog.isDef(target) ? goog.dom.getElement(target) : null;
};
根据id名来找到放置map的HTML元素。
ol.Map.prototype.getLayerGroup = function() {
return /** @type {ol.layer.Group} */ (this.get(ol.MapProperty.LAYERGROUP));
};
goog.exportProperty(
ol.Map.prototype,
'getLayerGroup',
ol.Map.prototype.getLayerGroup);
这便是和以上同理，将layerGroup初始化！
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
})
]用OpenLayers提供的瓦片作为Map的图层，取用名称为“sat”的图层。
ol.Map.prototype.getView = function() {
return /** @type {ol.View} */ (this.get(ol.MapProperty.VIEW));
};
goog.exportProperty(
ol.Map.prototype,
'getView',
ol.Map.prototype.getView);
同理，初始化view。
view: new ol.View({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})设置一些视区的参数，其中center是设置地图中心，transform函数是将给定的坐标从4326转到3857坐标系下，4326即是WGS84坐标系！zoom参数是设置缩放等级！
至此，地图已经成功加载到网页中，并且可以进行缩放和平移（初始化Map对象时，默认加上此功能）。
总结
我们本着知其然，并知其所以然的人道主义精神，分解了OpenLayers3的Map对象，主要用于显示地图。但是我们肯定不会满足于仅仅显示并缩放地图，我们还想点击相应的兴趣点，地图要能与我交互，弹出一个框，显示详细信息的框！
我们下次再说哈！