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

描述

微信小程序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 !!!!离谱!莫名其妙!!!

解决

  1. 设置线宽width为2以上
  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等等)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/755.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

openplc Linux 使用modbus RTU 从机通讯

1.Linux 环境下&#xff0c;openplc 默认使用的是modbus tcp协议通信。 想要使用串口 modbus rtu 通讯可以通过在runtime中添加SlaveDevices从机设备 2.添加设备&#xff0c;分配地址。 左边添加串口配置&#xff0c;右边是需要通讯的地址&#xff0c;从机地址都是从100开始&am…

yolov8 区域计数

yolov8 区域计数 1. 基础2. 计数功能2.1 计数模块2.2 判断模块 3. 主代码4. 实验结果5. 源码 1. 基础 本项目是在 WindowsYOLOV8环境配置 的基础上实现的&#xff0c;测距原理可见上边文章 2. 计数功能 2.1 计数模块 在指定区域内计数模块 def count_objects_in_region(bo…

STM32 堆栈内存以及变量存储分布

STM32的程序存储器、数据存储器、寄存器和输入输出端口被组织在同一个4GB的线性地址空间内, 地址范围为0x0000 0000至0xFFFF FFFF。其中FLASH为ROM类型&#xff0c;储存的数据掉电不易失&#xff1b;RAM中存储的数据掉电易失。以STM32F103系列为例&#xff0c;最多有512KB的FLA…

Discuz! X3.4 升级至 Discuz! X3.5 详细教程

第一步&#xff1a;从其他以前的 Discuz! X 版本升级Discuz! X3.4 请先升级到Discuz! X3.4&#xff0c;升级教程网上比较普遍&#xff0c;在此不再论述。 第二步&#xff1a;Discuz! X3.4 升级至 Discuz! X3.5 &#xff08;Discuz 从 X3.5 以后&#xff0c;不在发布GBK版本&…

【软考】UML中的图之类图

目录 1. 说明2. 图示3. 类图使用方式3.1 对系统的词汇建模3.2 对简单的协作建模3.3 对逻辑数据库模式建模 1. 说明 1.类图&#xff08;Class Diagram&#xff09;展现了一组对象、接口、协作和它们之间的关系。2.在面向对象系统的建模中所建立的最常见的图是类图。3.类图给出系…

离线数仓数据导出-hive数据同步到mysql

离线数仓数据导出-hive数据同步到mysql MySQL建库建表数据导出 为方便报表应用使用数据&#xff0c;需将ads各指标的统计结果导出到MySQL数据库中。 datax支持hive同步MySQL&#xff1a;仅仅支持hive存储的hdfs文件导出。所以reader选hdfs-reader&#xff0c;writer选mysql-wri…

怎样在外网登录访问CRM管理系统?

一、什么是CRM管理系统&#xff1f; Customer Relationship Management&#xff0c;简称CRM&#xff0c;指客户关系管理&#xff0c;是企业利用信息互联网技术&#xff0c;协调企业、顾客和服务上的交互&#xff0c;提升管理服务。为了企业信息安全以及使用方便&#xff0c;企业…

SSM小程序作品集展示微信小程序

采用技术 SSM小程序作品集展示微信小程序的设计与实现~ 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringMVCMyBatis 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 页面展示效果 用户功能 用户注册 用户首页 作品集 优秀作者 我的分享 管…

powershell@命令行提示符样式配置自定义@pwsh重写prompt显示电量内存时间等信息

文章目录 abstract流行的powershell prompt模块示例 powershell原生修改Prompt函数配置文档Prompt命令来自哪里 简单修改带上电量和时间的Prompt 复杂修改预览FAQ:没有必要修改相关仓库地址样式选择平衡样式花哨样式响应性能 小结 abstract 在 PowerShell 中&#xff0c;可以通…

CSDN积分和等级和 能创建专栏数量的关系。还差1000多分!

积分查询&#xff1a;CSDN 博客积分规则 博客积分是CSDN对用户努力的认可和奖励&#xff0c;也是衡量博客水平的重要标准。博客等级也将由博客积分唯一决定。积分规则具体如下&#xff1a; 1、每发布一篇原创或者翻译文章&#xff1a;可获得10分&#xff1b; 2、每发布一篇转载…

