微信小程序地图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等等)

相关推荐
_丿丨丨_4 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
hbrown9 小时前
Flask+LayUI开发手记(十一):选项集合的数据库扩展类
前端·数据库·python·layui
猫头虎9 小时前
什么是 npm、Yarn、pnpm? 有什么区别? 分别适应什么场景?
前端·python·scrapy·arcgis·npm·beautifulsoup·pip