标签: react-native-mapbox-gl

我正在尝试使用 mapbox-sdk 从 npm 包中获取用于 react-native 的导航方向：

"@mapbox/mapbox-sdk": "^0.11.0"

为了渲染 mapbox-sdk 返回的方向，我使用了以下 npm 包：

"@react-native-mapbox-gl/maps": "^8.1.0-rc.8",

我用于检索方向的代码：

import MapboxGL from '@react-native-mapbox-gl/maps'
// Mapbox SDK related package
import MapboxDirectionsFactory from '@mapbox/mapbox-sdk/services/directions'
import { lineString as makeLineString } from '@turf/helpers'
import GeoLocationService from '../../services/geolocation/GeoLocationService';
import GeoLocationCore from '@react-native-community/geolocation'

const accessToken = "ACESS_TOKEN_FROM_MAPBOX_API_DASHBOARD"
const directionsClient = MapboxDirectionsFactory({accessToken})


  constructor(props) {
    super(props);
    this.state = {
        longitude: 0,
        latitude: 0,
        orderLongitude: 0,
        orderLatitude: 0,
        route: null,
    };
  }

async componentDidMount() {
      
      const {route} = this.props

      // …

我在地图初始化中设置了自定义样式网址。喜欢 ：

<Mapbox.MapView
   styleURL="asset://mystyle.json"
   logoEnabled={false}
   attributionEnabled={false}
   ref={(e) => { this.oMap = e }}
   animate={true}
   zoomLevel={6}
   centerCoordinate={[54.0, 24.0]}
   style={{ flex: 1 }}
   showUserLocation={true}>
</Mapbox.MapView>

在mystyle.json中，我有两个基本映射，如下所示：

 {
      "id": "Satellite",
      "type": "raster",
      "source": "Satellite",
      "layout": {
        "visibility": "visible"
      },
      "paint": {
        "raster-opacity": 1
      }
    },
 {
      "id": "Satellite2",
      "type": "raster",
      "source": "Satellite",
      "layout": {
        "visibility": "none"
      },
      "paint": {
        "raster-opacity": 1
      }
    }

卫星默认可见。

如何在运行时将Satellite属性的可见性设置为None，将Satellite2可见性设置为可见？

Mapbox gl：

"@mapbox/react-native-mapbox-gl": "^6.1.3"

反应本机：

"react-native": "0.58.9",

我是本机的新手，无法找到有关如何使用mapbox以编程方式向地图添加标记/注释的任何文档。

我们正在使用geofire查询，该查询会在兴趣点处于范围内时触发。

在触发器内，我想插入标记。

我发现的所有文档都是这样的：https : //www.mapbox.com/help/first-steps-react-native-sdk/ 在初始化和渲染期间添加标记。

到目前为止，这是我的代码

    render () {
        const {navigate} = this.props.navigation;
        return (
          <View style ={{flex: 1, position: 'relative'}}>
            <Mapbox.MapView
                styleURL={Mapbox.StyleURL.Dark}
                zoomLevel={15}
                centerCoordinate={[11.256, 43.770]}
                ref={map => { this.map = map; }}
                style={{flex: 1}}>
                {this.renderAnnotations([11.256, 43.770])}
            </Mapbox.MapView>


            <View style={styles.menuMainContainer}>

                {this.state.menuStatus ? <Animatable.View style={styles.menuSubcontainer}  animation={"bounceIn"}>
                    <View style={{justifyContent: 'space-between', justifyContent: 'center', flex: 1, marginBottom: 50}}>
                      <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
                        <MenuOptions imageSource={Images.lightIcon} menuTag="trash" name="Basureros"/>
                        <MenuOptions imageSource={Images.lightIcon} menuTag="holes" name="Huecos"/>
                      </View>
                      <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
                        <MenuOptions imageSource={Images.lightIcon} menuTag="hydrants" name="Hidrantes"/> …

我正在使用@react-native-mapbox-gl/maps，我想实现标记的聚类。我找不到任何适合我的实施的解决方案。附加图像将显示两个标记应该合并，但事实并非如此。

下面我粘贴我的代码：

<MapboxGL.MapView
      showUserLocatin={true}
      zoomLevel={10}
      zoomEnabled={zoomEnabled}
      pitchEnabled={true}
      onPress={onMapPress}
      onRegionIsChanging={onRegionIsChanging}
      surfaceView={true}
      rotateEnabled={rotateEnabled}
      compassEnabled={false}
      showUserLocation={false}
      userTrackingMode={MapboxGL.UserTrackingModes.None}
      scrollEnabled={scrollEnabled}
      styleURL={styleURL}
      centerCoordinate={getFocusPoint() || getStartingPoint()}
      ref={(c) => (_map = c)}
      onRegionDidChange={onRegionChange}
      style={style}
      cluster
    >
      {renderLines()}
      <MapboxGL.SymbolLayer
        id={'abc'}
        sourceID={MapboxGL.StyleSource.DefaultSourceID}
      />
      <MapboxGL.Camera
        zoomLevel={zoom}
        centerCoordinate={getFocusPoint() || getStartingPoint()}
      />
      {(simplePlaceData?.length > 0 || places?.length > 0) && renderMarkers()}
    </MapboxGL.MapView>

下面是我们的 renderMarkers 函数（基本上我在 MapboxGL.PointAnnotation 中显示任何 RN 组件，例如图像/图标）：

const renderMarkers = () => {
    if (simplePlaceData)
      return simplePlaceData?.map((_place) => {
        const {lat, lng, id} = _place
        const latVal = parseFloat(lat) …

我正在运行一个 Mapbox 地图，其中的点具有以下样式的图标：

  iconImage: ['get', 'icon'],
  iconSize: ['interpolate', ['linear'], ['zoom'], 15, 0.0015, 23, 0.2],
  iconAllowOverlap: true,

该图标是房屋的图像。插值效果很好，直到缩放非常高并且 iconSize 保持不变但地图更加详细，使房子越来越小： https: //i.imgur.com/6i8OwPL.mp4。

任何建议都会有所帮助。先感谢您。

我绝对可以排除问题是图像的大小，因为我可以使图像的高度大于手机的高度。

我正在从 react-native-maps 过渡到 rnmapbox，但在让任何图像显示在标记上时遇到问题。我正在渲染图像标记和某些标记的附加徽章。此问题仅在使用图像时出现，CSS 标记工作正常。

左边的图像是我使用 React Native Maps 时的预期结果，右边的图像是使用 MapboxGL 的结果。

下面是我的代码片段：

<MapboxGL.PointAnnotation
  key={"vehicle-" + vehicle._id}
  id={"vehicle-" + vehicle._id}
  coordinate={[vehicle.longitude, vehicle.latitude]}
  anchor={
    vehicle.status !== "riding" &&
    vehicle.status !== "adminCollected" &&
    vehicle.status !== "warehoused"
      ? { x: 0.5, y: 1 }
      : { x: 0.5, y: 0.5 }
  }
  onSelected={() => centerOnMarker(vehicle)}
>
  <View style={{ height: 75, width: 75 }}> {/* sized used for testing */}
    {vehicle.status === "available" ? (
      vehicle.batteryPercentage > 65 ? (
        <Image
          source={require("../../assets/scooter-pins/green-full.png")}
          style={{ height: …