使用Leaflet与React集成MapTiler温度图层时遇'object is not a layer'错误

错误原因 #

1. 代码创建了TemperatureLayer实例但未实际添加到地图，反而操作空的L.layerGroup()，完全没用到目标图层
2. Maptiler SDK的TemperatureLayer是基于自身Map实例的图层，不能直接通过Leaflet的addLayer方法添加，类型不匹配导致报错

修正后的代码 #

import { useEffect, useContext } from 'react';
import { useMap } from 'react-leaflet';
import LeafletContext from '../../context/leaflet/leafletContext';
import { config } from '@maptiler/sdk';
import { TemperatureLayer, ColorRamp } from '@maptiler/weather';

const TemperatureLayerMapTiler = ({ data }) => {
    const { resize } = useContext(LeafletContext);
    const map = useMap();
    config.apiKey = '你的实际API密钥'; // 替换为真实的Maptiler密钥
    let temperatureLayer = null;

    useEffect(() => {
        // 初始化温度图层
        temperatureLayer = new TemperatureLayer({
            colorramp: ColorRamp.builtin.TEMPERATURE_3
        });

        // 获取Maptiler的Map实例（前提是你的底图用的是Maptiler）
        const maptilerMap = map.getContainer()._maptilerMap;
        if (maptilerMap) {
            maptilerMap.addLayer(temperatureLayer);
        }

        // 组件卸载时移除图层
        return () => {
            if (maptilerMap && temperatureLayer) {
                maptilerMap.removeLayer(temperatureLayer);
            }
        };
    }, [map]);

    return null;
};

export default TemperatureLayerMapTiler;

关键修改点 #

• 移除冗余的L.layerGroup()、jquery、axios等无用代码
• 实际创建并使用TemperatureLayer实例，而非空图层组
• 通过Leaflet地图容器获取Maptiler原生Map实例，调用其addLayer方法添加温度图层（Maptiler图层只能添加到自身Map实例）
• 添加组件卸载时的图层清理逻辑，避免内存泄漏

注意事项 #

• 确保你的React-Leaflet地图使用Maptiler作为底图，否则无法获取_maptilerMap实例
• 必须替换config.apiKey为你的真实Maptiler API密钥

内容的提问来源于stack exchange，提问作者Web Dev