自定义图层-Canvas

使用CustomLayer创建自定义图层，以Canvas作为绘制方式。

源代码编辑器

复制

运行

还原

          <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">      
    <title>自定义图层</title>
	<link rel="stylesheet" href="http://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        html,body,#container {
          width: 100%;
          height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script src="http://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script type="text/javascript">
	var map = new AMap.Map('container', {
        center: [116.306206, 39.975468],
        zooms: [3, 10],
		zoom:3
	});
	
	function getData(callback){
	    AMap.plugin('AMap.DistrictSearch', function() {
    		var search = new AMap.DistrictSearch();
    		search.search('中国', function(status, data) {
    			if (status === 'complete') {
    			    var positions = []
    				var provinces = data['districtList'][0]['districtList']
    				for (var i = 0; i < provinces.length; i += 1) {
    				    positions.push({
    				        center: provinces[i].center,
    				        radius:Math.max(2, Math.floor(Math.random() * 10))
    				    })
    				}
    				callback(positions)
    			}
    		});
	    });
	}
	function addLayer(positions){
	    AMap.plugin('AMap.CustomLayer', function() {
	        var canvas = document.createElement('canvas');
	        var customLayer = new AMap.CustomLayer(canvas, {
                zooms: [3, 10],
                alwaysRender:true,//缩放过程中是否重绘，复杂绘制建议设为false
				zIndex: 120
			});
			var onRender = function(){
			    var retina = AMap.Browser.retina;
                var size = map.getSize();//resize
                var width = size.width;
                var height = size.height;
                canvas.style.width = width+'px'
                canvas.style.height = height+'px'
                if(retina){//高清适配
                    width*=2;
                    height*=2;
                }
                canvas.width = width;
                canvas.height = height;//清除画布
			    var ctx = canvas.getContext("2d");
        		ctx.fillStyle = '#08f';
        		ctx.strokeStyle = '#fff';
        		ctx.beginPath();
			    for (var i = 0; i < positions.length; i += 1) {
			        var center = positions[i].center;
        			var pos = map.lngLatToContainer(center);
        			var r = positions[i].radius;
        			if(retina){
        			    pos = pos.multiplyBy(2);
        			    r*=2
        			}
        			ctx.moveTo(pos.x+r, pos.y)
        		    ctx.arc(pos.x, pos.y, r, 0, 2*Math.PI);
        		}
        		ctx.lineWidth = retina?6:3
        		ctx.closePath();
        		ctx.stroke();
        		ctx.fill();
			}
			customLayer.render = onRender;
			customLayer.setMap(map);
	    });
	}
	getData(addLayer);
	
</script>
</body>  
</html>
        

控制台

清空

示例
中心常见
问题智能
客服