OpenLayers 官網例子的中文詳解

本文轉載自查看原文 2019-01-29 14:06 2939 GIS/ 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>