Leaflet中的连续等值线图答案

【问题标题】：Continuous choropleth map in LeafletLeaflet中的连续等值线图
【发布时间】：2016-03-29 05:22:40
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

虽然多边形可能不是理想的解决方案，但使用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 创建颜色渐变，但您也可以创建自己的函数（如在传单choropleth example 中）。这是在一些合成 GeoJSON 数据上使用这种技术的小提琴：

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

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

【讨论】：

【解决方案2】：

如果我正确理解您的问题，Turf.js isolines 就是您要查找的内容。

【讨论】：

不，这里没有插值。
好吧，它会生成内插等值线（等高线），密度取决于您作为 turf.isolines() 函数的参数传递的中断数。当然，它不是连续的，但可能效果很好。