Leaflet可以說在我的博客當(dāng)中應(yīng)該出現(xiàn)了很多次，它首先是空間數(shù)據(jù)可視化的“佼佼者”，也是Mapbox.js的“父親”。不同的是，
Mapbox是個(gè)發(fā)展快速的商業(yè)公司，有些服務(wù)是需要看訪問量收費(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)，但是不符合中國市場(chǎng)。
Leaflet: an open-source JavaScript library for mobile-friendly interactive maps
Leaflet: 一款用于兼容移動(dòng)端交互地圖的開源JS庫
言歸正傳，Leaflet本身是一個(gè)簡(jiǎn)單易用，體積極小，適合小項(xiàng)目的庫。我們看看
官網(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í)成本較低，
文檔參考。與之相比，國內(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（按訪問量收費(fèi)），數(shù)據(jù)的表現(xiàn)才用地圖瓦片的形式。數(shù)據(jù)保存在
CartoDB的數(shù)據(jù)庫，包含了地圖瓦片數(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ì)通過tooltip形式表現(xiàn)，和
Leaflet 筆記一：簡(jiǎn)單入門的步驟相似。再者，結(jié)合了小地圖和圖例的用法，讓數(shù)據(jù)的展示流暢生動(dòng)?；@筐籃板的表示不過是使用了L.Polyline等畫線畫圓工具。
科比投出的30699個(gè)球
動(dòng)圖
轉(zhuǎn)載，請(qǐng)表明出處。
總目錄Awesome GIS
