收藏
回答

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{
  width100%;
  height100%;
  position: absolute; 
  left0px; 
  top0px;
}

js

const app = getApp()


Page({
  data: {
    center: {
        latitude31.026484964647693,
        longitude121.448673014784962
    },
    scale22,
    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",
        width3,
        dottedLinefalse// 是否是虚线
        arrowLine:  false,
        arrowIconPath''// 可以用图片替换默认箭头样式
        borderWidth1,
        borderColor"#0073FB"// 边界线的颜色
    }
    tempParkinglotLines.push(splitPointsLine)
    
    var notSplitPoints = []
    var pointA = {
        latitude31.026508616381445,
        longitude121.448615260907229
    }
    var pointB = {
        latitude31.026794035988626,
        longitude121.448482519899809
    }
    notSplitPoints.push(pointA)
    notSplitPoints.push(pointB)
    var notSplitPointsLine = {
        points: notSplitPoints,
        color"#51A4FF",
        width3,
        dottedLinefalse// 是否是虚线
        arrowLine:  false,
        arrowIconPath''// 可以用图片替换默认箭头样式
        borderWidth1,
        borderColor"#0073FB"// 边界线的颜色
    }
    tempParkinglotLines.push(notSplitPointsLine)
    
    this.setData({
        parkinglotLines: tempParkinglotLines
    })
  }
})


如题,请问有多个点构成的线数据,怎么实现在android手机平滑渲染,与ios一致 @官方

https://developers.weixin.qq.com/miniprogram/dev/component/map.html

最后一次编辑于  2023-01-09
回答关注问题邀请回答
收藏

1 个回答

  • Demons
    Demons
    2023-01-10

    应该是插值的精度太高了,安卓这边精度限制到E-6了

    2023-01-10
    有用
    回复 2
    • 王盖安
      王盖安
      2023-01-10
      你好,请问
      1. 在限制的情况,要怎么解决这个渲染问题,微信小程序中有没有什么参数可以解除这个精度限制
      2. 为什么微信小程序在ios不用限制渲染精度,在安卓中要限制
      2023-01-10
      回复
    • 王盖安
      王盖安
      2023-01-17
      你好,麻烦给个回复。另外map框架是否有对该问题修复有排期计划
      2023-01-17
      回复
登录 后发表内容