OpenLayers API整理

整理的Openlayers 的知識筆記，隨着運用不斷加深理解，也會不斷更新。

本文連接：Openlayers API整理

做者：狐狸家的魚

GitHub：八至

1、建立地圖

一、地圖Map

建立地圖底圖：須要用new ol.Map({})

地圖map是由圖層layers、一個可視化視圖view、用於修改地圖內容的交互interaction以及使用UI組件的控件control組成的。

（1）、建立基本地圖

let map = new ol.Map({ target: 'map',//對象指向
    layers: [//圖層
      new ol.layer.Tile({//這裏定義的是平鋪圖層
        source: new ol.source.OSM()//圖層源 定義圖層映射協議
 }) ], view: new ol.View({//視圖
      center: ol.proj.fromLonLat([37.41, 8.82]),//地圖中心
      zoom: 4//縮放層級
 }) });

（2）、屬性選項

new ol.Map({ target: 'map',//對象映射：要將`map`對象附加到div，` map`對象將`target`做爲參數，值是`div`的`id`
    layers: [//圖層
      new ol.layer.Tile({//這裏定義的是平鋪圖層
        source: new ol.source.OSM()//圖層源 定義圖層映射協議
 }) ], view: new ol.View({//視圖
      center: ol.proj.fromLonLat([37.41, 8.82]),//地圖中心
      zoom: 4//縮放層級
 }), controls:[//最初添加到映射中的控件 如未設置 使用默認控件
        new ol.control.Control({ element:,//元素是控件的容器元素(DOM)。只有在開發自定義控件時才須要指定這一點
            render: ,//控件從新呈現時調用的函數
            target: //若是想在映射的視圖端口以外呈現控件，指定目標
 }) ], interactions:[//最初添加到映射中的交互 如未設置 使用默認交互
        new ol.interaction.Interaction({ handleEvent }) ], overlays:[ new ol.Overlay() ], maxTilesLoading:16,//同時加載的最大瓷磚數 默認16
    loadTilesWhileAnimating:false,//     loadTilesWhileInteracting:false,//   
    moveTolerance:1,//光標必須移動的最小距離(以像素爲單位)才能被檢測爲map move事件，而不是單擊。增長這個值可使單擊地圖變得更容易
    pixelRatio:window.devicePixelRatio,//     keyboardEventTarget:,//要監聽鍵盤事件的元素
})

（3）、地圖事件

地圖事件	含義
click	無拖動單擊
dblclick	無拖動雙擊
moveend	移動地圖結束時
movestart	移動地圖開始時
pointerdrag	當拖動指針時觸發
pointermove	當指針移動時觸發。注意，在觸摸設備上，這是在地圖平移時觸發的，所以與mousemove不一樣
postcompose
postrender	在映射幀呈現後觸發
precompose
propertychange	當屬性被更改時觸發
rendercomplete	渲染完成時觸發，即當前視圖的全部源和tile都已加載完畢，全部tile都將淡出
singleclick	一個真正的無拖放和無雙擊的單擊。注意，這個事件被延遲了250毫秒，以確保它不是雙擊

（4）、地圖方法

地圖方法	功能
addControl(control)	將給定的控件添加到地圖中
removeControl(control)	從地圖中移除已給定的控件
addInteraction(interaction)	將給定的交互添加到地圖中
removeInteraction(interaction)	從地圖中移除已給定的交互
addLayer(layer)	將給定的圖層添加到地圖的頂部
removeLayer(layer)	從地圖中移除已給定的圖層
addOverlay(overlay)	將給定的疊加層添加到地圖中
removeOverlay(overlay)	從地圖中移除已給定的疊加層
forEachFeatureAtPixel(pixel, callback, opt_options)	檢測與視圖端口上的像素相交的特性，並對每一個相交的特性執行回調。檢測中包含的層能夠經過opt_options中的layerFilter選項配置
forEachLayerAtPixel(pixel, callback, opt_options)	檢測在視圖端口上的像素處具備顏色值的層，並對每一個匹配的層執行回調。檢測中包含的層能夠經過opt_layerFilter配置
getControls()	獲取地圖控件
getCoordinateFromPixel(pixel)	獲取給定像素的座標。這將返回地圖視圖投影中的座標。
getEventCoordinate(event)	返回瀏覽器事件的視圖投影中的座標
getEventPixel(event)	返回瀏覽器事件相對於視圖端口的地圖像素位置
getFeaturesAtPixel(pixel, opt_options)	獲取視圖端口上與像素相交的全部特性
getInteractions()	獲取地圖交互
getLayerGroup()	獲取與此地圖關聯的圖層組
setLayerGroup(layerGroup)	設置與此地圖關聯的圖層組
getLayers()	獲取與此地圖關聯的圖層的集合
getOverlayById(id)	經過其標識符獲取覆蓋(overlay. getId()返回的值)。注意，索引將字符串和數字標識符視爲相同的。getoverlaybyid(2)將返回id爲2或2的疊加層。
getOverlays()	得到地圖疊加
getPixelFromCoordinate(coordinate)	獲取座標的像素。它接受地圖視圖投影中的座標並返回相應的像素
getSize()	獲取地圖尺寸
setSize(size)	s設置地圖尺寸
getTarget()	獲取呈現此映射的目標。注意，這將返回做爲選項或setTarget中輸入的內容。若是這是一個元素，它將返回一個元素;若是是字符串，它會返回這個字符串
setTarget(target)	設置要將地圖呈現的目標元素
getTargetElement()	獲取呈現此映射的DOM元素。與getTarget相反，這個方法老是返回一個元素，若是映射沒有目標，則返回null
getView()	獲取地圖視圖。視圖管理中心和分辨率等屬性。
setView(view)	設置地圖視圖
getViewport()	獲取做爲map視圖端口的元素
hasFeatureAtPixel(pixel, opt_options)	檢測在viewport上是否與一個像素相交。能夠經過opt_layerFilter配置在檢測中包含的層。

