Как передать изображение в слой вact-mapbox-gl и предотвратить обновление для сброса центра?

Question

Я работал с response-map-gl, чтобы отобразить множество точек на карте. Это сработало, но затормозилось, так как я перерисовывал точки каждый раз, когда карта сдвигалась. Я переключился на response-mapbox-gl, который я прочитал намного быстрее при реализации функций на слое. Я хотел бы добавить изображение, подобное этому, к каждой функции, но я не уверен, как

https://img.icons8.com/android/24/000000/computer.png

Кажетсячто изображения из этой библиотеки передаются в Layer в качестве аргумента, но я не могу найти в документации хорошую документацию по этому вопросу, кроме этой аннотации:

https://github.com/alex3165/react-mapbox-gl/blob/master/docs/API.md images: [imageKey: строка, изображение: HTMLImageElement, параметры: объект] Также принимает массив предыдущего кортежа изображения. Добавьте изображения для использования в макете с помощью значка значка изображения. Значение должно быть строкой imageKey кортежа. В качестве альтернативы, используйте mapbox studio для загрузки изображения, оно будет загружено с объектом стиля карты. (см. параметры map.addImage для параметров кортежа).

Наконец, я замечаю, когда я делаю геолокацию пользователя и устанавливаю состояние в центре или даже отображаю всплывающее окно, для которого требуетсяв то время как для повторного рендеринга я что-то здесь делаю?

Может ли кто-нибудь указать мне правильное направление на этих двух? Возможно, я неправильно выполняю процедуры. Мой код ниже:

App.js

import React, {Component} from 'react';
//import ReactMapGL, { Marker, Popup}  from 'react-map-gl';
import ReactMapboxGl, { Marker, Layer, Feature, ZoomControl, Popup, luster } from 'react-mapbox-gl';
import { Button } from 'react-bootstrap';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      viewport: {
        height: "100vh",
        width: "100vw",
        latitude: 40.7128,
        longitude: -74.0060,
        zoom: 10
      },
      zoom: [10], //for alex mapbox-gl
      center: [-74.0060, 40.7128], //for alex mapbox-gl
      link: undefined,
      links: [],
      selectedLink:null,
      userLocation:[],
      searchInput: "",
      showMatches: false,
      matches: [],
      searchLink: [],
      showInfo: false
    };
  }


  componentDidMount() {
    fetch('https://data.cityofnewyork.us/resource/s4kf-3yrf.json')
      .then(res=> res.json())
      .then(res=> 
          //console.log(json)
          this.setState({links:res})
      );
  }


  markerClick = (feature) => {
    //feature.preventDefault();
    this.setState({
      center: [parseFloat(feature.longitude), parseFloat(feature.latitude)],
      zoom: [14]
    });
    this.setState({selectedLink:feature});
    //this.renderPopup(feature);
  };

  render() {

    const Map = ReactMapboxGl({
          accessToken:
            'pk.eyJ1IjoiZmF1c2x5Zm94MTEwIiwiYSI6ImNrMXBlOTdsejB3NzIzbW1pdnV0bHVsYWMifQ.ugYTVKKKHoUw0Ij-IjV37Q'
        });

    //parseFloat(link.longitude), parseFloat(link.location)
    const markers = this.state.links.map((link, index) => (
      <Feature
        key={link.cb_link_id}
        onClick={this.markerClick.bind(this,link)}
        coordinates={[parseFloat(link.longitude), parseFloat(link.latitude)]}
        properties={{linkName: link.cb_link_id}}>
      </Feature>
      ))

      const setUserLocation = () => {
        console.log("attempting to get user location ...")
        navigator.geolocation.getCurrentPosition(position => {
          let setUserLocation = 
              [position.coords.longitude,
                position.coords.latitude];
           this.setState({
             zoom: [14],
             center: setUserLocation,
             userLocation: setUserLocation
          });
       });
      }



    return (
      <div>
      <div><button onClick={setUserLocation}>My Location</button></div>
      <Map
        zoom ={this.state.zoom}
        center={this.state.center}
        style="mapbox://styles/mapbox/streets-v9"
        containerStyle={{
        height: '100vh',
        width: '100vw'
      }}
      >
         <ZoomControl
            zoomDiff={1}
            onControlClick={this._onControlClick}/>

          <Layer
            type="circle"
            id="marker"
            image={<img width={20} height={20}  src="https://img.icons8.com/plasticine/100/000000/worldwide-location.png" alt = "user_location"/>}
            paint={{'circle-color':"#ff5200"}}>
            {markers}
          </Layer>
          {Object.keys(this.state.userLocation).length !== 0 ? (
              <Marker
                coordinates={this.state.userLocation}
              >
               <img width={20} height={20}  src="https://img.icons8.com/plasticine/100/000000/worldwide-location.png" alt = "user_location"/>
              </Marker>
              ) : ( 
              <div>Empty</div>
            )}
          {this.state.selectedLink ? (
            <Popup
              coordinates={[parseFloat(this.state.selectedLink.longitude), parseFloat(this.state.selectedLink.latitude)]}
              offset={{
              'bottom-left': [12, -38],  'bottom': [0, -38], 'bottom-right': [-12, -38]
               }}>
                <div>
              <h2>{this.state.selectedLink.community_board}</h2>
              <p>{this.state.selectedLink.council_district}</p>
              <p>{this.state.selectedLink.latitude}</p>
              <p>{this.state.selectedLink.longitude}</p>
            </div>
            </Popup>
          ) : null}
      </Map>
      </div>
    );
  }
}

export default App;