基于leaflet-velocity的二维动态风场展示-阿里云开发者社区

基于leaflet-velocity的二维动态风场展示

2022-08-23 1586

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本文讲解了leaflet-velocity插件，并利用插件进行了模拟的动态风场、洋流等信息的综合展示，让读者掌握集成方式。

有一阵子没动笔了，时间过得好快。这阵子因为工作的原因，间隔了很久跟大家分享，希望后面稳定下来会有更多的时间来做一些记录。这次分享一个比较有意思的leaflet插件，可以在二维场景下用来对风场、洋流等信息进行动态展示，同时可以展示实时风速和流速。

本次内容用到的例子以及数据可以在以下开源地址找到：

https://github.com/onaci/leaflet-velocity，包含演示的数据。

打开clone下来的代码，可以看到：

实例文件在demo文件夹中。

第一步、打开demo.html

<!doctype html><html><head><title>LeafletVelocity Demo</title><metacharset="utf-8"></head><body><divid="map"></div><!--vendor--><scriptsrc="https://code.jquery.com/jquery-2.2.4.min.js"></script><linkrel="stylesheet"href="https://npmcdn.com/leaflet@1.1.0/dist/leaflet.css"/><scriptsrc="https://npmcdn.com/leaflet@1.1.0/dist/leaflet.js"></script><!--leaflet-velocity--><linkrel="stylesheet"href="../dist/leaflet-velocity.css"/><scriptsrc="../dist/leaflet-velocity.js"></script><!--demo--><linkrel="stylesheet"href="demo.css"/><scriptsrc="demo.js"></script></body></html>

上面的关键代码主要引入了leaflet、jquery和leaflet-velocity插件，以及用来控制核心逻辑的demo.js

第二步、编辑demo.js

function initDemoMap(){
    var Esri_WorldImagery = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
        attribution: 'Tiles &copy; Esri &mdash; 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 &copy; Esri &mdash; 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([-22, 150], 5);
    return {
        map: map,
        layerControl: layerControl
    };
}

照例是做底图的初始化配置和引用资源的定义等等初始化工作。

第三步、引入动态数据

$.getJSON('http://localhost:8086/2d/leaflet-velocity-master/demo/wind-gbr.json', function (data) {
varvelocityLayer=L.velocityLayer({
displayValues: true,
displayOptions: {
velocityType: 'GBR Wind',
displayPosition: 'bottomleft',
displayEmptyString: 'No wind data'    },
data: data,
maxVelocity: 10  });
layerControl.addOverlay(velocityLayer, 'Wind - Great Barrier Reef');
});