风粒子绘制显示的不对，

sukaihua commented 3 weeks ago

您好，同一份数据用amap-wind绘制，显示结果是不对的（第一张图），用leaflet-velocity绘制是正确的（第二张图），我一直没找到原因是什么问题，在用amap-wind的时候是不是数据格式处理的不对。 amap-winder

数据文件： [Uploading test.json…]()

sukaihua commented 3 weeks ago

数据文件： test.json

sukaihua commented 2 weeks ago

@sakitam-fdd 麻烦大佬有时间帮忙看下数据

sakitam-fdd commented 2 weeks ago

@sukaihua leaflet 的

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>leaflet wind</title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/dat.gui@0.7.6/build/dat.gui.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/leaflet/dist/leaflet.css">
<style type="text/css">
  html, body {
    margin: 0;
    height: 100%;
    width: 100%
  }
  .container {
    width: 100%;
    height: 100%
  }
</style>
<body>

<div id="map" class="container">
  <div style="position: absolute; z-index: 9999; right: 20px; top: 20px">
    <button onclick="handleAdd()">添加</button>
    <button onclick="handleRemove()">移除</button>
  </div>
</div>
<script src="//cdn.jsdelivr.net/npm/leaflet/dist/leaflet-src.js"></script>
<script src="//cdn.jsdelivr.net/npm/dat.gui@0.7.6/build/dat.gui.js"></script>
<script src="../packages/leaflet/dist/leaflet-wind.js"></script>
<script>
  const map = new L.map('map', {
    // center: [113.53450137499999, 34.44104525],
    zoom: 5,
    center: [113.53450137499999, 34.44104525].reverse(),
    // zoom: 4
  });

  const layer = L.tileLayer('//{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
    subdomains: ['a', 'b', 'c', 'd'],
  });

  map.addLayer(layer);

  fetch('./data/test.json')
    .then(res => res.json())
    .then(res => {
      const data = res.map((item, idx) => {
        item.header = Object.assign(item.header, {
          parameterCategory: 1,
          parameterNumber: idx === 0 ? 2 : 3,
        });
        return item;
      });

      const windLayer = new leafletWind.WindLayer('wind', data, {
        windOptions: {
          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)"
          ],
          // velocityScale: 1 / 20,
          // paths: 5000,
          frameRate: 16,
          maxAge: 60,
          globalAlpha: 0.97,
          velocityScale: 0.005,
          // paths: 10000,
          paths: 1000,
          minVelocity: 0,
          maxVelocity: 15,
          particleMultiplier: 0.0033333333333333335,
        },
        fieldOptions: {
          wrapX: true,
          flipY: false
        }
      });

      window.windLayer = windLayer;

      map.addLayer(windLayer);
    });

  function handleAdd () {
    map.addLayer(window.windLayer);
    // map.addLayer(layer);
  }

  function handleRemove () {
    map.removeLayer(window.windLayer);
    // map.removeLayer(layer);
  }
</script>
</body>
</html>

试着配置一下

 fieldOptions: {
    wrapX: true,
    flipY: false
  }

sakitam-fdd commented 2 weeks ago

@sukaihua 再试试

sukaihua commented 2 weeks ago

已加上

sakitam-fdd / wind-layer

风粒子绘制显示的不对， #246