windy

a openlayers extension to windjs

by join dd

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/openlayers/dist/ol.css">
<script src="https://cdn.jsdelivr.net/npm/openlayers/dist/ol.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/wind-layer/dist/windLayer.js"></script>
<div id="map"></div>

CSS

html, body, #map {
  height: 100%;
  padding: 0;
  margin: 0;
}

JavaScript

var Maps = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        layerName: 'baseLayer',
        preload: 4,
        source: new ol.source.OSM({
          url: "http://{a-c}.sm.mapstack.stamen.com/" +
          "(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/" +
          "{z}/{x}/{y}.png"
        })
      })
    ],
    loadTilesWhileAnimating: true,
    view: new ol.View({
      projection: 'EPSG:3857',
      center: [113.53450137499999, 34.44104525],
      zoom: 5
    })
  });
  axios.get('https://sakitam-fdd.github.io/wind-layer/examples/out.json').then(function (res) {
    if (res.data) {
      var wind = new WindLayer(res.data, {
        layerName: '',
        minResolution: undefined,
        maxResolution: undefined,
        zIndex: 0,
        projection: 'EPSG:3857',
        ratio: 1
      })
      wind.appendTo(Maps)
    }
  })