Javascript 如何将图像传递到react mapbox gl中的图层并防止中心重置刷新？

我一直在使用react map gl绘制地图上的许多点。它起作用了，但是很慢，因为每次贴图移动时我都会重新渲染点。我一直在切换到react mapbox gl，我读到它在层上实现功能时要快得多我想在每个功能中添加这样的图像，但我不确定如何添加

这个库中的图像似乎作为参数传递到了

层

，但是除了文档中的这个模糊之外，我找不到任何关于这个的好文档：

images:[imageKey:string，image:HTMLImageElement，options:object]也接受上一个图像元组的数组。添加用于布局的图像，并带有道具图标图像。该值应为元组的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;

import React，{Component}来自'React'；
//从“react map gl”导入react MapGL，{Marker，Popup}；
从“react mapbox gl”导入react MapboxGL，{标记、图层、特征、缩放控制、弹出窗口、光泽}；
从“react bootstrap”导入{Button}；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
视口：{
高度：“100vh”，
宽度：“100vw”，
纬度：40.7128，
经度：-74.0060，
缩放：10
},
缩放：[10]，//对于alex mapbox gl
中间：[-74.0060，40.7128]，//对于alex mapbox gl
链接：未定义，
链接：[]，
selectedLink:null，
用户位置：[]，
搜索输入：“”，
选秀比赛：假，
匹配项：[]，
搜索链接：[]，
showInfo:false
};
}
componentDidMount（）{
取（'https://data.cityofnewyork.us/resource/s4kf-3yrf.json')
.then（res=>res.json（））
。然后（res=>
//console.log（json）
this.setState（{links:res}）
);
}
markerClick=（功能）=>{
//feature.preventDefault（）；
这是我的国家({
中心：[parseFloat（特征.经度），parseFloat（特征.纬度）]，
缩放：[14]
});
this.setState（{selectedLink:feature}）；
//此.renderPopup（特性）；
};
render（）{
const Map=ReactMapboxGl({
accessToken：
'pk.EYJ1IJOIZMF1C2X5ZM94MtewiwiiSi6IMNRMXblottdsEJB3NZIZBW1PDNV0BHVSYWMIFQ.UgyTvkkhouw0IJ-IjV37Q'
});
//parseFloat（link.longitude），parseFloat（link.location）
常量标记=this.state.links.map（（链接，索引）=>(
))
const setUserLocation=（）=>{
日志（“正在尝试获取用户位置…”）
navigator.geolocation.getCurrentPosition（位置=>{
让setUserLocation=
[position.coords.longitude，
位置坐标纬度]；
这是我的国家({
缩放：[14]，
中心：setUserLocation，
userLocation:setUserLocation
});
});
}
返回(
我的位置
{markers}
{Object.keys（this.state.userLocation）.length！==0(
) : ( 
空的
)}
{this.state.selectedLink(
{this.state.selectedLink.community_board}
{this.state.selectedLink.council_district}

{this.state.selectedLink.latitude}

{this.state.selectedLink.longitude}

)：null}
);
}
}
导出默认应用程序；