OpenLayers 3 之加载地图

摘要

         在浏览器中加载一幅地图，而且是可交互（包含缩放、平移、查询和分析等高级功能）的，该怎么做呢？我们当然知道要想网页中的内容是动态的，可交互的，要使用JavaScript，地图应用也不例外，不过要从底层开发的话，要费老鼻子的劲儿了！OpenLayers便是一个减轻你的工作量的框架，利用它可以轻松地加载一幅动态可交互的地图到浏览器中！

         下面便是一个利用OpenLayers加载地图的小例子，我们先看看运行结果，并分析一下原理，捋一捋源码！

正文

例程如下：

  
    
    
    
    
  
  
    
My Map
    

    
  

在浏览器中打开，Duang  Duang  Duang  。。 。 - -| ，运行结果如下：

为什会有这些效果，咱来个庖丁解牛，分解分解，捋一捋！这是一个普通的Html网页，没错，但是它引用了OpenLayers的CSS样式和js文件：

然后又扯了一段代码：

在这段代码中，主要是实例化了一个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对象，主要用于显示地图。但是我们肯定不会满足于仅仅显示并缩放地图，我们还想点击相应的兴趣点，地图要能与我交互，弹出一个框，显示详细信息的框！

我们下次再说哈！