标签: react-map-gl

我正在使用react 17.0.1和react-map-gl ^6.0.2我有一个地图组件。

\n
1. 我尝试过其他库，问题仍然存在
\n
2. 我已经联系了 Mapbox 的支持人员
\n
3. 我已经联系了其他mapbox用户
\n

无法解决这个问题

当我执行“npm run start”时没问题，它显示地图，但是当我执行“npm run build”时，它只显示：地图空白

它抛出这个错误：错误

我的代码如下：

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

我在尝试加载两个具有不同颜色的不同元素时指定了两个<Source>元素。当两个 s 都存在时它不起作用，因为它隐藏第一个 (id: ) 并显示后者 (id: )。ReactMapGLFeatureCollectionSourcemaps-with-yieldmaps-without-yield

第一个也会打印以下警告Source。

TypeError: Cannot read property 'fill-color' of undefined

我们是否不允许使用多个来源，或者我在这里做错了什么？

<MapGL
  {...viewport}
  mapboxApiAccessToken={accessToken}
  onViewportChange={viewport => setViewport(viewport)}
  onHover={onHover}
  onClick={onClick}
  onLoad={onLoad}
  width="100%"
  height="100%"
  scrollZoom={false}
  dragRotate={false}
  touchRotate={false}
  keyboard={false}
>
  {map && map.features.length > 0 ? (
    <Source id="maps-with-yield" type="geojson" data={map}>
      <Layer
        id="data"
        type="fill"
        paint={{
          'fill-color': {
            property: 'yield',
            stops: [
              [minYield, worstYieldColor],
              [maxYield, bestYieldColor]
            ]
          },
          'fill-outline-color': '#fff'
        }}
      />
    </Source>
  ) : null}
  {mapWithoutYield && mapWithoutYield.features.length …

我正在尝试使用react-map-gl 库在两点之间画一条线。我无法从官方文档中找到示例，因此我尝试从以下使用 Mapbox 库的代码片段中重现相同的行为

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-122.486052, 37.830348],
    zoom: 15
});

map.on('load', function() {
    map.addSource('route', {
        'type': 'geojson',
        'data': {
            'type': 'Feature',
            'properties': {},
            'geometry': {
                'type': 'LineString',
                'coordinates': [
                    [-122.483696, 37.833818],

                    [-122.493782, 37.833683]
                ]
            }
        }
    });
    map.addLayer({
        'id': 'route',
        'type': 'line',
        'source': 'route',
        'layout': {
            'line-join': 'round',
            'line-cap': 'round'
        },
        'paint': {
            'line-color': '#888',
            'line-width': 8
        }
    });
});

这是沙箱，我在控制台上没有看到任何错误，但未显示该行：
https://codesandbox.io/s/draw-line- Between-two-point-v0mbc?file=/src/index。 js:214-226

我正在尝试添加一条GeoJSON线以显示A点和B点之间的汽车方向（就像它们在mapbox-gl-js的官方文档中（https://www.mapbox.com/mapbox-gl- js / example / geojson-line /）

但是react-map-gl的文档完全没有提及。

我如何使用https://uber.github.io/react-map-gl/#/Documentation/introduction/introduction实现类似的效果 ：

到目前为止，这是我的代码：

class MapPage extends Component {
  constructor(props) {
    super(props);
     this.state = {
      viewport: {
       latitude: 38.63738602787579,
       longitude: -121.23576311149986,
       zoom: 6.8,
       bearing: 0,
       pitch: 0,
       dragPan: true,
       width: 600, 
       height: 600 
     }
    };
   }

render() {
  const { viewport } = this.state;

  return (
    <ReactMapGL
      {...viewport}
      mapboxApiAccessToken={MAPBOX_TOKEN}
      onViewportChange={newViewport => {
        this.setState({ viewport: newViewport });
      }}
    />
  );
 }
}

是否可以？

这告诉我它是，但不知道它为什么定义和 API 密钥。

但我无法让它与react-map-glStaticMap 类一起使用。我可以从该类中看到的属性只是mapStyle采用标准的 Mapbox 矢量切片路径/名称。它需要一个对象吗？我的代码没有给我错误或显示我请求的图块。

    <DeckGL>
        <StaticMap
            mapStyle= {{
                "version": 7,
                "sources": {
                  "simple-tiles": {
                    "type": "raster",
                    "tiles":["http://a.tile.openstreetmap.org/{z}/{x}/{y}.png", "http://b.tile.openstreetmap.org/{z}/{x}/{y}.png"],
                    "tileSize": 256
                  },
                  "power": {
                  "type": "vector",
                  "tiles": ["http://gpstrails.info/ex/leaflet/power/osm/{z}/{x}/{y}.json"]
                }
                },
                "layers": [{
                  "id": "simple-tiles",
                  "type": "raster",
                  "source": "simple-tiles",
                  "minzoom": 0,
                  "maxzoom": 22
                },
                {
                "id": "road",
                "source": "power",
                "source-layer": "power",
                "type": "line",
                "layout": {
                  "line-join": "round",
                  "line-cap": "round",
                },
                "paint": {
                  "line-color": "red",
                  "line-width": 4,
                }
              }]
              }}/>
    </DeckGL>

