mapbox空白贴图react-map-gl|ReactJS

Mapbox blank map React-map-gl | ReactJS(mapbox空白贴图react-map-gl|ReactJS)

本文介绍了mapbox空白贴图react-map-gl|ReactJS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用的是REACTION 17.0.1和REACTION-MAP-GL^6.0.2,我有一个MAP组件。

  1. 我尝试了其他库,但问题仍然存在
  2. 我已联系MapBox的支持人员
  3. 我已联系其他Mapbox用户

无法解决此问题

当我执行&npm运行start";没有问题时,它会显示地图,但当我执行&npm运行build";时,它只显示以下内容:map blank

并引发此错误:error

我的代码如下:

   import React, {useState } from "react";
import ReactMapGL from 'react-map-gl';
const Map = () => {
  const[viewport, setViewport] = useState({
    width: "100%",
    height: "400px",
    latitude: 38.963745,
    longitude: 35.243322,
    zoom: 5
  });
     return (
    <div>
      <h2>Size yakın olan yerleri keşfedin!</h2>
            <ReactMapGL
                 {...viewport}
              onViewportChange={setViewport}
              mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
              mapStyle="mapbox://styles/mapbox/streets-v11"
           />
          </div>
           );
        }
     export default Map

推荐答案

我知道这是一个老帖子..

据我所知,原因是Mapbox(不是react-map-gl)中有一个错误,无法使用";npm build";正确转换。

幸运的是,正如我在此链接中了解到的那样,您不必弹出您的应用程序: https://github.com/mapbox/mapbox-gl-js/issues/10173#issuecomment-753662795

我必须npm install worker-loader

然后添加以下行。

    // had this.
    import ReactMapGL, { FlyToInterpolator, NavigationControl } from 'react-map-gl';    import 'mapbox-gl/dist/mapbox-gl.css';


    // added the following 6 lines.
    import mapboxgl from 'mapbox-gl';

    // The following is required to stop "npm build" from transpiling mapbox code.
    // notice the exclamation point in the import.
    // @ts-ignore
    // eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved
    mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;

因为我使用的是TypeScript和linting,所以我必须添加一些指令来忽略警告/错误,否则这些警告/错误将停止编译。

请注意,我不必安装mapboxgl,因为react-map-gl使用它。

但是,我确实需要添加eslint-disable-next-line import/no-unresolved

eslint-disable-next-line import/no-webpack-loader-syntax 合并在同一行上。

我正在使用";reaction-map-gl";:";^6.1.17";。

这篇关于mapbox空白贴图react-map-gl|ReactJS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:mapbox空白贴图react-map-gl|ReactJS

基础教程推荐