关闭

OpenLayers 3 之 添加地图网格

标签: 地图网格openlayerswebgis经纬网地图
7723人阅读 评论(0) 收藏 举报
分类:

前言

在地图上渲染一层类似于经纬线的网格层,更有利于准确的确定区域,在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”的脉络如下:

ol.Graticule结构

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

setMap

setMap定义如下:

<span style="font-family:Times New Roman;">/**
 * 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;
};</span>

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下载,好的,就写到这里,有什么问题,可以在文章下面留言或者给我发邮件。

5
0
查看评论

Openlayers之显示瓦片网格信息

1、新建一个html页面,引入ol.js文件,然后在body中创建一个div标签,用来作为地图加载的容器; 2、代码实现 window.onload = function () { //实例化OSM图层数据源对象 ...
  • SmileCoffin
  • SmileCoffin
  • 2017-02-14 10:51
  • 542

OpenLayers 3 之 地图图层(Layers) 详解

如果不是专业的地图工作者,看到地图,可能觉得地图就是一张将三维世界映射到二维空间,很多信息混杂在一起表示空间信息的动态可交互图片,其实这只是表面现象。实际上地图是由一个或多个图层组成的,使用不同的图层存储不同类型的地物,比如由存储道路的图层,有展示拥堵情况的图层,通常还有一个含有基础地理信息(比如政...
  • qingyafan
  • qingyafan
  • 2015-04-30 18:41
  • 21717

百度地图铺满网格覆盖物

百度地图添加网格
  • u014052851
  • u014052851
  • 2017-08-01 17:57
  • 655

百度地图动态生成网格

  • 2016-09-09 15:06
  • 3KB
  • 下载

Openlayers之图形绘制

1、新建一个html页面,引入ol.js文件,然后在body中创建一个div标签、label标签和一个select下拉选项卡; 2、代码实现 window.onload = function () { //获取下拉列表...
  • SmileCoffin
  • SmileCoffin
  • 2017-02-15 13:09
  • 1887

使用html,js,css,在地图上绘制网格

  • 2015-02-02 10:48
  • 5KB
  • 下载

在地图上,如何对一个地区进行矩形划分

首先先看下效果图 主要是先根据百度百科确定北京区域所在的经纬度,然后计算大概。并且在地图上画矩形的经纬度顺序是左,左上,右上,右,按照顺时针方向进行设置。如果顺序反了可能画出的就不是矩形了本文是调用第三方高德的地图API。下面给出源码: 1.html ...
  • cuiran
  • cuiran
  • 2012-11-23 13:18
  • 6074

百度地图中动态生成网格

目的:根据距离生成网格,比如500米一个网格 技术:js 百度地图 代码如此下:                       ...
  • abc2222753
  • abc2222753
  • 2016-09-09 15:18
  • 810

OpenLayers 3 之 地图图层数据来源(ol.source)详解

source 是 Layer 的重要组成部分,表示图层的来源,也就是服务地址。除了在构造函数中制定外,可以使用 layer.setSource(source) 稍后指定。一、包含的类型 ol.source.BingMaps ,必应地图的切片数据,继承自ol.source.TileImage; ol....
  • qingyafan
  • qingyafan
  • 2015-05-24 10:27
  • 10183

openlayer 高亮显示样式

var v_style = new OpenLayers.StyleMap({ 'default': new OpenLayers.Style({ graphicWidth : 60, graphicHeight: 25, graphicTitl...
  • wd4java
  • wd4java
  • 2015-06-26 08:43
  • 2245
    个人资料
    • 访问:305958次
    • 积分:3712
    • 等级:
    • 排名:第10347名
    • 原创:60篇
    • 转载:0篇
    • 译文:0篇
    • 评论:180条
    博客专栏
    文章分类
    最新评论