Leaflet.TimeDimension 使用教程

最新推荐文章于 2024-12-03 09:18:22 发布

郦琳凤Joyce

最新推荐文章于 2024-12-03 09:18:22 发布

阅读量741

点赞数 20

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_01184/article/details/141236480

Leaflet.TimeDimension 使用教程

项目地址:https://gitcode.com/gh_mirrors/le/Leaflet.TimeDimension

项目介绍

Leaflet.TimeDimension 是一个开源的 JavaScript 库，它为 Leaflet 地图添加了时间维度功能。通过这个库，用户可以在地图上展示随时间变化的数据，例如气象数据、海洋数据等。Leaflet.TimeDimension 支持多种数据源，包括 WMS、GeoJSON 等，并且提供了丰富的控制选项，如时间滑块和播放器，使用户能够轻松地探索时间序列数据。

项目快速启动

以下是一个简单的示例，展示如何在 Leaflet 地图上使用 Leaflet.TimeDimension 插件。

引入必要的文件

首先，需要在 HTML 文件中引入 Leaflet 和 Leaflet.TimeDimension 的相关文件：

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet TimeDimension 示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.5.1/dist/leaflet.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-timedimension@1.1.1/dist/leaflet.timedimension.control.min.css" />
</head>
<body>
    <div id="map" style="height: 100vh; width: 100vw;"></div>
    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.5.1/dist/leaflet.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/iso8601-js-period@0.2.1/iso8601.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/leaflet-timedimension@1.1.1/dist/leaflet.timedimension.min.js"></script>
    <script>
        // 初始化地图
        var map = L.map('map', {
            zoom: 10,
            center: [38.705, 1.15],
            timeDimension: true,
            timeDimensionOptions: {
                timeInterval: "2014-09-30/2014-10-30",
                period: "PT1H"
            },
            timeDimensionControl: true
        });

        // 添加 WMS 图层
        var testWMS = "https://thredds.socib.es/thredds/wms/observational/hf_radar/hf_radar_ibiza-scb_codarssproc001_aggregation/dep0001_hf-radar-ibiza_scb-codarssproc001_L1_agg.nc";
        var testLayer = L.nonTiledLayer.wms(testWMS, {
            layers: 'sea_water_velocity',
            format: 'image/png',
            transparent: true,
            styles: 'prettyvec/rainbow',
            markerscale: 15,
            markerspacing: 20,
            abovemaxcolor: "extend",
            belowmincolor: "extend",
            colorscalerange: "0,0,4",
            attribution: 'SOCIB HF RADAR | sea_water_velocity'
        }).addTo(map);
    </script>
</body>
</html>