1. 程式人生 > >OpenLayers 之 地圖圖層資料來源(ol.source)詳解,ps圖層混合模式詳解

OpenLayers 之 地圖圖層資料來源(ol.source)詳解,ps圖層混合模式詳解

source 是 Layer 的重要組成部分,表示圖層的來源,也就是服務地址。除了在建構函式中制定外,可以使用 layer.setSource(source) 稍後指定。

一、包含的型別

上面介紹的都是可以例項化的類,還有一部分基類,不能被例項化,只負責被繼承,有:

  • ol.source.Image,提供單一圖片資料的型別,直接繼承自 ol.source.Source
  • ol.source.Tile,提供被切分為網格切片的圖片資料,繼承自 ol.source.Source
  • ol.source.Vector,提供向量圖層資料,繼承自 ol.source.Source

二、用法說明

1. ol.source.Vector

向量圖層的資料來源

1.1 事件

包含四個事件,addfeaturechangefeatureclearremovefeature

addfeature,當一個要素新增到 source 中觸發; 
changefeature,當要素變化時觸發; 
clear,當 source 的 clear 方法呼叫時候觸發; 
removefeature,當要素移除時候發生。

1.2 引數

接受的引數:


/**
 * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
 *     features: (Array.
<ol.Feature>|undefined), * format: (ol.format.Feature|undefined), * loader: (ol.FeatureLoader|undefined), * logo: (string|olx.LogoOptions|undefined), * strategy: (ol.LoadingStrategy|undefined), * url: (string|undefined), * wrapX: (boolean|undefined)}}
* @api */
  • attribution,地圖右下角的 logo 包含的內容;
  • features,地理要素,從字串讀取的資料;
  • format,url屬性設定後,載入要素使用的資料格式,採用非同步的 AJAX 載入;
  • loader,載入要素使用的載入函式;
  • logo,logo包含的內容;
  • strategy,載入要素使用的策略,預設是 一次性載入所有要素;
  • url,要素資料的地址;
  • wrapX,是否在地圖水平座標軸上重複,預設是 true

1.3 例項

features 方法 
假如有一個包含空間資料的字串,geojsonObject,是GeoJSON字串格式,那麼可以用來初始化一個圖層。

var vectorSource = new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});

var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: style
});

map.addLayer(vectorLayer);

url + format 方法 
如果有一個檔案作為資料來源,那麼可以配置 url 屬性來載入資料:

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'data/geojson/countries.geojson',
    format: new ol.format.GeoJSON()
  })
});

這兩種方法中都會指定資料來源格式, 向量資料來源支援的格式包含很多:gml、EsriJSON、geojson、gpx、igc、kml、osmxml、ows、polyline、topojson、wfs、wkt、wms capabilities(相容 wms 的格式)、 wms getfeatureinfo、 wmts capabilities、xlink、xsd等格式。這些格式都有readFeatures 、readFeature 和readGeometry 方法用於讀取資料。

2. ol.source.Tile

提供被切分為切片的圖片地圖資料 
可配置的選項

/**
 * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
 *            extent: (ol.Extent|undefined),
 *            logo: (string|olx.LogoOptions|undefined),
 *            opaque: (boolean|undefined),
 *            tilePixelRatio: (number|undefined),
 *            projection: ol.proj.ProjectionLike,
 *            state: (ol.source.State|undefined),
 *            tileGrid: (ol.tilegrid.TileGrid|undefined),
 *            wrapX: (boolean|undefined)}}
 */

與 vector 一樣的選項就不介紹了,介紹與 vector 特有的選項:

  • extent,地圖檢視預設的座標範圍;
  • opaque,不透明與否,一個布林值,預設 false;
  • tilePixelRatio,切片的大小調整選項,如 256 × 256,和 512 × 512;
  • projection,投影;
  • state,地圖所處的狀態,包括undefinedloadingreadyerror
  • tileGrid,覆蓋在地圖上的格網;