谢谢

编辑：从正确的答案，并保持在 SO，这是 …

我的地图实例位于可调整大小的容器中，当我更改大小时，我应该调用map.resize()。我想知道是否有一种方法可以监听 mapbox 容器调整大小事件，以便它可以触发 map.resize() ？你能建议如何做吗？

export default function Map({ chartID, configuration, data }) {
  const classes = useStyles();
  const mapContainer = useRef(null);

  const [map, setMap] = useState(null);

  const [settings, setSettings] = useState({
    longitude: -73.935242,
    latitude: 40.73061,
    zoom: 9,
  });

  useEffect(() => {
    const geoFeatures = //...getting data

    const map = new mapboxgl.Map({
      container: mapContainer.current,
      style: 'mapbox://',
      center: [settings.longitude, settings.latitude],
      zoom: settings.zoom,
    });

    map.on('move', () => {...});

    //setting map to state if we need to reference it later
    setMap(map);
    // Clean …

我正在react-map-gl中设置地图，但是在提供访问令牌后，我收到以下控制台错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://events.mapbox.com/events/v2?access_token=TOKEN. (Reason: CORS request did not succeed). Status code: (null).

我已经安装了react-map-gl

npm install --save react-map-gl mapbox-gl

现在我看看它，它似乎不适用于任何使用 Mapbox 的服务，包括示例页面。

有任何想法吗？

谢谢！

我使用了deck.gl@^6.4.7 和react-map-gl@^5.0.7，并且我放置了一个带有图标的标记，孩子正在监听点击事件。当我将deck.gl 更新到7.1.10 版时，图标的点击事件停止工作。

你知道如何解决这个问题吗？

        <DeckGL
          initialViewState={{
            longitude: liveMapZoom.lng,
            latitude: liveMapZoom.lat,
            zoom: 12,
            bearing: 0,
            pitch: 0
          }}
          viewState={viewState}
          onClick={(info, event) => {
            console.log("info", info);
            console.log("event", event);
          }}
          onViewStateChange={this._onViewStateChange}
          controller={{ type: MapController, dragRotate: false }}
          layers={[
            layerCars(data)
          ]}
        >
          <ReactMapGL
            mapStyle={"mapbox://styles/mapbox/streets-v9"}
            mapboxApiAccessToken={TOKEN}
          >
           <Marker
             key={key}
             latitude={coordinates[1]}
             longitude={coordinates[0]}
            >
              <img
                alt={name}
                src={iconUrl}
                onClick={event => {
                  console.log("hey");
                }}
              />
            </Marker>
          </ReactMapGL>
        </DeckGL>

我只是使用 react-map-gl 中的开箱即用的“GeolocateControl”组件，它在我的电脑上完美运行。但是，在我的手机上按下地理定位按钮时没有任何反应？我的手机浏览器有权访问位置，但没有像在 PC 上那样要求显示位置权限的弹出窗口。我尝试过使用 Chrome、Firefox 和默认浏览器。

我尝试过使用 Chrome、Firefox 和默认浏览器。在我的 iPad 上它也不起作用，只有在我的电脑上它才能正常运行。

       <ReactMapGL
           {...viewport}
           mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
           onViewportChange={viewport => {
              setViewport(viewport);
            }}
        >
           <GeolocateControl
               className={classes.geolocateStyle}
               positionOptions={{ enableHighAccuracy: true }}
               trackUserLocation={true}
           />
       </ReactMapGL>

期待它把我带到当前位置并像在 PC 上一样在屏幕上放置一个蓝色标记。

我在 Heroku 上部署了一个全栈 React.js 应用程序。除了 Mapbox 之外，一切都部署得很好。在开发中，一切正常。一旦我在 Heroku 中打开我的应用程序，Mapbox 就会显示一个黑屏。

我在 Heroku 中为默认公共 Mapbox 令牌添加了配置变量。

当我在生产中检查控制台时，我收到一条错误消息“Uncaught ReferenceError: y is not defined”

我正在将 Mapbox 与 React Map GL 一起使用，但不确定问题是什么，此时正在寻求帮助。

我添加了它在开发中的外观和我在生产中得到的黑屏的屏幕截图。生产-mapbox-错误 开发-mapbox-working

我的客户端 package.json：

  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.8",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.6.0",
    "framer-motion": "^3.2.1",
    "node-sass": "^4.14.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-hook-form": "^6.14.1",
    "react-map-gl": "^6.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject" …