微信小程序地图polyline坐标太多异常显示BUG

news2025/1/15 6:23:24

描述

微信小程序map地图上显示polyline线，点位超过1250个出现bug，（仅真机上出现，模拟器上正常）
在这里插入图片描述

这里以加载四川省边界为例, 以下是示例代码

// 读取geojson数据
uni.request({
  url: 'https://geo.datav.aliyun.com/areas_v3/bound/510000.json',
  success: ({ data: geojsonData }) => {
    console.log(geojsonData);

    // 取出坐标点位数组
    const coordinates = geojsonData.features[0].geometry.coordinates;

    const polylineArr = [];
    for (let coordinate of coordinates) {
      polylineArr.push({
        points: coordinate[0].map(v => ({
          latitude: v[1],
          longitude: v[0]
        })),
        width: 2,
        color: '#FF6600',
        dottedLine: false
      });
    }
    this.polylines = polylineArr; // map组件上的polylines
  }
});

在复现问题的时候，我发现只要设置了 width：2 的情况下才会出现该BUG ！！！！离谱！莫名其妙！！！

解决

设置线宽width为2以上
通过分割数组的方式，绘制出多个polyline

// 读取geojson数据
uni.request({
  url: 'https://geo.datav.aliyun.com/areas_v3/bound/510000.json',
  success: ({ data: geojsonData }) => {
    console.log(geojsonData);

    // 取出坐标点位数组
    const coordinates = geojsonData.features[0].geometry.coordinates;

    const polylineArr = [];
    for (let coordinate of coordinates) {
      const rings = coordinate[0];
      // 将数组按1000拆分成多个, (测试了, 1200仍然有问题, 这里尽量调低一点)
      const newRings = splitArrayIntoChunks(rings, 1000);

      // 遍历拆分后的数组
      for (let ring of newRings) {
        polylineArr.push({
          points: ring.map(v => ({
            latitude: v[1],
            longitude: v[0]
          })),
          width: 2,
          color: '#FF6600',
          dottedLine: false
        });
      }
    }
    this.polylines = polylineArr; // map组件上的polylines
  }
});


/**
 * 切割数组
 * @param {Object} array  原数组
 * @param {Object} chunkSize  切割大小
 * @returns 新数组
 */
function splitArrayIntoChunks(array, chunkSize) {
  let result = [];
  for (let i = 0; i < array.length; i += chunkSize) {
    let chunk = array.slice(i, i + chunkSize);
    result.push(chunk);
  }
  return result;
}