高德地图和canvas画图结合应用(一)

现在重构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画图结合应用(一)

最新文章

热门文章