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

相关推荐
嘗_11 分钟前
暑期前端训练day5
前端
uncleTom66618 分钟前
前端布局利器:rem 适配全面解析
前端
谦哥21 分钟前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
LEAFF32 分钟前
如何 测试Labview是否返回数据 ?
前端
Spider_Man34 分钟前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm
心在飞扬35 分钟前
理解JS事件环(Event Loop)
前端·javascript
盏茶作酒291 小时前
打造自己的组件库(一)宏函数解析
前端·vue.js
山有木兮木有枝_1 小时前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
一大树1 小时前
Vue3 开发必备:20 个实用技巧
前端·vue.js
颜渊呐2 小时前
uniapp中APPwebview与网页的双向通信
前端·uni-app