OpenLayers 官网例子的中文详解

时间 2019-11-07

标签 openlayers 例子中文详解繁體版

原文原文链接

当你但愿实现某种功能的时候，即便你对 openlayers 几乎一窍不通，照着官网的例子作，也能够很快的实现想要的效果。html

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

最近在学 openlayers ，我以为很是有必要将 openlayers 官网的全部例子都看过去一遍，这篇文章就当是笔记了。json

名词解释

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

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

无障碍地图

Accessible Mappost

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

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

<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()。接下来看官网的例子：
未完待续...