contour-plane

contour-plane

contour plane layer for maplibre-gl | mapbox-gl | bmap | amap or webgl native

quick start

npm i contour-plane-core
npm i contour-plane-maplibre
npm i contour-plane-mapbox
...

example for mapbox

import * as mapboxgl from "mapbox-gl"
import ContourLayer from "contour-plane-mapbox"

initMap(container).then(map => {
  const layer = initLayer()
  map.addLayer(layer)
})

async function initMap() {
  const container = document.createElement("div");
  container.style.height = "100vh";
  document.body.append(container);
  const map = new mapboxgl.Map({
    container, 
    style: 'mapbox://styles/mapbox/streets-v12',
    center: [105, 35], 
    zoom: 3.5
  });
  await new Promise((resolve) => map.on("load", resolve));
  return map;
}

function initLayer() {
  return new ContourLayer({
    img: 'https://raw.githubusercontent.com/wsi18n/contour-plane/main/demo/src/assests/wind-mc.png', // img url | HTMLImageElement
    projection: 'mercator', // 'mercator' | 'equiRectangular'
    imgColorType: 'rgb', // 'r' | 'rgb'
    // if (imgColorType === 'rgb')
    // typeof minmax is { r?: [number. number], g?: [number. number], b?: [number. number] }
    // if (imgColorType === 'r')
    // typeof minmax is [number. number]
    minmax: {
      r: [-22.249428, 28.880571],
      g: [-25.248064, 26.701937],
    }, 
    opacity: (zoom: number) => 3 / zoom, // number | (zoom) => number
    colorSteps: {
      0: 'rgba(0, 0, 0, 0)',
      8: 'rgba(255, 255, 255, 0.5)',
      10.8: 'rgba(20, 120, 255, 1)', // 大风蓝色预警(风力6级)
      17.2: 'rgba(255, 220, 20, 1)', // 大风黄色预警(风力8级)
      24.5: 'rgba(255, 130, 20, 1)', // 大风橙色预警(风力10级)
      32.7: 'rgba(255, 20, 20, 1)', // 大风红色预警(风力12级)
    },
  })
}

result:

more options

layer.update({ colorGrade: 10 }) // default: 64

layer.update({ imgTextureFilter: 'NEAREST' }) // default: 'LINEAR'