二、圖層Layers

定義圖層：地圖圖層layers:[...]組定義映射中可用的圖層組，用來盛放地圖上的各類元素，其在地圖上的顯示順序是按照數組中元素序列從下到上呈現的，能夠直接在建立地圖時定義圖層，多個圖層的時候能夠單獨定義。

const layer = new ol.layer.Vector({//這裏定義的是圖層類型(Image/Title/Vector)
    source:new ol.source.Vector(),//矢量圖層源 源是用於獲取映射塊的協議【必須】
    style:[],//圖層樣式 【必須】
    feature:[],//圖層元素 【必須】
})

• 添加指定圖層：map.addLayer(layer)；

• 移除指定圖層：map.removeLayer(layer)；

圖層是輕量級容器，從數據源Source獲取數據。

Sourced子類分別有，分別對應不一樣圖層類：

• ol.source.ImageSource()

• ol.source.TileSource()

• ol.source.VectorSource()

Source主要有如下屬性選項：

new ol.source.VectorSource({ attributions:,//     attributionsCollapsible:,//布爾值 默認爲true 
    projection:,//投影系
    state:'ready',//默認爲'ready'
    wrapX:false,//默認爲false
})

ol.layer.Tile()和ol.layer.Image()圖層類都具備相同的屬性以下：

new ol.layer.Tile/Image({//如下爲圖層的屬性選項， 均可設置，因此皆有getter/setter opacity:2,//透明度 區間範圍爲(0, 1) 默認爲1
    visible:true,//顯示屬性 布爾值 默認爲true
    extent:[],//圖層渲染的邊界範圍。該層將不會在此範圍以外呈現
    zIndex:2,//圖層渲染的索引層級。在渲染時，圖層將被排序，首先是z-idnex，而後是位置，當爲undefined時，對於添加到映射的layers集合中的層，zIndex爲0，或者當使用該層的setMap()方法時，zIndex爲無窮大
    minResolution:3,//該層可見的最小分辨率(包括在內)
    maxResolution:6,//該層可見的最大分辨率（包括在內）
    repload:0,//預加載。將低分辨率瓦片加載到預加載級別。0表示沒有預加載 默認爲0
    source:new ol.source.TileSource()/ImageSource(),//圖層源
    map:  ,//把圖層覆蓋在地圖上，地圖不會在它的圖層集合中管理這個圖層，這個圖層將被呈如今頂部，這對於臨時層很是有用。
})

(1)ol.layer.Tile()

平鋪圖層。

對於提供預呈現、平鋪的網格圖像的層源，這些網格按特定分辨率的縮放級別組織。

(2)ol.layer.Image()

圖像圖層。

服務器呈現的映像，可用於任意範圍和分辨率。

(3)ol.layer.Vector()

矢量圖層。

在客戶端呈現矢量數據，其屬性具有getter和setter

new ol.layer.Vector({//如下爲圖層的屬性選項， 均可設置，因此皆有getter/setter
    opacity:2,//透明度 區間範圍爲(0, 1) 默認爲1
    visible:true,//顯示屬性 布爾值 默認爲true
    extent:[],//圖層渲染的邊界範圍。該層將不會在此範圍以外呈現
    zIndex:2,//圖層渲染的索引層級。在渲染時，圖層將被排序，首先是z-idnex，而後是位置，當爲undefined時，對於添加到映射的layers集合中的層，zIndex爲0，或者當使用該層的setMap()方法時，zIndex爲無窮大
    minResolution:3,//該層可見的最小分辨率(包括在內)
    maxResolution:6,//該層可見的最大分辨率（包括在內）
    renderOrder:,//呈現順序。函數用於在呈現前對特性進行排序。默認狀況下，特性是按照建立它們的順序繪製的。使用null來避免排序，可是獲得一個未定義的繪製順序
    renderBuffer:100,//默認爲100 緩衝區
    renderMode:'vector',//默認爲'vector' 矢量圖層的渲染模式
    source:new ol.source.VectorSource(),//圖層源
    map:  ,//把圖層覆蓋在地圖上，地圖不會在它的圖層集合中管理這個圖層，這個圖層將被呈如今頂部，這對於臨時層很是有用
    declutter:false,//默認爲false 整理圖片和文字。清理應用於全部圖像和文本樣式，優先級由樣式的z-index定義。z-index指數越低，優先級越高
    style:new ol.style.Style(),//圖層樣式
    updateWhileAnimating:false,//默認爲false 
    updateWhileInteracting:false,//默認爲false
})

其中渲染模式有兩種：

• 'image'：矢量圖層被渲染爲圖像。性能很好，可是點符號和文本老是隨着視圖旋轉，像素在縮放動畫中縮放

• 'vector'：矢量圖層被呈現爲向量。即便在動畫期間也有最準確的渲染，但性能較慢

1)Feature

用於地理特徵的矢量元素，具備幾何geometry()和其餘屬性，相似於矢量文件格式(如GeoJSON)中的特性。

• 添加矢量元素：經過vectorsource().addFeature(feature)添加到矢量圖層上。

• 移除圖層全部的矢量元素：vectorsource().clear()

