0

我在地图上渲染了 NDVI 图像。同时，我想在地图上显示标记。这两件事都在单独工作，当 NDVI 图像数据加载并在地图上可见时，标记会隐藏起来。

<MapboxGL.MapView
    ref={mc => {
      if (mc) mapViewRef = mc
    }}
    style={styles.container}
    onDidFinishLoadingMap={onFinishLoadingMap}
    attributionEnabled={false}
    zoomEnabled
    scrollEnabled
    logoEnabled={false}
    compassEnabled={true}
    localizeLabels={true}
    styleURL={MapboxGL.StyleURL.SatelliteStreet}>
    <MapboxGL.Camera
      ref={mc => {
        if (mc) mapCamera = mc
      }}
      minZoomLevel={8}
      maxZoomLevel={20}
    />
    {fieldsListData.length > 0 && fieldShapes}
    {renderMarkersAnnotations()}
    {NDVIData.map((imgItem: any) => {
      return (
        <MapboxGL.ImageSource id={imageId} url={imgItem.tilesUrl} coordinates={imgItem.coordinates}>
          <MapboxGL.RasterLayer id={imageId} sourceID={imageId} sourceLayerID={asset_id} />
        </MapboxGL.ImageSource>
      )
    })}
    {forceLocationCoordinates && pinDropEnabled && renderAnnotations()}
  </MapboxGL.MapView>

renderMarkersAnnotations 在哪里 -

const renderMarkersAnnotations = () => {
 return fieldsPinsData.map((item: { geometry: any; selected: boolean }) => (
  <MapboxGL.PointAnnotation
    key={Math.random().toString()}
    id={Math.random().toString()}
    title='Test'
    coordinate={item.geometry ? JSON.parse(item.geometry)?.coordinates : []}>
    <ImageMarker>
      {item.selected === true ? (
        <Image source={Images.checkAreaPins} style={(styles.imageDiv, [styles.checkSampleMarker])} />
      ) : (
        <Image source={Images.monitoringPin} style={(styles.imageDiv, [styles.sampleMarker])} />
      )}
    </ImageMarker>
  </MapboxGL.PointAnnotation>
))
}

Imagemarker也是 -

 const ImageMarker = ({ children }: any) =>
   Platform.select({
    ios: children,
    android: <Text style={{lineHeight: 150, bottom: 100}}>{children}</Text>
 })

如果我删除 NDVI 数据图像图块，则图钉/标记可见，但一旦卫星/NDVI 数据在地图上可用，图钉/标记就会隐藏

4

0 回答 0