js实现高德地图绘制扇形图层

高德地图绘制扇形图层

效果：

• html元素：

- 高德地图**

<script src="https://webapi.amap.com/maps?v=1.4.10&key=“。。。。”&plugin=AMap.RectangleEditor,AMap.MouseTool,AMap.Polyline,AMap.Scale,AMap.CustomLayer,AMap.Heatmap"></script>

var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        center: ORIGIN_LONGLAT,
        zoom: ORIGIN_MAP_ZOOM, //初始化地图层级

    });
    //地图加载完成
    map.on("complete", function () {
        var ORIGIN_LONGLAT2 =[118.784069,30.040796];
        AMap.plugin('AMap.CustomLayer', function () {
            var canvas = document.createElement('canvas');
            customLayer = new AMap.CustomLayer(canvas, {
                zooms: [3, 20],
                alwaysRender: true,//缩放过程中是否重绘，复杂绘制建议设为false
                zIndex: 22,
                opacity:0.6
            });
            var onRender = function () {
                let size = map.getSize();//resize
                let width = size.width;
                let height = size.height;
                canvas.style.width = width + 'px';
                canvas.style.height = height + 'px';
                canvas.width = width;
                canvas.height = height;//清除画布
                var deg = Math.PI / 180;
                var ctx = canvas.getContext('2d');
                ctx.fillStyle = '#08549a';
                ctx.strokeStyle = 'blue';
                ctx.lineWidth = 4;
                let pos2 = map.lngLatToContainer(ORIGIN_LONGLAT2);
                let pos = map.lngLatToContainer(ORIGIN_LONGLAT);
                let radius=Math.sqrt((pos.x-pos2.x)*(pos.x-pos2.x)+(pos.y-pos2.y)*(pos.y-pos2.y));
                console.log("pos:");
                console.log(pos);
                ctx.beginPath();
                ctx.moveTo(pos.x, pos.y);
                ctx.arc(pos.x, pos.y, radius, 0, Math.PI*0.6);
                ctx.lineTo(pos.x, pos.y);
                ctx.closePath();
                ctx.stroke();
                ctx.fill();
            }
            customLayer.render = onRender;
            customLayer.setMap(map);
            customLayer.show();

        });
    });