let feature = new ol.Feature({ geometry: new ol.geom.Polygon(polyCoords), labelPoint: new ol.geom.Point(labelCoords), style:new ol.style.Style({}), name: 'My Polygon' });

• 定義矢量元素：new ol.Feature()，；

• 矢量元素樣式：

  • 設置樣式：new ol.style.Style()，也可使用feature.setStyle(style)，未定義的話，可使用它的盛放容器layer的樣式；

  • 獲取樣式：feature.getStyle()

• 一個feature只有一個默認幾何屬性geometry，能夠有任意數量的命名幾何圖形：

  • 獲取默認幾何屬性：feature.getGeometry()；

  • 設置幾何屬性：feature.setGeometry(geometry)；

  • 設置幾何屬性名：feature.setGeometryName(name)；

  • 矢量元素要呈現的幾何圖形的特徵屬性、幾何圖形或函數由geometry屬性選項設定，主要有如下幾種子類模塊：

    • ol.geom.Circle()：圓形

    • ol.geom.Geometry()：幾何圖形

    • ol.geom.GeometryCollection()：

    • ol.geom.LinearRing()：環線

    • ol.geom.LineString()：線段

    • ol.geom.Point()：點

    • ol.geom.Polygon()：多邊形

    • ol.geom.MultiLineString()

    • ol.geom.MultiPoint()

    • ol.geom.MultiPolygon()

    • ol.geom.SimpleGeometry()

• feature的穩定標識符ID：

  • 設置feature的id：feature.setId(id)，當id可能相同時，能夠這樣加以區分

  feature.setId(id + "featureName");

  • 獲取feature的id：vector.getSource().getFeatureById()或者vectorsource().getFeatureById()

• feature的set(key, value, opt_silent)：

  • 設置key：feature.set("keyName",name)，keyName是字符串，本身根據狀況設置

  • 獲取key：以前設置的什麼，就獲取什麼，feature.get("keyName")，會獲得設置的值

2)Style

矢量特徵呈現樣式的容器。在從新呈現使用樣式的特性或圖層以前，經過set*()方法對樣式及其子元素所作的任何更改都不會生效。

new ol.style.Style({ geometry:new ol.geom.LineString(),//有以上ol.geom模塊的幾何圖形能夠參考
    fill:new ol.style.Fill({//填充樣式
        color:color//顏色、漸變或圖案
 }), image:new ol.style.Image({//圖像
        opacity:,//數值
        rotateWithView:,//布爾值
        rotation:,//數值
        scale://數值
 }), image:new ol.style.Icon({//可使用圖片資源
        anchor:[0.5，0.5]，//錨。默認值是圖標中心 默認值是[0.5,0.5]
        anchorOrigin:'top-left',//錨的原點:左下角、右下角、左上方或右上方。默認是左上
        anchorXUnits:'fraction',//指定錨點x值的單位。'fraction'的值表示x值是圖標的'fraction'。'pixels'的值表示像素中的x值,默認爲'fraction'
        anchorYUnits:'fraction',//指定錨點y值的單位。'fraction'的值表示y值是圖標的'fraction'。'pixels'的值表示像素中的y值,默認爲'fraction'
        color:color,//顏色、漸變或圖案
 crossOrigin:, img:,//圖標的圖像對象 若是沒有提供src選項，則必須已經加載了提供的圖像
        imgSize:,//         offset:[0,0].//偏移值，默認爲[0,0]
        offsetOrigin:'top-left',//偏移量的原點，bottom-left, bottom-right, top-left or top-right. 默認是`top-left`
        opacity:1,//默認是1 （0，1）
        scale:1,//默認是1
        rotation：0，//以弧度旋轉(順時針方向正旋轉) 默認爲0
        size：,//圖標大小(以像素爲單位)。可與偏移量一塊兒用於定義要從原點(sprite)圖標圖像使用的子矩形
        src:'',//圖像URL源
        rotateWithView：false,//是否旋轉視圖中的圖標 默認爲false 
 }), stroke:new ol.style.Stroke({//描繪
        width: ,//寬
        color:color,//顏色、漸變或圖案
        lineCap:'round',//線帽風格 butt, round, 或者 square 默認 round
        lineJoin:'round',//線鏈接方式 bevel, round, 或者 miter 默認 round
        lineDash： []，//線間隔模式 這個變化與分辨率有關 默認爲undefined Internet Explorer 10和更低版本不支持
        lineDashOffset:0,//線段間隔偏移 默認0
        miterLimit:10,// 默認10 
 }), text:new ol.style.Text({//文字
        font:'',//默認是'10px sans-serif'
        text:'',//文本內容
        textAlign：'center',//文本對齊 'left', 'right', 'center', 'end' 'start'.針對於placement: 'point',默認爲'center'；針對於placement: 'line'，默認是讓渲染器選擇不超過maxAngle的位置
        textBaseline:'middle',//文本基線 'bottom', 'top', 'middle', 'alphabetic', 'hanging', 'ideographic' 默認'middle'
        placement:'',//文本佈置
 scale：， padding:[0,0,0,0],//文本週圍的像素填充。數組中值的順序是[top, right, bottom, left]
        fill:new ol.style.Fill(),//若是未設置，默認未#333
        stroke:new ol.style.Stroke(), offsetX:0,//水平文本偏移量(以像素爲單位)。正值將把文本右移。默認0
        offsetY:0,//垂直文本偏移量(以像素爲單位)。正值會將文本向下移動。默認0
        rotation：0，//默認0
        rotateWithView:false, backgroundFill: ,//當placement:「point」時，填充文本背景的樣式。默認爲無填充 
        backgroundStroke: ,//當placement:「point」時，描繪文本背景的樣式。默認爲無描繪
 }), zIndex:, })

 

ol.geom.Geomtry()是矢量幾何對象的抽象基類，一般只用於建立子類，而不是在應用程序中實例化。它的方法以下：

方法	功能
set(key, value)	設置值。key：關鍵名字（字符串）；value：值
get(key)	獲取值
setProperties(values, opt_silent)	設置鍵值對的集合。注意，這將更改任何現有屬性並添加新屬性(它不會刪除任何現有屬性)。
getProperties()	獲取一個包含全部屬性名和值的對象
getClosestPoint(point, opt_closestPoint)	將幾何圖形的最近點做爲座標返回到通過的點
getExtent(opt_extent)	獲取幾何的範圍
getKeys()	獲取對象屬性名稱列表
getRevision()	獲取此對象的版本號。每次修改對象時，它的版本號都會增長。
intersectsCoordinate(coordinate)	若是該幾何圖形包含指定的座標，則返回true。若是座標位於幾何圖形的邊界上，則返回false
rotate(angle, anchor)	圍繞給定的座標旋轉幾何圖形。這將修改現有的幾何座標
scale(sx, opt_sy, opt_anchor)	縮放幾何圖形(可選原點)。這將修改現有的幾何座標。sx：x方向上的縮放因子；sy：Y軸上的縮放因子；opt_anchor`：縮放原點(默認爲幾何範圍的中心)
simplify(tolerance)	建立這個幾何圖形的簡化版本
transform(source, destination)	將圓的每一個座標從一個座標系變換到另外一個座標系。在適當的位置修改幾何圖形。若是不想修改幾何圖形，請首先clone()它，而後在克隆上使用此函數。在內部，一個圓目前由兩點表示:圓心[cx, cy]和圓心右邊的點[cx + r, cy]。這個transform函數只變換這兩點。因此獲得的幾何形狀也是一個圓，而這個圓並不等同於經過變換原圓的每一點獲得的形狀
translate(deltaX, deltaY)	翻轉幾何圖形。這將修改現有的幾何座標。若是您想要一個新的幾何體，那麼首先clone()這個幾何體

如下是ol.geom.Geomtry抽象基類建立的常見子類模塊：

1)圓ol.geom.Circle()

方法	功能
applyTransform(transformFn)	對幾何圖形的每一個座標應用一個變換函數。在適當的位置修改幾何圖形。若是不想修改幾何圖形，請首先clone()它，而後在克隆上使用此函數
clone()	把幾何圖形複製一份
getCenter()	返回中心座標
getFirstCoordinate()	返回幾何圖形的第一個座標
getLastCoordinate()	返回幾何圖形的最後一個座標
getLayout()	返回幾何圖形的layout
getRadius()	返回圓的半徑
getType()	獲取這個幾何圖形的類型
intersectsExtent(extent)	測試幾何形狀和通過的區域是否相交，返回布爾值
rotate(angle, anchor)	圍繞給定的座標旋轉幾何圖形。這將修改現有的幾何座標。angle：以弧度爲單位的旋轉角度；anchor：旋轉中心
scale(sx, opt_sy, opt_anchor)	縮放幾何圖形(可選原點)。這將修改現有的幾何座標。sx：x方向上的縮放因子；sy：Y軸上的縮放因子；opt_anchor：縮放原點(默認爲幾何範圍的中心)
setCenter(center)	將圓心設置爲coordinate
setCenterAndRadius(center, radius, opt_layout)	設置圓的中心(coordinate)和半徑(number)
setRadius(radius)	設置圓的半徑。半徑的單位是投影的單位。
transform(source, destination)	將圓的每一個座標從一個座標系變換到另外一個座標系。在適當的位置修改幾何圖形。若是不想修改幾何圖形，請首先clone()它，而後在克隆上使用此函數。在內部，一個圓目前由兩點表示:圓心[cx, cy]和圓心右邊的點[cx + r, cy]。這個transform函數只變換這兩點。因此獲得的幾何形狀也是一個，而這個圓並不等同於經過變換原圓的每一點獲得的形狀
translate(deltaX, deltaY)	f翻轉幾何圖形。這將修改現有的幾何座標。若是您想要一個新的幾何體，那麼首先clone()這個幾何體

2)ol.geom.LineString(coordinates, opt_layout)

new ol.geom.LineString({ coordinate:[],//座標。對於內部使用，平面座標結合opt_layout也能夠接受
    layout: //Layout
})

 

方法	功能
appendCoordinate(coordinate)	將通過的座標追加到linestring的座標裏
applyTransform(transformFn)	對幾何圖形的每一個座標應用一個變換函數。在適當的位置修改幾何圖形。若是不想修改幾何圖形，請首先clone()它，而後在克隆上使用此函數
clone()	把幾何圖形複製一份
forEachSegment(callback)	遍歷每條線段，調用提供的回調函數。若是回調函數返回一個真值，則函數當即返回該值。不然函數返回false
getCoordinateAt(fraction, opt_dest)	沿着線段返回給定部分的座標。fraction是一個介於0和1之間的數字，其中0是線段的開始，1是線段的末尾
getCoordinates()	返回線段的座標
setCoordinates(coordinates, opt_layout)	s設置線段的座標
getFirstCoordinate()	返回幾何圖形的第一個座標
getLastCoordinate()	返回幾何圖形的最後一個座標
getLayout()	返回幾何圖形的Layout
getLength()	在投影平面上返回線段的長度
getType()	獲得這個幾何圖形的類型
intersectsExtent(extent)	測試幾何形狀和經過的範圍是否相交
rotate(angle, anchor)	圍繞給定的座標旋轉幾何圖形。這將修改現有的幾何座標
scale(sx, opt_sy, opt_anchor)	縮放幾何圖形(可選原點)。這將修改現有的幾何座標。sx：x方向上的縮放因子；sy：Y軸上的縮放因子；opt_anchor`：縮放原點(默認爲幾何範圍的中心)
translate(deltaX, deltaY)	翻轉幾何圖形。這將修改現有的幾何座標。若是您想要一個新的幾何體，那麼首先clone()這個幾何體

