内容概览:
1.leaflet 实现风场图
2.源代码 demo 下载

leaflet 入门开发系列环境知识点了解：

leaflet 实现风场图，实现效果来自此参考文献：https://github.com/danwild/wind-js-leaflet

实现效果图如下：


  • html 页面引用资源
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Leaflet风场图</title>
  5. <meta charset="utf-8">
  6. </head>
  7. <body>
  8. <div id="map"></div>
  9. <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  10. <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"/>
  11. <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
  12. <!--wind-js-leaflet-->
  13. <link rel="stylesheet" href="wind-js-leaflet.css" />
  14. <script src="wind-js-leaflet.js"></script>
  15. <!--demo-->
  16. <link rel="stylesheet" href="demo.css" />
  17. <script src="demo.js"></script>
  18. </body>
  19. </html>
  • 地图加载代码
  1. //地图初始化
  2. function initDemoMap(){
  3. var Esri_WorldImagery = L.tileLayer(\'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}\', {
  4. attribution: \'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, \' +
  5. \'AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community\'
  6. });
  7. var Esri_DarkGreyCanvas = L.tileLayer(
  8. "http://{s}.sm.mapstack.stamen.com/" +
  9. "(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/" +
  10. "{z}/{x}/{y}.png",
  11. {
  12. attribution: \'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, \' +
  13. \'NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community\'
  14. }
  15. );
  16. //底图切换设置
  17. var baseLayers = {
  18. "Satellite": Esri_WorldImagery,
  19. "Grey Canvas": Esri_DarkGreyCanvas
  20. };
  21. var map = L.map(\'map\', {
  22. layers: [ Esri_WorldImagery ]
  23. });
  24. var layerControl = L.control.layers(baseLayers);
  25. layerControl.addTo(map);
  26. //设置地图初始化中心点和级别
  27. map.setView([50.00, 14.44], 3);
  28.  
  29. return {
  30. map: map,
  31. layerControl: layerControl
  32. };
  33. }
  • 风场初始化加载
  1. //风场图初始化加载
  2. WindJSLeaflet.init({
  3. localMode: true,//true，则加载本地风场数据源
  4. map: map,//地图对象
  5. layerControl: layerControl,//地图底图切换控件
  6. useNearest: false,
  7. timeISO: null,
  8. nearestDaysLimit: 7,
  9. displayValues: true,
  10. displayOptions: {
    ……

核心 js 文件，wind-js-leaflet.js，见github：https://github.com/danwild/wind-js-leaflet

更多的leaflet文章见leaflet小专栏：GIS之家leaflet小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

版权声明：本文为giserhome原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/giserhome/archive/2019/08/11/11336905.html