發(fā)布于 2019-09-05
一、創(chuàng)建地圖
1、地圖Map
創(chuàng)建地圖底圖：需要用new ol.Map({})
地圖map是由圖層layers、一個可視化視圖view、用于修改地圖內(nèi)容的交互interaction以及使用UI組件的控件control組成的。
（1）、創(chuàng)建基本地圖
letmap =newol.Map({target:'map',//對象指向layers: [//圖層newol.layer.Tile({//這里定義的是平鋪圖層source:newol.source.OSM()//圖層源 定義圖層映射協(xié)議})? ? ],view:newol.View({//視圖center: ol.proj.fromLonLat([37.41,8.82]),//地圖中心zoom:4//縮放層級})? });
（2）、屬性選項
newol.Map({target:'map',//對象映射：要將`map`對象附加到div，` map`對象將`target`作為參數(shù)，值是`div`的`id`layers: [//圖層newol.layer.Tile({//這里定義的是平鋪圖層source:newol.source.OSM()//圖層源 定義圖層映射協(xié)議})? ? ],view:newol.View({//視圖center: ol.proj.fromLonLat([37.41,8.82]),//地圖中心zoom:4//縮放層級}),controls:[//最初添加到映射中的控件? 如未設(shè)置 使用默認控件newol.control.Control({element:,//元素是控件的容器元素(DOM)。只有在開發(fā)自定義控件時才需要指定這一點render: ,//控件重新呈現(xiàn)時調(diào)用的函數(shù)target://如果想在映射的視圖端口之外呈現(xiàn)控件，指定目標})? ? ],interactions:[//最初添加到映射中的交互 如未設(shè)置 使用默認交互newol.interaction.Interaction({? ? ? ? ? ? handleEvent? ? ? ? })? ? ],overlays:[newol.Overlay()? ? ],maxTilesLoading:16,//同時加載的最大瓷磚數(shù) 默認16loadTilesWhileAnimating:false,//loadTilesWhileInteracting:false,//? moveTolerance:1,//光標必須移動的最小距離(以像素為單位)才能被檢測為map move事件，而不是單擊。增加這個值可以使單擊地圖變得更容易pixelRatio:window.devicePixelRatio,//keyboardEventTarget:,//要監(jiān)聽鍵盤事件的元素})
（3）、地圖事件
地圖事件含義
click無拖動單擊
dblclick無拖動雙擊
moveend移動地圖結(jié)束時
movestart移動地圖開始時
pointerdrag當拖動指針時觸發(fā)
pointermove當指針移動時觸發(fā)。注意，在觸摸設(shè)備上，這是在地圖平移時觸發(fā)的，因此與mousemove不同
postcompose
postrender在映射幀呈現(xiàn)后觸發(fā)
precompose
propertychange當屬性被更改時觸發(fā)
rendercomplete渲染完成時觸發(fā)，即當前視圖的所有源和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)檢測與視圖端口上的像素相交的特性，并對每個相交的特性執(zhí)行回調(diào)。檢測中包含的層可以通過opt_options中的layerFilter選項配置
forEachLayerAtPixel(pixel, callback, opt_options)檢測在視圖端口上的像素處具有顏色值的層，并對每個匹配的層執(zhí)行回調(diào)。檢測中包含的層可以通過opt_layerFilter配置
getControls()獲取地圖控件
getCoordinateFromPixel(pixel)獲取給定像素的坐標。這將返回地圖視圖投影中的坐標。
getEventCoordinate(event)返回瀏覽器事件的視圖投影中的坐標
getEventPixel(event)返回瀏覽器事件相對于視圖端口的地圖像素位置
getFeaturesAtPixel(pixel, opt_options)獲取視圖端口上與像素相交的所有特性
getInteractions()獲取地圖交互
getLayerGroup()獲取與此地圖關(guān)聯(lián)的圖層組
setLayerGroup(layerGroup)設(shè)置與此地圖關(guān)聯(lián)的圖層組
getLayers()獲取與此地圖關(guān)聯(lián)的圖層的集合
getOverlayById(id)通過其標識符獲取覆蓋(overlay. getId()返回的值)。注意，索引將字符串和數(shù)字標識符視為相同的。getoverlaybyid(2)將返回id為2或2的疊加層。
getOverlays()獲得地圖疊加
getPixelFromCoordinate(coordinate)獲取坐標的像素。它接受地圖視圖投影中的坐標并返回相應(yīng)的像素
getSize()獲取地圖尺寸
setSize(size)s設(shè)置地圖尺寸
getTarget()獲取呈現(xiàn)此映射的目標。注意，這將返回作為選項或setTarget中輸入的內(nèi)容。如果這是一個元素，它將返回一個元素;如果是字符串，它會返回這個字符串
setTarget(target)設(shè)置要將地圖呈現(xiàn)的目標元素
getTargetElement()獲取呈現(xiàn)此映射的DOM元素。與getTarget相反，這個方法總是返回一個元素，如果映射沒有目標，則返回null
getView()獲取地圖視圖。視圖管理中心和分辨率等屬性。
setView(view)設(shè)置地圖視圖
getViewport()獲取作為map視圖端口的元素
hasFeatureAtPixel(pixel, opt_options)檢測在viewport上是否與一個像素相交。可以通過opt_layerFilter配置在檢測中包含的層。
2、圖層Layers
定義圖層：地圖圖層layers:[...]組定義映射中可用的圖層組，用來盛放地圖上的各種元素，其在地圖上的顯示順序是按照數(shù)組中元素序列從下到上呈現(xiàn)的，可以直接在創(chuàng)建地圖時定義圖層，多個圖層的時候可以單獨定義。
constlayer =newol.layer.Vector({//這里定義的是圖層類型(Image/Title/Vector)source:newol.source.Vector(),//矢量圖層源? 源是用于獲取映射塊的協(xié)議【必須】style:[],//圖層樣式 【必須】feature:[],//圖層元素 【必須】})
添加指定圖層：map.addLayer(layer)；
移除指定圖層：map.removeLayer(layer)；
圖層是輕量級容器，從數(shù)據(jù)源Source獲取數(shù)據(jù)。
Sourced子類分別有，分別對應(yīng)不同圖層類：
ol.source.ImageSource()
ol.source.TileSource()
ol.source.VectorSource()
Source主要有以下屬性選項：
newol.source.VectorSource({attributions:,//attributionsCollapsible:,//布爾值? 默認為true projection:,//投影系state:'ready',//默認為'ready'wrapX:false,//默認為false})
ol.layer.Tile()和ol.layer.Image()圖層類都具有相同的屬性如下：
newol.layer.Tile/Image({//以下為圖層的屬性選項， 都可設(shè)置，所以皆有g(shù)etter/setteropacity:2,//透明度 區(qū)間范圍為(0, 1) 默認為1visible:true,//顯示屬性 布爾值 默認為trueextent:[],//圖層渲染的邊界范圍。該層將不會在此范圍之外呈現(xiàn)zIndex:2,//圖層渲染的索引層級。在渲染時，圖層將被排序，首先是z-idnex，然后是位置，當為undefined時，對于添加到映射的layers集合中的層，zIndex為0，或者當使用該層的setMap()方法時，zIndex為無窮大minResolution:3,//該層可見的最小分辨率(包括在內(nèi))maxResolution:6,//該層可見的最大分辨率（包括在內(nèi)）repload:0,//預加載。將低分辨率瓦片加載到預加載級別。0表示沒有預加載 默認為0source:newol.source.TileSource()/ImageSource(),//圖層源map:? ,//把圖層覆蓋在地圖上，地圖不會在它的圖層集合中管理這個圖層，這個圖層將被呈現(xiàn)在頂部，這對于臨時層非常有用。})
(1)ol.layer.Tile()
平鋪圖層。
對于提供預呈現(xiàn)、平鋪的網(wǎng)格圖像的層源，這些網(wǎng)格按特定分辨率的縮放級別組織。
(2)ol.layer.Image()
圖像圖層。
服務(wù)器呈現(xiàn)的映像，可用于任意范圍和分辨率。
(3)ol.layer.Vector()
矢量圖層。
在客戶端呈現(xiàn)矢量數(shù)據(jù)，其屬性具備getter和setter
newol.layer.Vector({//以下為圖層的屬性選項， 都可設(shè)置，所以皆有g(shù)etter/setteropacity:2,//透明度 區(qū)間范圍為(0, 1) 默認為1visible:true,//顯示屬性 布爾值 默認為trueextent:[],//圖層渲染的邊界范圍。該層將不會在此范圍之外呈現(xiàn)zIndex:2,//圖層渲染的索引層級。在渲染時，圖層將被排序，首先是z-idnex，然后是位置，當為undefined時，對于添加到映射的layers集合中的層，zIndex為0，或者當使用該層的setMap()方法時，zIndex為無窮大minResolution:3,//該層可見的最小分辨率(包括在內(nèi))maxResolution:6,//該層可見的最大分辨率（包括在內(nèi)）renderOrder:,//呈現(xiàn)順序。函數(shù)用于在呈現(xiàn)前對特性進行排序。默認情況下，特性是按照創(chuàng)建它們的順序繪制的。使用null來避免排序，但是得到一個未定義的繪制順序renderBuffer:100,//默認為100 緩沖區(qū)renderMode:'vector',//默認為'vector' 矢量圖層的渲染模式source:newol.source.VectorSource(),//圖層源map:? ,//把圖層覆蓋在地圖上，地圖不會在它的圖層集合中管理這個圖層，這個圖層將被呈現(xiàn)在頂部，這對于臨時層非常有用declutter:false,//默認為false 整理圖片和文字。清理應(yīng)用于所有圖像和文本樣式，優(yōu)先級由樣式的z-index定義。z-index指數(shù)越低，優(yōu)先級越高style:newol.style.Style(),//圖層樣式updateWhileAnimating:false,//默認為false updateWhileInteracting:false,//默認為false})
其中渲染模式有兩種：
'image'：矢量圖層被渲染為圖像。性能很好，但是點符號和文本總是隨著視圖旋轉(zhuǎn)，像素在縮放動畫中縮放
'vector'：矢量圖層被呈現(xiàn)為向量。即使在動畫期間也有最準確的渲染，但性能較慢
1)Feature
用于地理特征的矢量元素，具有幾何geometry()和其他屬性，類似于矢量文件格式(如GeoJSON)中的特性。
添加矢量元素：通過vectorsource().addFeature(feature)添加到矢量圖層上。
移除圖層所有的矢量元素：vectorsource().clear()
letfeature =newol.Feature({geometry:newol.geom.Polygon(polyCoords),labelPoint:newol.geom.Point(labelCoords),style:newol.style.Style({}),name:'My Polygon'});
定義矢量元素：new ol.Feature()，；
矢量元素樣式：
設(shè)置樣式：new ol.style.Style()，也可以使用feature.setStyle(style)，未定義的話，可以使用它的盛放容器layer的樣式；
獲取樣式：feature.getStyle()
一個feature只有一個默認幾何屬性geometry，可以有任意數(shù)量的命名幾何圖形：
獲取默認幾何屬性：feature.getGeometry()；
設(shè)置幾何屬性：feature.setGeometry(geometry)；
設(shè)置幾何屬性名：feature.setGeometryName(name)；
矢量元素要呈現(xiàn)的幾何圖形的特征屬性、幾何圖形或函數(shù)由geometry屬性選項設(shè)定，主要有以下幾種子類模塊：
ol.geom.Circle()：圓形
ol.geom.Geometry()：幾何圖形
ol.geom.GeometryCollection()：
ol.geom.LinearRing()：環(huán)線
ol.geom.LineString()：線段
ol.geom.Point()：點
ol.geom.Polygon()：多邊形
ol.geom.MultiLineString()
ol.geom.MultiPoint()
ol.geom.MultiPolygon()
ol.geom.SimpleGeometry()
feature的穩(wěn)定標識符ID：
設(shè)置feature的id：feature.setId(id)，當id可能相同時，可以這樣加以區(qū)分
feature.setId(id +?"featureName");
獲取feature的id：vector.getSource().getFeatureById()或者vectorsource().getFeatureById()
feature的set(key, value, opt_silent)：
設(shè)置key：feature.set("keyName",name)，keyName是字符串，自己根據(jù)情況設(shè)置
獲取key：之前設(shè)置的什么，就獲取什么，feature.get("keyName")，會得到設(shè)置的值
2)Style
矢量特征呈現(xiàn)樣式的容器。在重新呈現(xiàn)使用樣式的特性或圖層之前，通過set*()方法對樣式及其子元素所做的任何更改都不會生效。
newol.style.Style({geometry:newol.geom.LineString(),//有以上ol.geom模塊的幾何圖形可以參考fill:newol.style.Fill({//填充樣式color:color//顏色、漸變或圖案}),image:newol.style.Image({//圖像opacity:,//數(shù)值rotateWithView:,//布爾值rotation:,//數(shù)值scale://數(shù)值}),image:newol.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選項，則必須已經(jīng)加載了提供的圖像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,//默認是1rotation：0，//以弧度旋轉(zhuǎn)(順時針方向正旋轉(zhuǎn)) 默認為0size：,//圖標大小(以像素為單位)?？膳c偏移量一起用于定義要從原點(sprite)圖標圖像使用的子矩形src:'',//圖像URL源rotateWithView：false,//是否旋轉(zhuǎn)視圖中的圖標? 默認為false? ? ? ? ? ? }),stroke:newol.style.Stroke({//描繪width: ,//寬color:color,//顏色、漸變或圖案lineCap:'round',//線帽風格? butt, round, 或者 square 默認 roundlineJoin:'round',//線連接方式 bevel, round, 或者 miter 默認 roundlineDash： []，//線間隔模式 這個變化與分辨率有關(guān) 默認為undefined Internet Explorer 10和更低版本不支持lineDashOffset:0,//線段間隔偏移 默認0miterLimit:10,// 默認10? ? ? ? ? ? ? ? ? }),text:newol.style.Text({//文字font:'',//默認是'10px sans-serif'text:'',//文本內(nèi)容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],//文本周圍的像素填充。數(shù)組中值的順序是[top, right, bottom, left]fill:newol.style.Fill(),//如果未設(shè)置，默認未#333stroke:newol.style.Stroke(),offsetX:0,//水平文本偏移量(以像素為單位)。正值將把文本右移。默認0offsetY:0,//垂直文本偏移量(以像素為單位)。正值會將文本向下移動。默認0rotation：0，//默認0rotateWithView:false,backgroundFill:? ,//當placement:“point”時，填充文本背景的樣式。默認為無填充 backgroundStroke: ,//當placement:“point”時，描繪文本背景的樣式。默認為無描繪}),zIndex:,})
ol.geom.Geomtry()是矢量幾何對象的抽象基類，通常只用于創(chuàng)建子類，而不是在應(yīng)用程序中實例化。它的方法如下：
方法功能
set(key, value)設(shè)置值。key：關(guān)鍵名字（字符串）；value：值
get(key)獲取值
setProperties(values, opt_silent)設(shè)置鍵值對的集合。注意，這將更改任何現(xiàn)有屬性并添加新屬性(它不會刪除任何現(xiàn)有屬性)。
getProperties()獲取一個包含所有屬性名和值的對象
getClosestPoint(point, opt_closestPoint)將幾何圖形的最近點作為坐標返回到經(jīng)過的點
getExtent(opt_extent)獲取幾何的范圍
getKeys()獲取對象屬性名稱列表
getRevision()獲取此對象的版本號。每次修改對象時，它的版本號都會增加。
intersectsCoordinate(coordinate)如果該幾何圖形包含指定的坐標，則返回true。如果坐標位于幾何圖形的邊界上，則返回false
rotate(angle, anchor)圍繞給定的坐標旋轉(zhuǎn)幾何圖形。這將修改現(xiàn)有的幾何坐標
scale(sx, opt_sy, opt_anchor)縮放幾何圖形(可選原點)。這將修改現(xiàn)有的幾何坐標。sx：x方向上的縮放因子；sy：Y軸上的縮放因子；opt_anchor`：縮放原點(默認為幾何范圍的中心)
simplify(tolerance)創(chuàng)建這個幾何圖形的簡化版本
transform(source, destination)將圓的每個坐標從一個坐標系變換到另一個坐標系。在適當?shù)奈恢眯薷膸缀螆D形。如果不想修改幾何圖形，請首先clone()它，然后在克隆上使用此函數(shù)。在內(nèi)部，一個圓目前由兩點表示:圓心[cx, cy]和圓心右邊的點[cx + r, cy]。這個transform函數(shù)只變換這兩點。所以得到的幾何形狀也是一個圓，而這個圓并不等同于通過變換原圓的每一點得到的形狀
translate(deltaX, deltaY)翻轉(zhuǎn)幾何圖形。這將修改現(xiàn)有的幾何坐標。如果您想要一個新的幾何體，那么首先clone()這個幾何體
以下是ol.geom.Geomtry抽象基類創(chuàng)建的常見子類模塊：
1)ol.geom.Circle()
newol.geom.Circle({center:[],//中心點radius:2,//圓半徑layout://布局})
方法功能
applyTransform(transformFn)對幾何圖形的每個坐標應(yīng)用一個變換函數(shù)。在適當?shù)奈恢眯薷膸缀螆D形。如果不想修改幾何圖形，請首先clone()它，然后在克隆上使用此函數(shù)
clone()把幾何圖形復制一份
getCenter()返回中心坐標
getFirstCoordinate()返回幾何圖形的第一個坐標
getLastCoordinate()返回幾何圖形的最后一個坐標
getLayout()返回幾何圖形的layout
getRadius()返回圓的半徑
getType()獲取這個幾何圖形的類型
intersectsExtent(extent)測試幾何形狀和經(jīng)過的區(qū)域是否相交，返回布爾值
rotate(angle, anchor)圍繞給定的坐標旋轉(zhuǎn)幾何圖形。這將修改現(xiàn)有的幾何坐標。angle：以弧度為單位的旋轉(zhuǎn)角度；anchor：旋轉(zhuǎn)中心
scale(sx, opt_sy, opt_anchor)縮放幾何圖形(可選原點)。這將修改現(xiàn)有的幾何坐標。sx：x方向上的縮放因子；sy：Y軸上的縮放因子；opt_anchor：縮放原點(默認為幾何范圍的中心)
setCenter(center)將圓心設(shè)置為coordinate
setCenterAndRadius(center, radius, opt_layout)設(shè)置圓的中心(coordinate)和半徑(number)
setRadius(radius)設(shè)置圓的半徑。半徑的單位是投影的單位。
transform(source, destination)將圓的每個坐標從一個坐標系變換到另一個坐標系。在適當?shù)奈恢眯薷膸缀螆D形。如果不想修改幾何圖形，請首先clone()它，然后在克隆上使用此函數(shù)。在內(nèi)部，一個圓目前由兩點表示:圓心[cx, cy]和圓心右邊的點[cx + r, cy]。這個transform函數(shù)只變換這兩點。所以得到的幾何形狀也是一個，而這個圓并不等同于通過變換原圓的每一點得到的形狀
translate(deltaX, deltaY)f翻轉(zhuǎn)幾何圖形。這將修改現(xiàn)有的幾何坐標。如果您想要一個新的幾何體，那么首先clone()這個幾何體
2)ol.geom.LineString(coordinates, opt_layout)
newol.geom.LineString({coordinate:[],//坐標。對于內(nèi)部使用，平面坐標結(jié)合opt_layout也可以接受layout://Layout})
方法功能
appendCoordinate(coordinate)將經(jīng)過的坐標追加到linestring的坐標里
applyTransform(transformFn)對幾何圖形的每個坐標應(yīng)用一個變換函數(shù)。在適當?shù)奈恢眯薷膸缀螆D形。如果不想修改幾何圖形，請首先clone()它，然后在克隆上使用此函數(shù)
clone()把幾何圖形復制一份
forEachSegment(callback)遍歷每條線段，調(diào)用提供的回調(diào)函數(shù)。如果回調(diào)函數(shù)返回一個真值，則函數(shù)立即返回該值。否則函數(shù)返回false
getCoordinateAt(fraction, opt_dest)沿著線段返回給定部分的坐標。fraction是一個介于0和1之間的數(shù)字，其中0是線段的開始，1是線段的末尾
getCoordinates()返回線段的坐標
setCoordinates(coordinates, opt_layout)s設(shè)置線段的坐標
getFirstCoordinate()返回幾何圖形的第一個坐標
getLastCoordinate()返回幾何圖形的最后一個坐標
getLayout()返回幾何圖形的Layout
getLength()在投影平面上返回線段的長度
getType()得到這個幾何圖形的類型
intersectsExtent(extent)測試幾何形狀和通過的范圍是否相交
rotate(angle, anchor)圍繞給定的坐標旋轉(zhuǎn)幾何圖形。這將修改現(xiàn)有的幾何坐標
scale(sx, opt_sy, opt_anchor)縮放幾何圖形(可選原點)。這將修改現(xiàn)有的幾何坐標。sx：x方向上的縮放因子；sy：Y軸上的縮放因子；opt_anchor`：縮放原點(默認為幾何范圍的中心)
translate(deltaX, deltaY)翻轉(zhuǎn)幾何圖形。這將修改現(xiàn)有的幾何坐標。如果您想要一個新的幾何體，那么首先clone()這個幾何體
3)ol.geom.Point(coordinates, opt_layout)
new?ol.geom.Point()
方法功能
applyTransform(transformFn)對幾何圖形的每個坐標應(yīng)用一個變換函數(shù)。在適當?shù)奈恢眯薷膸缀螆D形。如果不想修改幾何圖形，請首先clone()它，然后在克隆上使用此函數(shù)
clone()把幾何圖形復制一份
getCoordinates()返回點的坐標
setCoordinates(coordinates, opt_layout)設(shè)置點的坐標
getFirstCoordinate()返回幾何圖形的第一個坐標
getLastCoordinate()返回幾何圖形的最后一個坐標
getLayout()返回幾何圖形的Layout
getType()得到這個幾何圖形的類型
intersectsExtent(extent)測試幾何形狀和通過的范圍是否相交
rotate(angle, anchor)圍繞給定的坐標旋轉(zhuǎn)幾何圖形。這將修改現(xiàn)有的幾何坐標
scale(sx, opt_sy, opt_anchor)縮放幾何圖形(可選原點)。這將修改現(xiàn)有的幾何坐標。sx：x方向上的縮放因子；sy：Y軸上的縮放因子；opt_anchor`：縮放原點(默認為幾何范圍的中心)
translate(deltaX, deltaY)翻轉(zhuǎn)幾何圖形。這將修改現(xiàn)有的幾何坐標。如果您想要一個新的幾何體，那么首先clone()這個幾何體
(4)ol.geom.Polygon()
多邊形幾何圖形。
newol.geom.Polygon({coordinates:[],//定義多邊形的線性環(huán)的數(shù)組layout:,ends:[],//末端（平面坐標內(nèi)部使用）})
方法功能
applyTransform(transformFn)對幾何圖形的每個坐標應(yīng)用一個變換函數(shù)。在適當?shù)奈恢眯薷膸缀螆D形。如果不想修改幾何圖形，請首先clone()它，然后在克隆上使用此函數(shù)
appendLinearRing(linearRing)在多邊形上追加線性環(huán)
clone()把幾何圖形復制一份
getCoordinates()返回點的坐標
setCoordinates(coordinates, opt_layout)設(shè)置點的坐標
getFirstCoordinate()返回幾何圖形的第一個坐標
getLastCoordinate()返回幾何圖形的最后一個坐標
getInteriorPoint()返回多邊形的內(nèi)部點
getLinearRing(index)返回多邊形幾何的第n個線性環(huán)。如果給定索引超出范圍，則返回null。外部線性環(huán)在索引0處可用，而內(nèi)部環(huán)在索引1及以上處可用
getLinearRings()返回多邊形的線性環(huán)
getLinearRingCount()返回多邊形的環(huán)數(shù)，這包括外部環(huán)和任何內(nèi)部環(huán)
getLayout()返回幾何圖形的Layout
getType()得到這個幾何圖形的類型
getArea()返回投影平面上多邊形的面積
intersectsExtent(extent)測試幾何形狀和通過的范圍是否相交
rotate(angle, anchor)圍繞給定的坐標旋轉(zhuǎn)幾何圖形。這將修改現(xiàn)有的幾何坐標
scale(sx, opt_sy, opt_anchor)縮放幾何圖形(可選原點)。這將修改現(xiàn)有的幾何坐標。sx：x方向上的縮放因子；sy：Y軸上的縮放因子；opt_anchor`：縮放原點(默認為幾何范圍的中心)
translate(deltaX, deltaY)翻轉(zhuǎn)幾何圖形。這將修改現(xiàn)有的幾何坐標。如果您想要一個新的幾何體，那么首先clone()這個幾何體
(4)ol.layer.VectorTile()
矢量平鋪圖層。
圖層用于客戶端呈現(xiàn)矢量平鋪數(shù)據(jù)。
newol.layer.Vector({//以下為圖層的屬性選項， 都可設(shè)置，所以皆有g(shù)etter/setteropacity:2,//透明度 區(qū)間范圍為(0, 1) 默認為1visible:true,//顯示屬性 布爾值 默認為trueextent:[],//圖層渲染的邊界范圍。該層將不會在此范圍之外呈現(xiàn)zIndex:2,//圖層渲染的索引層級。在渲染時，圖層將被排序，首先是z-idnex，然后是位置，當為undefined時，對于添加到映射的layers集合中的層，zIndex為0，或者當使用該層的setMap()方法時，zIndex為無窮大minResolution:3,//該層可見的最小分辨率(包括在內(nèi))maxResolution:6,//該層可見的最大分辨率（包括在內(nèi)）renderOrder:,//呈現(xiàn)順序。函數(shù)用于在呈現(xiàn)前對特性進行排序。默認情況下，特性是按照創(chuàng)建它們的順序繪制的。使用null來避免排序，但是得到一個未定義的繪制順序renderBuffer:100,//默認為100 緩沖區(qū)renderMode:'vector',//默認為'vector' 矢量圖層的渲染模式source:newol.source.VectorSource(),//圖層源map:? ,//把圖層覆蓋在地圖上，地圖不會在它的圖層集合中管理這個圖層，這個圖層將被呈現(xiàn)在頂部，這對于臨時層非常有用declutter:false,//默認為false 整理圖片和文字。清理應(yīng)用于所有圖像和文本樣式，優(yōu)先級由樣式的z-index定義。z-index指數(shù)越低，優(yōu)先級越高style:newol.style.Style(),//圖層樣式updateWhileAnimating:false,//默認為false updateWhileInteracting:false,//默認為falsepreload:,//renderOrder:,//useInterimTilesOnError:true,//錯誤時使用臨時貼片 默認true})
3、視圖view
設(shè)置視圖view由三種狀態(tài)決定：center中心、resolution分辨率、rotation旋轉(zhuǎn)，每個狀態(tài)都有相應(yīng)的getter和setter。
可以在視圖里定義地圖中心點、層級、分辨率、旋轉(zhuǎn)以及地圖投影等。
視圖對象受到約束，主要有分辨率約束、旋轉(zhuǎn)約束、中心約束。
分辨率約束切換到特定分辨率時，特定分辨率主要由以下選項決定：resolutions、maxResolution、maxZoom、zoomFactor。如果已經(jīng)設(shè)置resolutions，其他選項就可忽略。
旋轉(zhuǎn)約束會切換到特定的角度。它由以下選項決定:enableRotation和constrainRotation。在默認情況下，當接近水平線時，旋轉(zhuǎn)值會突然變?yōu)榱恪?/p>
中心約束由范圍選項決定。默認情況下，中心完全不受約束。
(1)視圖選項
1)中心點center
視圖的初始中心，中心的坐標系由投影projection指定，如果未設(shè)置此參數(shù)，則不會獲取層源，但是之后可以使用#setCenter設(shè)置中心。
letcenter = ol.proj.fromLonLat([longitude, latitude]);//未限制地圖范圍時letcenter = ol.proj.transform([minX, minY, maxX, maxY]，'EPSG:4326','EPSG:3857');//限制地圖顯示范圍時設(shè)置中心點? X代表經(jīng)度， Y代表緯度
ol.proj.transform([], "EPSG:", "EPSG:")是經(jīng)緯度投影轉(zhuǎn)換
獲取中心：map.getView().getCenter()
設(shè)置中心：map.getView().setCenter(center)
2)投影projection
視圖擁有projection投影，投影決定了中心的坐標系，其單位決定了分辨率的單位(每個像素的投影單位)。默認投影為球面墨卡托(EPSG:3857)。
獲取投影：map.getView().getProjection()
設(shè)置投影：map.getView().setProjection()
3)分辨率resolution
視圖的初始分辨率，單位是每像素的投影單位(例如米每像素)。
另一種方法是設(shè)置縮放zoom?？s放可以設(shè)置：最大層級maxZoom、最小層級minZoom以及當前層級zoom
letview =newol.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()；
設(shè)置分辨率：map.getView().setResolution(resolution)
4)旋轉(zhuǎn)rotation
初始旋轉(zhuǎn)角度為弧度(正順時針旋轉(zhuǎn)，0表示向北)。
獲取旋轉(zhuǎn)調(diào)用方法map.getView().getRotation()；
設(shè)置旋轉(zhuǎn)調(diào)用方法map.getView().setRotation(rotation);
5)縮放zoom
僅在未定義分辨率時使用。
縮放級別用于計算視圖的初始分辨率。初始分辨率是使用#constrainResolution方法確定的。
獲取縮放層級：map.getView().getZoom()；
獲取最大縮放層級：map.getView().getMaxZoom()；
獲取最小縮放層級：map.getView().getMinZoom()；
獲取縮放層級的分辨率：map.getView().getZoomForResolution(resolution)；
設(shè)置縮放層級：map.getView().setZoom(zoom)；
設(shè)置最大縮放層級：map.getView().setMaxZoom(zoom)；
設(shè)置最小縮放層級：map.getView().setMinZoom(zoom)；
6)旋轉(zhuǎn)約束constrainRotation
旋轉(zhuǎn)約束。false為未約束，true為未約束但是接近于0。數(shù)字限制了旋轉(zhuǎn)到該值的數(shù)量。
7)啟用旋轉(zhuǎn)enableRotation
如果為false，則始終使用將旋轉(zhuǎn)設(shè)置為零的旋轉(zhuǎn)約束。如果啟用為false，則沒有效果。
8)約束范圍extent
中心點不能超出這個范圍。
(2)視圖方法
1)動畫animate(var_args)
單個動畫
動畫視圖。視圖的中心、縮放(或分辨率)和旋轉(zhuǎn)可以通過動畫來實現(xiàn)視圖狀態(tài)之間的平滑轉(zhuǎn)換。
默認情況下，動畫持續(xù)時間為1秒，并且類型為in-and-out easing。
通過設(shè)置持續(xù)時間duration(以毫秒為單位)和緩動選項easing(參見模塊:ol/easing)來定制此行為。
easing:
easeIn：平緩加速
easeOut：平緩減速
inAndOut：平緩開始，先加速，再減速
linear：勻速
upAndDown：平緩開始，加速，最后再減速。這與模塊的一般行為相同:ol/easing~inAndOut，但是最終的減速被延遲了
多個動畫
要將多個動畫連接在一起，請使用多個動畫對象調(diào)用該方法。
如果提供一個函數(shù)作為animate方法的最后一個參數(shù)，它將在動畫系列的末尾被調(diào)用。
如果動畫系列獨立完成，回調(diào)函數(shù)將被調(diào)用true;如果動畫系列被取消，回調(diào)函數(shù)將被調(diào)用false。
取消動畫
動畫通過用戶交互(例如拖動地圖)或調(diào)用view.setCenter()、view.setResolution()或view.setRotation()(或調(diào)用其中一個方法的另一個方法)來取消。
2)取消動畫cancelAnimations()
取消任何正在進行的動畫。
(3)getAnimating()
確定視圖是否處于動畫狀態(tài)。返回布爾值。
4)計算范圍calculateExtent(opt_size)
計算當前視圖狀態(tài)的范圍和傳遞的大小。opt_size指盒子像素尺寸，如未提供，將使用此視圖的第一個映射的大小。
尺寸是盒子的像素尺寸，計算的范圍應(yīng)該與之匹配。
想要獲取整個底圖映射的范圍，使用map.getSize()
5)centerOn(coordinate, size, position)
以坐標和視圖位置為中心。
coordinate：坐標點
size：盒子像素尺寸
position：視圖的居中位置
4、交互動作interaction
通常只用于創(chuàng)建子類，而不在應(yīng)用程序中實例化。
用于更改映射狀態(tài)的用戶操作。有些類似于控件，但不與DOM元素關(guān)聯(lián)。
雖然交互沒有DOM元素，但是它們中的一些會呈現(xiàn)向量，因此在屏幕上是可見的。
添加交互動作使用：map.addInteraction(interaction);
OpenLayers?中可實例化的子類及其功能如下：
可實例化子類功能
doubleclickzoom interaction雙擊放大交互功能
draganddrop以“拖文件到地圖中”的交互添加圖層
dragbox拉框，用于劃定一個矩形范圍，常用于放大地圖
dragpan拖拽平移地圖
dragrotateandzoom拖拽方式進行縮放和旋轉(zhuǎn)地圖
dragrotate拖拽方式旋轉(zhuǎn)地圖
dragzoom拖拽方式縮放地圖
draw繪制地理要素功能
interaction defaults默認添加的交互功能
keyboardpan鍵盤方式平移地圖
keyboardzoom鍵盤方式縮放地圖
select選擇要素功能
modify更改要素
mousewheelzoom鼠標滾輪縮放功能
pinchrotate手指旋轉(zhuǎn)地圖，針對觸摸屏
pinchzoom手指進行縮放，針對觸摸屏
pointer鼠標的用戶自定義事件基類
snap鼠標捕捉，當鼠標距離某個要素一定距離之內(nèi)，自動吸附到要素
(1)默認交互功能ol.interaction.defaylts()
主要是最為常用的功能，如縮放、平移和旋轉(zhuǎn)地圖等，具體功能有如下這些：
默認交互功能
ol.interaction.DragRotate鼠標拖拽旋轉(zhuǎn)，一般配合一個鍵盤按鍵輔助
ol.interaction.DragZoom鼠標拖拽縮放，一般配合一個鍵盤按鍵輔助
ol.interaction.DoubleClickZoom鼠標或手指雙擊縮放地圖
ol.interaction.PinchRotate兩個手指旋轉(zhuǎn)地圖，針對觸摸屏
ol.interaction.PinchZoom兩個手指縮放地圖，針對觸摸屏
ol.interaction.DragPan鼠標或手指拖拽平移地圖
ol.interaction.KeyboardZoom使用鍵盤?+?和?-?按鍵進行縮放
ol.interaction.KeyboardPan使用鍵盤方向鍵平移地圖
ol.interaction.MouseWheelZoom鼠標滾輪縮放地圖
(2)針對矢量圖層元素的交互功能
1）選擇ol.interaction.Select()
選擇矢量元素的交互功能。
默認情況下，所選矢量元素的樣式不相同，因此這種交互可以用于可視化高亮顯示，以及為其他操作(如修改或輸出)選擇特性。
選定的矢量元素將被添加到內(nèi)部非托管圖層。
有三種方式控制矢量元素的選擇：
使用由condition定義的瀏覽器事件和toggle切換的add/remove以及multi選項
一個layer過濾器
一個使用filter選項的進一步矢量元素過濾器
2)繪制ol.interaction.Draw()
用于繪制特征幾何圖形的交互功能。
繪制交互允許繪制幾何地理要素，可選一個參數(shù)為對象，可包含參數(shù)如下：
features：繪制的要素的目標集合；
source：繪制的要素的目標圖層源；
snapTolerance：自動吸附完成點的像素距離，也就是說當鼠標位置距離閉合點小于該值設(shè)置的時候，會自動吸附到閉合點，默認值是?12；
type：繪制的地理要素類型，ol.geom.GeometryType類型，包含?Point、?LineString、?Polygon、MultiPoint、MultiLineString?或者?MultiPolygon；
minPointsPerRing：繪制一個多邊形需要的點數(shù)最小值，數(shù)值類型，默認是?3；
style：要素素描的樣式；
geometryName：繪制的地理要素的名稱，string類型
3)修改ol.interaction.Modify()
用于修改矢量元素幾何圖形的交互功能。
若想修改已添加到存在的矢量源中的矢量元素，需要使用modify選項構(gòu)建修改交互動作。
如若想修改集合中的矢量元素（比如用選擇交互的集合），需要使用features選項構(gòu)建交互。該交互必須使用source或者features構(gòu)建。
默認情況下，當按下alt鍵時，交互允許刪除頂點。想要使用不同的刪除條件配置交互，請使用deleteCondition選項。
5、控件Control
控件是一個可見的小部件，其DOM元素位于屏幕上的固定位置。它們可以包含用戶輸入(按鈕)，或者只是提供信息;位置是使用CSS確定的。這是一個虛基類，不負責實例化特定的控件。
默認情況下，這些元素被放置在具有CSS類名稱ol-overlaycontainer-stopevent的容器中，但是可以使用任何外部DOM元素。
letmyControl =newol.control.Control({//定義一個控件element:myElement})//然后添加到地圖上map.addControl(myControl);
主要的屬性選項有：
element：DOM元素，元素是控件的容器元素。只有在開發(fā)自定義控件時才需要指定這一點
render：重新呈現(xiàn)控件時調(diào)用的函數(shù)。這在requestAnimationFrame回調(diào)中調(diào)用
target：DOM元素，想要控件在映射的視圖端口之外呈現(xiàn)，需要指定目標對象
其中包含的控件有：
控件功能
controldefaults地圖默認包含的控件，包含縮放控件和旋轉(zhuǎn)控件
fullscreencontrol全屏控件，用于全屏幕查看地圖
mousepositioncontrol鼠標位置控件，顯示鼠標所在地圖位置的坐標，可以自定義投影
overviewmapcontrol地圖全局視圖控件
rotatecontrol地圖旋轉(zhuǎn)控件
scalelinecontrol比例尺控件
zoomcontrol縮放控件
zoomslidercontrol縮放刻度控件
zoomtoextentcontrol縮放到全局控件
6、疊加層Overlay
要顯示在地圖上方并附加到單個地圖位置的元素。與控件不同的是，它們不在屏幕上的固定位置，而是綁定到地理坐標上，因此平移地圖將移動?overlay?，而不是控件。
letpopup =newol.Overlay({element:document.getElementById('popup'),? ? ...});popup.setPosition(coordinate);map.addOverlay(popup);
Overlay選項
(1)id
設(shè)置?overlay的?id，字符串類型。
獲取id：map.getOverlayById(id)或者overlay.getId()
(2)element
overlay?元素，DOM元素
獲?。簅verlay.getElement()
設(shè)置：overlay.setElement(element)
(3)offset
偏移量(以像素為單位)，用于定位?overlay?，數(shù)組類型，默認為[0, 0]：
數(shù)組第一個元素為水平偏移，正右負左；
數(shù)組第二個元素為垂直，正下負上；
獲取偏移值：overlay.getOffset()
設(shè)置偏移值：overlay.setOffset(offset)
(4)position
地圖投影中的位置。
獲取：overlay.getPosition()
設(shè)置：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'.
獲?。簅verlay.getPositioning()
設(shè)置：overlay.setPositioning(positioning)
(6)autoPan
默認為false，如果設(shè)置為true，則在調(diào)用setPosition將平移映射，以便在當前視圖中?overlay?完全可見。
(7)autoPanAnimation
動畫選項用于平移?overlay?到視圖中。此動畫僅在啟用autoPan時使用?？梢蕴峁┮粋€持續(xù)時間和緩動來定制動畫。
(8)stopEvent
默認為true，是否應(yīng)該停止到map視圖端口的事件傳播。
如果為true，則將?overlay?放置在與控件相同的容器中（CSS class nameol-overlaycontainer-stopevent）
如果為false，它用className屬性指定的CSS類名放置在容器中。
(9)className
CSS class name.
(10)autoPanMargin
地圖自動平移時，地圖邊緣與?overlay?的留白（空隙），單位是像素，默認是 20像素
7、投影Projections
需要給所有坐標和范圍提供視圖投影系（默認是EPAG:3857）。
轉(zhuǎn)換投影系，使用ol.proj.transform()和ol.proj.transformExtendt進行轉(zhuǎn)換
(1）、ol.proj
1）ol.proj.addCoordinateTransforms(source, destination, forward, inverse)
注冊坐標轉(zhuǎn)換函數(shù)來轉(zhuǎn)換源投影和目標投影之間的坐標。正、反函數(shù)轉(zhuǎn)換坐標對;此函數(shù)將這些轉(zhuǎn)換為內(nèi)部使用的處理區(qū)段和坐標數(shù)組的函數(shù)
source：源投影
destination：目標投影
forward：接受ol的正向變換函數(shù)(即從源投影到目標投影)。作為參數(shù)，并返回轉(zhuǎn)換后的ol.Coordinate
inverse：接受ol的逆變換函數(shù)(即從目標投影到源投影)。作為參數(shù)，并返回轉(zhuǎn)換后的ol.Coordinate
2)ol.proj.addEquivalentProjections(projections)
注冊不改變坐標的轉(zhuǎn)換函數(shù)。它們允許在具有相同含義的投影之間進行轉(zhuǎn)換。
3）ol.proj.addProjection(projection)
將投影對象添加到受支持的投影列表中，這些投影可以通過它們的SRS碼進行查找。
4)ol.proj.equivalent(projection1, projection2)
檢查兩個投影是否相同，即一個投影中的每個坐標確實表示另一個投影中的相同地理點。
5)ol.proj.fromLonLat(coordinate, opt_projection)
將經(jīng)緯度坐標轉(zhuǎn)換為不同的投影
coordinate：經(jīng)緯度數(shù)組，經(jīng)度在前，緯度在后
projection：目標投影。默認是Web Mercator，即“EPSG: 3857”
6)ol.proj.get(projectionLike)
獲取指定代碼的投影對象。
7)ol.proj.getTransform(source, destination)
給定類似于投影的對象，搜索轉(zhuǎn)換函數(shù)將坐標數(shù)組從源投影轉(zhuǎn)換為目標投影。
8)ol.proj.setProj4(proj4)
proj4注冊。如果沒有顯式注冊，則假定proj4js將加載在全局名稱空間中
ol.proj.setProj4(proj4);
9)ol.proj.toLonLat(coordinate, opt_projection)
將坐標轉(zhuǎn)換為經(jīng)度/緯度
coordinate：投影坐標
projection：坐標的投影，默認是Web Mercator，即“EPSG: 3857”
10)ol.proj.transform(coordinate, source, destination)
將坐標從源投影轉(zhuǎn)換為目標投影，這將返回一個新的坐標(并且不修改原始坐標)。
coordinate：坐標
source：源投影
destination：目標投影
11)ol.proj.transformExtent
將范圍從源投影轉(zhuǎn)換為目標投影，這將返回一個新范圍(并且不修改原始范圍)。
12)ol.proj.Units{string}
投影單位：'degrees',?'ft',?'m',?'pixels',?'tile-pixels'?or?'us-ft'
閱讀 9.1k?更新于 2019-09-05
