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这个库(因为没有从网上看到相应的功能用这个库写的代码),最终还是改出来了(终于!)