本文介绍了mapbox空白贴图react-map-gl|ReactJS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用的是REACTION 17.0.1和REACTION-MAP-GL^6.0.2,我有一个MAP组件。
- 我尝试了其他库,但问题仍然存在
- 我已联系MapBox的支持人员
- 我已联系其他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";正确转换。
我必须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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!