reactjs - react Mapbox 层未显示

Question

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

我正在尝试关注这个演示: https://github.com/alex3165/react-mapbox-gl/blob/master/example/src/demos/heatmap.tsx

甚至是主页上的“快速启动”演示: https://github.com/alex3165/react-mapbox-gl

我的 map 正在显示，但图层没有显示!这是我的代码:

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;

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

Answer 1

好的，经过更多研究，我发现问题出在 react-mapbox-gl 的最新版本(5.0.0)中。安装 react-mapbox-gl@4.8.6 终于显示了我的图层，一切正常。我不知道版本 5.0.0 有什么问题。希望他们能尽快解决这个问题。