leaflet.canvaslayer.field.js使用时遇到的问题

1、L.canvasLayer.vectorFieldAnim每次重新绘制的时候会报出如下错误：

Uncaught TypeError: Cannot read properties of null (reading 'latLngToContainerPoint')
    at e._drawParticle (L.CanvasLayer.VectorFieldAnim.js:122:42)
    at L.CanvasLayer.VectorFieldAnim.js:109:22
    at Array.forEach (<anonymous>)
    at L.CanvasLayer.VectorFieldAnim.js:108:19
    at Mn (d3.v4.min.js:2:19737)
    at Tn (d3.v4.min.js:2:19811)

解决方法：通过查看该库源码并进行修改，报错原因是因为有时值为null，对此进行错误捕获处理即可，改后代码如下：

      _drawParticle: function (t, e, r) {
        var flags = 0;

        var n = new L.latLng(r.y, r.x),a = new L.latLng(r.yt, r.xt);
        if(n == null || a == null)return;
        if (t.bounds.contains(n) && r.age <= this.options.maxAge) {
        try{
              var o = t.layer._map.latLngToContainerPoint(n),i = t.layer._map.latLngToContainerPoint(a);
        }catch{
            flags++;
        }
          if(flags != 0)return;
          e.beginPath(),
            e.moveTo(o.x, o.y),
            e.lineTo(i.x, i.y),
            (r.x = r.xt),
            (r.y = r.yt);
          var l = this.options.color;
          "function" == typeof l && (e.strokeStyle = l(r.m));
          var s = this.options.width;
          "function" == typeof s && (e.lineWidth = s(r.m)), e.stroke();
        }
      },

2、L.canvasLayer.vectorFieldAnim每次重新绘制的时候粒子数目貌似是上一次绘制数目与本次之和，解决方法如下

但是好像改后新绘制时流速会比上一次慢，这个小bug没改

      _prepareParticlePaths: function () {
        var t = this._paths || [],len = t.length,i;
        for (i = len; i < this.options.paths; i++) {
            var r = this._field.randomPosition();
            (r.age = this._randomAge()), t.push(r);
        }
        // 清除多余的路径
        for (i = this.options.paths; i < len; i++) {
            t[i].age = this.options.maxAge;
        }
        // 记录数组
        this._paths = t;
        return t;
      },

3、热力图绘制时因绘制为方形在图上过于突兀（这个不算什么大问题

解决方法：将颜色列表前几位设为透明色

4、总结：

老师的作业，库是老师建议使用的库，文件格式是nc的格式。开始遇到这些问题时没想到要动库感觉换一些方式也行，又写了一版网上比较常规的用leaflet-velocity.js的版本，但是这个库要求的是json格式（grib2json转换后的版本），考虑还要想办法把nc转成grib就更心烦。网上看到的相似的例子是 中国海洋预报网 ，本来想做一下参考但是他们对关键代码进行了混淆，解密了大约1/4的时候想到应该去改动一下leaflet.canvaslayer.field.js这个库（因为没有从网上看到相应的功能用这个库写的代码），最终还是改出来了（终于！）