基于maobox-gl 纯前端绘制全球色斑图

基于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",
      },
    });
  };