主要用了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;
};
实现效果: