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配置在檢測中包含的層。

2、圖層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
})

 

3、視圖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：視圖的居中位置

4、交互動作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選項。

5、控件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	縮放到全局控件

6、疊加層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像素

7、投影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'