能否用Mapbox绘制带高程的LineString？react-mapbox-gl使用遇阻

首先明确核心问题：react-mapbox-gl的GeoJSONLayer不会自动解析坐标里的Z值（高程），而且Mapbox默认是2D模式，必须开启地形支持并配置3D线的渲染属性才能让高程生效。

第一步：确保GeoJSON格式完全正确 #

先检查你的Feature结构，Mapbox要求LineString的坐标顺序是**[经度, 纬度, 高程]**，别搞反经纬度！正确的Feature示例：

const feature = {
  type: 'Feature',
  geometry: {
    type: 'LineString',
    coordinates: [
      [58.7541522, 55.7444, 10],  // 经度、纬度、高程10
      [48.7041522, 55.7444, 80]   // 经度、纬度、高程80
    ]
  }
};

第二步：给地图开启地形支持 #

没有地形的话，Mapbox就是平面地图，高程值根本无从体现。在你的Map组件里添加terrain配置：

<Map
  style="mapbox://styles/mapbox/outdoors-v12"  // 选户外/卫星风格更适合看地形
  terrain={{
    source: 'mapbox-dem',  // Mapbox官方提供的高程数据源
    exaggeration: 1.2      // 可选：放大高程效果，方便观察
  }}
  zoom={5}
  center={[53.7291522, 55.7444]}  // 对准你的线的中心位置
  containerStyle={{ height: '100vh', width: '100vw' }}
>
  {/* 你的GeoJSONLayer放在这里 */}
</Map>

第三步：配置GeoJSONLayer的3D线属性 #

普通的line-color、line-width是2D属性，要渲染带高程的线，得用Mapbox GL JS v2+支持的line-3d系列属性，并用表达式引用坐标里的Z值：

<GeoJSONLayer
  data={feature}
  linePaint={{
    'line-3d-color': '#3bb2d0',
    'line-3d-width': 3,
    'line-3d-opacity': 1,
    // 关键：用表达式获取每个顶点的Z坐标作为线的高度
    'line-3d-height': ['coordinate', 'z']
  }}
/>

常见坑点提醒 #

1. 坐标顺序搞反：很多人会把纬度放在前面，导致线显示在完全错误的位置，看起来像没生效。
2. 依赖版本太旧：确保你的react-mapbox-gl是v5.x及以上版本（对应Mapbox GL JS v2），旧版本不支持3D线属性。
3. 高程值太小：如果你的高程值和地形起伏相比差距不大，可能看不出效果，可以临时把高程值改大（比如100、200）或者调高terrain的exaggeration参数。

完整可运行示例 #

import React from 'react';
import Mapbox from 'react-mapbox-gl';

const Map = Mapbox({
  accessToken: '你的Mapbox Access Token'
});

const ElevatedLineDemo = () => {
  const elevatedLine = {
    type: 'Feature',
    geometry: {
      type: 'LineString',
      coordinates: [
        [58.7541522, 55.7444, 10],
        [48.7041522, 55.7444, 80]
      ]
    }
  };

  return (
    <Map
      style="mapbox://styles/mapbox/outdoors-v12"
      terrain={{ source: 'mapbox-dem', exaggeration: 1.2 }}
      zoom={5}
      center={[53.7291522, 55.7444]}
      containerStyle={{ height: '100vh', width: '100vw' }}
    >
      <Map.GeoJSONLayer
        data={elevatedLine}
        linePaint={{
          'line-3d-color': '#3bb2d0',
          'line-3d-width': 3,
          'line-3d-opacity': 1,
          'line-3d-height': ['coordinate', 'z']
        }}
      />
    </Map>
  );
};

export default ElevatedLineDemo;

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