自定义图层-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="https://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="//webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
<script type="text/javascript">
	var map = new AMap.Map('container', {
        center: [116.306206, 39.975468],
        zooms: [2, 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){
        var canvas = document.createElement('canvas');
        var customLayer = new AMap.CustomLayer(canvas, {
            zooms: [3, 10],
			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);
    			    // pos.x *= 2;
    			    // pos.y *= 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>

控制台

清空

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