高德地图雷达扫描效果实现

• 一看就会，十分钟看完。后边用到不挠头发。
• 这个其实没什么难点，在地图上动效不是很常见，最主要的是我在搜索高德地图雷达扫描, 地图雷达扫描 得到的并没有直接能用的。某篇文章的评论下一位老哥评论说

我是很能理解这种心情的，搜索发现有案例，然后发现案例需要加好友获取🤬

开始

• 实例中使用vue + 高德jsApi + canvas实现。其实就是把canvas画好的雷达扫描添加到地图上。
• 目前支持添加canvas的地图有 四维图新，高德，百度 等，当然除了这几家可能还有其他的地图也支持，但是我不知道，所以就不列举了。
• 雷达扫描效果，是从这篇文章借鉴过来的，做了一点点改动

地图上加载canvas

• 注意：文中使用的api版本为 2.0
• 高德地图的加载，初始化这里就不再叙述了，官网文档写的很清晰此处丢个链接

地图上如何加载canvas

• 首先还是要先看下官方文档，在图层-》自有数据图层下有一个canvas图层的示例就是我们要找的链接在此,主要就是这段代码

 // 创建一个 canvas图层 
 // canvas 的创建的 canvas 元素
 // bounds 界限 canvas元素展示范围的大小及在地图的那个点展示（个人理解）
 var CanvasLayer = new AMap.CanvasLayer({
   
    canvas: canvas,
    bounds: new AMap.Bounds(
        [116.328911, 39.937229],
        [<