基于maobox-gl.js、turf.js 绘制全球色斑图绘制

1、准备全球的某一类的点位数据，可以使用turf.js 随机生成点，并点数据赋properties属性

let points = turf.randomPoint(30, { bbox: [-180, -90, 180, 90]});
let interpolateOptions = {gridType: "points",property: "value",units: "degrees",weight: 10
};
let resultPoint = turf.interpolate(points, 0.5, interpolate_options);

2、结合第一步的点数据，取带有z值和一组值断点的点Feature的网格FeatureCollection，并生成填充的等边线

 let isobandsOptions = {zProperty: "result",commonProperties: {"fill-opacity": 0.6,},breaksProperties: [{ fill: "#ffcc00" },{ fill: "#baff00" },{ fill: "#92ff00" },{ fill: "#00ff36" },{ fill: "#00ffae" },{ fill: "#00d8ff" },{ fill: "#3f00ff" },{ fill: "#7b00ff" },{ fill: "#cb00ff" },],};let isobands: any = turf.isobands(grid,[2, 3, 4, 5, 6, 7, 8],isobandsOptions );

3、加载结果数据

// 可视化部分const addIsobands = () => {map.addSource("intersection", {type: "geojson",data: isobands,});map.addLayer({id: "intersection",type: "fill",source: "intersection",layout: {},paint: {"fill-color": ["get", "fill"],"fill-opacity": ["case",["boolean", ["feature-state", "hover"], false],0.8,0.5,],"fill-outline-color": "transparent",},});};