代码之家 › 专栏 › 技术社区 › Paras Watts

自定义标记图像响应本机映射框

react-native-maps mapbox-gl react-native-ios mapbox react-native

0

Paras Watts · 技术社区 · 6 年前

我已经实施了 react-native-mapbox-gl 在我的项目中。我想使用来自服务器的图像制作自定义标记,我已经看到了定义mapbox样式表对象的示例,但是当有一系列标记和图像时,我不能动态地进行。下面的代码显示了如何处理单个图像,但我想用一组标记和图像来完成这项工作。任何帮助都将不胜感激。

const layerStyles = MapboxGL.StyleSheet.create({
  icon: {
    iconAllowOverlap: true,
    iconIgnorePlacement: true,
    iconSize: Platform.OS === 'android' ? 1 : 0.5,
    iconOffset: [0, 5],
    textField: '{discountPercentage}%',
    textSize: 14,
  },
  iconPremium: {
    iconImage: markerPremium,
    textColor: '#fff',
    textHaloColor: '#fff',
    textHaloWidth: 0.3,
  },
  iconPremiumSelected: {
    iconImage: markerPremiumSelected,
    textColor: '#D7B218',
    textHaloColor: '#D7B218',
    textHaloWidth: 0.1,
  },
});

<MapboxGL.ShapeSource
          id="premiumOffers"
          shape={{
            type: 'FeatureCollection',
            features: this.state.markers,
          }}
          cluster
          clusterMaxZoomLevel={14}
          clusterRadius={50}
          onPress={(e) => {
            const { offerId, restaurantId } = e.nativeEvent.payload.properties;
            if (offerId) this.props.selectMarker(offerId, restaurantId);
          }}
        >
          <MapboxGL.SymbolLayer
            id="singlePoint"
            filter={['all', ['!has', 'point_count'], ['==', 'isSelected', false]]}
            style={[layerStyles.icon, layerStyles.iconPremium]}
          />

  </MapboxGL.ShapeSource>

0 回复 | 直到 6 年前