“TypeError：map.addLayer 不是函數”

Question

我從這個解決方案中復制代碼： 有沒有辦法在反應中使用leaflet.heat？ 我得到一個錯誤

TypeError: map.addLayer is not a function

在 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);
  }

我確定這是 var 或放置順序問題，但我嘗試了各種選項，但仍然無法正常工作。 它從 API 輸出結果，但沒有熱圖顏色出現，只是“標記”
完整的JS代碼：

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 HSales() {
    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) => {
                    const array = [];
                    response.features.forEach((element) => {
                        array.push({
                            type: "Feature",
                            properties: element["attributes"],
                            geometry: {
                                type: "Point",
                                coordinates: [
                                    element["geometry"]["x"],
                                    element["geometry"]["y"],
                                ],
                            },
                        });
                    });

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

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

                    const points = response.features
                        ? response.features.map((element) => {
                            return [
                                element["geometry"]["x"],
                                element["geometry"]["y"]
                            ];
                        })
                        : [];

                    setData(FeatureCollection);
                    L.heatLayer(points).addTo(position);
                    setPosition(data);
                })
                .catch((err) => console.log(err))
                .finally(() => setIsLoading(false));
        };

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

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

太感謝了！ 吉姆

Answer 1

setData(FeatureCollection);
L.heatLayer(points).addTo(position);
setPosition(data);

“setData”這個更新函數不會立即更新值。 相反，它將更新操作排入隊列。 然后，在重新渲染組件后，useState 的參數將被忽略，該函數將返回數據中的最新值。

也許你可以試試setPosition(FeatureCollection);