OpenLayers 4 ol.source 詳解

source 是 Layer 的重要組成部分甜奄,表示圖層的來源关串,也就是服務(wù)地址。
除了在構(gòu)造函數(shù)中指定外踩寇,還可以使用 layer.setSource(source) 稍后指定啄清。

一、包含的類型

  1. ol.source.BingMaps 姑荷,必應(yīng)地圖的切片數(shù)據(jù)盒延,繼承自ol.source.TileImage
  2. ol.source.Cluster鼠冕,聚簇矢量數(shù)據(jù)添寺,繼承自ol.source.Vector
  3. ol.source.ImageCanvas懈费,數(shù)據(jù)來源是一個(gè) canvas 元素计露,其中的數(shù)據(jù)是圖片,繼承自 ol.source.Image憎乙;
  4. ol.source.ImageMapGuide票罐,Mapguide 服務(wù)器提供的圖片地圖數(shù)據(jù),繼承自 ol.source.Image泞边,fire ol.source.ImageEvent该押;
  5. ol.source.ImageStatic,提供單一的靜態(tài)圖片地圖阵谚,繼承自ol.source.Image蚕礼;
  6. ol.source.ImageVector,數(shù)據(jù)來源是一個(gè) canvas 元素梢什,但是其中的數(shù)據(jù)是矢量來源 ol.source.Vector奠蹬,繼承自 ol.source.ImageCanvas
  7. ol.source.ImageWMS嗡午,WMS 服務(wù)提供的單一的圖片數(shù)據(jù)囤躁,繼承自 ol.source.Image,觸發(fā) ol.source.ImageEvent荔睹;
  8. ol.source.MapQuest狸演,MapQuest 提供的切片數(shù)據(jù),繼承自 ol.source.XYZ僻他;
  9. ol.source.OSM严沥,OpenStreetMap 提供的切片數(shù)據(jù),繼承自 ol.source.XYZ中姜;
  10. ol.source.Stamen,Stamen 提供的地圖切片數(shù)據(jù),繼承自 ol.source.XYZ丢胚;
  11. ol.source.TileVector翩瓜,被切分為網(wǎng)格的矢量數(shù)據(jù),繼承自 ol.source.Vector携龟;
  12. ol.source.TileDebug兔跌,并不從服務(wù)器獲取數(shù)據(jù),而是為切片渲染一個(gè)網(wǎng)格峡蟋,繼承自 ol.source.Tile坟桅;
  13. ol.source.TileImage,提供切分成切片的圖片數(shù)據(jù)蕊蝗,繼承自 ol.source.Tile仅乓,觸發(fā) ol.source.TileEvent
  14. ol.source.TileUTFGrid蓬戚,TileJSON 格式 的 UTFGrid 交互數(shù)據(jù)夸楣,繼承自 ol.source.Tile
  15. ol.source.TileJSON子漩,TileJSON 格式的切片數(shù)據(jù)豫喧,繼承自 ol.source.TileImage
  16. ol.source.TileArcGISRest幢泼,ArcGIS Rest 服務(wù)提供的切片數(shù)據(jù)紧显,繼承自 ol.source.TileImage
  17. ol.source.WMTS缕棵,WMTS 服務(wù)提供的切片數(shù)據(jù)孵班。繼承自 ol.source.TileImage
  18. ol.source.XYZ挥吵,XYZ 格式的切片數(shù)據(jù)重父,繼承自 ol.source.TileImage
  19. ol.source.Zoomify忽匈,Zoomify 格式的切片數(shù)據(jù)房午,繼承自 ol.source.TileImage

上面介紹的都是可以實(shí)例化的類丹允,還有一部分基類郭厌,不能被實(shí)例化,只負(fù)責(zé)被繼承雕蔽,有:

  • ol.source.Image折柠,提供單一圖片數(shù)據(jù)的類型,直接繼承自 ol.source.Source批狐;
  • ol.source.Tile扇售,提供被切分為網(wǎng)格切片的圖片數(shù)據(jù)前塔,繼承自 ol.source.Source
  • ol.source.Vector承冰,提供矢量圖層數(shù)據(jù)华弓,繼承自 ol.source.Source

二困乒、用法說明

1. ol.source.Vector

矢量圖層的數(shù)據(jù)源

