リーフレットの連続的なコレラマップ

Question

リーフレット.jsで連続的なコレラマップを作成したいと思います。具体的には、私はデータがある（0.0から1.0の範囲の値を持つ）地理的な点の束を持っていて、マップ上の各点がデータが存在する最も近い点から補間された値を持つマップを作成したいと思います。

Leaflet.jsでこれを行う簡単な方法はありますか？私は連続したマップを近似するためにポリゴンをたくさん作成することができたと思いますが、それは速く重くなります。これを行うプラグインはありますか、またはD3のようなもので自分のコードを書くための最良のソリューションですか？

Answer 1

ポリゴンは理想的な解決策ではないかもしれませんが、Turf.tinで作成するのは簡単なので、チェックアウトすることをお勧めします。たくさんのポイントを持つGeoJSONオブジェクトを持っていて、sizeというプロパティがあり、TINで平均化してカラーランプで表示したいとします。私はカラーランプを作成するchroma.jsを使用してい

var maxAvg = 0 
var tin = turf.tin(dots, 'size') 
for (var i = 0; i < tin.features.length; i++) { 
    var properties = tin.features[i].properties; 
    properties.average = (properties.a+properties.b+properties.c)/3; 
    if (properties.average > maxAvg) maxAvg = properties.average; 
} 

colorRamp = chroma.scale('YlGnBu'); 
L.geoJson(tin, {style: tinStyle}).addTo(map); 

function tinStyle(feature) { 
    return { 
     fillColor: colorRamp(feature.properties.average/maxAvg), 
     weight: 0, 
     fillOpacity: 0.7 
    }; 
} 

ていますが、（リーフレットchoropleth exampleのように）独自の関数を作成することができます。次のコードは、それを行うだろう。ここではいくつかの合成にGeoJSONデータにこの技術を使用してフィドルです：

http://fiddle.jshell.net/nathansnider/rku0pvLL/

これは1000ポイントを使用しており、それが十分に迅速なようです。 dotcountを10000に増やすと、それは著しく遅くなりますが、完全に使用できなくなるわけではありません。あなたのケースで動作するかどうかは、おそらくあなたが持っているポイントの数に依存します（もちろん、TINがあなたの目的のために十分に滑らかな補間を与えるかどうか）。

Answer 2

あなたの問題を正しく理解している場合は、Turf.js isolinesがお探しのものです。