使用高德地图api CanvasLayer在地图上添加canvas图层，画多个点

最新推荐文章于 2024-06-13 10:00:20 发布

rty426

最新推荐文章于 2024-06-13 10:00:20 发布

阅读量6.1k

点赞数 1

分类专栏： js 文章标签：高德地图 canvas 放射效果

本文链接：https://blog.csdn.net/rty426/article/details/90718375

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

高德地图api 使用CanvasLayer在地图上添加canvas图层。

高德地图中有提供CanvasLayer api的使用事例，在例子中实现了在给定的经纬度坐标上有一个放射性的动画效果。
例子传送门
现在要模仿该使用事例实现类似百度地图上flashmarker的效果，因为不懂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"/>
    <style>
        html,
        body,
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script src="https://webapi.amap.com/maps?v=1.4.14&key=你的key"></script>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        // viewMode:"3D",
        zoom: 15,
        center: [116.335183, 39.941735]
    });

    AMap.plugin(["AMap.ControlBar"], function () {
        var bar = new AMap.ControlBar();
        map.addControl(bar);
    });


    /*
     * 添加Canvas图层
     */
    var draw = function (ctx,radious) {
        ctx.clearRect(0, 0, 200, 200)
        ctx.globalAlpha = (ctx.globalAlpha - 0.01 + 1) % 1;
        radious = (radious + 1) % 100;
        ctx.beginPath();
        ctx.arc(100, 100, radious, 0, 2 * Math.PI);
        ctx.fill();
        ctx.stroke();
        AMap.Util.requestAnimFrame(function(){
            draw(ctx,radious);
        });
    };
    /*需要描点的坐标 结构说明：
    *    [
    *      [116.328911, 39.937229],左上角坐标
    *       [116.342659, 39.946275]右下角坐标
    *    ]  表示一个闪烁点
    */
    var point=
        [[
            [116.328911, 39.937229],
            [116.342659, 39.946275]
        ],
        [
            [116.319384,39.941683],
            [116.329384,39.951683]
        ]];
    var canvas=[];
    var CanvasLayer=[];
    var context=[];
    var radious=[];
    for(let i=0;i<point.length;++i){
        canvas[i] = document.createElement('canvas');
        canvas[i].width = canvas[i].height = 200;
        context[i] = canvas[i].getContext('2d')
        context[i].fillStyle = 'rgb(0,100,255)';
        context[i].strokeStyle = 'white';
        context[i].globalAlpha = 1;
        context[i].lineWidth = 2;
        radious[i] = 0;
        CanvasLayer[i] = new AMap.CanvasLayer({
            canvas: canvas[i],
            bounds: new AMap.Bounds(
                point[i][0],point[i][1]
            ),
            zooms: [3, 18],
        });
        CanvasLayer[i].setMap(map);
        draw(context[i],radious[i]);
    }
</script>
</body>
</html>

rty426

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用高德地图api CanvasLayer在地图上添加canvas图层，画多个点

高德地图api 使用CanvasLayer在地图上添加canvas图层。高德地图中有提供CanvasLayer api的使用事例，在例子中实现了在给定的经纬度坐标上有一个放射性的动画效果。例子传送门现在要模仿该使用事例实现类似百度地图上flashmarker的效果，因为不懂canvas所以花了不少时间。事例效果：想要实现的效果图：代码：<!DOCTYPE html>...
复制链接

扫一扫