OpenLayers 官网例子的中文详解

当你希望实现某种功能的时候，即使你对 openlayers 几乎一窍不通，照着官网的例子做，也可以很快的实现想要的效果。

问题在于，官网的例子都是英文啊，不能很快定位到想要的效果是在哪个例子里面！！( 英文不渣就别看这篇文章了 )

最近在学 openlayers ，我觉得非常有必要将 openlayers 官网的所有例子都看过去一遍，这篇文章就当是笔记了。

名词解释

在 openlayer 里，下面这些单词应该这么翻译。

layer：层
contorl：控件
feature：元素
interaction：交互
Vector：矢量的
Tile：瓦片
source：资源
format：转换
projection：投影

无障碍地图

Accessible Map

当地图获得焦点之后，可以使用键盘对地图进行控制，+ 键放大地图，- 键缩小地图，tab 键切换地图中的按钮，enter 键点击地图中的按钮，↑ ↓ ← → 键移动地图...

对于小白来说，官网的例子有些东西是不必要的，比如官网例子中的 controls，最初我以为要使用键盘控制地图是不是和这个 controls 有点关联呢？其实它们一点关系都没有，地图默认就支持无障碍访问，为了更好更快的理解例子，我会在每个例子中给出最精简的代码：

视图动画

View Animation
让地图的视图拥有动画啊效果，关键点在于 loadTilesWhileAnimating 和 view.animate。这个动画最基本的效果有三种：移动、旋转、放缩，通过这三种效果的组合，可以做出很多特效。

使用 ArcGIS 图片服务器

Image ArcGIS MapServer
这个没弄懂，貌似官网给的这个 url：https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer 用不了了????。

使用 ArcGIS 瓦片服务器

Tiled ArcGIS MapServer
这里使用了 ArcGIS 瓦片服务器的图源，和上面的 ArcGIS 图片服务器类似，注意对比两者的区别。

版权归属

Attributions

Attributions 的意思是「归属」，指的是右下角那个版权控件。

为了更好的理解这一个例子，下面代码展示了如何给地图添加控件：

这样，我们就能在地图上显示版权和全屏按钮了，如果不设置 controls ，那么地图会默认帮我们设置，默认的效果等同于如下代码：

接下来我们来看官网的例子：

必应地图

Bing Maps
就是使用必应地图的一些API接口。这个例子展示了如何动态显示、隐藏地图的层 ( layers )，主要用到的是 setVisible 方法。

setVisible 主要继承于 ol.layer.Base 类，拥有这个方法的类有：

ol.layer.Base
    ol.layer.Group
    ol.layer.Layer
         ol.layer.Image
         ol.layer.Tile//我们用到的就是这个
         ol.layer.Vector
              ol.layer.Heatmap
              ol.layer.VectorTile

框选

Box Selection
按住 ctrl + 鼠标左键，拖拽，就可以框选地图上的一些元素。

这里框选属于一种交互，分别是 选择、画框 两种交互：

interactions是交互的意思，如果不设置默认为 ol.interaction.defaults()。接下来看官网的例子：
未完待续...

混合模式

Blend Modes

提示框

Custom Tooltips

调试瓦片

Canvas Tiles

给元素添加渐变样式

Styling feature with CanvasGradient or CanvasPattern

CartoDB 图源

CartoDB source example
这个东西可以通过 sql 语句来筛选元素。

显示的密集元素

Clustered Features

根据元素定位视图

Advanced View Positioning

调整地图的颜色

Color Manipulation

自定义控件

Custom Controls

自定义logo

Custom Icon

自定义交互

Custom Interactions

整合 D3 来绘图

d3 Integration

设备方向

Device Orientation

Drag-and-Drop Image Vector

Drag-and-Drop

Drag, Rotate, and Zoom

用鼠标交互绘制点、线、面、圆

Draw Features

用鼠标交互绘和修改制点、线、面、圆

Draw and Modify Features

用鼠标绘制线、面

Freehand Drawing
与上面「用鼠标交互绘制点、线、面、圆」不同的是，上面是点两点就成为线了，这里的线要拖着鼠标绘制，不是直线，是纯手绘的。

用鼠标绘制形状

Draw Shapes

动画的实现

Dynamic Data

postcompose 在地图渲染的时候会触发。

KML 文件绘制元素---- 地震集中区

Earthquake Clusters

KML文件绘制元素---- 自定义地震点的元素

Earthquakes with custom symbols