layer添加元素 openlayer_OpenLayers 官网例子的中文详解

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

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

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

名词解释

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

layer：层

contorl：控件

feature：元素

interaction：交互

Vector：矢量的

Tile：瓦片

source：资源

format：转换

projection：投影

无障碍地图

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

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

//layers、target、view是地图最基本的部分，是必需的

new ol.Map({

layers: [

new ol.layer.Tile({

source: new ol.source.OSM()

})

],

target: 'map',

view: new ol.View({

center: [0, 0],

zoom: 2

})

});

视图动画

View Animation

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

//地图的视图

var view = new ol.View({

center: [0, 0],

zoom: 2

});

new ol.Map({

layers: [

new ol.layer.Tile({

source: new ol.source.OSM()

})

],

loadTilesWhi