Windy

by Vladimir Vershinin

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io/en/v5.3.0/build/ol.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/style.css">
<script src="https://unpkg.com/[email protected]/dist/ol-wind.js"></script>
<div id="app">
  <vl-map ref="map" data-projection="EPSG:4326" @created="mapCreated">
    <vl-view ref="view" :zoom.sync="zoom" :center.sync="center"></vl-view>

    <vl-layer-tile>
      <vl-source-osm url="//{a-d}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png"></vl-source-osm>
    </vl-layer-tile>
  </vl-map>
</div>

CSS

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

#app {
  display: flex;
  flex-direction: column;
}

.vl-map {
  overflow: hidden;
}

JavaScript

new Vue({
  el: '#app',
  data() {
    return {
      zoom: 2,
      center: [0, 0],
    }
  },
  methods: {
    mapCreated(vm) {
      console.log(OlWind)
      fetch('https://sakitam-fdd.github.io/wind-layer/data/wind.json')
        .then(res => res.json())
        .then(res => {
          const windLayer = new OlWind.WindLayer(res, {
            windOptions: {
              velocityScale: 1 / 20,
              paths: 5000,
              colorScale: [
                "rgb(36,104, 180)",
                "rgb(60,157, 194)",
                "rgb(128,205,193 )",
                "rgb(151,218,168 )",
                "rgb(198,231,181)",
                "rgb(238,247,217)",
                "rgb(255,238,159)",
                "rgb(252,217,125)",
                "rgb(255,182,100)",
                "rgb(252,150,75)",
                "rgb(250,112,52)",
                "rgb(245,64,32)",
                "rgb(237,45,28)",
                "rgb(220,24,32)",
                "rgb(180,0,35)"
              ],
              lineWidth: 3,
              generateParticleOption: false
            },
            map: vm.$map,
          });

          console.log(vm.$map, windLayer)
          vm.$map.addLayer(windLayer);
        });
    },
  },
})