大屏中使用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>

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章