Leaflet 什么是；TypeError:无法分配给只读属性'；数据'；对象的'#&书信电报；ImageData>'&引用；是说，在向传单地图添加热图图层时？

我正在使用模具创建一个web组件，以显示传单热图

将热图图层添加到我的传单贴图时，会发生以下情况

我找不到任何关于如何解决这个错误的信息。 我尝试了一种不同的方法来添加图层，如本页所示：。 但它抛出了同样的错误

这可能是stenciljs的问题吗

下面是我的代码， 我找到了错误发生的确切位置，并用注释标记了它

谢谢你的帮助

import { Component, Prop, h } from '@stencil/core';
import firebase from 'firebase/app';
import 'firebase/database';
import * as L from 'leaflet'
import HeatmapOverlay from "heatmap.js/plugins/leaflet-heatmap"

@Component({
    tag: 'activity-map',
    styleUrl: 'activity-map.css',
})
export class IsActivityMap {

    @Prop() apikey: string;
    @Prop() url: string;
    @Prop() dark: boolean;
    @Prop() mode: "live" | "history";

    private map: L.Map;
    private heatmapLayer: HeatmapOverlay;
    private realtimeDb: firebase.database.Database;
  
    render() {
        return <div id='is-activity-map'></div>;
    }

    componentDidRender() {
        // Initialize Realtime Database
        firebase.initializeApp({apiKey: this.apikey , databaseURL: this.url});
        this.realtimeDb = firebase.database();

        // Initialize leaflet map
        this.map = L.map('is-activity-map').setView([20, 10], 2);
        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=token', {
            maxZoom: 18,
            minZoom: 2,
            id: this.dark ? 'mapbox/dark-v10' : 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1
        }).addTo(this.map);

        if (this.mode == "history") {
            // Initialie heatmap layer
            this.heatmapLayer = new HeatmapOverlay({"radius": 20});
            this.heatmapLayer.setData({max: 1000, data: [{lat: 47, lng: 8, value: 100}]});

            // Error happens here
            console.log("Error happens in next Line");
            this.map.addLayer(this.heatmapLayer);
            console.log("Error happens in previous Line");

            // Fill heatmap data
            this.realtimeDb.ref("test_contributions").once("value").then( (snapshot) => {
                snapshot.forEach( (childSnapshot) => {
                    // this.heatmapLayer.addData({});
                    console.log(childSnapshot.key, childSnapshot.numChildren());
                })
            })
        } 
    }
}

从'@stencil/core'导入{Component，Prop，h}；
从“firebase/app”导入firebase；
导入“firebase/数据库”；
从“传单”导入*作为L
从“heatmap.js/plugins/传单heatmap”导入HeatmapOverlay
@组成部分({
标记：“活动地图”，
styleUrl:'activity map.css'，
})
导出类IsActivityMap{
@Prop（）键：字符串；
@Prop（）url:string；
@Prop（）暗：布尔值；
@Prop（）模式：“实时”|“历史”；
私人地图：L.地图；
私有热图层：热图覆盖；
私有实时数据库：firebase.database.database；
render（）{
返回；
}
componentDidRender（）{
//初始化实时数据库
firebase.initializeApp（{apiKey:this.apiKey，databaseURL:this.url}）；
this.realtimeDb=firebase.database（）；
//初始化单张图
this.map=L.map（'is-activity-map'）.setView（[20,10]，2）；
L.tileLayer（'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}？access_token=token'{
maxZoom:18，
minZoom:2，
id:this.dark？'mapbox/dark-v10'：'mapbox/streets-v11'，
tileSize:512，
Zoomofset:-1
}).addTo（此.map）；
如果（this.mode==“历史”）{
//初始热图层
this.heatmapLayer=新的HeatmapOverlay（{“半径”：20}）；
setData（{max:1000，data:[{lat:47，lng:8，value:100}]）；
//这里发生了错误
log（“错误发生在下一行”）；
this.map.addLayer（this.heatmapLayer）；
log（“前一行发生错误”）；
//填充热图数据
这个.realtimeDb.ref（“测试贡献”）。一次（“值”）。然后（（快照）=>{
snapshot.forEach（（childSnapshot）=>{
//this.heatmapLayer.addData（{}）；
log（childSnapshot.key，childSnapshot.numChildren（））；
})
})
} 
}
}