研究与专注

地图样式是由 style 类控制的，其包含了地图样式的方方面面，例如，填充色、图标样式、图片样式、规则图形样式、边界样式、文字样式等，样式一般针对矢量要素图层。      矢量图层样式可以事先写好，写成静态的，矢量图层直接按照定义好的样式渲染，也可以动态使用样式的 set() 方法，但是要注意刷新矢量图层，重新渲染，否则动态样式不生效。

添加鼠标右键菜单，首先我们要监听鼠标右键点击的操作，我们知道鼠标右键事件名是 `contextmenu`，当鼠标在 html 元素之上，点击鼠标右键，便会触发 `contextmenu` 事件，在 `contextmenu` 事件的回调函数中实现相应的显示菜单功能即可。那么在 openlayers 中，在地图中添加这个事件，我们从哪里下手呢？首先我们得了解 openlayers 的初始化页面流程...

在 openlayers 2中，是默认有切换图层控件的，但是由于某种原因，openlayers 3中并没有默认实现，但却给我们很容易扩展的基类（ol.control.Control），我们可以自定义实现，并不是很难，这我会在其他文章中讲解。这篇文章中，我利用一个 GitHub 中的一个开源项目（这个项目就是扩展了`ol.control.Control`，自定义了切换图层控件），添加切换图层控件，并探索其用法。

很多人想使用 OpenLayers 调用百度地图、腾讯地图等国内地图，本文就讨论一下其可能性和实现原理。我们以百度地图为例，分析其地图调用原理，我们都使用过百度地图，在网速不快的情况下，肯定有过感受，地图是一块一块加载的，从这里我们就可以看出，地图是被切成了很多块的小图片，调用时按照一定规则请求需要的“切片”，可视区域以外的“切片”不加载，这样可以减小数据传输数据量，使地图加载更快。

要使用 OpenLayers 3 加载天地图，首先要弄清楚天地图发布的原理，以及遵循的发布规范，上一篇中我们提到了使用 OpenLayers 3 加载百度地图，我们提到一般网络地图为了加快访问速度，都采用缓存切片地图的方式，天地图也不例外，而且原理极其类似，但是其切片的索引组织方式还是有一些不同，虽然都是切片，但是切片的起始坐标原点不一致，百度地图是屏幕的左下角，而天地图是屏幕的左上角（与谷歌地图一致）...

openlayers 中的控件，是一个固定在页面某个位置的可见的DOM元素，它们可能包含可操作的按钮，也可能只是单纯的展示信息，它们的位置及其样式是由与其关联的CSS样式决定的。默认情况下，它们都位于一个CSS 类（class）为`ol.overlaycontainer-stopevent`的元素内，当然也可以使用其他的自定义的DOM容器元素。

问题描述      有时，往往有这样的需求：每隔一段时间查询一个物体的位置，然后将这个位置绘制在地图上，中间的点用普通的样式标识，当前位置（也就是最新的点位置）使用一个特殊的样式。我们可以这样实现，查询到一个新位置，将改点添加到地图上的同时，赋予其特殊的样式，当再查询到有新的位置时，获取最后添加的要素，删除其特殊样式，然后添加新的要素点位置。那么，问题来了：怎么获取最后添加的要素呢？

今天我们讲一下使用 mapserver 发布 OGC 的三大网络地图服务的最后一个 - WCS，wcs 主要是规定了通过网络提供访问 coverage 数据的标准，那么什么是 coverage 数据呢？ 狭义的说，可以认为 mapserver wcs 中发布的 coverage 数据就是卫星影像 或者 dem。广义上说，coverage 数据主要是指时空现象的数字表示，可以是多维的，例如一维的传感器

地图上的各种事件触发到底是怎么回事？熟悉前端的肯定知道 javascript 的事件机制，openlayers 既然是 javascript 实现的，那么它就也不例外，也遵循 W3C 的标准，只不过是 openlayers 进行的简化实现。文章首先讲解 openlayers 的事件结构实现，然后结合“切片WMS数据源”（ol.source.TileWMS）对象的事件机制进行实例分析。一. 介绍事件机

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

PPI,DPI与window.devicePixelRatio在谈这个主题之前，首先得明确两个概念：DPI、PPI，首先他们都表示图片的分辨率，其次它们有不同：DPI，Dots Per Inch，表示每英寸有多少个点，是打印的术语；PPI，Pixel Per Inch，表示每英寸有多少个像素，是显示器的术语。对 ppi 的印象，我是从苹果发布视网膜屏幕的 iPhone4 开始的，

前言 切片技术的简单介绍，以及传统栅格图片切片的不足现在最流行的地图底图技术是栅格切片底图，它们本质上是将空间数据分别渲染为不同缩放级别的地图图片，然后将各个级别的图片按照一定规则切分，按照一定的 “规则组织”，存储到硬盘或数据库中，构成一幅完整的地图。 图1 切片概念图相对于其他技术，切片地图有其优越性，例如有效减少了传输数据体积，多级缩放等。然而，栅格地图也有一些短处，缺乏实时性，数据完

几天前，有人给我发邮件询问如何实现划定一个矩形区域实现放大功能，即所谓的“拉框放大”，在 ol3 中，其实已有实现鼠标拖拽放大地图功能，默认需要配合 shift，按住shift，拖拽鼠标的同时，地图会放大，该组件名为 ol.interaction.DragZoom，该组件的缺点是不实用（哪一个非专业人员会想的按住shift拖动）。本文首先介绍该组件的实现，随后基于该组件，在地图上放置拉框按钮，实现一

