亂談Leaflet的插件在WebGIS中作用
前言
Leaflet和Openlayer都是兩個(gè)主要的開(kāi)源前端庫(kù)。開(kāi)放的程度都很高，但是考慮到移動(dòng)端和小巧輕便易擴(kuò)展，我大部分情況還是選擇leaflet。兼容移動(dòng)端似乎是必不可少的事情，放大縮小平移，都是一些必備的功能。小巧才可以在移動(dòng)端內(nèi)存受限的情況下，有效運(yùn)行。而擴(kuò)展性就是又一個(gè)重要的特征。
插件
打開(kāi)OpenCDN服務(wù)，leaflet常用的插件包括：
- leaflet - 移動(dòng)端友好的交互地圖JavaScript庫(kù)
- leaflet.markercluster - 為L(zhǎng)eaflet提供漂亮動(dòng)態(tài)聚類(lèi)功能
- angular-leaflet-directive - 用AngularJS directive完成更容易的交互地圖
- leaflet.draw - 矢量畫(huà)圖工具
- Leaflet.awesome-markers - 漂亮的高清圖片markers基于Glyphicons / Font-Awesome icons
- leaflet-providers - 底圖免費(fèi)提供設(shè)置
- leaflet-dvf - leaflet數(shù)據(jù)可視化
- leaflet-hash 位置哈希表
- leaflet.fullscreen 全屏功能
- leaflet-editable 幾何可編輯工具
- leaflet-geocoder-mapzen 查找地理編碼通過(guò)Pelias Geocoder API
- leaflet-plugins 插件綜合
- Leaflet.heat 簡(jiǎn)單的熱力圖
- leaflet-routing-machine 路徑計(jì)算工具
- leaflet-omnivore 常用的數(shù)據(jù)格式轉(zhuǎn)換工具
- proj4leaflet 投影轉(zhuǎn)換
- leaflet.freedraw 畫(huà)圖工具
- leaflet-vector-layers加載Arcgis server,geoIQ, Arc2Earth, CartoDB, GIS Cloud
- leaflet-realtime 實(shí)時(shí)更新數(shù)據(jù)
- leaflet-tilelayer-geojson geojson分瓦片加載
- leaflet-ajax 異步加載數(shù)據(jù)，不用jquery時(shí)用
- leaflet-gpx 加載gpx的數(shù)據(jù)
- leaflet-polylinedecorator 線段的裝飾
- Leaflet.Spin
其中，不乏非常常用的工具，包括leaflet.markercluster ，leaflet-providers，leaflet.fullscreen。底圖設(shè)置是每個(gè)GISer必須掌握。而中國(guó)的提供商有類(lèi)似的工具如Leaflet.ChineseTmsProviders，包含了天地圖，高德，圖吧等瓦片提供商數(shù)據(jù)，讓底圖加載和切換更加簡(jiǎn)單。marker的聚類(lèi)分析和全屏功能非常有用。而編輯幾何要素，如leaflet.draw 和leaflet-editable，是很重要的一個(gè)方面，在一些項(xiàng)目上大有建樹(shù)。這兩個(gè)庫(kù)就像一套組合拳，分別對(duì)應(yīng)的是矢量空間數(shù)據(jù)的創(chuàng)建和修改。
Leaflet.awesome-markers則是除了mapbox的marker style外的又一個(gè)精美圖標(biāo)圖標(biāo)的選擇，幫我們定義了很多marker的樣式。就流行的前端工具而言，angular-leaflet-directive和react-leaflet則是結(jié)合了現(xiàn)在當(dāng)前流行的前端工具angular和react等mvvm工具。這也激發(fā)起我的一個(gè)idea，將Vue雙向綁定框架和leaflet相結(jié)合，整個(gè)組件化的設(shè)計(jì)會(huì)更加簡(jiǎn)單，github地址brandonxiang/vue-leaflet，如果感興趣的話可以contribute一下。
leaflet-plugins是一個(gè)常用插件的集合，可解析gpx，kml，topojson，并且支持國(guó)外多家地圖供應(yīng)商底圖。Leaflet.heat是超常用的簡(jiǎn)易熱力圖，比heatmap.js更加簡(jiǎn)單好用，原理類(lèi)似，但是在效果上會(huì)根據(jù)縮放級(jí)別分層計(jì)算其熱力值。leaflet-omnivore是超級(jí)常用的數(shù)據(jù)轉(zhuǎn)換工具。方便各類(lèi)數(shù)據(jù)在leafletjs的加載。
總結(jié)
leaflet各個(gè)插件將數(shù)據(jù)內(nèi)容和地圖這平臺(tái)有機(jī)結(jié)合在一起，完成帶交互的數(shù)據(jù)可視化。好的生態(tài)帶動(dòng)更多用戶(hù)，成為良性循環(huán)。相比之下，F(xiàn)lex和Silverlight確實(shí)十分過(guò)時(shí)了，現(xiàn)在更多是聚焦于Javascript這樣的輕量級(jí)和跨瀏覽器跨平臺(tái)的語(yǔ)言。整個(gè)成熟的生態(tài)圈滿足你各種各樣的項(xiàng)目需要。希望我寫(xiě)的插件也可以發(fā)揮它應(yīng)有的作用。
