问题描述:
使用微信小程序官方的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
应该是插值的精度太高了,安卓这边精度限制到E-6了
1. 在限制的情况,要怎么解决这个渲染问题,微信小程序中有没有什么参数可以解除这个精度限制
2. 为什么微信小程序在ios不用限制渲染精度,在安卓中要限制