3)ol.geom.Point(coordinates, opt_layout)

new ol.geom.Point()

 

方法	功能
applyTransform(transformFn)	對幾何圖形的每一個座標應用一個變換函數。在適當的位置修改幾何圖形。若是不想修改幾何圖形，請首先clone()它，而後在克隆上使用此函數
clone()	把幾何圖形複製一份
getCoordinates()	返回點的座標
setCoordinates(coordinates, opt_layout)	設置點的座標
getFirstCoordinate()	返回幾何圖形的第一個座標
getLastCoordinate()	返回幾何圖形的最後一個座標
getLayout()	返回幾何圖形的Layout
getType()	獲得這個幾何圖形的類型
intersectsExtent(extent)	測試幾何形狀和經過的範圍是否相交
rotate(angle, anchor)	圍繞給定的座標旋轉幾何圖形。這將修改現有的幾何座標
scale(sx, opt_sy, opt_anchor)	縮放幾何圖形(可選原點)。這將修改現有的幾何座標。sx：x方向上的縮放因子；sy：Y軸上的縮放因子；opt_anchor`：縮放原點(默認爲幾何範圍的中心)
translate(deltaX, deltaY)	翻轉幾何圖形。這將修改現有的幾何座標。若是您想要一個新的幾何體，那麼首先clone()這個幾何體

(4)ol.geom.Polygon()

多邊形幾何圖形。

new ol.geom.Polygon({ coordinates:[],//定義多邊形的線性環的數組
 layout:, ends:[],//末端（平面座標內部使用）
})

 

方法	功能
applyTransform(transformFn)	對幾何圖形的每一個座標應用一個變換函數。在適當的位置修改幾何圖形。若是不想修改幾何圖形，請首先clone()它，而後在克隆上使用此函數
appendLinearRing(linearRing)	在多邊形上追加線性環
clone()	把幾何圖形複製一份
getCoordinates()	返回點的座標
setCoordinates(coordinates, opt_layout)	設置點的座標
getFirstCoordinate()	返回幾何圖形的第一個座標
getLastCoordinate()	返回幾何圖形的最後一個座標
getInteriorPoint()	返回多邊形的內部點
getLinearRing(index)	返回多邊形幾何的第n個線性環。若是給定索引超出範圍，則返回null。外部線性環在索引0處可用，而內部環在索引1及以上處可用
getLinearRings()	返回多邊形的線性環
getLinearRingCount()	返回多邊形的環數，這包括外部環和任何內部環
getLayout()	返回幾何圖形的Layout
getType()	獲得這個幾何圖形的類型
getArea()	返回投影平面上多邊形的面積
intersectsExtent(extent)	測試幾何形狀和經過的範圍是否相交
rotate(angle, anchor)	圍繞給定的座標旋轉幾何圖形。這將修改現有的幾何座標
scale(sx, opt_sy, opt_anchor)	縮放幾何圖形(可選原點)。這將修改現有的幾何座標。sx：x方向上的縮放因子；sy：Y軸上的縮放因子；opt_anchor`：縮放原點(默認爲幾何範圍的中心)
translate(deltaX, deltaY)	翻轉幾何圖形。這將修改現有的幾何座標。若是您想要一個新的幾何體，那麼首先clone()這個幾何體

(4)ol.layer.VectorTile()

矢量平鋪圖層。

圖層用於客戶端呈現矢量平鋪數據。

new ol.layer.Vector({//如下爲圖層的屬性選項， 均可設置，因此皆有getter/setter
    opacity:2,//透明度 區間範圍爲(0, 1) 默認爲1
    visible:true,//顯示屬性 布爾值 默認爲true
    extent:[],//圖層渲染的邊界範圍。該層將不會在此範圍以外呈現
    zIndex:2,//圖層渲染的索引層級。在渲染時，圖層將被排序，首先是z-idnex，而後是位置，當爲undefined時，對於添加到映射的layers集合中的層，zIndex爲0，或者當使用該層的setMap()方法時，zIndex爲無窮大
    minResolution:3,//該層可見的最小分辨率(包括在內)
    maxResolution:6,//該層可見的最大分辨率（包括在內）
    renderOrder:,//呈現順序。函數用於在呈現前對特性進行排序。默認狀況下，特性是按照建立它們的順序繪製的。使用null來避免排序，可是獲得一個未定義的繪製順序
    renderBuffer:100,//默認爲100 緩衝區
    renderMode:'vector',//默認爲'vector' 矢量圖層的渲染模式
    source:new ol.source.VectorSource(),//圖層源
    map: ,//把圖層覆蓋在地圖上，地圖不會在它的圖層集合中管理這個圖層，這個圖層將被呈如今頂部，這對於臨時層很是有用
    declutter:false,//默認爲false 整理圖片和文字。清理應用於全部圖像和文本樣式，優先級由樣式的z-index定義。z-index指數越低，優先級越高
    style:new ol.style.Style(),//圖層樣式
    updateWhileAnimating:false,//默認爲false 
    updateWhileInteracting:false,//默認爲false
    preload:,//
    renderOrder:,//
    useInterimTilesOnError:true,//錯誤時使用臨時貼片 默認true
})

 

