基于Leaflet.js和Turf.js的等值线区间自定义及颜色自适应实践

// 引入Leaflet和Turf库
import L from 'leaflet';
import turf from '@turf/turf';
 
// 初始化地图
const map = L.map('map').setView([39.916, 116.407], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18,
  attribution: '© OpenStreetMap contributors'
}).addTo(map);
 
// 定义等值线间隔和颜色数组
const breaks = [0, 10, 20, 30, 40];
const colors = ['#d73027', '#f46d43', '#fdae61', '#fee08b', '#d9ef8b', '#a6d96a', '#66bd63', '#1a9850', '#006837'];
 
// 使用Turf.js创建等值线样式
const createStyle = (breaks, colors) => {
  const steps = colors.length - 1;
  const styles = breaks.map((break, index) => {
    const color = colors[index] || colors[steps];
    const nextColor = colors[index + 1] || colors[steps];
    return {
      weight: 2,
      color,
      fillColor: color,
      fillOpacity: 0.5,
      ...(index < steps ? {
        // 使用Turf.js的interval函数创建等值线
        threshold: turf.interval(break, nextBreak, steps),
        nextBreak: breaks[index + 1]
      } : {})
    };
  });
  return styles;
};
 
// 添加等值线图层
L.geoJSON(geoJSONData, {
  style: createStyle(breaks, colors),
  onEachFeature: (feature, layer) => {
    // 根据属性值设置样式
    const value = feature.properties.value;
    const styleIndex = breaks.findIndex(b => value < b);
    layer.setStyle(createStyle(breaks, colors)[styleIndex]);
  }
}).addTo(map);

这段代码示例展示了如何使用Leaflet和Turf库来创建一个自定义的等值线图层，并根据属性值在特定间隔内进行颜色渐变。代码中的createStyle函数根据给定的间隔和颜色数组生成等值线样式数组，onEachFeature钩子则根据要素的属性值设置相应的样式。这样的实践可以帮助开发者理解如何结合Leaflet和Turf来创建更为复杂和动态的地理信息可视化。