评论

小程序热力图组件

基于小程序canvas画布+原生map组件实现的热力图组件

小程序热力图

基于小程序canvas画布+原生map组件实现

项目地址 https://github.com/rover95/wxapp-heatmap

配置参数

/*
points: [{        //热力点数组
  longitude: 103, //经度
  latitude: 30,   //纬度
  ratio: 0.5,     //热力点覆盖范围半径系数
  opacity: 0.9    //热力点最大透明度,控制热力点权重
}],
longitude: 110,   //地图中心点经度
latitude: 30,     //地图中心点纬度
mapScale: 7,      //地图缩放,同原生map
range: 50,        //热力点基础覆盖范围,单位px 
 */

WXML

<!-- <heatMap>组件父节点必须定义宽高,<heatMap>组件将填充满父节点 -->
<view style="width:100vw;height:200px" wx:if="{{points.length>0}}">
  <heatMap points="{{points}}" longitude="{{longitude}}" latitude="{{latitude}}" mapScale="{{mapScale}}" range="{{range}}"></heatMap>
</view>

开发工具上渲染可能会出现画面撕裂,真机上显示正常

小程序画布性能孱弱,热力图需要像素级操作,全屏或渲染大尺寸canvas会有卡顿,有待微信优化
“避免设置过大的宽高,在安卓下会有crash的问题”

最后一次编辑于  08-02  
点赞 4
收藏
评论

1 个评论

  • x_Qiang
    x_Qiang
    08-03

    厉害

    08-03
    赞同
    回复