1.1 事件

包含四個(gè)事件寂屏,addfeaturechangefeature娜搂,clear迁霎,removefeature

addfeature百宇,當(dāng)一個(gè)要素添加到 source 中觸發(fā)考廉。
changefeature,當(dāng)要素變化時(shí)觸發(fā)恳谎。
clear芝此,當(dāng) source 的 clear 方法調(diào)用時(shí)候觸發(fā)。
removefeature因痛,當(dāng)要素移除時(shí)候觸發(fā)婚苹。

1.2 參數(shù)

接受的參數(shù):


/**
 * @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 包含的內(nèi)容鸵膏;
  • features膊升,地理要素,從字符串讀取的數(shù)據(jù)谭企;
  • format廓译,url屬性設(shè)置后,加載要素使用的數(shù)據(jù)格式债查,采用異步的 AJAX 加載非区;
  • loader,加載要素使用的加載函數(shù)盹廷;
  • logo征绸,logo包含的內(nèi)容;
  • strategy俄占,加載要素使用的策略管怠,默認(rèn)是 一次性加載所有要素;
  • url缸榄,要素?cái)?shù)據(jù)的地址渤弛;
  • wrapX,是否在地圖水平坐標(biāo)軸上重復(fù)甚带,默認(rèn)是 true她肯。

1.3 實(shí)例

features 方法
假如有一個(gè)包含空間數(shù)據(jù)的字符串佳头,geojsonObject,是GeoJSON字符串格式辕宏,那么可以用來初始化一個(gè)圖層畜晰。

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 方法
如果有一個(gè)文件作為數(shù)據(jù)源,那么可以配置 url 屬性來加載數(shù)據(jù):

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

這兩種方法中都會(huì)指定數(shù)據(jù)來源格式瑞筐, 矢量數(shù)據(jù)源支持的格式包含很多:gml、EsriJSON腊瑟、geojson聚假、gpx、igc闰非、kml膘格、osmxml、ows财松、polyline瘪贱、topojson、wfs辆毡、wkt菜秦、wms capabilities(兼容 wms 的格式)、 wms getfeatureinfo舶掖、 wmts capabilities球昨、xlink、xsd等格式眨攘。這些格式都有readFeatures 主慰、readFeature 和readGeometry 方法用于讀取數(shù)據(jù)。

2. ol.source.Tile

提供被切分為切片的圖片地圖數(shù)據(jù)
可配置的選項(xiàng)

/**
 * @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 一樣的選項(xiàng)就不介紹了鲫售,介紹與 vector 特有的選項(xiàng):

  • extent共螺,地圖視圖默認(rèn)的坐標(biāo)范圍;
  • opaque情竹,是否透明藐不,一個(gè)布爾值,默認(rèn) false鲤妥;
  • tilePixelRatio佳吞,切片的大小調(diào)整選項(xiàng),如 256 × 256棉安,和 512 × 512底扳;
  • projection,投影坐標(biāo)系贡耽;
  • state衷模,地圖所處的狀態(tài)鹊汛,包括undefinedloading阱冶,ready刁憋,error
  • tileGrid木蹬,覆蓋在地圖上的格網(wǎng)至耻;

接受的事件

  • tileloadstart,切片開始加載時(shí)觸發(fā)的事件镊叁;
  • tileloadend尘颓,切片加載完畢觸發(fā)事件;
  • tileloaderror晦譬,切片加載出錯(cuò)時(shí)的處理疤苹。

3. ol.source.Image

提供單一的圖片地圖。
可以配置的選項(xiàng)

/**
 * @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敛腌,地圖分辨率卧土。其他的選項(xiàng)都與以上的一樣。

觸發(fā)的事件

  • imageloadstart像樊,圖片地圖開始加載觸發(fā)的事件尤莺;
  • imageloadend,圖片地圖加載完畢觸發(fā)的事件凶硅;
  • imageloaderror缝裁,圖片地圖加載出錯(cuò)時(shí)觸發(fā)的事件。

四足绅、總結(jié)

source 是 layer 中必須(required)的選項(xiàng)捷绑,定義了地圖數(shù)據(jù)的來源,與數(shù)據(jù)有關(guān)的函數(shù)氢妈,如addfeature粹污、getfeature等函數(shù)都定義在 source 中,而且數(shù)據(jù)源支持多種格式首量。

OpenLayers 3 之 地圖圖層數(shù)據(jù)來源(ol.source)詳解
ol.source API

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末壮吩,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子加缘,更是在濱河造成了極大的恐慌鸭叙,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件拣宏,死亡現(xiàn)場(chǎng)離奇詭異沈贝,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)勋乾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門宋下,熙熙樓的掌柜王于貴愁眉苦臉地迎上來嗡善,“玉大人,你說我怎么就攤上這事学歧≌忠” “怎么了?”我有些...
    開封第一講書人閱讀 156,723評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵枝笨,是天一觀的道長(zhǎng)袁铐。 經(jīng)常有香客問我,道長(zhǎng)伺帘,這世上最難降的妖魔是什么昭躺? 我笑而不...
    開封第一講書人閱讀 56,357評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮伪嫁,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘偶垮。我一直安慰自己张咳,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,412評(píng)論 5 384
  • 文/花漫 我一把揭開白布似舵。 她就那樣靜靜地躺著脚猾,像睡著了一般。 火紅的嫁衣襯著肌膚如雪砚哗。 梳的紋絲不亂的頭發(fā)上龙助,一...
    開封第一講書人閱讀 49,760評(píng)論 1 289
  • 那天,我揣著相機(jī)與錄音蛛芥,去河邊找鬼提鸟。 笑死,一個(gè)胖子當(dāng)著我的面吹牛仅淑,可吹牛的內(nèi)容都是我干的称勋。 我是一名探鬼主播,決...
    沈念sama閱讀 38,904評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼涯竟,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼赡鲜!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起庐船,我...
    開封第一講書人閱讀 37,672評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤银酬,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后筐钟,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體揩瞪,經(jīng)...
    沈念sama閱讀 44,118評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,456評(píng)論 2 325
  • 正文 我和宋清朗相戀三年盗棵,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了壮韭。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片北发。...
    茶點(diǎn)故事閱讀 38,599評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖喷屋,靈堂內(nèi)的尸體忽然破棺而出琳拨,到底是詐尸還是另有隱情,我是刑警寧澤屯曹,帶...
    沈念sama閱讀 34,264評(píng)論 4 328
  • 正文 年R本政府宣布狱庇,位于F島的核電站,受9級(jí)特大地震影響恶耽,放射性物質(zhì)發(fā)生泄漏密任。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,857評(píng)論 3 312
  • 文/蒙蒙 一偷俭、第九天 我趴在偏房一處隱蔽的房頂上張望浪讳。 院中可真熱鬧,春花似錦涌萤、人聲如沸淹遵。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)透揣。三九已至,卻和暖如春川抡,著一層夾襖步出監(jiān)牢的瞬間辐真,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評(píng)論 1 264
  • 我被黑心中介騙來泰國(guó)打工崖堤, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留侍咱,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,286評(píng)論 2 360
  • 正文 我出身青樓倘感,卻偏偏與公主長(zhǎng)得像放坏,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子老玛,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,465評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • ol.source.BingMaps 淤年,必應(yīng)地圖的切片數(shù)據(jù),繼承自ol.source.TileImage蜡豹; ol....
    站著瞌睡閱讀 1,138評(píng)論 0 1
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,743評(píng)論 25 707
  • 因?yàn)橐鲆粋€(gè)地圖操作的項(xiàng)目麸粮,需要用到這個(gè)地圖庫(kù),但是查詢官方API麻煩镜廉,而且這個(gè)地圖框架的API做的用起來確實(shí)太麻...
    虛幻的銹色閱讀 33,834評(píng)論 1 15
  • 常用命令:ndk-build 需要添加環(huán)境變量弄诲,將ndk目錄添加的系統(tǒng)環(huán)境變量中D:\Android\NDK\an...
    踏雪鴻雁閱讀 2,381評(píng)論 0 0
  • 今天得知了一個(gè)消息,頓時(shí)讓我興奮得手舞足蹈。 《白夜追兇》即將呈現(xiàn)給全球觀眾齐遵,這是一件值得我們中國(guó)觀眾由衷自豪的事...
    少爺寫春秋閱讀 496評(píng)論 0 2