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

描述

微信小程序map地图上显示polyline线,点位超过1250个出现bug,(仅真机上出现,模拟器上正常)

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

ini 复制代码
// 读取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 !!!!离谱!莫名其妙!!!

解决

  1. 设置线宽width为2以上
  2. 通过分割数组的方式,绘制出多个polyline
ini 复制代码
// 读取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;
}

注意:切割后仍然有bug,那就再切细一点(也就是将chunkSize值传小一点 ,比如1000/900/800等等)

相关推荐
aklry8 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9315 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子16 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982416 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug19 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo19 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
撰卢43 分钟前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
Struggler2811 小时前
解决setTimeout/setInterval计时不准确问题的方案
前端
sophie旭1 小时前
《深入浅出react开发指南》总结之 10.1 React运行时总览
前端·react.js·源码阅读