當你希望實現某種功能的時候，即使你對 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，默認為falsetarget: '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,//非必填，默認truepreload: 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 顯示 layer1setTimeout(function(){layer1.setVisible(true);layer2.setVisible(false);},3000); </script>

setVisible 主要繼承于 ol.layer.Base 類，擁有這個方法的類有：

ol.layer.Baseol.layer.Groupol.layer.Layerol.layer.Imageol.layer.Tile//我們用到的就是這個ol.layer.Vectorol.layer.Heatmapol.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

EPSG:4326

EPSG:4326

總結

以上是生活随笔為你收集整理的OpenLayers 官网例子的中文详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。