三、視圖view

設置視圖view由三種狀態決定：center中心、resolution分辨率、rotation旋轉，每一個狀態都有相應的getter和setter。

能夠在視圖裏定義地圖中心點、層級、分辨率、旋轉以及地圖投影等。

視圖對象受到約束，主要有分辨率約束、旋轉約束、中心約束。

分辨率約束切換到特定分辨率時，特定分辨率主要由如下選項決定：resolutions、maxResolution、maxZoom、zoomFactor。若是已經設置resolutions，其餘選項就可忽略。

旋轉約束會切換到特定的角度。它由如下選項決定:enableRotation和constrainRotation。在默認狀況下，當接近水平線時，旋轉值會忽然變爲零。

中心約束由範圍選項決定。默認狀況下，中心徹底不受約束。

(1)視圖選項

1)中心點center

視圖的初始中心，中心的座標系由投影projection指定，若是未設置此參數，則不會獲取層源，可是以後可使用#setCenter設置中心。

let center = ol.proj.fromLonLat([longitude, latitude]);//未限制地圖範圍時
let center = ol.proj.transform([minX, minY, maxX, maxY]，'EPSG:4326', 'EPSG:3857');//限制地圖顯示範圍時設置中心點 X表明經度， Y表明緯度

 

ol.proj.transform([], "EPSG:", "EPSG:")是經緯度投影轉換

• 獲取中心：map.getView().getCenter()

• 設置中心：map.getView().setCenter(center)

2)投影projection

視圖擁有projection投影，投影決定了中心的座標系，其單位決定了分辨率的單位(每一個像素的投影單位)。默認投影爲球面墨卡託(EPSG:3857)。

• 獲取投影：map.getView().getProjection()

• 設置投影：map.getView().setProjection()

3)分辨率resolution

視圖的初始分辨率，單位是每像素的投影單位(例如米每像素)。

另外一種方法是設置縮放zoom。縮放能夠設置：最大層級maxZoom、最小層級minZoom以及當前層級zoom

let view = new ol.View({ // center: center,
 zoom: curZoom, minZoom: minZoom, maxZoom: maxZoom, });

 

• 獲取分辨率：map.getView().getResolution()

• 獲取給定範圍(以映射單元爲單位)和大小(以像素爲單位)的分辨率：map.getView().getResolutionForExtent(extent, opt_size)；

• 獲取縮放級別的分辨率：map.getView().getResolutionForZoom(zoom)；

• 獲取視圖最大值分辨率：map.getView().getMaxResolution()；

• 獲取視圖最小值分辨率：map.getView().getMinResolution()；

• 設置分辨率：map.getView().setResolution(resolution)

4)旋轉rotation

初始旋轉角度爲弧度(正順時針旋轉，0表示向北)。

• 獲取旋轉調用方法map.getView().getRotation()；

• 設置旋轉調用方法map.getView().setRotation(rotation);

5)縮放zoom

僅在未定義分辨率時使用。

縮放級別用於計算視圖的初始分辨率。初始分辨率是使用#constrainResolution方法肯定的。

• 獲取縮放層級：map.getView().getZoom()；

• 獲取最大縮放層級：map.getView().getMaxZoom()；

• 獲取最小縮放層級：map.getView().getMinZoom()；

• 獲取縮放層級的分辨率：map.getView().getZoomForResolution(resolution)；

• 設置縮放層級：map.getView().setZoom(zoom)；

• 設置最大縮放層級：map.getView().setMaxZoom(zoom)；

• 設置最小縮放層級：map.getView().setMinZoom(zoom)；

6)旋轉約束constrainRotation

旋轉約束。false爲未約束，true爲未約束可是接近於0。數字限制了旋轉到該值的數量。

7)啓用旋轉enableRotation

若是爲false，則始終使用將旋轉設置爲零的旋轉約束。若是啓用爲false，則沒有效果。

8)約束範圍extent

中心點不能超出這個範圍。

(2)視圖方法

1)動畫animate(var_args)

單個動畫

動畫視圖。視圖的中心、縮放(或分辨率)和旋轉能夠經過動畫來實現視圖狀態之間的平滑轉換。

默認狀況下，動畫持續時間爲1秒，而且類型爲in-and-out easing。

經過設置持續時間duration(以毫秒爲單位)和緩動選項easing(參見模塊:ol/easing)來定製此行爲。

easing:

• easeIn：平緩加速

• easeOut：平緩減速

• inAndOut：平緩開始，先加速，再減速

• linear：勻速

• upAndDown：平緩開始，加速，最後再減速。這與模塊的通常行爲相同:ol/easing~inAndOut，可是最終的減速被延遲了

多個動畫

要將多個動畫鏈接在一塊兒，請使用多個動畫對象調用該方法。

若是提供一個函數做爲animate方法的最後一個參數，它將在動畫系列的末尾被調用。

若是動畫系列獨立完成，回調函數將被調用true;若是動畫系列被取消，回調函數將被調用false。

取消動畫

動畫經過用戶交互(例如拖動地圖)或調用view.setCenter()、view.setResolution()或view.setRotation()(或調用其中一個方法的另外一個方法)來取消。

2)取消動畫cancelAnimations()

取消任何正在進行的動畫。

(3)getAnimating()

肯定視圖是否處於動畫狀態。返回布爾值。

4)計算範圍calculateExtent(opt_size)

