0

目前我正在尝试实现一种使用 React-Native 在存储在用户设备上的 Mapbox 地图上显示自定义图标的方法。我认为这里找到的示例（ShapeSourceIcon 示例为官方文档作为起点。

所以按照这个例子我来到了下面的渲染方法：

render() {
  return (
     <MapboxGL.MapView
        ref={map => { this.map = map; }}
        style={styles.map}
        logoEnabled={false}
        onPress={this.onPress}
        onDidFinishLoadingMap={this.finishedLoadingMap}
        styleURL={'custom_url'}>

        <MapboxGL.Camera
            animationMode={'flyTo'}
            animationDuration={2000}
            centerCoordinate={[ 6.16389,52.255 ]}
            zoomLevel={8}/>

       <MapboxGL.Images
           images={{example: exampleIcon}}
       />

       <MapboxGL.ShapeSource 
           id="routes"
           shape={featureCollection}>

           <MapboxGL.SymbolLayer
               id="routes"
               style={exampleStyles.icon}/>
       </MapboxGL.ShapeSource>
  )
}

下面是代表 shapesource 中使用的变量的特征集合。与上面链接中的修改相比，它有一些小的修改。

const featureCollection = {
type: 'FeatureCollection',
features: [
  {
    type: 'Feature',
    id: '9d10456e-bdda-4aa9-9269-04c1667d4552',
    properties: {
      icon: 'example',
    },
    geometry: {
      type: 'Point',
      coordinates: [6.1552165, 52.2660751],
    },
  },
  {
    type: 'Feature',
    id: '9d10456e-bdda-4aa9-9269-04c1667d4552',
    properties: {
      icon: 'example',
    },
    geometry: {
      type: 'Point',
      coordinates: [26.542969, -30.221102],
    },
  },
  {
    type: 'Feature',
    id: '9d10456e-bdda-4aa9-9269-04c1667d4552',
    properties: {
      icon: 'example',
    },
    geometry: {
      type: 'Point',
      coordinates: [-117.206562, 52.180797],
    },
  },
 ],
};

示例样式如下所示：

const exampleStyles = {
  icon: {
    iconImage: '{icon}',
  },
};

而 exampleIcon 变量现在只是导入到项目中的一个简单 png。这实际上会根据 featureCollection 在指定位置显示图标。下一步是让我使用 RNFS (React Native File Storage) 加载文件，这样做如下：

'file://' + RNFS.DocumentDirectoryPath + `/Icons/336.png`

然后，上面的代码将替换渲染方法的 MapboxGL.Images 部分中的 exampleIcon。这将不再在地图上显示图标。所以我在想可能不可能显示这样的图像，但作为一种冰雹玛丽，我决定做以下事情：

const exampleStyles = {
    icon: {
      iconImage: 'file://' + RNFS.DocumentDirectoryPath + `/336.png`,
    },
};

这将再次在地图上显示图标，所以我认为必须可以根据其中一种策略显示动态图标，但我不再确定，文档对我的特殊情况没有任何帮助。

4

1 回答 1

0

在专注于应用程序的其他部分一段时间后，我决定重新审视这个问题。因为我已经在应用程序中做了一个解决方法，所以对我来说不再是太大的问题了。在深入研究了图书馆之后，我终于想出了如何解决它。我需要用这样的东西替换 iconImage 对象：

const exampleStyles = {
  icon: {
    iconImage: iconImage: ['get' , 'iconID'],
  },
};

并生成我们需要提供给 mapbox 的正确图像，我们将遍历目录中的所有图像并将它们添加到类似字典的变量中，如下所示：

imagesDic[name] = {uri: 'file://' + RNFS.DocumentDirectoryPath + `/Storage Card/RoutAbel/Icons/${name}.png`};

特别注意添加'uri：'部分的要求。

于 2019-09-02T13:16:02.483 回答