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

最新推荐文章于 2024-08-14 12:12:55 发布

努力的阿花

最新推荐文章于 2024-08-14 12:12:55 发布

阅读量2.8k

点赞数 1

分类专栏： canvas 高德地图canvas图层

本文链接：https://blog.csdn.net/weixin_44005989/article/details/88423707

版权

本文介绍了如何使用JavaScript配合高德地图API来实现扇形图层的绘制，包括设置地图密钥和创建扇形图层的关键步骤。

摘要由CSDN通过智能技术生成

高德地图绘制扇形图层

效果：

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