前言
leaflet 入門開發系列環境知識點了解：
- leaflet api文檔介紹，詳細介紹 leaflet 每個類的函數以及屬性等等
- leaflet 在線例子
- leaflet 插件，leaflet 的插件庫，非常有用
內容概覽
leaflet 實現風場圖，實現效果來自此參考文獻：https://github.com/danwild/wind-js-leaflet
實現效果圖如下：
- html 頁面引用資源
<!doctype html> <html> <head> <title>Leaflet風場圖</title> <meta charset="utf-8"> </head> <body> <div id="map"></div> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"/> <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script> <!--wind-js-leaflet--> <link rel="stylesheet" href="wind-js-leaflet.css" /> <script src="wind-js-leaflet.js"></script> <!--demo--> <link rel="stylesheet" href="demo.css" /> <script src="demo.js"></script> </body> </html>
- 地圖加載代碼
//地圖初始化 function initDemoMap(){ var Esri_WorldImagery = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, ' + 'AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' }); var Esri_DarkGreyCanvas = L.tileLayer( "http://{s}.sm.mapstack.stamen.com/" + "(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/" + "{z}/{x}/{y}.png", { attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, ' + 'NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community' } ); //底圖切換設置 var baseLayers = { "Satellite": Esri_WorldImagery, "Grey Canvas": Esri_DarkGreyCanvas }; var map = L.map('map', { layers: [ Esri_WorldImagery ] }); var layerControl = L.control.layers(baseLayers); layerControl.addTo(map); //設置地圖初始化中心點和級別 map.setView([50.00, 14.44], 3); return { map: map, layerControl: layerControl }; }
- 風場初始化加載
//風場圖初始化加載 WindJSLeaflet.init({ localMode: true,//true，則加載本地風場數據源 map: map,//地圖對象 layerControl: layerControl,//地圖底圖切換控件 useNearest: false, timeISO: null, nearestDaysLimit: 7, displayValues: true, displayOptions: {
……
核心 js 文件，wind-js-leaflet.js，見github：https://github.com/danwild/wind-js-leaflet
更多的leaflet文章見leaflet小專欄：GIS之家leaflet小專欄
文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波