mineMap 水波动效椭圆定位点实现

目录

1.定义一个CustomLayerInterface来在地图上绘制脉冲点

2.在图层添加到地图时获取获取canvas context

3.每帧渲染时调用

4.处理数据，叠加图层

​5.代码如下

6.画椭圆的函数

 

---

先放一张图，效果如下，本文主要写橙色定位点下面的水波纹效果的实现，其原理就是利用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）满满的一天呢~