簡介：

OpenLayers 3簡稱ol3，它是一個開源的Web GIS引擎，使用了JavaScript、最新的HTML5技術及CSS技術，支援dom，canvas和webgl三種渲染方式。在地圖資料來源方面，支援各種型別的瓦片地圖，既支援線上的，也支援離線的。比如OSM,Bing, MapBox, Stamen,MapQuest等等；還支援各種向量地圖，比如GeoJSON，TopoJSON，KML，GML等等。隨著OpenLayers3的進一步發展，將支援更多的地圖型別。

組成：

OpenLayers 3地圖主要是由layer（圖層）和view組成，layer可以有多個，view只能有一個。

大致的組成部分如下圖：

簡單介紹一下：

ol.Map 是第一個入口
ol.View 控制地圖顯示的中心位置、範圍、層級
ol.layer.Tile 瓦片
ol.layer.Image 圖片
ol.layer.Vector 向量圖

建立地圖的方式：

1.在頁面需要有一個map的容器
2.例項化一個map物件
3.將容器的id繫結到map的target屬性中

在React中使用的時候需要安裝一下：

npm  install  --save  openlayers

在使用的時候還要引入一下樣式

import
 
 'openlayers/css/ol.css';

在react中使用的示例：

 let map = new ol.Map({
            target: 'map',
            layers: [raster, clusters],
            view: new ol.View({
                //設定地圖顯示的範圍
                //extent: [102, 29, 104, 31],
                //設定地圖的顯示中心
                //center: [105.44257, 28.8717], 
 

                center: ol.proj.fromLonLat([105.44257, 28.8717]),
                //指定地圖投影型別
                projection: 'EPSG:3857',
                //定義地圖顯示的層級 
                zoom: 12,
            })
        });

<div id="map" className="mapContainer"></div>

target中繫結物件這樣後期操作會比較方便，例如修改顯示樣式：

map.getTarget().style.cursor = hit ? 'pointer':''

ol.Map的使用
使用自己的logo:

建立地圖的時候，在地圖上生成一個openlayer的官方Logo。這個logo是預設顯示的，但是可以設定隱藏，也可以自己定製

ol.View的使用
常用來：

定位時設定中心點、檢視不同級別地區時、設定地圖的縮放級別

獲取地圖各種值通常用get方法，一些屬性值可直接get(‘屬性名’)獲取 設定值可以用set方法
設定view相關屬性之後地圖沒有改變，可以使用map.render()方法重新渲染地圖
另：地圖容器寬高發生改變時候，若是地圖沒有填滿容器，可使用map.updateSize()方法

解析度：

解析度是螢幕座標和世界座標的紐帶，通過它，才能知道你在螢幕上用滑鼠點選的位置對應於世界地圖具體的經緯度位置。
minResolution，圖層可見的最小解析度，當圖層的縮放級別小於這個解析度時，圖層就會隱藏；
maxResolution，圖層可見的最大解析度，當圖層的縮放級別等於或超過這個解析度時，圖層就會隱藏。
maxResolution是你最模糊級別的切片 的座標跨度 與 圖片畫素寬度的比值 比如最模糊級別是全球圖片 ，座標跨度180度，圖片尺寸是
512*512,那麼這個值就是 180/512.單位為度 如果單位是米，對應換座標跨度數值就行了（沒有太具體認知，這是查資料得到的答案）

知道最大解析度和縮放級別數（numZoomLevels）目可以直接知道最小和最大的縮放級別

一個相關講解比較詳細的部落格

限制地圖範圍

在實際使用中，往往只關心某一個區域的地圖，而無需顯示整個地球的地圖，這樣可以聚焦於業務，同時可以減少前端和後臺的地圖資料。
例：extent: [102, 29, 104, 31] 這種方式使用的是EPSG:4326
實現效果：拖拽時地圖只能在經度29度到31度，緯度在102到104度之間顯示，超過這個範圍圖層將不可見。

限制地圖縮放級別

ol.View的fit函式

   自適配區域

ol.View的fit函式很強大，可以檢視API文件，它的第三個引數還可以設定更多的選項，以適應更多的需要。關於更多的使用，參見官網例子Advanced View Positioning。

ol.proj.transform（p1,p2,p3）：
說明：一個用於座標轉換的方法
引數：
p1:ol.Coordinate型別的座標
p2:當前座標所用的座標系
p3:轉換後的座標所用的座標系
例：
ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857')
把EPSG:4326的座標[104.06, 30.67]轉換為EPSG:3857的座標

注：ol預設使用的是EPSG:3857座標

就是使用下面這種方式標明座標的：

ol.proj.fromLonLat([105.44257, 28.8717])

Source和Layer：

…….