Leaflet实现气象可视化,风场,气压,温度,云图,降雨量代码

非著名架构师

于 2024-10-11 10:31:48 发布

阅读量15

点赞数

分类专栏：大模型文章标签： Leaflet可视化 Leaflet教程信息可视化 echarts

本文链接：https://blog.csdn.net/a1ccwt/article/details/142847232

版权

大模型专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Leaflet 是一个广泛使用的 JavaScript 库，专门用于创建互动地图。对于可视化复杂的地理信息（如风场、海浪、洋流、气压、温度等），Leaflet 本身虽然轻量，但可以通过插件以及其他开源数据和图层来实现强大的功能。在这篇文章中，我将详细介绍如何使用 Leaflet 来实现风场、海浪、洋流、气压和温度的可视化，并提供示例代码。

环境准备

首先，我们需要引入 Leaflet 及其相关插件。可以从 CDN 引入 Leaflet：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Leaflet Weather Visualization</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <style>
    #map {
      height: 600px;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script src="https://unpkg.com/leaflet-velocity/dist/leaflet-velocity.min.js"></script>
</body>
</html>

初始化地图

在 HTML 中我们定义了一个 #map 的 div 来容纳地图。接下来我们初始化一个 Leaflet 地图：

<script>
  // 初始化地图
  var map = L.map('map').setView([0, 0], 2); // 设置初始中心和缩放级别

  // 添加 OpenStreetMap 瓦片图层
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);
</script>

可视化风场

为了实现风场的可视化，可以使用 Leaflet-velocity，这是一个用于在 Leaflet 地图上展示风速和风向的插件。首先确保页面引入了 Leaflet-velocity 插件的脚本。然后我们可以通过 L.velocityLayer 添加风场图层。

<script>
  // 模拟的风场数据 (可以使用真实数据替换)
  var windData = {
    "data": [{
      "header": {
        "parameterCategory": 2,
        "parameterNumber": 2,
        "parameterUnit": "m/s",
        "parameterNumberName": "eastward_wind",
        "nx": 144,
        "ny": 73
      },
      "data": [...windValues] // 替换为实际的风速数据
    }, {
      "header": {
        "parameterCategory": 2,
        "parameterNumber": 3,
        "parameterUnit": "m/s",
        "parameterNumberName": "northward_wind",
        "nx": 144,
        "ny": 73
      },
      "data": [...windValues] // 替换为实际的风速数据
    }]
  };

  // 创建风场图层
  var velocityLayer = L.velocityLayer({
    displayValues: true,
    displayOptions: {
      velocityType: "Global Wind",
      position: "bottomleft",
      emptyString: "No wind data"
    },
    data: windData,
    maxVelocity: 15
  });

  // 将风场图层添加到地图
  velocityLayer.addTo(map);
</script>

上面的代码示例展示了如何创建和添加风场图层，其中 windData 可以是从外部 API（如 NOAA 或 ECMWF）获取的实际风速数据。

可视化海浪

海浪数据通常包括波高和波向等信息，可以通过 leaflet-canvaslayer-field 插件实现。这个插件允许在地图上绘制基于矢量场的流动图，如洋流和海浪。

// 使用 leaflet-canvaslayer-field 可视化海浪
<script>
  // 示例海浪数据 (假设波高和方向)
  var waveData = {
    "u": [...waveU], // 水平分量数据
    "v": [...waveV], // 垂直分量数据
    "rows": 73,  // 数据网格的行数
    "cols": 144, // 数据网格的列数
  };

  var waveLayer = L.canvasLayer.field({
    data: waveData,
    vectorFieldColor: "#00f", // 设置波浪流向的颜色
    maxVelocity: 5 // 最大波浪速度
  });

  waveLayer.addTo(map);
</script>

waveData 是模拟的海浪矢量数据，你可以从海洋学数据提供商处获取实际数据。

可视化洋流

洋流与风场的可视化类似。可以使用与风场类似的方式，通过 leaflet-velocity 或其他矢量场插件绘制洋流。