計算當前視圖狀態的範圍和傳遞的大小。opt_size指盒子像素尺寸，如未提供，將使用此視圖的第一個映射的大小。

尺寸是盒子的像素尺寸，計算的範圍應該與之匹配。

想要獲取整個底圖映射的範圍，使用map.getSize()

5)centerOn(coordinate, size, position)

以座標和視圖位置爲中心。

• coordinate：座標點

• size：盒子像素尺寸

• position：視圖的居中位置

四、交互動做interaction

一般只用於建立子類，而不在應用程序中實例化。

用於更改映射狀態的用戶操做。有些相似於控件，但不與DOM元素關聯。

雖然交互沒有DOM元素，可是它們中的一些會呈現向量，所以在屏幕上是可見的。

添加交互動做使用：map.addInteraction(interaction);

參考於此

OpenLayers 中可實例化的子類及其功能以下：

可實例化子類	功能
doubleclickzoom interaction	雙擊放大交互功能
draganddrop	以「拖文件到地圖中」的交互添加圖層
dragbox	拉框，用於劃定一個矩形範圍，經常使用於放大地圖
dragpan	拖拽平移地圖
dragrotateandzoom	拖拽方式進行縮放和旋轉地圖
dragrotate	拖拽方式旋轉地圖
dragzoom	拖拽方式縮放地圖
draw	繪製地理要素功能
interaction defaults	默認添加的交互功能
keyboardpan	鍵盤方式平移地圖
keyboardzoom	鍵盤方式縮放地圖
select	選擇要素功能
modify	更改要素
mousewheelzoom	鼠標滾輪縮放功能
pinchrotate	手指旋轉地圖，針對觸摸屏
pinchzoom	手指進行縮放，針對觸摸屏
pointer	鼠標的用戶自定義事件基類
snap	鼠標捕捉，當鼠標距離某個要素必定距離以內，自動吸附到要素

(1)默認交互功能ol.interaction.defaylts()

主要是最爲經常使用的功能，如縮放、平移和旋轉地圖等，具體功能有以下這些：

默認交互	功能
ol.interaction.DragRotate	鼠標拖拽旋轉，通常配合一個鍵盤按鍵輔助
ol.interaction.DragZoom	鼠標拖拽縮放，通常配合一個鍵盤按鍵輔助
ol.interaction.DoubleClickZoom	鼠標或手指雙擊縮放地圖
ol.interaction.PinchRotate	兩個手指旋轉地圖，針對觸摸屏
ol.interaction.PinchZoom	兩個手指縮放地圖，針對觸摸屏
ol.interaction.DragPan	鼠標或手指拖拽平移地圖
ol.interaction.KeyboardZoom	使用鍵盤 + 和 - 按鍵進行縮放
ol.interaction.KeyboardPan	使用鍵盤方向鍵平移地圖
ol.interaction.MouseWheelZoom	鼠標滾輪縮放地圖

(2)針對矢量圖層元素的交互功能

1）選擇ol.interaction.Select()

選擇矢量元素的交互功能。

默認狀況下，所選矢量元素的樣式不相同，所以這種交互能夠用於可視化高亮顯示，以及爲其餘操做(如修改或輸出)選擇特性。

選定的矢量元素將被添加到內部非託管圖層。

有三種方式控制矢量元素的選擇：

• 使用由condition定義的瀏覽器事件和toggle切換的add/remove以及multi選項

• 一個layer過濾器

• 一個使用filter選項的進一步矢量元素過濾器

2)繪製ol.interaction.Draw()

用於繪製特徵幾何圖形的交互功能。

繪製交互容許繪製幾何地理要素，可選一個參數爲對象，可包含參數以下：

• features：繪製的要素的目標集合；

• source：繪製的要素的目標圖層源；

• snapTolerance：自動吸附完成點的像素距離，也就是說當鼠標位置距離閉合點小於該值設置的時候，會自動吸附到閉合點，默認值是 12；

• type：繪製的地理要素類型，ol.geom.GeometryType類型，包含 Point、 LineString、 Polygon、MultiPoint、MultiLineString 或者 MultiPolygon；

• minPointsPerRing：繪製一個多邊形須要的點數最小值，數值類型，默認是 3；

• style：要素素描的樣式；

• geometryName：繪製的地理要素的名稱，string類型

3)修改ol.interaction.Modify()

用於修改矢量元素幾何圖形的交互功能。

若想修改已添加到存在的矢量源中的矢量元素，須要使用modify選項構建修改交互動做。

如若想修改集合中的矢量元素（好比用選擇交互的集合），須要使用features選項構建交互。該交互必須使用source或者features構建。

默認狀況下，當按下alt鍵時，交互容許刪除頂點。想要使用不一樣的刪除條件配置交互，請使用deleteCondition選項。

五、控件Control

控件是一個可見的小部件，其DOM元素位於屏幕上的固定位置。它們能夠包含用戶輸入(按鈕)，或者只是提供信息;位置是使用CSS肯定的。這是一個虛基類，不負責實例化特定的控件。

默認狀況下，這些元素被放置在具備CSS類名稱ol-overlaycontainer-stopevent的容器中，可是可使用任何外部DOM元素。

let myControl = new ol.control.Control({//定義一個控件
 element:myElement }) //而後添加到地圖上
map.addControl(myControl);

 

主要的屬性選項有：

• element：DOM元素，元素是控件的容器元素。只有在開發自定義控件時才須要指定這一點

• render：從新呈現控件時調用的函數。這在requestAnimationFrame回調中調用

• target：DOM元素，想要控件在映射的視圖端口以外呈現，須要指定目標對象

