OpenLayers 3 之 添加地图网格

前言

在地图上渲染一层类似于经纬线的网格层，更有利于准确的确定区域，在WGS84坐标系下，以度，分，秒为单位，称之为“经纬网”，其网格是以经纬线来划分的。在OpenLayers3中，渲染网格的类是“ol.Graticule”。本文中，我结合实例，讲解“ol.Graticule”的用法和具体实现。

示例

初始化一个网格层，然后将其关联的map对象设置为map（预先定义好的），网格层便会在关联的地图上渲染。初始化网格层可传的参数和方法下面会说明，例子如下（完整的例子可以到我的GitHub查看）：

        var graticuleLayer = new ol.Graticule({
            // map: map,
            strokeStyle: new ol.style.Stroke({
                color: 'rgba(12, 12, 12, 0.8)',
                width: 0.6
            }),
            targetSize: 100
        });
        graticuleLayer.setMap(map);

执行结果如下图：

使用

参数

初始化“ol.Gracule”时可调节的参数有四个（map,maxLines,strokeStyle和targetSize），如下：

• map 参数指定了网格层关联的地图对象，也可以不设置该参数，使用其setMap()函数；
• maxLines 指定以地图中心为参考，左右经线和上下纬线的最大数量，默认值是 100，这表示将绘制200条经线和纬线。需要注意渲染速度会随着maxLines的变大而下降；
• strokeStyle 指定线的样式，值是一个“ol.style.Stroke”对象，如果没有指定该参数，其默认样式是rgba(0,0,0,0.2)；
• targetSize 指定每个网格覆盖的区域的大小，单位是像素，默认是100，也就是 10 像素 × 10 像素。

API

“ol.Gracule”对外开放的API也有四个，如下：

• getMap，取得与网格相关联的地图对象；
• setMap，设置与网格相关联的地图对象，网格将在关联的地图之上渲染；
• getMeridians，取得所有经线组成的数组，每条绘制的经线都是“ol.geom.LineString”对象；
• getParallels，取得所有纬线组成的数组，每条绘制的维线也都是“ol.geom.LineString”对象。

实现

提供的可配置参数和API都比较有限，能做的事情也比较有限，接下来我们看看其实现原理，方便我们对其进行定制改写。 要理解一个类的具体实现，我们首先要分析其结构，其公私有变量和成员函数，归纳其内部相互调用关系，理清脉络。“ol.Graticule”的脉络如下：

OL3中的类构造都使用构造函数模式和原型模式，在构造函数中，除了赋值一些参数外，最后调用了“setMap”，setMap会对地图对象的“POSTCOMPOSE”事件绑定“handlePostCompose_”监听函数，“handlePostCompose_”做了所有初始化并渲染网格的工作。其中，“createGraticule_”做渲染工作，“addMeridian”和“addParallel”做实际的渲染经线和纬线的工作。

setMap

setMap定义如下：

/**
 * Set the map for this graticule.  The graticule will be rendered on the
 * provided map.
 * @param {ol.Map} map Map.
 * @api
 */
ol.Graticule.prototype.setMap = function(map) {
  if (this.map_) {
    this.map_.un(ol.render.EventType.POSTCOMPOSE,
        this.handlePostCompose_, this);
    this.map_.render();
  }
  if (map) {
    map.on(ol.render.EventType.POSTCOMPOSE,
        this.handlePostCompose_, this);
    map.render();
  }
  this.map_ = map;
};

setMap首先判断初始化时是否指定了“map_”参数，如果指定了，首先解除绑定地图对象“POSTCOMPOSE”事件的监听函数“handlePostCompose_”，如果指定新的地图对象，则对新指定的 map 对象，绑定`POSTCOMPOSE`事件监听函数“handlePostCompose_”，并调用 map 对象的 render 方法，最后将地图对象赋值给“this.map_”。从以上的类脉络图看，“handlePostCompose_”功能是初始化网格并渲染在地图上，并随着地图缩放等操作触发的“POSTCOMPOSE”事件，根据实际情况重新渲染。

addMeridian_&addParallel_

实际的渲染工作是由“addMeridian_”和“addParallel_”完成的，我们选择一个来进行说明，“addMeridian_”将从“getMeridian_”获得的经线添加到“this.meridians_”数组，“addMeridian_”函数添加前会判断经线是否在地图视口内，如果是才会添加，“handlePostCompose_”将“this.meridians_”数组中的经线对象（lineString）渲染到地图之上：vectorContext.drawLineString(line, null)，“getMeridian”实现如下：

/**
 * @param {number} lon Longitude.
 * @param {number} minLat Minimal latitude.
 * @param {number} maxLat Maximal latitude.
 * @param {number} squaredTolerance Squared tolerance.
 * @return {ol.geom.LineString} The meridian line string.
 * @param {number} index Index.
 * @private
 */
ol.Graticule.prototype.getMeridian_ = function(lon, minLat, maxLat,
                                               squaredTolerance, index) {
  goog.asserts.assert(lon >= this.minLon_,
      'lon should be larger than or equal to this.minLon_');
  goog.asserts.assert(lon <= this.maxLon_,
      'lon should be smaller than or equal to this.maxLon_');
  var flatCoordinates = ol.geom.flat.geodesic.meridian(lon,
      minLat, maxLat, this.projection_, squaredTolerance);
  goog.asserts.assert(flatCoordinates.length > 0,
      'flatCoordinates cannot be empty');
  var lineString = this.meridians_[index] !== undefined ?
      this.meridians_[index] : new ol.geom.LineString(null);
  lineString.setFlatCoordinates(ol.geom.GeometryLayout.XY, flatCoordinates);
  return lineString;
};

ol.geom.flatgeodesic.meridian方法返回经线的坐标集合， lineString.setFlatCoordinates方法将lineString坐标设置为flatCoordinates，这样就完成了一条经线的初始化。

总结

本文总结了“ol.Graticule”的用法和具体实现，openlayers3中的网格支持目前还不是很完善，如果需要更多的功能，要自己去扩展和实现。

文中的实例可以到我的GitHub下载， 好的，就写到这里，有什么问题，可以在文章下面留言或者给我发邮件。