如何更新react-map-gl中的线层？

Question

setData()

，该功能用于更新源，然后触发地图的重新渲染（

Https：//docs.mapbox.com/mapbox-gl-js/api/sources/sources/#geojsonsource#sonsource#setdata2）。这正是我想要的，但是不幸的是，我找不到使用

react-map-gl的方法来实施此操作。 您是否知道此React框架中是否存在类似的功能，或者如何更新行层？ 我在试图通过保存在反应状态下的geojson对象时遇到了完全相同的问题。解决问题的解决方案是设置不同的键并强制重新渲染

<Source>

组件的重新渲染。或者，您也可以使用toxpance toxpain tox tox togarde。

uuid

Answer 1

从此

github页面上，有人解释说

import React, { useState } from 'react';
import Map, { Source } from 'react-map-gl';

const MyMap = () => {
  const [geojson, setGeojson] = useState(initialGeojson);
  const [key, setKey] = useState(0);

  // Function to update GeoJSON
  const updateGeojson = (newGeojson) => {
    setGeojson(newGeojson);
    setKey(key + 1); // Increment key to force re-render
  };

  return (
    <Map {...viewport}>
      <Source id="my-data" type="geojson" data={geojson} key={key}>
        {/* Add your layers here */}
      </Source>
    </Map>
  );
};

是

purecomponent

。在第一个渲染之后，除非浅更浅，即旧值！== newValue，它不会更新。当您突变JSON数据时，它仍然是相同的对象，因此React不会检测到更改。