OpenLayers 官网例子的中文详解

https://segmentfault.com/a/1190000009679800?utm_source=tag-newest

当你希望实现某种功能的时候，即使你对 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()。接下来看官网的例子：
未完待续...

混合模式

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 Image Vector

Drag-and-Drop

Drag-and-Drop

Drag, Rotate, and Zoom

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