现在重构web项目的时候发现，以前项目中是高德画基站的扇区的时候，通过计算点来画多边形，在站点的数量比较多的时候，会增加请求，同时计算扇区的时候有大量的计算，这样会极度浪费服务器的性能，所以对这块进行了改良，直接使用的高德地图的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"/>

        <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>

<script src="http://webapi.amap.com/maps?v=1.4.2&key=您申请的key值"></script> -->

    </head>

    <body>

        <div id="container"></div>

        <script>

            var map = new AMap.Map('container', {

                resizeEnable: true,

                // viewMode:"3D",

                zoom:15,

                center:[116.335183,39.941735]

            });

            /*

             * 添加Canvas图层

             */

             var canvas = document.createElement('canvas');

             canvas.width = map.getSize().width;

             canvas.height = map.getSize().height;

             var context = canvas.getContext('2d');

             //context.strokeStyle='white';

             //canvas.style.zIndex = AMap.Overlay.getZIndex(this._point.lat);

             context.globalAlpha = 1;

             context.lineWidth = 2;

             var radious = 0;

             var secNumber = 1;

             var draw  = function(argument) {

                context.clearRect(0,0,canvas.width,canvas.height)

                 context.globalAlpha = (context.globalAlpha-0.3+1)%1;

                 radious=50;

                var pixel = map.lnglatTocontainer(new AMap.LngLat(116.344496,39.939976));

                var startPoint=0;

                for(var i=0;i<3;i++){

                    context.fillStyle = 'rgb(0,100,255)';

                    context.strokeStyle = 'rgb(0,100,255)';

                    context.beginPath();

                    //定义起点

                    context.moveTo(pixel.getX(),pixel.getY());

                    context.arc(pixel.getX(),pixel.getY(),50,startPoint,startPoint+Math.PI/3,false);

                    context.fill();

                    startPoint+=Math.PI*2/3;

                }

             }

             var CanvasLayer = new AMap.CanvasLayer({

                canvas: canvas,

                bounds: map.getBounds( ),

                zooms: [3, 18],

            });

            CanvasLayer.setMap(map);

            draw();

        </script>

    </body>

</html>

高德地图和canvas画图结合应用(一)的更多相关文章

  1. 高德地图和canvas画图结合应用(二)

    上节讲述了如在在高德地图中添加canvas图层,这节就讲述下如何在canvas图层添加鼠标的事件. 在上节脚本的最后加入以下代码: var text; $('#container').on('clic ...

  2. 从flexible.js引入高德地图谈起的移动端适配

    曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...

  3. [WEB地图] 2017高德地图API WEB开发（key申请，地图搭建）简约教程

      前端时间因为公司需要研究 了一下百度的教程 然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情   高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去“高德地 ...

  4. 毕业设计总结（1）-canvas画图

    去年6月底完成的毕业设计,到现在也才开始给它做个总结,里面有很多可以学习和借鉴的东西. 我的毕业设计的题目是“一种路径规划算法的改进与设计”,具体的要求可参见下面的表格: 题目 一种路径规划算法的改进 ...

  5. 【高德地图API】地理编码与逆地理编码

    一.地理编码 该功能实现地理编码服务,即地址匹配,从已知的地址描述到对应的经纬度坐标的转换,即根据地址信息,查询该地址所对应的点坐标等,地址(address) 为必选项,城市(city)为可选项. & ...

  6. 在vue中使用高德地图vue-amap

    1.安装 vue-amap我安装指定版本0.5.10的版本 npm i --save vue-amap@0.5.10 2.main.js中的配置 key申请地址教程:https://lbs.amap. ...

  7. vue-element-admin 引入高德地图并做海量点标记

    第一步: 首先在index.html入口文件中添加引入高德地图的js,并填写自己在官网申请的key.如果没有申请不填写也是可以的. plugin:项目中如果有需要引入插件则使用没有直接去掉就行. &l ...

  8. 在高德地图上用svg.js绘制简单图形

    这段时间做的一个项目,需要在地图上绘制简单的图形.在学习高德地图JS API的过程中,发现高德地图提供的点.线等API并不能满足我的需求,还好它开放了自定义图层CustomLayer,官方说自定义图层 ...

  9. 高德地图API中折线polyline不能跨越180度经度线的解决方案

    1.问题 最近在使用高德地图的API,有一个需求是画出对象的历史轨迹,采用了高德地图API中的折线polyline函数.但如果需要跨180度经度线的折线,会出现不能跨越的情况,如下图所示: 图中有三个 ...

随机推荐

  1. 1）Win10-UWA开发 UWP应用操作方法、Windows 10应用程序的指南

    孙广东   2015.8.22 全部任务类型(比方在列表中显示数据或创建导航窗格)的说明和代码演示样例. 在这一节 包含例如以下: 主题 描写叙述 Accessibility 创建通用的Windows ...

  2. Qt 3D教程（三）实现对模型材质參数的控制

    Qt 3D教程(三)实现对模型材质參数的控制 蒋彩阳原创文章,首发地址:http://blog.csdn.net/gamesdev/article/details/47131841.欢迎同行前来探讨. ...

  3. ZOJ 1696 Viva Confetti 计算几何

    计算几何:按顺序给n个圆覆盖.问最后能够有几个圆被看见.. . 对每一个圆求和其它圆的交点,每两个交点之间就是可能被看到的圆弧,取圆弧的中点,往外扩展一点或者往里缩一点,从上往下推断有没有圆能够盖住这 ...

  4. nyoj--203--三国志（迪杰斯特拉+背包）

    三国志 时间限制:3000 ms  |  内存限制:65535 KB 难度:5 描述 <三国志>是一款很经典的经营策略类游戏.我们的小白同学是这款游戏的忠实玩家.现在他把游戏简化一下,地图 ...

  5. linux ps 命令查看进程状态

    显示其他用户启动的进程(a) 查看系统中属于自己的进程(x) 启动这个进程的用户和它启动的时间(u) 使用“date -s”命令来修改系统时间 比如将系统时间设定成1996年6月10日的命令如下. # ...

  6. hiho 1572 - set.upper_bound,排序树

    链接 小Hi家的阳台上摆着一排N个空花盆,编号1~N.从第一天开始,小Hi每天会选择其中一个还空着花盆,栽种一株月季花,直到N个花盆都栽种满月季. 我们知道小Hi每天选择的花盆的编号依次是A1, A2 ...

  7. Python的那些坑--------括号篇

    在Python中遇见了带不带括号的问题,我目前的是这三种,有问题请指出.如果有其他的,我后续会更新 一  函数带不带括号: def a(x): return x print(a) #不带括号调用的结果 ...

  8. js Date() 时间函数处理 关于 toLocaleDateString()

    toLocaleDateString()方法的真正含义为「根据本地时间把Date对象的日期部分转换为字符串」,这意味着:在不同的浏览器或者服务器中,我们可能得到不同的字符串. 例如,将 Chrome ...

  9. java 截取点后面的字符串

    int index = path.lastIndexOf("."); char[] ch = path.toCharArray(); //根据 copyValueOf(char[] ...

  10. FarPoint自动换行

    单元格自动换行 FarPoint.Win.Spread.CellType.TextCellType mType = new FarPoint.Win.Spread.CellType.TextCellT ...