react + openlayer实现克里金插值效果

主要用了turf + openlayer 实现
克里金插值组件：

import React, { useContext, useEffect, useRef } from 'react';
import { ContentlayersContext, OpenlayersContext } from '&/core/context';
import moment from 'moment';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import * as turf from '@turf/turf';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import { Circle, Style, Icon, Fill } from 'ol/style';
import GeoJSON from 'ol/format/GeoJSON';
import { wgs84togcj02 } from '&/commonjs/coordinateUtils';

export default (props) => {
  const { time, mode, currentStd } = useContext(ContentlayersContext);
  const { map } = useContext(OpenlayersContext);

  let canvasLayer = useRef(null);
  useEffect(() => {
    if (!props.visible || !currentStd.wgs84_lat) {
      map.removeLayer(canvasLayer.current);
      return;
    }
    if (canvasLayer.current !== null) {
      map.removeLayer(canvasLayer.current);
    }
    let params = {
      mapCenter: wgs84togcj02(currentStd.wgs84_lng, currentStd.wgs84_lat),
      maxValue: 100,
      krigingModel: 'exponential', //model还可选'gaussian','spherical'
      krigingSigma2: 0,
      krigingAlpha: 100,
      canvasAlpha: 0.7, //canvas图层透明度
      colors: [
        'rgb(165,0,38)',
        'rgb(215,48,39)',
        'rgb(244,109,67)',
        'rgb(253,174,97)',
        'rgb(254,224,139)',
        'rgb(255,255,191)',
        'rgb(217,239,139)',
        'rgb(166,217,106)',
        'rgb(102,189,99)',
        'rgb(26,152,80)',
        'rgb(0,104,55)',
      ],
    };
    let WFSVectorSource = new VectorSource(); //获取selectFeature
    //创建10个位置随机、属性值随机的特征点
    for (let i = 0; i < 100; i++) {
      let feature = new Feature({
        geometry: new Point([
          params.mapCenter[0] + Math.random() * 0.01 - 0.005,
          params.mapCenter[1] + Math.random() * 0.01 - 0.005,
        ]),
        value: Math.round(Math.random() * params.maxValue),
      });

      WFSVectorSource.addFeature(feature);
    }

    //利用网格计算点集
    const gridFeatureCollection = function (grid, xlim, ylim) {
      var range = grid.zlim[1] - grid.zlim[0];
      var i, j, x, y, z;
      var n = grid.length; //列数
      var m = grid[0].length; //行数
      var pointArray = [];
      for (i = 0; i < n; i++)
        for (j = 0; j < m; j++) {
          x = i * grid.width + grid.xlim[0];
          y = j * grid.width + grid.ylim[0];
          z = (grid[i][j] - grid.zlim[0]) / range;
          if (z < 0.0) z = 0.0;
          if (z > 1.0) z = 1.0;
          pointArray.push(turf.point([x, y], { value: z }));
        }
      return pointArray;
    };

    //绘制kriging插值图
    const drawKriging = (extent) => {
      let values = [],
        lngs = [],
        lats = [];
      selectedFeatures.forEach((feature) => {
        values.push(feature.values_.value);
        lngs.push(feature.values_.geometry.flatCoordinates[0]);
        lats.push(feature.values_.geometry.flatCoordinates[1]);
      });
      if (values.length > 3) {
        // eslint-disable-next-line
        let variogram = kriging.train(
          values,
          lngs,
          lats,
          params.krigingModel,
          params.krigingSigma2,
          params.krigingAlpha
        );
        let polygons = [];
        polygons.push([
          [extent[0], extent[1]],
          [extent[0], extent[3]],
          [extent[2], extent[3]],
          [extent[2], extent[1]],
        ]);
        // eslint-disable-next-line
        let grid = kriging.grid(
          polygons,
          variogram,
          (extent[2] - extent[0]) / 200
        );

        let vectorSource = new VectorSource();
        canvasLayer.current = new VectorLayer({
          source: vectorSource,
          opacity: 0.7,
          style: function (feature) {
            var style = new Style({
              fill: new Fill({
                color:
                  params.colors[
                    parseFloat(feature.get('value').split('-')[1]) * 10
                  ],
              }),
            });
            return style;
          },
        });
        //使用turf渲染等值面/线
        let fc = gridFeatureCollection(
          grid,
          [extent[0], extent[2]],
          [extent[1], extent[3]]
        );
        var collection = turf.featureCollection(fc);
        var breaks = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0];
        var isobands = turf.isobands(collection, breaks, {
          zProperty: 'value',
        });
        function sortArea(a, b) {
          return turf.area(b) - turf.area(a);
        }
        //按照面积对图层进行排序，规避turf的一个bug
        isobands.features.sort(sortArea);
        var polyFeatures = new GeoJSON().readFeatures(isobands, {
          featureProjection: 'EPSG:3857',
        });
        vectorSource.addFeatures(polyFeatures);

        map.addLayer(canvasLayer.current);
      } else {
        alert('有效样点个数不足，无法插值');
      }
    };

    //首次加载，自动渲染一次差值图
    let selectedFeatures = [];
    let extent = [
      params.mapCenter[0] - 0.02,
      params.mapCenter[1] - 0.02,
      params.mapCenter[0] + 0.02,
      params.mapCenter[1] + 0.02,
    ];
    WFSVectorSource.forEachFeatureIntersectingExtent(extent, (feature) => {
      selectedFeatures.push(feature);
    });
    drawKriging(extent);
  }, [props.visible, mode, time, currentStd]);

  return null;
};

实现效果：