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()。接下來看官網的例子：
未完待續...