関連記事：スウォッチマップの制作とバックエンドの無人自動描画
最初は何度か変更していましたが、記録がなく、今では理解できないので、急いで思い出して記録します。
kriging.js の変更点を思い出して記録します。
元の図面では、次のアルゴリズムの値に従って色を指定できません。
z = (grid[i][j]-grid.zlim[0])/range[2];
if(z<0.0) z = 0.0;
if(z>1.0) z = 1.0;
ctx.fillStyle = colors[Math.floor((colors.length-1)*z)]; 計算された値を0から1の範囲でのみロックし、この範囲の値の比率に応じて、カラーカード配列の比率に対応する桁を取得し、その桁の色を色として使用します。
つまり、値の範囲を 0 ～ 10 に設定した場合、最終的に計算されたポイントに 10 を超える値がある場合、その最大値が色の定義の上限として 10 に置き換わります。と色の関係は指定できない
ため、ここで変更する必要があります。
1. 単一のポイント値が設定値の特定の位置にあると判断する機能を追加するように修正されました。
getaidx = function(v,d) {
for(let i=0;i<d.length;i++)
if(v<=d[i]){
return i;//根据值来选定颜色索引号，小于等于
}
return d.length;
};描画時に Z 値の範囲として計算された値も、特定の値を直接使用するように変更する必要があります。
kriging.plot = function(canvas, grid, xlim, ylim, colors,idx) //将设定值数组 idx 传入
//原始:kriging.plot = function(canvas, grid, xlim, ylim, colors)
....
z =grid[i][j];// 原始:(grid[i][j]-grid.zlim[0])/range[2];//此处可用值直接设置颜色编号20201210
// if(z<0.0) z = 0.0;
// if(z>1.0) z = 1.0;//z=0.5;
ctx.fillStyle =colors[getaidx(z,idx)];//根据值来选定颜色索引号，小于等于// 原始:colors[Math.floor((colors.length-1)*z)]; これにより、描画値と色の正確な対応関係が実現され、本来の設定値範囲のように無効となるのではなく、正確な対応関係を実現することができる。
呼び出しメソッドもそれに応じて調整され、受信設定値の配列が追加されます。
kriging.plot(canvas, grid,[extent[0], extent[2]], [extent[1], extent[3]], params.colors,params.idx);
//原始:kriging.plot(canvas, grid,[extent[0], extent[2]], [extent[1], extent[3]], params.colors); 2. 同時に、2 点間のグラデーション カラーを画像全体の描画色として使用するために、別のカラー アルゴリズムを追加できます。
function getaidx2(v,d,c){
if(v<d[0]){return c[0];}
if(v>d[1]){return c[c.length-1];}//数组最大值为c.length-1
return c[Math.round((c.length-1)*(v-d[0])/(d[1]-d[0]))];//直接返回颜色值，因此渐变颜色为100个起步，故用此算法提高运算速度，不再象 getaidx 的使用循环
}色の選択も次のように変更されます
kriging.plot = function(canvas, grid, xlim, ylim, colors,idx)
...
z =grid[i][j];//原始: (grid[i][j]-grid.zlim[0])/range[2];//此处可用值直接设置颜色编号20201210
// if(z<0.0) z = 0.0;
// if(z>1.0) z = 1.0;//z=0.5;
ctx.fillStyle=getaidx2(z,idx,colors);同時に、カラー カードがグラデーション カラーの開始点と終了点として設定され、設定値も数値シーケンスのセットではなく開始点と終了点に変更されます。
var ctb=[{"v":[6,17],"c":["#C5FCC5","#008000"]},
{"v":[6,17],"c":["#cef7ef","#00804e"]},
{"v":[28,39],"c":["#ffff84","#6b0400"]},
{"v":[0.9,1.6],"c":["#efffce","#548000"]},
{"v":[101,128],"c":["#ffcece","#aa0000"]},
{"v":[16,23],"c":["#ffebce","#aa5000"]}
];//自定义色板
...
//cid为Url传入参数，对应绘图类型。
carr=colorSplit(ctb[cid].c,100);// colorSplit 用于将两个点之间的颜色分为指定渐变层次的颜色数组 // ctb[cid].c;
params.colors=carr;
valarr=ctb[cid].v;
params.idx=valarr;
同様に、呼び出しメソッドもそれに応じて調整され、受信設定値の配列が追加されます。
kriging.plot(canvas, grid,[extent[0], extent[2]], [extent[1], extent[3]], params.colors,params.idx);3. 次のステップでは、次のような指定されたマルチポイント カラー間にグラデーションを作成することを検討します。
まずカラーグラデーションアルゴリズムをアタッチし、
function colorSplit(c,n){
var c0="",c1="";
var sR=0,sG=0,sB=0;
var eR=0,eG=0,eB=0;
var R=0,G=0,B=0;
var sctmp="";
var f=1/3;
var cs=[];
c0=c[0];c1=c[1];
c0=vreplace(c0,"#","");c1=vreplace(c1,"#","");
sR = parseInt("0x" + mid(c0, 1, 2))
sG = parseInt("0x" + mid(c0, 3, 2))
sB = parseInt("0x" + mid(c0, 5, 2))
eR = parseInt("0x" + mid(c1, 1, 2))
eG = parseInt("0x" + mid(c1, 3, 2))
eB = parseInt("0x" + mid(c1, 5, 2))
R=eR-sR;G=eG-sG;B=eB-sB;
for(var i=0;i<=n;i++){
f=i/n;
sctmp="#"+ right("00"+(Math.round(sR+f*R)).toString(16),2)+right("00"+(Math.round(sG+f*G)).toString(16),2)+ right("00"+(Math.round(sB+f*B)).toString(16),2);
//console.log(sctmp);
cs.push(sctmp);
}
//console.log(cs);
return cs;
}マルチポイント カラー グラデーション アルゴリズムは後で追加されます。