如何在Mapbox GL中使用数组中的坐标绘制折线？

嘿，问题出在你构建坐标数组的方式上——你把经纬度拼成了字符串，可Mapbox GL JS需要的是纯数字组成的二维数组！这就是为什么你只能靠拼接小段折线来实现，效率极低的原因。

问题根源 #

你的lineArray里存的是类似"[123.45, 67.89]"的字符串，但GeoJSON的LineString对coordinates的要求是[[经度数字, 纬度数字], [经度数字, 纬度数字], ...]这种嵌套数字数组结构，字符串是不被识别的。而且你还多套了一层[lineArray]，变成了三维数组，结构完全不符合要求。

正确的实现方式 #

直接从API响应中提取数字格式的经纬度，生成符合要求的二维数组即可，不用拼接字符串。用Array.map()方法可以一步完成，代码简洁高效：

// 从API响应中提取坐标，转换成标准的GeoJSON数字二维数组
const lineCoordinates = response.mapPoints.map(point => {
  // 保险起见：如果API返回的经纬度是字符串，转成数字
  return [Number(point.lng), Number(point.lat)];
});

// 一次性添加完整折线图层
map.addLayer({
  "id": "route",
  "type": "line",
  "source": {
    "type": "geojson",
    "data": {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": lineCoordinates // 直接传入二维数字数组
      }
    }
  },
  "layout": {
    "line-join": "round",
    "line-cap": "round"
  },
  "paint": {
    "line-color": "#888",
    "line-width": 8
  }
});

额外提示 #

• 不管你有几千甚至上万个坐标，这种方式都是一次性生成正确的数组，Mapbox会高效渲染整条折线，完全不需要循环拼接小段。
• 如果API返回的经纬度本身就是数字类型，可以去掉Number()转换，直接写[point.lng, point.lat]即可。

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