做一个答题pk小程序多少钱

在探讨“做一个答题pk小程序多少钱”这一问题时&#xff0c;我们首先需要明确的是&#xff0c;小程序的价格并非固定不变&#xff0c;而是受到多种因素的影响。这些因素包括但不限于小程序的复杂度、功能需求、开发周期、技术难度以及开发团队的规模和经验等。因此&#xff0c;…

Web前端 JavaScript笔记7

js的执行机制 js是单线程 同步&#xff1a;前面一个任务执行结束之后&#xff0c;执行后一个 异步&#xff1a;异步任务&#xff0c;引擎放在一边&#xff0c;不进入主线程&#xff0c;而进入任务队列的任务 js通过浏览器解析&#xff0c;浏览器靠引擎解析 回调函数同步任务执行…

LabVIEW卡尔曼滤波技术

LabVIEW卡尔曼滤波技术 在现代航空导航中&#xff0c;高精度和快速响应的方位解算对于航空安全至关重要。通过LabVIEW平台实现一种卡尔曼滤波方位解算修正技术&#xff0c;以改善传统导航设备在方位解算中的噪声干扰问题&#xff0c;从而提高其解算精度和效率。通过LabVIEW的强…

Java基础之JVM基础调优与常见问题

常见命令 以下命令的介绍&#xff0c;全部在jdk8环境下运行的&#xff1b; jps ☆☆☆☆☆ 查看当前运行的进程号&#xff1b; jmap ☆☆☆ jmap命令可以查看jvm的内存信息&#xff0c;class对应的实例个数以及占用的内存大小 jmap -histo 查看当前java进程 [rdVM-8-12-c…

Ugee手写板Ex08 S设置流程

手写笔的结构 笔尖 鼠标左键 上面第一个键&#xff1a;鼠标右键&#xff08;效果有时候也不完全等同&#xff09; 上面第二个键&#xff1a;鼠标中键 WPS ①打开pdf ②批注->随意画->画曲线 效果如下&#xff1a;

小程序中使用HTTPS调用自带文本安全内容检测接口(msg_sec_check)的实现方法

在小程序中调用自带的文本安全内容检测接口&#xff0c;你需要使用小程序提供的wx.request方法。以下是一个示例代码&#xff1a; javascript代码: // 假设你已经获取了access_token,如果不知道如何获取&#xff0c;可以参考我上一篇文章 const access_token 你的access_tok…

Python 基于docker部署的Mysql备份查询脚本

前言 此环境是基于docker部署的mysql&#xff0c;docker部署mysql可以参考如下链接&#xff1a; docker 部署服务案例-CSDN博客 颜色块文件 rootbogon:~ 2024-04-18 16:34:23# cat DefaultColor.py ######################################################################…

java音乐播放器系统设计与实现springboot-vue

后端技术 SpinrgBoot的主要优点有&#xff1a; 1、为所有spring开发提供了一个更快、更广泛的入门体验&#xff1b; 2、零配置&#xff1b; 3、集成了大量常用的第三方库的配置&#xff1b; Maven: 项目管理和构建自动化工具&#xff0c;用于java项目。 java: 广泛使用的编程语…

python使用tkinter和ttkbootstrap制作UI界面(二)

这次讲解UI界面常用的主键&#xff0c;延续上文的框架进行编写&#xff0c;原界面如下&#xff1a; Combobox组件应用&#xff08;下拉框&#xff09; """Combobox组件"""global comvalue_operatorcomvalue_operator tk.StringVar()value_ope…

【论文阅读】用于遥感弱监督语义分割的对比标记和标签激活

【论文阅读】用于遥感弱监督语义分割的对比标记和标签激活 文章目录 【论文阅读】用于遥感弱监督语义分割的对比标记和标签激活一、介绍二、联系工作三、方法3.1 对比token学习模块&#xff08;CTLM&#xff09;3.2 Class token对比学习3.3 标签前景激活模块 四、实验结果 Cont…