Reactjs 反应贴图框图层未显示

我尝试使用React Mapbox，但在使用图层组件时遇到了一些问题

我正在尝试跟随这个演示：

甚至主页上的“快速入门”演示：

我的地图正在显示，但图层没有显示！ 这是我的密码：

import React, { useState } from "react";
import ReactMapboxGl, { Layer, Feature, ZoomControl, Marker } from "react-mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
const data = require("./heatmapData.json");

function LiveMap(props) {

  const Map = ReactMapboxGl({
    accessToken: "pk.ey",
  });

  const heatmapPaint = {
    "heatmap-weight": {
      property: "priceIndicator",
      type: "exponential",
      stops: [
        [0, 0],
        [5, 2],
      ],
    },
    // Increase the heatmap color weight weight by zoom level
    // heatmap-ntensity is a multiplier on top of heatmap-weight
    "heatmap-intensity": {
      stops: [
        [0, 0],
        [5, 1.2],
      ],
    },
    // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
    // Begin color ramp at 0-stop with a 0-transparancy color
    // to create a blur-like effect.
    "heatmap-color": [
      "interpolate",
      ["linear"],
      ["heatmap-density"],
      0,
      "rgba(33,102,172,0)",
      0.25,
      "rgb(103,169,207)",
      0.5,
      "rgb(209,229,240)",
      0.8,
      "rgb(253,219,199)",
      1,
      "rgb(239,138,98)",
      2,
      "rgb(178,24,43)",
    ],
    // Adjust the heatmap radius by zoom level
    "heatmap-radius": {
      stops: [
        [0, 1],
        [5, 50],
      ],
    },
  };

  return (
    <section>
      {/* block */}
      <div className="p-5 rounded-lg">
        {/* map */}
        <Map
          className="h-half rounded-lg shadow-lg z-0"
          style="mapbox://styles/mapbox/streets-v9"
          center={[-0.481747846041145, 51.3233379650232]}
        >
          <ZoomControl />
          <Layer type="heatmap" paint={heatmapPaint}>
            {data.map((el, index) => (
              <Feature key={index} coordinates={el.latlng} properties={el} />
            ))}
          </Layer>

          <Layer type="symbol" id="marker" layout={{ "icon-image": "marker-15" }}>
            <Feature coordinates={[-0.481747846041145, 51.3233379650232]} />
          </Layer>
        </Map>
      </div>
    </section>
  );
}

export default LiveMap;

import React，{useState}来自“React”；
从“react mapbox gl”导入react MapboxGL、{图层、特征、缩放控制、标记}；
导入“mapbox gl/dist/mapbox gl.css”；
const data=require（“./heatmapData.json”）；
功能LiveMap（道具）{
const Map=ReactMapboxGl({
accessToken:“pk.ey”，
});
常数热图油漆={
“热图重量”：{
属性：“priceIndicator”，
类型：“指数”，
停止：[
[0, 0],
[5, 2],
],
},
//按缩放级别增加热图颜色权重
//热图强度是热图权重之上的一个乘数
“热图强度”：{
停止：[
[0, 0],
[5, 1.2],
],
},
//热图的颜色渐变。域为0（低）到1（高）。
//使用0透明度颜色在0停止时开始颜色渐变
//以创建类似模糊的效果。
“热图颜色”：[
“插入”，
[“线性”]，
[“热图密度”]，
0,
“rgba（33102172,0）”，
0.25,
“rgb（103169207）”，
0.5,
“rgb（209229240）”，
0.8,
“rgb（25321199）”，
1.
“rgb（239138,98）”，
2.
“rgb（178,24,43）”，
],
//按缩放级别调整热图半径
“热图半径”：{
停止：[
[0, 1],
[5, 50],
],
},
};
返回(
{/*块*/}
{/*映射*/}
{data.map（（el，index）=>(
))}
);
}
导出默认的LiveMap；

---

我不明白为什么我的热图或我的符号没有显示在地图上。我做错了什么？

好的，经过进一步研究，我发现问题出在react mapbox gl的最新版本（

5.0.0

）中。安装

react映射框-gl@4.8.6

终于显示了我的图层，一切正常。

---

我不知道版本

5.0.0

有什么问题。希望他们能尽快解决这个问题。

我也遇到过同样的问题，这个问题也适用于缩放控制和标记。react mapbox gl 5.0.0版仍有问题需要解决