Leaflet 中的连续等值线图

Question

我想在 Leaflet.js 中创建一个连续的等值线图。具体来说，我有一堆我有数据的地理点（值范围从 0.0 到 1.0），我想创建一个地图，其中地图上的每个点都有一个从存在数据的最近点插值的值。

在 Leaflet.js 中有没有简单的方法可以做到这一点？我想我可以创建一大堆多边形来近似连续地图，但这会很快变得很重。是否有任何插件可以执行此操作，或者是用 D3 之类的东西编写我自己的代码的最佳解决方案？

Answer 1

如果我对你的问题的理解正确Turf.js isolines就是你要找的。

Answer 2

虽然多边形可能不是理想的解决方案，但使用 Turf.tin 可以轻松创建它们，因此可能值得一试。假设您有一个带有一堆点的 GeoJSON 对象，并且它们有一个名为 size 的属性，您希望对 TIN 进行平均并使用色带显示。以下代码将执行此操作：

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
    };
}

我正在使用 chroma.js to create the color ramp, but you could also create your own function (as in the Leaflet choropleth example）。这是在一些合成 GeoJSON 数据上使用此技术的 fiddle：

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

这个用了1000点，速度还算可以吧。如果将 dotcount 增加到 10000，它会明显变慢，但并非完全无法使用。它是否适用于您的情况可能取决于您有多少点（当然还有 TIN 是否为您的目的提供足够平滑的插值）。

Leaflet 中的连续等值线图

Continuous choropleth map in Leaflet

maps

leaflet