Vue项目使用Turf.js生成lineString时出现坐标数组错误如何解决

首先明确结论：该错误和Vue响应式数据的观察者无关，属于传参格式错误导致的Turf方法调用异常。Vue的响应式数组只是在原生数组基础上做了方法劫持，数组本身的结构、遍历逻辑和原生数组完全一致，Turf读取数组内容时不会受到响应式劫持的影响。

错误根源 #

Turf.js的lineString方法要求传入的第一个参数是由至少2个坐标点组成的二维数组，单个坐标点格式为[经度, 纬度]，正确入参结构示例：

[[120.001, 30.001], [120.002, 30.002], [120.003, 30.003]]

你的代码中调用时写的是turf.lineString([this.locationData], {name: 'line 1'})，相当于给本身已经是二维数组的locationData额外套了一层数组，入参变成了三维结构[[[lng,lat], [lng,lat]]]，完全不符合Turf的参数要求，因此抛出对应报错。
你控制台打印的是locationData本身，自然结构符合要求，和你实际传给lineString的参数不是同一个值。

修复步骤 #

1. 去掉lineString入参外层多余的数组包裹，直接传入this.locationData
2. 补充边界判断：只有locationData内的坐标点数量≥2时，才调用lineString生成路径，避免只收集到1个点时仍然触发报错
3. 补充坐标有效性校验：你的初始lat和lng为空字符串，push到数组前要先确认两个值都是有效数字，避免无效坐标污染数组

修正后代码 #

targetTrackingLine() {
  setTimeout(() => {
    // 先校验坐标有效性
    if(this.center !== this.defaultCoordinates && typeof this.lng === 'number' && typeof this.lat === 'number') {
      this.locationData.push([this.lng, this.lat])
      // 坐标点数量满足要求再生成线
      if(this.locationData.length >= 2) {
        turf.lineString(this.locationData, {name: 'line 1'});
      }
    }
}, 1500)}

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