在两个标记map-box react-native之间划一条线? [英] Draw a line between two markers map-box react-native?

问题描述

我能够使用react-native中的以下代码在地图上创建marker(注释).

I was able to achieve creating a marker(annotation) on the map using the below code in react-native.

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上绘制polylines.但是有一个正确的例子来说明如何做到这一点.

But from the tutorials i figured out that we are able to draw polylines on mapbox using <MapboxGL.LineLayer />. But there is proper example on how to do this.

有人可以向我提供一个示例code如何在mapbox react-native的两个注释之间绘制line.

Can someone please provide with me a sample code how to draw a line between two annotations on mapbox react-native.

推荐答案

就像我在上一个答案中分享的那样:在您的状态下，有一个变量，该变量是linestring类型的geojson.这需要两个以上的坐标，这基本上是您使线穿过的点数.在显示折线标签时，真棒"的Mapbox文档会忽略提及的是，您需要将其包装在MapboxGL标签下的shapeSource标签中.在this.state中，我放置了一个名为route的geojson变量.也许使用下面的代码示例会更有意义:

Like I shared in my previous answer: In your state, have a variable that is a geojson of type linestring. This takes more than two coordinates, which is basically the number of points you are passing the line through. What the "awesome" mapbox documentation neglects to mention when they show you the polyline tag is that you need to wrap it in a shapeSource tag under the MapboxGL tag. In this.state I put a geojson variable called route. Maybe it will make more sense with the below code sample:

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,
  },
});

这篇关于在两个标记map-box react-native之间划一条线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！