Question

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

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

Answer 1

虽然多边形可能不是理想的解决方案，但它们很容易使用the PHP docs创建，因此可能值得一试。假设您有一个带有一堆点的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
    };
}

我使用Turf.tin创建颜色渐变，但您也可以创建自己的函数（如传单chroma.js）。以下是在一些合成GeoJSON数据上使用此技术的小提琴：

choropleth example

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

Answer 2

如果我正确理解您的问题，Turf.js isolines就是您正在寻找的。

Leaflet中的连续等值线图

2 个答案: