Можно ли создать статическую карту из карты внешнего интерфейса Mapbox?

У меня есть карта Mapbox, которую я даю пользователю во внешнем интерфейсе. На нем автоматически размещаются маркеры. Затем я разрешаю пользователю манипулировать картой, изменяя масштаб, шаг, маркеры и рисовать многоугольники. После того, как пользователь внес изменения, я хочу иметь возможность экспортировать его как статическую карту.

Глядя на API Mapbox, похоже, что мне нужно предоставить ему данные geojson и маркера, а также широту / долготу, азимут, шаг и т. Д.

Однако я не уверен, как сериализовать Mapbox, и могу ли я вообще это сделать. И если я не могу этого сделать, мне придется отдельно извлекать каждое поле данных из элемента пользовательского интерфейса Mapbox перед вызовом API Mapbox для создания статической карты. Я могу извлечь большую часть данных через окно просмотра, когда оно изменено, но неясно, можно ли извлечь данные вывода. Мне не удалось найти в их документации ничего об этом варианте использования.

В конечном итоге мой вопрос сводится к следующему: можно ли создать статическую карту непосредственно из объекта Mapbox, используя либо JavaScript SDK, либо Mapbox API?

Спасибо

Я использую React-Map-GL от Uber, если это важно.


reactjs javascript mapbox mapbox-gl-js
person Big Money    schedule 03.01.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Пример моментального снимка на стороне клиента можно найти по адресу https://github.com/mapbox/mapbox-gl-js/pull/6846/files, хотя он не захватывает Marker, вместо этого вам нужно использовать символы.

person AndrewHarvey    schedule 04.01.2019
comment
Интересно ... если я хочу использовать маркеры, как вы думаете, следующим простым способом будет экспортировать холст, а затем преобразовать холст в PNG? - person Big Money; 11.01.2019
comment
Пример, на который я ссылался, делает именно это: он экспортирует холст в PNG. Маркеры GL JS - это элементы HTML DOM, а не на холсте. Поэтому вам нужно использовать символы или написать собственный код для визуализации этих маркеров на холсте. - person AndrewHarvey; 12.01.2019

arrow_upward
0
arrow_downward

Вот код, предназначенный специально для всех, кто использует пакет 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 })}
/>
person Big Money    schedule 14.01.2019