uniapp結(jié)合Canvas+renderjs根據(jù)經(jīng)緯度繪制軌跡

?

• 根據(jù)官方建議要想在 app-vue 流暢使用 Canvas 動畫，需要使用 renderjs 技術(shù)，把操作canvas的js邏輯放到視圖層運行，避免邏輯層和視圖層頻繁通信。
• 這里呢結(jié)合 renderjs 技術(shù)實現(xiàn)繪制軌跡圖形。

你可能需要先了解renderjs如何數(shù)據(jù)通訊：renderjs 與 app-vue之間數(shù)據(jù)交互

html中使用canvas根據(jù)經(jīng)緯度繪制軌跡

效果圖

文章來源地址http://www.zghlxwxcb.cn/news/detail-672614.html

template

• coordsAll 監(jiān)聽數(shù)據(jù)變化，只要 coordsAll 數(shù)據(jù)改變，就是觸發(fā) initData 方法。

 <template>
	<view class="map-track-wrap">
      	<!-- xxx -->
      	<view class="track-list" :prop="coordsAll" :change:prop="canvas.initData">
          	<!-- xxx -->
          <view class="d-flex canvas-box">
            	<canvas class="canvas" :class="`canvas${index}`"></canvas>
          </view>
       	</view>
    </view>
</template>

renderjs

<script module="canvas" lang="renderjs">
	export 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(); // 保存狀態(tài)
				ctx.translate(0, canvasHeight);
				ctx.rotate(-Math.PI / 2);
				ctx.beginPath();

				// 根據(jù)偏移量移動點位并畫圖
				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(); // 恢復(fù)狀態(tài)
			}
		}
	}
</script>

js

• renderjs中不支持uni.request，所以請求后臺獲取數(shù)據(jù)操作在script中進(jìn)行，然后監(jiān)聽參數(shù)變化，將參數(shù)傳遞過來進(jìn)行渲染。

searchList() {      	
  	// 處理數(shù)據(jù)
  	let list = this.dataList;
  	if (list.length > 0) {
    	for(let i = 0; i < list.length; i++) {
      		let tmpLocation = list[i].locations;
         	// 頁面監(jiān)聽 coordsAll，把數(shù)據(jù)傳遞renderjs，會觸發(fā) initData 方法
      		this.coordsAll.push(JSON.parse(tmpLocation));
    	}
  	}
}

數(shù)據(jù)結(jié)構(gòu)

• 測試數(shù)據(jù)，具體根據(jù)個人所需處理數(shù)據(jù)

[
    {
        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
            }
       ]
  	}
]

到了這里，關(guān)于uniapp結(jié)合Canvas+renderjs根據(jù)經(jīng)緯度繪制軌跡（二）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！