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

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

0 голосов
/ 04 января 2019

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

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

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

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

Спасибо

Я использую Uber's React-Map-GL , если это имеет значение.

Ответы [ 2 ]

0 голосов
/ 15 января 2019

Вот код, специально предназначенный для всех, кто использует пакет 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 })}
/>
0 голосов
/ 04 января 2019

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

...