描述
微信小程序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;
}
注意:切割后仍然有bug,那就再切细一点(也就是将chunkSize值传小一点 ,比如1000/900/800等等)