Leaflet 筆記一：簡(jiǎn)單入門
Leaflet可以說(shuō)在我的博客當(dāng)中應(yīng)該出現(xiàn)了很多次，它首先是空間數(shù)據(jù)可視化的“佼佼者”奕短，也是Mapbox.js的“父親”宜肉。不同的是，Mapbox是個(gè)發(fā)展快速的商業(yè)公司翎碑，有些服務(wù)是需要看訪問(wèn)量收費(fèi)的谬返，而Leaflet是免費(fèi)開源的組織，開放日杈，開源遣铝，生態(tài)好佑刷，插件多。雖然插件是可以通用翰蠢，文檔資料大部分通用项乒，但是我個(gè)人建議還是先學(xué)Leaflet后學(xué)Mapbox啰劲。
而且現(xiàn)在Mapbox貌似把重點(diǎn)放在Mapbox GL梁沧，而不是Mapbox.js上。Mapbox GL并非一般的瓦片地圖蝇裤，很新穎前衛(wèi)廷支，但是不符合中國(guó)市場(chǎng)。
Leaflet: an open-source JavaScript library for mobile-friendly interactive maps
Leaflet: 一款用于兼容移動(dòng)端交互地圖的開源JS庫(kù)
言歸正傳栓辜，Leaflet本身是一個(gè)簡(jiǎn)單易用恋拍，體積極小，適合小項(xiàng)目的庫(kù)藕甩。我們看看官網(wǎng)施敢。
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '? <a >OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
看看這幾行代碼，L.map('map')就是捕獲一個(gè)<div id="map"></div>狭莱，把它當(dāng)作一個(gè)地圖觀察器僵娃，將地圖數(shù)據(jù)賦予上面。setView設(shè)置地圖中心點(diǎn)的經(jīng)緯度和比例尺腋妙，作為用戶的視圖區(qū)域默怨。
L.tileLayer就是矢量瓦片底圖，用對(duì)應(yīng)的URL上找對(duì)應(yīng)的z骤素，y匙睹，x。而s是分布式服務(wù)器快速選取济竹，一般都是1-4痕檬，天地圖做到了1-8。最后送浊，tileLayer圖層要addTo(map)加載在地圖觀察器上梦谜。例子當(dāng)中瓦片底圖使用的是openstreetmap，當(dāng)然也可以使用天地圖的瓦片數(shù)據(jù)作為一個(gè)家庭作業(yè)留給你們罕袋，參考htoooth/Leaflet.ChineseTmsProviders改淑。
L.marker就是圖標(biāo)，首先需設(shè)置的是圖標(biāo)的坐標(biāo)浴讯，bindPopup是綁定的冒泡提示朵夏，里面可以包裝任意的innerHTML元素，openPopup是開啟提示的方法榆纽。
總結(jié)
Leaflet簡(jiǎn)單易用仰猖，學(xué)習(xí)成本較低捏肢，文檔參考。與之相比饥侵，國(guó)內(nèi)的百度高德連WMS鸵赫，WFS都沒有，真的有點(diǎn)汗顏躏升。希望真正的GISer應(yīng)該選擇真正的地圖前段工具辩棒，如leaflet和openlayer。
案例
最近看到一個(gè)有趣的項(xiàng)目--科比投出的30699個(gè)球膨疏∫徽觯科比退役讓整個(gè)互聯(lián)網(wǎng)的焦點(diǎn)都在他身上。LATime做了一個(gè)項(xiàng)目可視化所有科比投出的球佃却，我一開始以為是用D3.js等高級(jí)的數(shù)據(jù)可視化工具者吁，結(jié)果并非如此。仔細(xì)研讀了一下源碼發(fā)現(xiàn)饲帅，這項(xiàng)目采用的是leaflet.js和carto.js（按訪問(wèn)量收費(fèi)）复凳，數(shù)據(jù)的表現(xiàn)才用地圖瓦片的形式。數(shù)據(jù)保存在CartoDB的數(shù)據(jù)庫(kù)灶泵，包含了地圖瓦片數(shù)據(jù)育八，以及每個(gè)球的數(shù)據(jù)詳情。
這是一個(gè)很典型的空間數(shù)據(jù)可視化項(xiàng)目丘逸。將對(duì)應(yīng)的點(diǎn)數(shù)據(jù)轉(zhuǎn)換成為矢量瓦片作為底圖单鹿。當(dāng)鼠標(biāo)在地圖位置滑動(dòng)，對(duì)應(yīng)的數(shù)據(jù)詳情將會(huì)通過(guò)tooltip形式表現(xiàn)深纲，和Leaflet 筆記一：簡(jiǎn)單入門的步驟相似仲锄。再者，結(jié)合了小地圖和圖例的用法儒喊，讓數(shù)據(jù)的展示流暢生動(dòng)”液牵籃筐籃板的表示不過(guò)是使用了L.Polyline等畫線畫圓工具怀愧。
轉(zhuǎn)載，請(qǐng)表明出處余赢。總目錄Awesome GIS
