maptalks-wind

> maptalks wind layer adapter

Usage

Install

pnpm i @sakitam-gis/maptalks-wind -S

WindLayer Example

<template>
  <div class="demo-content">
    <div class="demo-content-datgui"></div>
    <div class="map-warp"></div>
  </div>
</template>


<style lang="less">
.demo-content {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #cbe0ff;
  &-datgui {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    pointer-events: auto;
  }

  .map-warp {
    width: 100%;
    height: 100%;
  }
}
</style>

gl layer Example

raster

const source = new mtkWind.TileSource('carto', {
    tileSize: 256,
    minZoom: 0,
    maxZoom: 22,
    roundZoom: true,
    subdomains: ['a', 'b', 'c', 'd'],
    // coordinates: [
    //   [-180, 85.051129],
    //   [180, 85.051129],
    //   [180, -85.051129],
    //   [-180, -85.051129],
    // ],
    url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
    wrapX: true,
});

const layer = new mtkWind.Layer('carto', source, {
    styleSpec: {
      'opacity': [
        'interpolate',
        ['exponential', 0.5],
        ['zoom'],
        1,
        1,
        2,
        1
      ],
    },
    renderType: mtkWind.RenderType.image,
});

map.addLayer(layer);

colorize

const tileSource = new mtkWind.TileSource('wind', {
  tileSize: 256,
  minZoom: 0,
  maxZoom: 4,
  roundZoom: true,
  decodeType: mtkWind.DecodeType.imageWithExif,
  wrapX: true,
  // tileBounds: [-78.120282611, -75.191804486, 132.453327310, 68.846393966],
  url: 'https://localhost:5000/2023111700/2023111703/{z}/{x}/{y}/wind-surface.jpeg',
});

const layer = new mtkWind.Layer('wind', tileSource, {
  styleSpec: {
    'fill-color': [
      'interpolate',
      ['step', 1],
      ['get', 'value'],
      ...interpolateColor
    ],
    'opacity': 1,
  },
  renderFrom: mtkWind.RenderFrom.rg,
  widthSegments: 1,
  heightSegments: 1,
  displayRange: [0, 104],
  renderType: mtkWind.RenderType.colorize,
  picking: true,
  // mask: {
  //   data: clip,
  //   // type: mapboxWind.MaskType.outside,
  //   type: mapboxWind.MaskType.inside, // 默认是 inside，即只显示范围内的
  // }
});

map.addLayer(layer);

particles

const tileSource = new mtkWind.TileSource('wind', {
  tileSize: 256,
  minZoom: 0,
  maxZoom: 4,
  roundZoom: true,
  decodeType: mtkWind.DecodeType.imageWithExif,
  wrapX: true,
  // tileBounds: [-78.120282611, -75.191804486, 132.453327310, 68.846393966],
  url: 'https://localhost:5000/2023111700/2023111703/{z}/{x}/{y}/wind-surface.jpeg',
});

const layer = new mtkWind.Layer('wind', tileSource, {
  styleSpec: {
    'fill-color': [
      'interpolate',
      ['step', 1],
      ['get', 'value'],
      0, '#fff',
      104, '#fff',
    ],
    'opacity': [
      'interpolate',
      ['exponential', 0.5],
      ['zoom'],
      1,
      1,
      2,
      1
    ],
    numParticles: [
      'interpolate',
      ['exponential', 0.5],
      ['zoom'],
      0, // zoom
      65535 / 8, // numParticles
      8, // zoom
      65535 / 16 // numParticles
    ],
    ...particlesConfig,
  },
  renderFrom: mtkWind.RenderFrom.rg,
  displayRange: [0, 104],
  renderType: mtkWind.RenderType.particles,
  // mask: {
  //   data: clip,
  //   // type: mapboxWind.MaskType.outside,
  //   type: mapboxWind.MaskType.inside, // 默认是 inside，即只显示范围内的
  // }
});

map.addLayer(layer);

arrow

const tileSource = new mtkWind.TileSource('wind', {
  tileSize: 256,
  minZoom: 0,
  maxZoom: 4,
  roundZoom: true,
  decodeType: mtkWind.DecodeType.imageWithExif,
  wrapX: true,
  // tileBounds: [-78.120282611, -75.191804486, 132.453327310, 68.846393966],
  url: 'https://localhost:5000/2023111700/2023111703/{z}/{x}/{y}/wind-surface.jpeg',
});

const layer = new mtkWind.Layer('wind', tileSource, {
  styleSpec: {
    'fill-color': [
      'interpolate',
      ['step', 1],
      ['get', 'value'],
      ...interpolateColor
      // 0, '#fff',
      // 104, '#fff',
    ],
    'opacity': 1,
    space: 20,
    size: [12, 10],
  },
  renderFrom: mtkWind.RenderFrom.rg,
  displayRange: [0, 104],
  renderType: mtkWind.RenderType.arrow,
  // mask: {
  //   data: clip,
  //   // type: mapboxWind.MaskType.outside,
  //   type: mapboxWind.MaskType.inside, // 默认是 inside，即只显示范围内的
  // }
});

map.addLayer(layer);