如何在React Native的Mappls地图中绘制两点/坐标间的折线？

你的代码思路没问题，但有两个关键细节没处理对，导致折线可能不显示。下面是修正后的实现方案：

核心问题修正 #

• GeoJSON坐标顺序：Mappls GL严格遵循GeoJSON标准，LineString的坐标必须是**[经度, 纬度]**，你当前代码写反成了[纬度, 经度]，这是折线不显示的主要原因。
• LineLayer样式：仅设置lineColor可能因为默认线宽太细导致看不见，必须添加lineWidth属性明确线的粗细。

修正后的完整代码 #

import React, { Component } from 'react';
import { View } from 'react-native';
import { MapplsGL } from 'mappls-map-react-native';

class MapWithPolyline extends Component {
  render() {
    // 修正坐标顺序：[经度, 纬度]
    const route = {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "LineString",
            "coordinates": [
              [72.8708257, 19.2052853], // 第一个点：经度，纬度
              [77.70299666666666, 12.991463333333334] // 第二个点：经度，纬度
            ]
          }
        }
      ]
    };

    // 计算两点中间坐标作为地图中心，确保折线完整显示
    const centerLong = (72.8708257 + 77.7029967) / 2;
    const centerLat = (19.2052853 + 12.9914633) / 2;

    return (
      <MapplsGL.MapView
        style={{ flex: 1 }}
        zoomEnabled={true}
      >
        <MapplsGL.Camera
          zoomLevel={6} // 缩小级别适配跨区域折线
          animationMode="easeTo"
          centerCoordinate={[centerLong, centerLat]} // 同样遵循[经度, 纬度]顺序
        />
        {/* 折线图层 */}
        <MapplsGL.ShapeSource id='line1' shape={route}>
          <MapplsGL.LineLayer 
            id='linelayer1' 
            style={{
              lineColor: '#ff0000',
              lineWidth: 4, // 设置线宽确保可见
              lineOpacity: 0.8 // 可选：调整透明度
            }} 
          />
        </MapplsGL.ShapeSource>
        {/* 可选：添加端点标记，让起点终点更直观 */}
        <MapplsGL.MarkerView coordinate={[72.8708257, 19.2052853]}>
          <View style={{ width: 10, height: 10, borderRadius: 5, backgroundColor: '#ff0000' }} />
        </MapplsGL.MarkerView>
        <MapplsGL.MarkerView coordinate={[77.7029967, 12.9914633]}>
          <View style={{ width: 10, height: 10, borderRadius: 5, backgroundColor: '#ff0000' }} />
        </MapplsGL.MarkerView>
        <MapplsGL.UserLocation visible={true} />
      </MapplsGL.MapView>
    );
  }
}

export default MapWithPolyline;

额外说明 #

1. 地图级别调整：如果两点跨度较大（比如示例中跨印度南北），需要降低zoomLevel值，确保折线能完整显示在视图中。
2. 标记点自定义：使用MarkerView可以自由定义端点样式，让折线的起止位置更清晰。
3. 版本兼容性：你当前使用的react-native和mappls-map-react-native版本是兼容的，无需额外调整依赖。

内容的提问来源于stack exchange，提问作者Elango