如何在Leaflet中同时使用Terminator与热力图？

问题原因 #

Leaflet Terminator（昼夜分界线）作为矢量图层，与热力图（Canvas图层）在默认层级下会出现互相覆盖的情况，导致其中一个图层无法显示。两者的渲染容器或z-index设置冲突是核心诱因。

解决方案 #

方案1：手动设置图层z-index #

通过调整两个图层的z-index值，明确层级关系，确保两个图层都能正常显示：

1. 先加载热力图，再添加Terminator并设置较低z-index
   在热力图添加完成后，添加Terminator并将其z-index设为低于热力图（热力图默认z-index为400）：

// 热力图初始化与数据设置完成后
heatmapLayer.setData(mapHeatData);
// 添加Terminator并设置层级
L.terminator().addTo(map).setZIndex(300);

2. 先加载Terminator，提升热力图z-index
   若需优先加载Terminator，可在添加热力图后手动设置更高的z-index：

// 先添加Terminator
L.terminator().addTo(map).setZIndex(300);
// 初始化热力图并设置更高层级
var heatmapLayer = new HeatmapOverlay(cfg);
heatmap_layer = heatmapLayer.addTo(map);
heatmapLayer.setZIndex(500);
heatmapLayer.setData(mapHeatData);

方案2：为Terminator创建独立图层Pane #

创建独立的Pane来管理Terminator的渲染层级，彻底避免与热力图的容器冲突：

// 初始化map后创建新Pane
map.createPane('terminatorPane');
// 设置该Pane的z-index低于热力图所在的overlayPane（默认400）
map.getPane('terminatorPane').style.zIndex = 300;
// 将Terminator添加到新Pane中
L.terminator({ pane: 'terminatorPane' }).addTo(map);

方案3：调整热力图透明度 #

适当提高热力图的透明度，确保Terminator可以透过热力图显示：

var cfg = {
    // 其他配置不变
    "maxOpacity": .7, // 提高透明度值
    // 其他配置不变
};

完整修改示例（关键片段） #

以下是整合方案1的runMap函数修改后版本：

function runMap() {
    map = new L.map('map', {
        maxZoom: 10,
        minZoom: 0.1,
        attributionControl: false,
    });

    // 省略屏幕高度判断、水印添加等代码...

    generateMapHeatData();

    // 热力图配置与初始化
    var cfg = {
        "radius": 5,
        "maxOpacity": .5,
        "minOpacity": .02,
        blur: .75,
        gradient: {
            '.35': '#00e500',
            '.40': '#00e500',
            '.50': '#00e500'
        },
        "scaleRadius": true,
        "useLocalExtrema": false,
        latField: 'lat',
        lngField: 'lng',
        valueField: 'count'
    };
    var heatmapLayer = new HeatmapOverlay(cfg);
    heatmap_layer = heatmapLayer.addTo(map);
    heatmapLayer.setData(mapHeatData);

    // 添加Terminator并设置层级
    L.terminator().addTo(map).setZIndex(300);

    // 省略标记层、echarts层添加代码...
}

内容的提问来源于stack exchange，提问作者Chan Kar Fong