大屏中使用3D高德地图+动态效果性能卡顿无法正常展示

大屏中使用3D高德地图+动态效果，性能卡顿无法正常展示，优化方案：

1、缩减定时器数量；

2、地图加载完成后再执行数据请求和动画渲染；

3、屏幕自适应；

4、将地图样式减少build等显示；

5、将地图缩减至一半，然后通过scale填充（很重要）

5*3或者4*3的大屏中如果不加入动画效果，地图只在第一次展示很卡，如果增加地图旋转则会很卡，卡顿的原因是屏幕过大3800*2800的地图旋转动画会太大，可以通过缩放解决，缩放比例建议1/2或者1/3，对清晰度有影响。

以下示例是4*3的屏幕中展示，动画渲染放在父窗口中执行（全工程只有一个定时器）

window.requestAnimationFrame(function() {

if(window.frames['mainIframe']&&window.frames['mainIframe'].contentWindow.changeMapRotation){
window.frames['mainIframe'].contentWindow.changeMapRotation();
}

}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--重要meta, 必须!-->
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,shrink-to-fit=no" />
    <title>路况热力图</title>
 <style>
        html, body, #container {
            margin: 0; padding: 0; width: 100%; height: 100%;
        }
       

    </style>
</head>
<body>
<div id="container" class="container" style="width:600px;height:300px"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=写入自己的key"></script>
<script src="https://webapi.amap.com/loca?v=1.3.2&key=写入自己的key"></script>
<script src="https://a.amap.com/Loca/static/dist/jquery.min.js"></script>

<script>

	var mapRotationControl = true;
	var map ;
	var layer;
	var mapCenter = [121.533289,31.211466];
	
    map = new AMap.Map("container", {
    	features: ['bg', 'road'],
        viewMode: '3D',
        showLabel: false,
        expandZoomRange: false,
        mapStyle: 'amap://styles/dark',
        showBuildingBlock: false,
        center: mapCenter,
        pitch: 70,
        zoom: 15
    });

     layer = new Loca.HeatmapLayer({
        map: map,
    });

     function getCurMap(){
    	 return map;
     }
  //加载完成之后
    map.on("complete", function(){
   		
   		mapRotationControl=true;
   		
   		$.get('//a.amap.com/Loca/static/mock/sh_road_heat.json', function (datas) {
	        
   			layer.setData(datas, {
	            lnglat: function(data){
	                return [data.value.lng, data.value.lat]
	            },
	            value: 'queue_len'
	        });
    
	         layer.setOptions({
	            style: {
	                radius: 58,
	                color: {
	                    0.5: '#2c7bb6',
	                    0.65: '#abd9e9',
	                    0.7: '#ffffbf',
	                    0.9: '#fde468',
	                    1.0: '#d7191c'
	                }
	            }
	        }).render(); 
     }); 
	}); 


    map.on('click', function(e) {
        if(mapRotationControl==true){
        	mapRotationControl =false;
        }else{
        	mapRotationControl =true;
        }
    });
     
     

     function changeMapRotation() {
    		
    			if(map!=undefined && map!="undefined" && map!=null && mapRotationControl == true){
    				map.setRotation((map.getRotation()+1)%360);
    			}
    			
    		
    		
    }
    
     
     
      //监听浏览器变化
	 window.onresize = function() { 	
		setAppScale(); 
	 };   
	 function setAppScale() { 
		 
		 var ratioY = $(window).height()/300; 		
		 var ratioX = $(window).width()/600; 
			
		 $("body").css({ transform: "scale("+ratioX+","+ratioY+")", transformOrigin: "left top", overflow:"hidden" 		});   
     }    
	  $(document).ready(function(){         //初始化时调整大小        
		   setAppScale(); 
	  }); 

</script>

</body>
</html>