现在重构web项目的时候发现，以前项目中是高德画基站的扇区的时候，通过计算点来画多边形，在站点的数量比较多的时候，会增加请求，同时计算扇区的时候有大量的计算，这样会极度浪费服务器的性能，所以对这块进行了改良，直接使用的高德地图的canvas层在画基站，效果如下图所示：
其代码为：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>ImageLayer</title> <meta id="viewport" name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0"/> <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/> <script src="http://webapi.amap.com/maps?v=1.4.2&key=您申请的key值"></script> --> </head> <body> <div id="container"></div> <script> var map = new AMap.Map('container', { resizeEnable: true, // viewMode:"3D", zoom:15, center:[116.335183,39.941735] }); /* * 添加Canvas图层 */ var canvas = document.createElement('canvas'); canvas.width = map.getSize().width; canvas.height = map.getSize().height; var context = canvas.getContext('2d'); //context.strokeStyle='white'; //canvas.style.zIndex = AMap.Overlay.getZIndex(this._point.lat); context.globalAlpha = 1; context.lineWidth = 2; var radious = 0; var secNumber = 1; var draw = function(argument) { context.clearRect(0,0,canvas.width,canvas.height) context.globalAlpha = (context.globalAlpha-0.3+1)%1; radious=50; var pixel = map.lnglatTocontainer(new AMap.LngLat(116.344496,39.939976)); var startPoint=0; for(var i=0;i<3;i++){ context.fillStyle = 'rgb(0,100,255)'; context.strokeStyle = 'rgb(0,100,255)'; context.beginPath(); //定义起点 context.moveTo(pixel.getX(),pixel.getY()); context.arc(pixel.getX(),pixel.getY(),50,startPoint,startPoint+Math.PI/3,false); context.fill(); startPoint+=Math.PI*2/3; } } var CanvasLayer = new AMap.CanvasLayer({ canvas: canvas, bounds: map.getBounds( ), zooms: [3, 18], }); CanvasLayer.setMap(map); draw(); </script> </body> </html>