自定义图层-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>
 
 

控制台

清空

示例中心常见问题