// 使用 leaflet-velocity 可视化洋流
<script>
  var currentData = {
    "data": [{
      "header": {
        "parameterCategory": 2,
        "parameterNumber": 2,
        "parameterUnit": "m/s",
        "parameterNumberName": "eastward_current",
        "nx": 144,
        "ny": 73
      },
      "data": [...currentU]
    }, {
      "header": {
        "parameterCategory": 2,
        "parameterNumber": 3,
        "parameterUnit": "m/s",
        "parameterNumberName": "northward_current",
        "nx": 144,
        "ny": 73
      },
      "data": [...currentV]
    }]
  };

  var currentLayer = L.velocityLayer({
    displayValues: true,
    displayOptions: {
      velocityType: "Ocean Current",
      position: "bottomleft",
      emptyString: "No current data"
    },
    data: currentData,
    maxVelocity: 3
  });

  currentLayer.addTo(map);
</script>

可视化气压

气压通常通过等压线和等高线的方式来展示。可以使用 Leaflet 的 L.geoJSON 方法将等压线数据作为 GeoJSON 图层加载。

<script>
  // 示例气压等压线 GeoJSON 数据
  var pressureContours = {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "geometry": {
          "type": "LineString",
          "coordinates": [[lng1, lat1], [lng2, lat2], ...]
        },
        "properties": {
          "pressure": 1010 // 等压线值
        }
      }
    ]
  };

  L.geoJSON(pressureContours, {
    style: function (feature) {
      return {
        color: '#0000FF',
        weight: 2
      };
    }
  }).addTo(map);
</script>

可视化温度

温度数据通常以颜色渐变的方式展示，类似于热力图，可以使用 leaflet-heat 插件实现。

<script src="https://unpkg.com/leaflet.heat/dist/leaflet-heat.js"></script>
<script>
  // 模拟温度数据
  var temperatureData = [
    [lat1, lng1, temp1],  // 纬度，经度，温度值
    [lat2, lng2, temp2],
    ...
  ];

  var heat = L.heatLayer(temperatureData, {
    radius: 25,
    gradient: {
      0.4: 'blue',
      0.6: 'lime',
      0.9: 'red'
    },
    maxZoom: 6
  }).addTo(map);
</script>

temperatureData 是每个点的纬度、经度和温度值，leaflet-heat 将这些值转化为热力图。

整合所有图层

现在我们已经介绍了如何分别可视化风场、海浪、洋流、气压和温度。我们可以将这些图层整合到一起，提供更为全面的地理环境展示。

<script>
  // 图层控制器
  var overlayMaps = {
    "Wind": velocityLayer,
    "Waves": waveLayer,
    "Ocean Currents": currentLayer,
    "Pressure Contours": L.geoJSON(pressureContours),
    "Temperature": heat
  };

  L.control.layers(null, overlayMaps).addTo(map);
</script>

通过 L.control.layers，用户可以在不同的图层之间切换，实现对不同气象和海洋条件的综合查看。

结语

本文详细介绍了如何使用 Leaflet 及其插件可视化复杂的气象和海洋数据。我们使用了 leaflet-velocity、leaflet-canvaslayer-field 和 leaflet-heat 等插件来绘制风场、海浪、洋流、气压和温度等图层。通过这些可视化技术，可以实现动态、直观的地理环境展示，帮助用户更好地理解和分析气象与海洋数据。

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Leaflet Weather Visualization</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <style>
    #map {
      height: 600px;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script src="https://unpkg.com/leaflet-velocity/dist/leaflet-velocity.min.js"></script>
  <script src="https://unpkg.com/leaflet.heat/dist/leaflet-heat.js"></script>
  <script>
    var map = L.map('map').setView([0, 0], 2);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

    // 风场、海浪、洋流、气压、温度等数据及图层...
  </script>
</body>
</html>

这个代码片段展示了如何在 Leaflet 中集成不同的气象和海洋数据图层，帮助用户进行多维度的环境可视化。