ReactJS中GeoJSON热力图无颜色显示问题排查

参考Stack Overflow的《Is there a way to use leaflet.heat in react?》解决方案复制代码后，出现热力图无颜色显示的问题（效果如图：）。API能正常返回结果，但地图仅显示Marker，热力图无颜色渲染，控制台无报错信息。已确认是变量或代码顺序问题，但多次调整后仍未解决。

相关代码片段 #

currentPosition原子状态定义 #

export const currentPosition = atom({
  key: "currentPosition",
  default: [-2.600, -11.01],
});

getLocationCity请求函数 #

export const getLocationCity = async (params) => {
  try {
    const body = DataCustom(params);
    const result = await instanceArcgis.post(
      "/rest/HomeLocation/11/query",
      body,
    );
    return await result?.data;
  } catch (error) {
    console.log(error);
  }
};

完整组件代码 #

import React, { useEffect, useState, useRef } from "react";
import { GeoJSON } from "react-leaflet";
import { useRecoilValue, useSetRecoilState } from "recoil";
import HeatmapOverlay from "leaflet-heatmap";
import { arcgisToken } from "../recoil";
import { mapBounds, loadingMap } from "../state";
import { getLocationCity } from "../data/arcgis";
import "leaflet.heat";

export default function HGood() {
    const [data, setData] = useState();
    const setIsLoading = useSetRecoilState(loadingMap);
    const bounds = useRecoilValue(mapBounds);
    const tokenArcgis = useRecoilValue(arcgisToken);
    const geoJsonLayer = useRef(null);

    useEffect(() => {
        const fetchDataSpeedtestKel = () => {
            const body = {
                returnGeometry: true,
                rollbackOnFailure: true,
                geometry: JSON.stringify({
                    xmin: bounds.west,
                    ymin: bounds.south,
                    xmax: bounds.east,
                    ymax: bounds.north,
                    spatialReference: { wkid: 4326 },
                }),
                geometryType: "esriGeometryEnvelope",
                token: tokenArcgis,
            };

            setIsLoading(true);
            getLocationCity(body)
                .then((response) => {
                    let array = [];
                    let points = [];
                    response.features.forEach((element) => {
                        points.push([
                            element["geometry"]["x"],
                            element["geometry"]["y"],
                        ]);

                        array.push({
                            type: "Feature",
                            properties: element["attributes"],
                            geometry: {
                                type: "Point",
                                coordinates: [
                                    element["geometry"]["x"],
                                    element["geometry"]["y"],
                                ],
                            },
                        });
                    });

                    const FeatureCollection = {
                        type: "FeatureCollection",
                        features: array,
                    };

                    let feature = {
                        type: "Feature",
                        properties: body,
                        geometry: setData(FeatureCollection),
                    };

                    if (geoJsonLayer.current) {
                        geoJsonLayer.current.clearLayers().addData(FeatureCollection);
                    }

                    array.push(feature);

                    // L.heatLayer(points, {
                    //     radius: 0.1,
                    //     maxOpacity: 1,
                    //     scaleRadius: true,
                    //     useLocalExtrema: true,
                    // }).addTo(array);
                })
                .catch((err) => console.log(err))
                .finally(() => setIsLoading(false))
        };

        fetchDataSpeedtestKel();
    }, [bounds, setIsLoading, tokenArcgis]);

    if (data) {
        return (
            <>
                <GeoJSON
                    ref={geoJsonLayer}
                    data={data}
                />
            </>
        );
    }
}

内容的提问来源于stack exchange，提问作者Aniw Anie