地図上のラインを滑らかに表示する
geojsonのラインを補完して滑らかに表示してみました。
ちょこっと解説
d3.lineのcurveメソッドをgeojsonから再生されたパスに適用しています。d3.geoPathで生成されたパスデータを分解して配列に変換し、d3.lineのパスジェネレーターに渡すという二度手間な方法で実現してます。
この辺り、もう少しスマートな方法があるかもしれません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//パスジェネレーター作成 const path = d3.geoPath().projection(googleMapProjection); const interpolate = d3.line() .x(d => d[0] ) .y(d => d[1] ) .curve(d3.curveBasis); const smoothPath = (pstr) => { const sp = path(pstr).replace(/M|Z/, "").split("L").map(d => d.split(",") ); return interpolate(sp); } |
|
1 2 3 |
path(geodata) //-> 通常のラインを生成 smoothPath(geodata) //-> 滑らかなラインを生成 |
