一、动画需求，GPU占用问题描述

GPU要爆表了，老板有点生气呢，给我找了一个阿里前端指导工作！

且听我来讲讲事情是咋样的，项目中需要地图中加标记点，而且标记点之间有主从连接关系，需要绘制脉冲线动画效果！

官网提供动画地址：
https://lbs.amap.com/demo/loca-v2/demos/cat-pulseline/bj_in_out

打开官方地址，GPU就要爆表了！

既然是官方问题，坚决不能内耗，先找官方客服帮咱处理问题，官网恢复 local 动画渲染很耗GPU没有好办法！

二、GPU 占用秒降

没有解决方案老板让我自己写一个，从此就开启豆包模式！自己使用 css3 动画 结合 javascript 自绘动画，调整地图拖动、3D切换、屏幕窗口大小等适应问题。我的GPU占用从80%秒降到5%，效果还是蛮不错的！

实现教程代码完整示例：

  
    
    
    
    
  

  
    
    

    


    
    <script src="https://webapi.amap.com/maps?v=2.0&key=您的密钥"></script>
    <script>
      // 初始化地图
      var map = new AMap.Map("container", {
        zoom: 12,
        center: [116.286531, 40.043682],
      });
      // 定义两个标记点的经纬度
      var point1 = [116.286531, 40.043682];
      var point2 = [116.311257, 39.94618];

      // 添加标记点
      var marker1 = new AMap.Marker({
        position: point1,
        map: map,
      });
      //添加图层
      var satellite = new AMap.TileLayer.Satellite({
        opacity: 0.5,
        zIndex: 3,
      });
      satellite.setMap(map);
      //设置地图样式
      var styleName = "amap://styles/grey";
      map.setMapStyle(styleName);

      var marker2 = new AMap.Marker({
        position: point2,
        map: map,
      });
      // 自定义标记点样式
      var markerOptions = {
        icon: new AMap.Icon({
          size: new AMap.Size(32, 32), // 图标大小
          image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", // 图标图片地址
          imageSize: new AMap.Size(32, 32), // 图标实际大小
        }),
        //position: null, // 后续会动态设置
        offset: new AMap.Pixel(-16, -32), // 偏移量，使图标底部中心对准坐标点
      };

      // 创建并添加第一个标记点
      var marker1 = new AMap.Marker({
        ...markerOptions,
        position: point1,
      });
      marker1.setMap(map);

      // 创建并添加第二个标记点
      var marker2 = new AMap.Marker({
        ...markerOptions,
        position: point2,
      });
      marker2.setMap(map);

      function createPulseLine(point1, point2) {
        console.log("point2", point2);
        // 将经纬度转换为像素坐标
        var pixel1 = map.lngLatToContainer(point1);
        var pixel2 = map.lngLatToContainer(point2);

        // 计算连线的长度和角度
        var dx = pixel2.getX() - pixel1.getX();
        var dy = pixel2.getY() - pixel1.getY();
        var length = Math.sqrt(dx * dx + dy * dy);
        var angle = Math.atan2(dy, dx) * (180 / Math.PI);
        console.log("angle", angle);

        const element = document.querySelector(".pulse-line");
        console.log("element", element);
        // 判断元素是否存在
        if (element) {
          // 存在则移除元素
          element.remove();
        }
        // 创建脉冲线元素
        var pulseLine = document.createElement("div");
        pulseLine.innerHTML = "
";
        pulseLine.classList.add("pulse-line");
        pulseLine.style.left = pixel1.getX() + "px";
        pulseLine.style.top = pixel1.getY() + "px";
        pulseLine.style.width = length + "px";
        pulseLine.style.transform = "rotate(" + angle + "deg)";
        document.getElementById("container").appendChild(pulseLine);
      }
      createPulseLine(point1, point2);
      // 监听缩放改变事件
      map.on("zoomchange", function () {
        var currentZoom = map.getZoom();
        console.log("地图缩放级别已改变，当前缩放级别为: ", currentZoom);
        createPulseLine(point1, point2);
        // 这里可以添加你在缩放改变时要执行的逻辑
      });
      map.on("mapmove", () => {
        console.log("地图拖动中");
        createPulseLine(point1, point2);
      });
      // 监听视图切换事件
      datas.map.on("viewchange", function () {
          // 获取当前的视图状态
          createPulseLine(point1, point2);
        });
      // 监听拖动结束事件
      map.on("movestart", function () {
        var currentCenter = map.getCenter();
        console.log("地图拖动结束，当前地图中心坐标为: ", currentCenter);
        createPulseLine(point1, point2);
        // 这里可以添加你在拖动结束时要执行的逻辑
      });
      window.addEventListener("resize", () => {
        createPulseLine(point1, point2)
      });
    </script>