在地图上使用Mapbox和React Native，如何在两个标记之间画一条线？

Question

在地图上使用Mapbox和React Native，如何在两个标记之间画一条线？

10

我使用以下代码在react-native中成功创建了一个标记(annotation)并添加到地图上。

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import MapboxGL from '@mapbox/react-native-mapbox-gl';
import Mapbox from '@mapbox/react-native-mapbox-gl';


const columbusCircleCoordinates = [
  -73.98197650909422, 40.768793007758816
];

Mapbox.setAccessToken('your access key');

export default class App extends Component {

  renderAnnotations () {
    return (
      <Mapbox.PointAnnotation
        key='pointAnnotation'
        id='pointAnnotation'
        coordinate={[11.254, 43.772]}>

        <View style={styles.annotationContainer}>
          <View style={styles.annotationFill} />
        </View>
        <Mapbox.Callout title='Look! An annotation!' />
      </Mapbox.PointAnnotation>
    )
  }

  render() {
    return (
      <View style={styles.container}>
        <Mapbox.MapView
            styleURL={Mapbox.StyleURL.Street}
            zoomLevel={15}
            centerCoordinate={[11.256, 43.770]}
            showUserLocation={true}
            style={styles.container}>
            {this.renderAnnotations()}
        </Mapbox.MapView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  annotationContainer: {
    width: 30,
    height: 30,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
    borderRadius: 15,
  },
  annotationFill: {
    width: 30,
    height: 30,
    borderRadius: 15,
    backgroundColor: 'orange',
    transform: [{ scale: 0.6 }],
  }
});

从教程中了解到，我们可以使用 <MapboxGL.LineLayer /> 在 mapbox 上绘制 折线。但是没有演示如何实现的正确示例。

有人能提供一个样本 代码 给我吗？如何在 mapbox 的 react-native 环境下绘制两个标注之间的 线。

- Amal p

请问您在发布这个问题后是否更改了您的Mapbox令牌？任何人都可以获取并使用它 :) - John Ruddell

1

是的，我很久以前就改过了...不用担心 :) - Amal p

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ウィエム · Accepted Answer

如我在之前的答案中所分享的：在您的状态中，有一个类型为linestring的geojson变量。这需要多于两个坐标，基本上是您通过线路传递的点数。当“惊人”的Mapbox文档向您展示polyline标记时，它忽略了一个重要细节，即您需要将其包装在MapboxGL标记下的shapeSource标记中。在this.state中，我放了一个名为route的geojson变量。可能通过以下代码示例更容易理解：

import React, {Component} from 'react';
import {


 Platform,
  StyleSheet,
  Text,
  View,
  Button
} from 'react-native';
import MapboxGL from '@mapbox/react-native-mapbox-gl';

MapboxGL.setAccessToken('your access key');

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      route:
        {
          "type": "FeatureCollection",
          "features": [
            {
              "type": "Feature",
              "properties": {},
              "geometry": {
                "type": "LineString",
                "coordinates": [
                  [
                    11.953125,
                    39.436192999314095
                  ],
                  [
                    18.896484375,
                    46.37725420510028
                  ]
                ]
              }
            }
          ]
        },   
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <MapboxGL.MapView
          styleURL={MapboxGL.StyleURL.Light}
          zoomLevel={15}
          centerCoordinate={[11.256, 43.770]}
          style={styles.container}> 
          <MapboxGL.ShapeSource id='line1' shape={this.state.route}>
            <MapboxGL.LineLayer id='linelayer1' style={{lineColor:'red'}} />
          </MapboxGL.ShapeSource>

        </MapboxGL.MapView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});