<!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="https://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>
