高德地圖和canvas畫圖結合應用(一)

時間 2019-12-02

標籤地圖 canvas 畫圖結合應用简体版

原文原文鏈接

如今重構web項目的時候發現，之前項目中是高德畫基站的扇區的時候，經過計算點來畫多邊形，在站點的數量比較多的時候，會增長請求，同時計算扇區的時候有大量的計算，這樣會極度浪費服務器的性能，因此對這塊進行了改良，直接使用的高德地圖的canvas層在畫基站，效果以下圖所示：css

其代碼爲：html

<!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>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。