用JavaScript在百度地图上画扇形，任意角度的扇形，自定义覆盖物

素颜马尾好姑娘i 2022-05-27 03:46 296阅读 0赞

\#\#关于画扇形需求

众所周知，百度地图只有Circle类覆盖物，没有Sector类覆盖物，并且！！半径较小的时候，当地图级别放大后，百度那个圆很明显就是个多边形，不圆啊！。。  
搜来搜去那个网上最多的各种计算角度什么的扇形画法（众多点连成多边形，but 半径小了或者角度小了，仍然是多边形啊？难道大多数人都这么将就的么？）

--------------------

\#\#\#使用Canvas完成  
直接贴上所有代码吧：

<!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            body,
            html,
            #allmap {
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
        <script type="text/JavaScript" src="http://api.map.baidu.com/api?v=3.0&ak=你的key哦"></script>
        <title>添加扇形</title>
    </head>
    
    <body>
        <div id="allmap"></div>
    </body>
    
    </html>
    <script type="text/javascript">
        var map = new BMap.Map("allmap");
        var pointCenter = new BMap.Point(120.1965, 30.22975);
        map.centerAndZoom(pointCenter, 19);
        map.enableScrollWheelZoom(true);
    
        // 自定义扇形覆盖物
        function SectorLayer(center, radius, startAngle, endAngle, color, opacity) {
            this._center = center;// 点
            this._radius = radius;// 半径
            this._color = color;  // 颜色
            this._startAngle = startAngle;// 起始角度
            this._endAngle = endAngle;    // 结束角度
            this._opacity = opacity;	  // 透明度
        }
    
        // 继承百度地图覆盖物
        SectorLayer.prototype = new BMap.Overlay();
    
        // 初始化
        SectorLayer.prototype.initialize = function (map) {
            this._map = map;
    
            var canvas = document.createElement("canvas"); // 创建Cavans对象
            canvas.setAttribute("width",String(this._radius*2));// 不能用canvas.style.width,会拉变形
            canvas.setAttribute("height",String(this._radius*2));
            canvas.style.zIndex = BMap.Overlay.getZIndex(this._center.lat);
            canvas.style.position = "absolute";
            canvas.style.background = "translate";
            canvas.style.opacity = this._opacity;
    
    		var ctx = canvas.getContext('2d');
            ctx.lineWidth = 1;
            ctx.fillStyle = this._color; //填充色彩
            ctx.strokeStyle = "red";//设置边颜色
            ctx.beginPath();
            ctx.translate(this._radius, this._radius);
            ctx.moveTo(0, 0);
            ctx.arc(0, 0, this._radius, this._startAngle / 180 * Math.PI, this._endAngle / 180 * Math.PI);
            ctx.fill();
            ctx.closePath();
    		
            map.getPanes().markerPane.appendChild(canvas);
            this._canvas = canvas;
            return canvas;
        }
    
        SectorLayer.prototype.draw = function () {
            var map = this._map;
            var pixel = map.pointToOverlayPixel(this._center);
            this._canvas.style.left = pixel.x - this._radius + "px";
            this._canvas.style.top = pixel.y - this._radius + "px";
        }
    
    	// 随便画了7*（360/30）个扇形，地图放到最大级别，不同半径、不同角度下的效果
        var colorsArray = ["red", "#8B008B", "green", " #FFFAAA", "FF66DD", "#CCDD33", "#FFAAAA", "orange", "#FF3300", "blue","#AAA321", "#63B8FF", "#8B6508"];
        var step = 30;//每个扇形30度
        for(var startAngle = 0; startAngle <= 360; startAngle +=step)
        {
            var chooseColor = Math.ceil(Math.random() * 10) % (colorsArray.length - 1);
            var sector = new SectorLayer(pointCenter, 250, startAngle, startAngle + step, colorsArray[chooseColor], 0.1);
            map.addOverlay(sector);
            var sector = new SectorLayer(pointCenter, 200, startAngle, startAngle + step, colorsArray[chooseColor], 0.2);
            map.addOverlay(sector);
            var sector = new SectorLayer(pointCenter, 160, startAngle, startAngle + step, colorsArray[chooseColor], 0.3);
            map.addOverlay(sector);
            var sector = new SectorLayer(pointCenter, 80, startAngle, startAngle + step, colorsArray[chooseColor], 0.7);
            map.addOverlay(sector);
            var sector = new SectorLayer(pointCenter, 40, startAngle, startAngle + step, colorsArray[chooseColor], 0.9);
            map.addOverlay(sector);
            var sector = new SectorLayer(pointCenter, 20, startAngle, startAngle + step, colorsArray[chooseColor], 1);
            map.addOverlay(sector);
            var sector = new SectorLayer(pointCenter, 10, startAngle, startAngle + step, colorsArray[chooseColor], 1);
            map.addOverlay(sector);
        }
    </script>

--------------------

效果图：  
![这里写图片描述][70]  
是各位想要的效果么？

--------------------

[70]: /images/20220527/0e12c7c11a42467093d8ace92e7ebf18.png