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"></div>
<script>

    new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            new ol.layer.Image({
                source: new ol.source.ImageArcGISRest({
                    ratio: 1,
                    params: {},
                    url: 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer'
                })
            })
        ],
        target: 'map',
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    });
</script>

使用 ArcGIS 瓦片服务器

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

<div id="map"></div>
<script>
    new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.BingMaps({
                    key: 'AkjzA7OhS4MIBjutL21bkAop7dc41HSE0CNTR5c6HJy8JKc7U9U9RveWJrylD3XJ',
                    imagerySet: 'Road'
                })
            }),
            new ol.layer.Tile({
                source:  new ol.source.TileArcGISRest({
                    ratio: 1,
                    params: {},
                    url: 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer'
                })
            })
        ],
        target: 'map',
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    });
</script>

版权归属

Attributions

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

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

<div id="map"></div>
<script>
    var attribution = new ol.control.Attribution();//这是版权控件

    var FullScreen = new ol.control.FullScreen();//这是全屏控件

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        controls: [attribution,FullScreen],//如果不设置 controls ，地图会默认设置
        target: 'map',
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    });
</script>

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

<div id="map"></div>
<script>
    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        controls: ol.control.defaults(),//这就是默认的效果
        target: 'map',
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    });
</script>

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

<div id="map"></div>
<script>
    var attribution = new ol.control.Attribution({
        collapsible: false
    });

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        //这里的意思是，使用默认的 controls ，但是把默认的「版权控件」设置为false，隐藏掉了
        //然后使用 .extend 来添加一个新的「版权控件」
        controls: ol.control.defaults({attribution: false}).extend([attribution]),
        target: 'map',
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    });

    function checkSize() {
        var small = map.getSize()[0] < 600;
        attribution.setCollapsible(small);
        attribution.setCollapsed(small);
    }

    window.addEventListener('resize', checkSize);
    checkSize();
</script>

必应地图

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

<div id="map"></div>
<script>
    var layer1 = new ol.layer.Tile({
        visible: false,//非必填，默认true
        preload: Infinity,//非必填、Infinity表示正无穷大
        source: new ol.source.BingMaps({
            key: 'AkjzA7OhS4MIBjutL21bkAop7dc41HSE0CNTR5c6HJy8JKc7U9U9RveWJrylD3XJ',//必填、key要自己去申请哦
            imagerySet: "Road",//必填，可选值：Road、Aerial、AerialWithLabels、collinsBart、ordnanceSurvey
        })
    });
    var layer2 = new ol.layer.Tile({
        source: new ol.source.BingMaps({
            key: 'AkjzA7OhS4MIBjutL21bkAop7dc41HSE0CNTR5c6HJy8JKc7U9U9RveWJrylD3XJ',
            imagerySet: "AerialWithLabels",
        })
    });
    new ol.Map({
        layers: [layer1,layer2],
        target: 'map',
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    });

    //3秒后隐藏 layer2 显示 layer1
    setTimeout(function(){
        layer1.setVisible(true);
        layer2.setVisible(false);
    },3000);
</script>

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 + 鼠标左键，拖拽，就可以框选地图上的一些元素。

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

<div id="map"></div>
<script>
    var map = new ol.Map({
        layers: [
            new ol.layer.Vector({
                //这是一个能选择的地图源
                source: new ol.source.Vector({
                    url: 'https://openlayers.org/en/v4.1.1/examples/data/geojson/countries.geojson',
                    format: new ol.format.GeoJSON()
                })
            })
        ],
        interactions:[//交互
            new ol.interaction.Select(),//选择
            new ol.interaction.DragBox({
                condition: ol.events.condition.platformModifierKeyOnly
            })//画框
        ],
        target: 'map',
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    });
</script>

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