国家企业信用公示系统官方网站,中国建设银行网站缺点,电子商务营销方法,小程序管理平台登陆uniapp结合Canvasrenderjs根据经纬度绘制轨迹 文章目录 uniapp结合Canvasrenderjs根据经纬度绘制轨迹效果图templaterenderjsjs数据结构
根据官方建议要想在 app-vue 流畅使用 Canvas 动画#xff0c;需要使用 renderjs 技术#xff0c;把操作canvas的js逻辑放到视图层运…uniapp结合Canvasrenderjs根据经纬度绘制轨迹 文章目录 uniapp结合Canvasrenderjs根据经纬度绘制轨迹效果图templaterenderjsjs数据结构
根据官方建议要想在 app-vue 流畅使用 Canvas 动画需要使用 renderjs 技术把操作canvas的js逻辑放到视图层运行避免逻辑层和视图层频繁通信。这里呢结合 renderjs 技术实现绘制轨迹图形。 你可能需要先了解renderjs如何数据通讯renderjs 与 app-vue之间数据交互
html中使用canvas根据经纬度绘制轨迹 效果图 template
coordsAll 监听数据变化只要 coordsAll 数据改变就是触发 initData 方法。 templateview classmap-track-wrap!-- xxx --view classtrack-list :propcoordsAll :change:propcanvas.initData!-- xxx --view classd-flex canvas-boxcanvas classcanvas :classcanvas${index}/canvas/view/view/view
/templaterenderjs
script modulecanvas langrenderjsexport default {methods: {initData() {for (let i 0; i this.coordsAll.length; i) {// 绘制图形this.draw(this.coordsAll[i], i);}},draw(locationList, idx) {let canvasHeight 72,canvasWidth 72,canvasEle document.querySelectorAll(.canvas${idx}canvas)[0],ctx canvasEle.getContext(2d),amuXArr [],amuYArr []for (let i 0; i locationList.length; i) {amuXArr.push(locationList[i].lat);amuYArr.push(locationList[i].lng);}amuYArr amuYArr.map((item) {return item * -1;});let xMax Math.max(...amuXArr);let xMin Math.min(...amuXArr);let yMax Math.max(...amuYArr);let yMin Math.min(...amuYArr);let xScale canvasWidth / (xMax - xMin);let yScale canvasHeight / (yMax - yMin);let scale xScale yScale ? xScale : yScale;let xoffset (canvasWidth - (xMax - xMin) * scale) / 2;let yoffset (canvasHeight - (yMax - yMin) * scale) / 2;ctx.save(); // 保存状态ctx.translate(0, canvasHeight);ctx.rotate(-Math.PI / 2);ctx.beginPath();// 根据偏移量移动点位并画图ctx.moveTo((amuXArr[0] - xMin) * scale xoffset,(yMax - amuYArr[0]) * scale yoffset);for (let i 1; i amuXArr.length; i) {ctx.lineTo((amuXArr[i] - xMin) * scale xoffset,(yMax - amuYArr[i]) * scale yoffset);}ctx.strokeStyle #1FE298;ctx.stroke();ctx.restore(); // 恢复状态}}}
/scriptjs
renderjs中不支持uni.request所以请求后台获取数据操作在script中进行然后监听参数变化将参数传递过来进行渲染。
searchList() { // 处理数据let list this.dataList;if (list.length 0) {for(let i 0; i list.length; i) {let tmpLocation list[i].locations;// 页面监听 coordsAll把数据传递renderjs会触发 initData 方法this.coordsAll.push(JSON.parse(tmpLocation));}}
}数据结构
测试数据具体根据个人所需处理数据
[{locations: [{lng: 113.980502,lat: 22.54161},{lng: 113.972839,lat: 22.533976},{lng: 113.98925,lat: 22.524669},{lng: 113.990034,lat: 22.537097},{lng: 114.00916,lat: 22.534477}]},{locations: [{lng: 113.924271,lat: 22.537654},{lng: 113.9367,lat: 22.532806},{lng: 113.928494,lat: 22.518594},{lng: 113.942673,lat: 22.524502},{lng: 113.944302,lat: 22.538601}]},{locations: [{lng: 113.98049,lat: 22.54301},{lng: 114.06374,lat: 22.51134},{lng: 114.06259,lat: 22.50951},{lng: 114.06178,lat: 22.51031},{lng: 113.96047,lat: 22.54611}]}
]