其中包含的控件有：

控件	功能
controldefaults	地圖默認包含的控件，包含縮放控件和旋轉控件
fullscreencontrol	全屏控件，用於全屏幕查看地圖
mousepositioncontrol	鼠標位置控件，顯示鼠標所在地圖位置的座標，能夠自定義投影
overviewmapcontrol	地圖全局視圖控件
rotatecontrol	地圖旋轉控件
scalelinecontrol	比例尺控件
zoomcontrol	縮放控件
zoomslidercontrol	縮放刻度控件
zoomtoextentcontrol	縮放到全局控件

六、疊加層Overlay

要顯示在地圖上方並附加到單個地圖位置的元素。與控件不一樣的是，它們不在屏幕上的固定位置，而是綁定到地理座標上，所以平移地圖將移動 overlay ，而不是控件。

<div id="map">
    <div id="popup">
        
    </div>
</div>

let popup = new ol.Overlay({ element:document.getElementById('popup'), ... }); popup.setPosition(coordinate); map.addOverlay(popup);

Overlay選項

(1)id

設置 overlay的 id，字符串類型。

• 獲取id：map.getOverlayById(id)或者overlay.getId()

(2)element

overlay 元素，DOM元素

• 獲取：overlay.getElement()

• 設置：overlay.setElement(element)

(3)offset

偏移量(以像素爲單位)，用於定位 overlay ，數組類型，默認爲[0, 0]：

• 數組第一個元素爲水平偏移，正右負左；

• 數組第二個元素爲垂直，正下負上；

• 獲取偏移值：overlay.getOffset()

• 設置偏移值：overlay.setOffset(offset)

(4)position

地圖投影中的位置。

• 獲取：overlay.getPosition()

• 設置：overlay.setPosition(position)，若是位置未定義undefined，則覆蓋被隱藏。

(5)positioning

定義 overlay 相對於其位置屬性的實際位置，默認爲top-left，還有'bottom-left', 'bottom-center', 'bottom-right', 'center-left', 'center-center', 'center-right', 'top-left','top-center', and 'top-right'.

• 獲取：overlay.getPositioning()

• 設置：overlay.setPositioning(positioning)

(6)autoPan

默認爲false，若是設置爲true，則在調用setPosition將平移映射，以便在當前視圖中 overlay 徹底可見。

(7)autoPanAnimation

動畫選項用於平移 overlay 到視圖中。此動畫僅在啓用autoPan時使用。能夠提供一個持續時間和緩動來定製動畫。

(8)stopEvent

默認爲true，是否應該中止到map視圖端口的事件傳播。

• 若是爲true，則將 overlay 放置在與控件相同的容器中（CSS class nameol-overlaycontainer-stopevent）

• 若是爲false，它用className屬性指定的CSS類名放置在容器中。

(9)className

CSS class name.

(10)autoPanMargin

地圖自動平移時，地圖邊緣與 overlay 的留白（空隙），單位是像素，默認是 20像素

七、投影Projections

須要給全部座標和範圍提供視圖投影系（默認是EPAG:3857）。

轉換投影系，使用ol.proj.transform()和ol.proj.transformExtendt進行轉換

(1）、ol.proj

1）ol.proj.addCoordinateTransforms(source, destination, forward, inverse)

註冊座標轉換函數來轉換源投影和目標投影之間的座標。正、反函數轉換座標對;此函數將這些轉換爲內部使用的處理區段和座標數組的函數

• source：源投影

• destination：目標投影

• forward：接受ol的正向變換函數(即從源投影到目標投影)。做爲參數，並返回轉換後的ol.Coordinate

• inverse：接受ol的逆變換函數(即從目標投影到源投影)。做爲參數，並返回轉換後的ol.Coordinate

2)ol.proj.addEquivalentProjections(projections)

註冊不改變座標的轉換函數。它們容許在具備相同含義的投影之間進行轉換。

3）ol.proj.addProjection(projection)

將投影對象添加到受支持的投影列表中，這些投影能夠經過它們的SRS碼進行查找。

4)ol.proj.equivalent(projection1, projection2)

檢查兩個投影是否相同，即一個投影中的每一個座標確實表示另外一個投影中的相同地理點。

5)ol.proj.fromLonLat(coordinate, opt_projection)

將經緯度座標轉換爲不一樣的投影

• coordinate：經緯度數組，經度在前，緯度在後

• projection：目標投影。默認是Web Mercator，即「EPSG: 3857」

6)ol.proj.get(projectionLike)

獲取指定代碼的投影對象。

7)ol.proj.getTransform(source, destination)

給定相似於投影的對象，搜索轉換函數將座標數組從源投影轉換爲目標投影。

8)ol.proj.setProj4(proj4)

proj4註冊。若是沒有顯式註冊，則假定proj4js將加載在全局名稱空間中

ol.proj.setProj4(proj4);

9)ol.proj.toLonLat(coordinate, opt_projection)

將座標轉換爲經度/緯度

• coordinate：投影座標

• projection：座標的投影，默認是Web Mercator，即「EPSG: 3857」

10)ol.proj.transform(coordinate, source, destination)

將座標從源投影轉換爲目標投影，這將返回一個新的座標(而且不修改原始座標)。

• coordinate：座標

• source：源投影

• destination：目標投影

11)ol.proj.transformExtent

將範圍從源投影轉換爲目標投影，這將返回一個新範圍(而且不修改原始範圍)。

12)ol.proj.Units{string}

投影單位：'degrees', 'ft', 'm', 'pixels', 'tile-pixels' or 'us-ft'