leaflet +高德地图+风场

yb305小白

已于 2023-07-13 15:19:21 修改

阅读量777

点赞数

分类专栏： leaflet 文章标签： leaflet风场

于 2023-07-13 15:18:02 首次发布

本文链接：https://blog.csdn.net/yb305/article/details/131703286

版权

leaflet 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、源码：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
      integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
      crossorigin=""
    ></script>
    <script type="text/javascript" src="./js/libwind.min.js"></script>
    <script type="text/javascript" src="./js/leaflet.ChineseTmsProviders.js"></script>
    <!--纠偏-->
    <script type="text/javascript" src="./js/leaflet.mapCorrection.min.js"></script>

    <style>
      html,
      body {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
      }
      #map {
        height: 100%;
        width: 100%;
      }
      .current-point {
        width: auto;
        background: white;
        position: absolute;
        top: 100px;
        left: 500px;
        z-index: 1200;
        padding: 2px 5px;
        border-radius: 5px;
        margin: 15px;
      }
      .marker_timetip_3Jw {
        position: fixed;
        display: none;
        left: 50px;
        top: 10px;
        width: fit-content;
        box-sizing: content-box;
        z-index: 401;
        padding: 3px 10px;
        font-size: 15px;
        background: rgba(0, 0, 0, 0.38);
        color: #fff;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="currentPoint" class="current-point">
      <div id="wind-value"></div>
      <div id="scale-value"></div>
    </div>
    <script>
      var map = L.map('map', {
        center: [39.90554, 116.39133],
        zoom: 15,
        zoomControl: false
      });
      var gaodeMap = L.tileLayer.chinaProvider('GaoDe.Normal.Map').addTo(map);
      //设置参照物
      L.marker([39.90554, 116.39133])
        .addTo(map)
        .bindPopup('<p>我是WGS84坐标下，天安门广场国旗所在位置</p>');
      addWindyLayer();
      function addWindyLayer() {
        let color = '#7390F8';
        //风场图层初始化
        windField = L.velocityLayer({
          colorScale: [color]
        });
        //风场数据加载
        L.windUtil().getImgData(new Date(), L.windUtil().options.products['wind'], function (res) {
          windField.setData(res);
          windField.addTo(map);
        });
        map.on('mousemove', function (e) {
          if (
            document.getElementById('wind-value').innerHTML == '' &&
            document.getElementById('scale-value').innerHTML == ''
          ) {
            document.getElementById('currentPoint').style.display = 'none';
          } else {
            document.getElementById('currentPoint').style.display = 'block';
          }
        });
      }
    </script>
  </body>
</html>

二、效果：