OpenLayers 官网例子的中文详解

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

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

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

名词解释

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

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

无障碍地图

Accessible Map

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

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

<div id="map"></div>
<script>
    //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
        })
    });
</script>

视图动画

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

<div id="map"></div>
<script>
    //地图的视图
    var view = new ol.View({
        center: [0, 0],
        zoom: 2
    });

    new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        loadTilesWhileAnimating: true,//将这个设置为true，默认为false
        target: 'map',
        view: view
    });

    var london = ol.proj.fromLonLat([-0.12755, 51.507222]);//伦敦的坐标

    //移动到伦敦，移动时是有动画的
    view.animate({
        center:london,
    });
</script>

使用 ArcGIS 图片服务器

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

<div id="map">&