如何在mapbox react js中添加扩展地图和不同模式选项答案

【问题标题】：how to add expand Map and different mode option in mapbox react js如何在mapbox react js中添加扩展地图和不同模式选项
【发布时间】：2022-01-13 10:47:28
【问题描述】：

我正在使用 react map gl 在我的 react 应用程序中渲染地图。但是地图选项似乎没有提供启用以下功能的方法

我可以知道是否有办法实现这一点，或者我需要一些其他技术来做到这一点？

以下是我目前的地图配置：

import ReactMapGL, { FlyToInterpolator, Marker, Popup } from "react-map-gl";

 const mapStyle = {
        height: '100vh',
        width: '60vw',
        zoom: 15
    }

这里是一些与我正在谈论的功能有关的示例。

扩展地图
更改地图模式。有些甚至可能有位置检测和不同的风格。

我怎样才能提供这样的选项并拥有不同的风格？

【问题讨论】：

标签： reactjs components mapbox-gl-js

【解决方案1】：

您可以使用 Mapbox 和 DeckGL 来扩展地图功能 -

例如：

import { DeckGL } from "@deck.gl/react"
import { StaticMap, FullscreenControl } from "react-map-gl"

   <DeckGL
    width={width}
    height={height}
    controller={true}
    layers={layers}
    initialViewState={{ ...viewport, ... }}
  >
    <StaticMap
      width="100%"
      height="100%"
      attributionControl={false}
      mapStyle={getMapStyle(mapStyle)}
      mapboxApiAccessToken={mapToken}
    >
    <FullscreenControl className={classes.fullScreeenButoon}/> // adding full screen
    </StaticMap>
    {getMapStyleButton()}
  </DeckGL>

const getMapStyle = (mapStyle) = {
   mapStyle === "street" ? "mapbox://styles/mapbox/light-v10" : "mapbox://styles/mapbox/satellite-v9"
}

const getMapStyleButton = (mapStyle) => {
   if (mapStyle === "street") {
      return (<Button>...</Button>)
   }
   ...
}

更多信息：Deck.gl

和react-map-gl 版本：6.1.0

更多 react-map-gl/examples/controls：controls

【讨论】：

谢谢你的回答，你能指导一下deck.gl在哪里可以处理我提到的功能，这些功能正在扩展地图和切换模式选项。
我看到你使用了 StaticMap，但我使用的是 ReactMapGL；会对我的原始代码有影响吗？
我发布了如何添加按钮以仅更改样式的选项，很快我将添加另一个全屏按钮示例