问我可以用哪种方式在OpenLayers 6中实现一个风层？
EN

Stack Overflow用户

提问于 2021-02-23 13:59:47

回答 1查看 1K关注 0票数 0

我需要有这样的东西：https://api.windy.com/map-forecast/examples/hello-world在我的地图中(我正在使用openlayers-6，可能作为一个可以激活或禁用的层)，但是我找不到一个有效的解决方案，有人能给我建议吗？

javascript

openlayers

openlayers-6

回答 1

Stack Overflow用户

发布于 2021-02-23 15:42:05

我在谷歌搜索中找到了https://gist.github.com/tsauerwein/5355d4a8bbfcbc7f254862eb11b803f7。它覆盖一个Windy映射和OpenLayers映射，并在移动OpenLayers映射时刷新OpenLayers映射。它可以与OL6一起使用一些小的更改，比如使用https而不是http：

<!doctype html>
<html lang="en">
  <head>
    <title>windy.js integration example</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://openlayers.org/en/v6.5.0/css/ol.css" type="text/css">
    <style type="text/css">
      html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    #map {
      width: 100%;
      height: 100%;
      position: relative;
    }
    div.fill {
      width: 100%;
      height: 100%;
    }
    #windyMap {
      position: absolute;
      z-index: 1;
      pointer-events: none;
    }
    .ol-control {
      z-index: 2;
    }
    </style>
  </head>
  <body>
    <div id="map" class="map">
      <canvas id="windyMap" class="fill"></canvas>
      <div id="olMap" class="fill"></div>
    </div>
    <script src="https://openlayers.org/en/v6.5.0/build/ol.js" type="text/javascript"></script>
    <script src="https://esri.github.io/wind-js/windy.js" type="text/javascript"></script>
    <script type="text/javascript">

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.Stamen({
        layer: 'toner'
      })
    })
  ],
  interactions: ol.interaction.defaults({
    altShiftDragRotate: false,
    rotate: false
  }),
  target: 'olMap',
  view: new ol.View({
    center: [0, 0],
    zoom: 1
  })
});

var windy;
var canvas = document.getElementById('windyMap');
function refreshWindy() {
  if(!windy) {
    return;
  }
  windy.stop();
  var mapSize = map.getSize();
  var extent = map.getView().calculateExtent(mapSize);
  extent = ol.proj.transformExtent(extent, 'EPSG:3857', 'EPSG:4326');

  canvas.width = mapSize[0];
  canvas.height = mapSize[1];

  windy.start(
    [[0,0], [canvas.width, canvas.height]],
    canvas.width,
    canvas.height,
    [[extent[0], extent[1]],[extent[2], extent[3]]]
  );
}

fetch('https://esri.github.io/wind-js/gfs.json').then(function(response) {
  return response.json();
}).then(function(json) {
  windy = new Windy({canvas: canvas, data: json });
  refreshWindy();
});

map.on('moveend', refreshWindy);

    </script>
  </body>
</html>

这看起来像测试数据，对于实时数据，我想您需要一个API密钥和不同的初始化。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66334572

复制

相似问题

问我可以用哪种方式在OpenLayers 6中实现一个风层？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以用哪种方式在OpenLayers 6中实现一个风层？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以用哪种方式在OpenLayers 6中实现一个风层？
EN