接受的事件

  • tileloadstart,切片開始載入時觸發的事件;
  • tileloadend,切片載入完畢觸發事件;
  • tileloaderror,切片加載出錯時的處理。

3. ol.source.Image

提供單一的圖片地圖。 
可以配置的選項

/**
 * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
 *            extent: (null|ol.Extent|undefined),
 *            logo: (string|olx.LogoOptions|undefined),
 *            projection: ol.proj.ProjectionLike,
 *            resolutions: (Array.<number>|undefined),
 *            state: (ol.source.State|undefined)}}
 */
  • resolutions,地圖解析度。其他的選項都與以上的一樣。

觸發的事件

  • imageloadstart,圖片地圖開始載入觸發的事件;
  • imageloadend,圖片地圖載入完畢觸發的事件;
  • imageloaderror,圖片地圖加載出錯時觸發的事件。

四、總結

source 是 layer 中必須的選項,定義著地圖資料的來源,與資料有關的函式,如addfeature、getfeature等函式都定義在 source 中,而且資料來源支援多種格式。

相關推薦

OpenLayers 3 地圖資料來源ol.source

source 是 Layer 的重要組成部分,表示圖層的來源,也就是服務地址。除了在建構函式中制定外,可以使用 layer.setSource(source) 稍後指定。 一、包含的型別 ol.source.BingMaps ,必應地圖的切片資料,繼承

OpenLayers 地圖資料來源ol.sourceps混合模式

source 是 Layer 的重要組成部分,表示圖層的來源,也就是服務地址。除了在建構函式中制定外,可以使用 layer.setSource(source) 稍後指定。 一、包含的型別 上面介紹的都是可以例項化的類,還有一部分基類,不能被例項化,只負責被繼承,有:

Openlayers官方示例捲簾Layer Swipe

  一、示例簡介     在地圖視口中構建一個捲簾,滑鼠拉動這個捲簾,能夠同時改變兩個圖層顯示的大小。     圖層捲簾效果: 二、程式碼詳解 <!DOCTYPE html> <html lang="en"

Openlayers官方例項望遠鏡Layer Spyglass

