Question

我有一个Mapbox地图，我在前端给了用户。它具有自动放置的标记。然后，我允许用户操纵地图，更改缩放比例，间距，标记并绘制多边形。用户进行更改后，我希望能够将其导出为静态地图。

看看Mapbox api，看来我需要为其提供geojson和标记数据，以及纬度/经度，方位角，俯仰角等。

但是，我不确定如何序列化Mapbox，或者甚至不确定。而且，如果我不能这样做，则必须在调用Mapbox api生成静态地图之前，分别从Mapbox UI元素中提取每个数据字段。更改后，我可以通过视口提取大多数数据，但尚不清楚是否可以提取针脚数据。我无法在他们的文档中找到有关此用例的任何信息。

我的问题最终归结为：“是否有可能使用JavaScript SDK或Mapbox API从Mapbox对象直接创建静态地图？

谢谢

如果这很重要，我正在使用Uber的React-Map-GL。

Answer 1

https://github.com/mapbox/mapbox-gl-js/pull/6846/files上有一个客户端快照示例，尽管它无法捕获标记的快照，但您需要使用Symbols。

Answer 2

这里有一些代码专门针对使用Uber React-Map-GL软件包的任何其他人，介绍了如何将其导出到PNG客户端。

constructor(props) {
  super(props)
  this.state = {
    viewport: {
      width: 800,
      height: 600,
      latitude: 37.7577,
      longitude: -122.4376,
      zoom: 8,
      preserveDrawingBuffer: true, // Needed to allow export as png
    },
  }
}

componentDidMount() {
  this.mapInstance = this.mapRef.getMap()
}

buttonPress = () => {
  console.log('png = ')
  console.log(this.mapInstance.getCanvas().toDataURL())
}

<button onClick={() => this.buttonPress()}>Click</button>
<ReactMapGL
  ref={map => (this.mapRef = map)}
  {...this.state.viewport}
  mapboxApiAccessToken=tokenhere
  onViewportChange={viewport => this.setState({ viewport })}
/>

是否可以从Mapbox前端地图创建静态地图？

2 个答案: