目录
1.定义一个CustomLayerInterface来在地图上绘制脉冲点
先放一张图,效果如下,本文主要写橙色定位点下面的水波纹效果的实现,其原理就是利用canvas在地图上叠加一级图层。
1.定义一个CustomLayerInterface来在地图上绘制脉冲点
2.在图层添加到地图时获取获取canvas context
3.每帧渲染时调用
4.处理数据,叠加图层
5.代码如下
// 水波动效椭圆定位点 canvasMarker(data) { const self = this; let size = 200; // 定义一个CustomLayerInterface来在地图上绘制脉冲点 let pulsingDot = { width: size, height: size, data: new Uint8Array(size * size * 4), // 在图层添加到地图时获取获取canvas context onAdd: function () { var canvas = document.createElement('canvas'); canvas.width = this.width; canvas.height = this.height; this.context = canvas.getContext('2d'); }, // 每帧渲染时调用 render: function () { var duration = 1000; var t = (performance.now() % duration) / duration; var radius = (size / 2) * 0.3; var outerRadius = (size / 2) * 0.7 * t + radius; var context = this.context; // 画外围圆 context.clearRect(0, 0, this.width, this.height); context.beginPath(); self.ParamEllipse(context, 60, 80, outerRadius, radius); //椭圆 context.fillStyle = 'rgba(255, 144, 0,' + (1 - t) + ')'; context.lineWidth = 0; context.strokeStyle = 'transparent'; context.fill(); // 从canvas中更新图片数据 this.data = context.getImageData( 0, 0, this.width, this.height ).data; // 不断地重新绘制地图,导致平滑的动画点 self.bjMap.triggerRepaint(); // 返回`true`让映射知道图像已经更新 return true; } }; let jsonDataCanvas = { 'type': 'FeatureCollection', 'features': [] }; data.forEach(item => { jsonDataCanvas.features.push({ 'type': 'Feature', 'geometry': { 'type': 'Point', 'coordinates': item } }) }); self.bjMap.addImage('pulsing-dot', pulsingDot, { pixelRatio: 2 }); self.bjMap.addSource('points', { 'type': 'geojson', 'data': jsonDataCanvas }); self.bjMap.addLayer({ 'id': 'points', 'type': 'symbol', 'source': 'points', 'layout': { 'icon-image': 'pulsing-dot' } }); },
6.画椭圆的函数
// 画椭圆 ParamEllipse(context, x, y, a, b) { //max是等于1除以长轴值a和b中的较大者 //i每次循环增加1/max,表示度数的增加 //这样可以使得每次循环所绘制的路径(弧线)接近1像素 var step = (a > b) ? 1 / a : 1 / b; context.beginPath(); context.moveTo(x + a, y); //从椭圆的左端点开始绘制 for (var i = 0; i < 2 * Math.PI; i += step) { //参数方程为x = a * cos(i), y = b * sin(i), //参数为i,表示度数(弧度) context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i)); } context.closePath(); context.stroke(); },
写的比较潦草,暂时记录到这吧~
又是元(mo)气(yu)满满的一天呢~