- map组件中用polyline字段渲染多点组成的线数据,android手机渲染出来的线有毛刺不平滑?
问题描述: 使用微信小程序官方的map组件,用polyline字段来渲染由多个点组成的线数据,同样的数据,ios手机是正常的很平滑,安卓手机渲染出来的线很多毛刺且歪歪扭扭,请问怎么解决才能像ios一样正常。 代码片段: https://developers.weixin.qq.com/s/4du6z8mN7EF9 现象: 1 点M(31.026408616381445,121.448515260907229),点N(31.026694035988626,121.448382519899809),以M、N为端点,等分为150个点,作为polyline的点数据数组,渲染出来的线数据预期是一条笔直的直线,ios手机确实是笔直平滑的,但使用android手机渲染出来的是歪歪扭扭很多毛刺 2 将M、N向右平移到A、B,这个不做打断,作为polyline的points数据,这种情况ios和android手机都是平滑的了 渲染效果如图:(左边的线是多点数据的线,右边的线是只有两个端点的线) android手机(Redmi手机,MIUI12.0.5,android版本10 )(注,截图是用这个截取的,但该现象不仅限于这个手机,其它品牌诸如Huawei/Oppo/Honor都有试过,也存在该现象) [图片] ios手机效果 (iPhone13,系统:15.6.1) [图片] 代码逻辑: wxml <map id="map" longitude="{{center.longitude}}" latitude="{{center.latitude}}" scale="{{scale}}" circles="{{parkinglotCircles}}" polyline="{{parkinglotLines}}" polygons="{{parkinglotPolygons}}" markers = "{{markers}}"> </map> wxss #map{ width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; } js const app = getApp() Page({ data: { center: { latitude: 31.026484964647693, longitude: 121.448673014784962 }, scale: 22, parkinglotCircles: [], parkinglotLines: [], parkinglotPolygons: [], markers: [] }, onLoad() { console.log('代码片段是一种迷你、可分享的小程序或小游戏项目,可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题和 Bug 等。可点击以下链接查看代码片段的详细文档:') console.log('https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html') var tempParkinglotLines = [] // count = 分段数量 = 打断的点数量 - 1 // var count = 1 var count = 149 var startLat = 31.026408616381445 var endLat = 31.026694035988626 var deltaLat = (endLat - startLat) / count var startLng = 121.448515260907229 var endLng = 121.448382519899809 var deltaLng = (endLng - startLng) / count var splitPoints = [] for (let i = 0; i < count + 1; i++) { var point = { latitude: startLat + deltaLat * i, longitude: startLng + deltaLng * i } splitPoints.push(point) } console.log(splitPoints) var splitPointsLine = { points: splitPoints, color: "#51A4FF", width: 3, dottedLine: false, // 是否是虚线 arrowLine: false, arrowIconPath: '', // 可以用图片替换默认箭头样式 borderWidth: 1, borderColor: "#0073FB", // 边界线的颜色 } tempParkinglotLines.push(splitPointsLine) var notSplitPoints = [] var pointA = { latitude: 31.026508616381445, longitude: 121.448615260907229 } var pointB = { latitude: 31.026794035988626, longitude: 121.448482519899809 } notSplitPoints.push(pointA) notSplitPoints.push(pointB) var notSplitPointsLine = { points: notSplitPoints, color: "#51A4FF", width: 3, dottedLine: false, // 是否是虚线 arrowLine: false, arrowIconPath: '', // 可以用图片替换默认箭头样式 borderWidth: 1, borderColor: "#0073FB", // 边界线的颜色 } tempParkinglotLines.push(notSplitPointsLine) this.setData({ parkinglotLines: tempParkinglotLines }) } }) 如题,请问有多个点构成的线数据,怎么实现在android手机平滑渲染,与ios一致 @官方 https://developers.weixin.qq.com/miniprogram/dev/component/map.html
2023-01-09 - XR-FRAME 框架正式版本上线计划大概是在什么时候?
XR-FRAME 框架正式版本上线计划大概是在什么时候? https://developers.weixin.qq.com/miniprogram/dev/component/xr-frame/overview/#%E6%A6%82%E8%BF%B0
2022-11-17 - 微信小程序map组件渲染对数据精度做了默认限制吗?有没有办法提升点线面渲染精度?
https://developers.weixin.qq.com/miniprogram/dev/component/map.html 问题 使用map组件,通过polyline渲染了停车位边框的数据,出现明显的变形(相邻的停车位的线段),这些数据(小数点后15位)本身在QGIS软件上显示正常,当我将其在小数点第6位进行四舍五入截断,然后在QGIS上进行渲染,发现出现了同样的问题,因为想请问一下,微信小程序map组件的polyline、polygon这些数据是否做了数据截断,如果是的,那么我们有什么方法可以提高渲染的精度,如果不是,请帮忙看下这个渲染是否是出现什么bug,谢谢 附: 图1(微信小程序效果) [图片] 图2(QGIS中渲染正常效果如下) [图片] 图3 (QGIS软件中将数据做小数点后六位四舍五入截断发生同样变形) [图片]
2022-07-26