当某个地方发生一些事情之后，如果我们添加一个静态点在地图上，并不能引起注意，那我们可以放置一个动态的点，类似于在水中投入一个石头，水波扩散的效果，象征发生的事件有一定的影响区域，那么，我们如何利用 OpenLayers3 做出这样的效果呢？我们要实现的效果如下图，之前雅安发生过地震，我们在雅安放置一个这样的点，表示雅安发生了地震。 如何实现呢？

Overlay 从名字看，是覆盖图、覆盖物的意思，主要的用途就是在地图之上再覆盖一层，用以显示额外的可见元素，可见元素一般是 HTML 元素，利用 overlay，可以将可见元素放置到地图的任意位置，形成地图上再浮动一层的效果。例如在地图上相应的坐标放置一个标志，标签，利用 overlay 都可以做到，具体来说，点击地图上某位置，在点击位置弹出弹出框就是利用了 overlay。

初始化一幅地图，必备的三要素之一就是视图（view），这个对象主要是控制地图与人的交互，如进行缩放，调节分辨率、地图的旋转等控制。也就是说每个 map对象包含一个 view对象部分，用于控制与用户的交互。    主要介绍 view 的作用和用法，并分析商用的地图应用中的相关的功能。功能的具体的实现与如何进行定制和优化，就超过了这篇文章的范围了。

每一个地图应用都应该有一些工具方便用户控制地图的行为，比如缩放，全屏，坐标控件等等，在 OpenLayers 中怎么添加这些工具呢？下面我给大家介绍一下 OpenLayers 中包含的控件种类，并介绍其使用方法。对控件的定制化，和对 OpenLayers 增加控件和优化控件等超出了本文范围。

source 是 Layer 的重要组成部分，表示图层的来源，也就是服务地址。除了在构造函数中制定外，可以使用 layer.setSource(source) 稍后指定。一、包含的类型ol.source.BingMaps ，必应地图的切片数据，继承自ol.source.TileImage；ol.source.Cluster，聚簇矢量数据，继承自ol.source.Vector；ol.sourc

地图交互功能和上一篇讲的地图控件有些混淆，它们都控制着用户与地图的交互，区别是地图控件的触发都是一些可见的 HTML 元素触发，如按钮、链接等；而交互功能都是一些设备行为触发，都是不可见的，如鼠标双击、滚轮滑动等，手机设备的手指缩放等。      地图的交互功能包含很多，如地图双击放大，鼠标滚轮缩放，矢量要素点选，地图上绘制图形等等。只要是涉及到与地图的交互，就会涉及到 intercation ...

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

在 GIS 中，地图一般分为两大类：栅格地图和矢量地图，栅格地图其实就是数码照片，只不过有的是卫星拍的。它们有一个共同特征，就是它们都是由很多个像素组成，像素大小是一致的，行高和列宽是一致的，从这个角度看，一幅遥感影像就像栅格。      矢量地图，是由很多要素组成的，每个要素都有自己的地理坐标，基于数学规则，无论矢量地图怎么放大，地图都不会失真。它是 OpenLayers 中非常重要的一种图层类型

在 OpenLayers 3 中，负责交互的模块中，有一个负责绘制图形的交互模块，这个交互子模块是 ol.interaction.Draw。该模块允许用户通过鼠标点击（PC浏览器环境）或者手指触摸（ 触屏手机浏览器环境）在地图上绘制点、线 和 面，上一篇文章 中主要介绍了绘制功能的用法，这次我们看看其底层实现及其原理。注：绘制完成之前的要素图形我们称之为草图（sketch），绘制完成的图形称为要素（feature）。

地图应用是大流量应用，如果频繁刷新页面，造成的数据传输也必然是很大的，这在你的网络不是很好的时候，你就醉了，这时候便是 AJAX 显现优势的时候了。这里我们把 AJAX 应用在地图搜索中，下面看看怎么做到的吧！

摘要         一个加载地图的小例子，分析原理，并解析源码！正文例程如下： .map { height: 400px; width: 100%; } OpenLayers 3 example My Map

摘要        矢量图层：矢量图层是用来渲染矢量数据的图层类型，在OpenLayers里，它是可以定制的，可以控制它的透明度，颜色，以及加载在上面的要素形状等。        常用于从数据库中请求数据，接受数据，并将接收的数据解析成图层上的信息。如将鼠标移动到中国，相应的区域会以红色高亮显示出来，高亮便是矢量图层的行为。主要内容1、 HTML文件的进化        这

摘要         上回说到，加载完地图后，我们想更多一点交互，而不仅仅是缩放和平移，赋予地图多一点的生命 ~-~！点击地图，它至少应该知道我是在哪里点击了，并且弹出一个气球类似的框框告诉我！这次，我们就来尝试给我们的地图加上这个能力！         PS：这次的例子是基于上一篇的加载地图的代码的哦！在上一篇的基础上增删修改，所以读读前一篇是很有必要的哦！正文

在地图上绘制各种各样的矢量图形，很多应用场景都需要用到，比如可以实现在客户端勾绘矢量图形并将结果保存到数据库以待后续编辑和可视化等等很多有用的功能。这次我们看看怎么利用 OpenLayers 3 绘制各种各样的图形，并添加到图层显示。在 OpenLayers 3 中负责绘制任务的是 ol.interaction.Draw 类，下面介绍这个类和功能的用法。

GitHub地址：https://github.com/QingyaFan/openlayers-examples1. 描述点聚集指在某个缩放级别下，将临近（一般用像素距离衡量）的点聚合为一个点要素显示，这在房屋中介的等的地图找房功能中很常见，如下图。但是这样的例子并不恰当，地图找房里的聚集确切的说并不是点聚集，他们是在每一级别显示某一级区块，然后在区块多边形的质心或者什么地方设置一个点要...