慕無忌1623718
2021-08-20 17:06:43
目前我正在嘗試實(shí)現(xiàn)一種使用 React-Native 在存儲(chǔ)在用戶設(shè)備上的 Mapbox 地圖上顯示自定義圖標(biāo)的方法。我認(rèn)為這里找到的示例(官方文檔的 ShapeSourceIcon 示例作為起點(diǎn)。因此,按照示例,我來到了以下渲染方法: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 變量現(xiàn)在只是一個(gè)簡單的 png 導(dǎo)入到項(xiàng)目中。這實(shí)際上會(huì)根據(jù) featureCollection 在指定位置顯示圖標(biāo)。下一步是我使用 RNFS(React Native File Storage)加載一個(gè)文件,這樣做是這樣的:'file://' + RNFS.DocumentDirectoryPath + `/Icons/336.png`然后上面的代碼將替換渲染方法的 MapboxGL.Images 部分中的 exampleIcon。這將不再在地圖上顯示圖標(biāo)。所以我想可能無法顯示這樣的圖像,但作為一種冰雹瑪麗,我決定執(zhí)行以下操作:這將再次在地圖上顯示圖標(biāo),所以我認(rèn)為必須可以根據(jù)這些策略之一顯示動(dòng)態(tài)圖標(biāo),但我不再確定,而且文檔對我的特定情況沒有任何幫助。
1 回答

慕森卡
TA貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超8個(gè)贊
在關(guān)注應(yīng)用程序的其他部分一段時(shí)間后,我決定重新審視這個(gè)問題。因?yàn)槲乙呀?jīng)在應(yīng)用程序中做了一個(gè)解決方法,所以對我來說不再是一個(gè)太大的問題。在深入研究庫之后,我終于想出了如何解決它。我需要用這樣的東西替換 iconImage 對象:
const exampleStyles = {
icon: {
iconImage: iconImage: ['get' , 'iconID'],
},
};
并生成我們需要提供給 mapbox 的正確圖像,我們將遍歷目錄中的所有圖像并將它們添加到字典中,如變量,如下所示:
imagesDic[name] = {uri: 'file://' + RNFS.DocumentDirectoryPath + `/Storage Card/RoutAbel/Icons/${name}.png`};
特別注意添加 'uri:' 部分的要求。
添加回答
舉報(bào)
0/150
提交
取消