目錄 一、示例簡介 二、程式碼詳解 三、總結 一、示例簡介     圖層渲染可以在precompose和postcompose事件處理程式中被控制,這兩個事件處理程式的事件物件中包含一個Canvas渲染上下文屬性(canvas rendering cont

OpenLayers官方示例十四可重用地圖Reusable Source

目錄 一、示例簡介 二、程式碼詳解 一、示例簡介     這個示例展示如何更新地圖中的瓦片。     可以呼叫source.setUrl()來更新瓦片地圖源的URL,請注意,當更改瓦片地圖源的URL時,在載入完新的瓦片之前,將不會替換現

OpenLayers 地圖互動功能interactionopenlayers百度地圖

轉自:http://www.bkjia.com/webzh/1003573.html 地圖互動功能和上一篇講的地圖控制元件有些混淆,它們都控制著使用者與地圖的互動,區別是地圖控制元件的觸發都是一些可見的 HTML 元素觸發,如按鈕、連結等;而互動功能都是一些裝置行為觸

OpenLayers官方示例滑鼠位置控制元件Mouse Position

目錄 一、示例簡介 二、程式碼詳解 一、示例簡介     使用滑鼠位置控制元件(ol/control/MousePosition)來動態顯示地圖上滑鼠游標的座標     並且可以由使用者調整投影和座標精度。 二、程式碼詳解 &l

OpenLayers官方示例線串箭頭樣式LineString Arrows

目錄 一、示例簡介 二、程式碼詳解   三、總結 一、示例簡介     為每一個線串(LineString)的子線段繪製箭頭。 二、程式碼詳解  <!DOCTYPE html> <html lang=

學習筆記計算機網路王道考研 第三章 資料鏈路

資料鏈路層的功能: 為網路層提供服務 鏈路管理 幀定界、幀同步和透明傳輸 流量控制 差錯控制 資料鏈路層可以為網路層提供的服務有: 無確認的無連線服務 有確認的無連線服務 有確認的面向連線服務(有連線則一定有確認)

Spring Boot筆記資料來源Mysql+MyBatis

Mysql+MyBatis多資料來源配置 SpringBoot單資料來源配置 pom.xml application.yml SpringBoot多資料來源配置 修改application.yml Confi

OpenGL十七Photoshop blend演算法 與 混合模式

使用混合模式可以製作豐富多彩的效果。而OpenGL中可以輕鬆開啟這種模式,但更關鍵的是圖形演算法。本文參照 Photoshop blend演算法 ,介紹如何通過shader,在OpenGL中實現混合效果。OpenGL中開啟混合在OpenGL中可以開啟混合模式:glEnable

Android 遊戲開發主角的移動與地圖的平滑滾動十五

程式碼的實現方式       還是以人物向右移動為例,我們須要三個座標 一個是m_HeroPos 來儲存人物在地圖中的X座標  一個是 mScreenPos 來儲存人物在螢幕中的顯示座標 mMapPos 來儲存地圖在手機螢幕中的顯示座標,按鍵盤右鍵後人物在地圖中的座標加上8畫素(表示行走的步長),當人物的座標

Openlayers地圖標註

1、標註的簡介 標註簡單點說就是通過圖示、文字等方式將我們想展示的內容顯示在地圖上,著重突出人們所關注的專題內容,從而為使用者提供個性化的地圖服務; 2、標註方式 在Openlayers3裡面,有兩種對地理位置點進行標註的方法,一種是通過建立向量圖層然後設定其樣式的方法,還

【SSH2框架理論篇】--SSH2 Vs 經典三

ext 深入 acc 而在 穩定性 沒有 實體 框架 框架圖  這幾天一直在學習使用SSH2框架。對於框架本身的使用並非非常困難。相信經過多鍛煉就行熟練的掌握框架的使用,讓我匪夷所思的是在使用框架的時候感覺非常熟悉,好像在哪

百度地圖api入門介紹js篇

顯示 .com cnblogs androi web 入門介紹 步驟 api 地圖api 最近因為用到了百度地圖的api,感覺還有點用記錄一下,一方面充實一下自己,第二也希望有用到的同學可以參考一下;因為之前用過android baidu api 所以再用web

程序員---C語言細節12指針和數組細節&quot;//&quot;的可移植性說明

[1] watermark popu i++ gravity 移植 char dsm 指針 主要內容:指針和數組細節,"//"的可移植性說明 #include <stdio.h> int main(int argc, char

分層最短路DP思想 BZOJ2662 [BeiJing wc2012]凍結

algo 選擇 ace dijkstra led esp jks 數據 iostream 2662: [BeiJing wc2012]凍結 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 999 Solved: 535[Su

JavaSE 學習筆記網絡編程二十三

-c 可能 nbsp blog col accept 接收 存儲 pri 端口: 物理端口: 邏輯端口:用於標識進程的邏輯地址,不同進程的標識;有效端口:0~65535,其中0~1024系統使用或保留端口。 java 中ip對象:InetAddress. import

溫故而知新---淺析三架構一個超簡單的系統登錄三架構實例

lda code windows comm 面向 box reader 業務 兩個 剛開始接觸三層架構是在快兩個月前,那時候找了好多例子感覺也都看不怎麽懂,今天閑著沒事,就把以前學的東西翻出來,算是溫習溫習。由於本人也接觸時間不長,所以以下言論有不正確之處,多多

Spring MVC-視解析器View Resolverr-內部資源查看解析器Internal Resource View Resolver示例轉載實踐

ast mes 技術 子文件夾 schema html cati href tree 以下內容翻譯自:https://www.tutorialspoint.com/springmvc/springmvc_internalresourceviewresolver.htm 說