React Native 使用 RNFS 来加载和显示存储在设备上的 Mapbox 图标
React Native using RNFS in order to load and display Mapbox icons stored on the device
目前我正在尝试实现一种使用 React-Native 在存储在用户设备上的 Mapbox 地图上显示自定义图标的方法。我以为这个例子找到了here(ShapeSourceIcon example for the official documentation as a starting point.
所以按照这个例子,我得到了以下渲染方法:
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 中使用的变量的特征集合。与上面 link 中的版本相比,它有一些小的修改。
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`
上面的代码将替换 render 方法的 MapboxGL.Images 部分中的 exampleIcon。这将不再在地图上显示图标。所以我认为可能无法显示这样的图像,但作为一种冰雹玛丽,我决定执行以下操作:
const exampleStyles = {
icon: {
iconImage: 'file://' + RNFS.DocumentDirectoryPath + `/336.png`,
},
};
这会再次在地图上显示图标,所以我想一定可以根据其中一种策略显示动态图标,但我不确定了,文档对我没有任何帮助具体情况。
在关注应用程序的其他部分一段时间后,我决定重新审视这个问题。因为我已经在应用程序中做了一个解决方法,所以这对我来说不再是一个太大的问题。在深入研究图书馆之后,我终于想出了解决办法。我需要用这样的东西替换 iconImage 对象:
const exampleStyles = {
icon: {
iconImage: iconImage: ['get' , 'iconID'],
},
};
并生成我们需要提供给 mapbox 的正确图像,我们将遍历目录中的所有图像并将它们添加到像这样的变量字典中:
imagesDic[name] = {uri: 'file://' + RNFS.DocumentDirectoryPath + `/Storage Card/RoutAbel/Icons/${name}.png`};
特别注意添加'uri:'部分的要求
目前我正在尝试实现一种使用 React-Native 在存储在用户设备上的 Mapbox 地图上显示自定义图标的方法。我以为这个例子找到了here(ShapeSourceIcon example for the official documentation as a starting point.
所以按照这个例子,我得到了以下渲染方法:
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 中使用的变量的特征集合。与上面 link 中的版本相比,它有一些小的修改。
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`
上面的代码将替换 render 方法的 MapboxGL.Images 部分中的 exampleIcon。这将不再在地图上显示图标。所以我认为可能无法显示这样的图像,但作为一种冰雹玛丽,我决定执行以下操作:
const exampleStyles = {
icon: {
iconImage: 'file://' + RNFS.DocumentDirectoryPath + `/336.png`,
},
};
这会再次在地图上显示图标,所以我想一定可以根据其中一种策略显示动态图标,但我不确定了,文档对我没有任何帮助具体情况。
在关注应用程序的其他部分一段时间后,我决定重新审视这个问题。因为我已经在应用程序中做了一个解决方法,所以这对我来说不再是一个太大的问题。在深入研究图书馆之后,我终于想出了解决办法。我需要用这样的东西替换 iconImage 对象:
const exampleStyles = {
icon: {
iconImage: iconImage: ['get' , 'iconID'],
},
};
并生成我们需要提供给 mapbox 的正确图像,我们将遍历目录中的所有图像并将它们添加到像这样的变量字典中:
imagesDic[name] = {uri: 'file://' + RNFS.DocumentDirectoryPath + `/Storage Card/RoutAbel/Icons/${name}.png`};
特别注意添加'uri:'部分的要求