高德地圖和canvas畫圖結合應用的一些感想(一)

　　之前朋友委托有個創業項目，想讓我幫忙，正好那段時間有點閑，半推半就中就答應下來了。

　　入了團隊才發現，該項目前后端分離，后端工程師已就位主要實現接口，IOS端工程師也已就位，還差一個web前端工程師。背脊一涼，我之前雖然寫過一些js和css，雖有點功底但是離前端工程師還是有距離的啊。在和朋友說明情況后，朋友也是膽大，讓我試試，主要他實在找不到人了（也有可能目前前端工程師報價都太貴了，創業嘛，能節約就節約，能理解。。。），沒辦法，走一步算一步吧。

　　其他管理頁面都還好，主要Dashboard需要在地圖上根據經緯度，半徑，角度等畫出噴灌機的實時位置和噴灌機灑水的扇形區域。

　　由於之前沒有用過高德地圖，也沒畫過圖，剛拿到這個項目的時候，真的是一臉懵逼，沒辦法，只能埋頭研究高德地圖的api，發現里面有畫圓、畫折線、多邊形等等一些api，很快，根據高德地圖提供的官方demo，很快寫了如下代碼：

//開始綁定
                for (var m = 0; m < deviceList.length; m++) {
                    var device = deviceList[m];
                    var point = new AMap.LngLat(device.longitude, device.latitude);// 圓心位置;

                    var circle = new AMap.Circle({
                        center: point,// 圓心位置
                        radius: device.radius, //半徑
                        strokeColor: "white", //線顏色
                        strokeOpacity: 1, //線透明度
                        strokeWeight: 1, //線粗細度
                        fillColor: "#6e97ce", //填充顏色
                        fillOpacity: 0.9//填充透明度
                    });


                    circle.setMap(map);

                    var marker = new AMap.Marker({
                        map: map,
                        position: [device.longitude, device.latitude],
                    });

                    //注冊點擊事件
                    addClickHandler(circle, device);

                }

　　實現了如下的圖形。但是我發現畫折線和扇形，地圖上的api沒辦法很完美的實現，出來的扇形總是有點變形。跟我想要的效果還是有點距離的。

 　　沒辦法，繼續啃高德的api...

　　在圖層里面看到了圖片圖層，貌似可以實現我的需求，但是我是純js啊，想要動態生成一個圖片再綁定到地圖，貌似有點太復雜了。。。也有可能我前端太菜了。

　　好吧，放棄，繼續研究ing...

　　發現自定義圖層里面使用canvas做的（http://lbs.amap.com/api/javascript-api/example/layers/custom-layer），眼前一亮，那我可以用canvas畫好圖再貼到地圖上嘛，有點小激動。。。

　　可轉念一想，canvas我沒有用過啊，沒辦法，繼續啃吧...

　　找了好多學習資料，發現有個圖跟我有點像啊，就是大神們用canvas畫的時鍾，居然還能動，感覺被打開了一扇新大門。。。

　　參考了一堆大神的代碼（本來想把鏈接一一都放出來的，但是都忘了收藏，導致現在都找不到鏈接了），在不斷的摸索中（短短幾個字，我可是啃了好幾個晚上），終於算把圖形畫出來了。。。

　　不廢話，先上代碼：

 <div>
        <canvas id="pie" width="300px" height="300px"></canvas>
    </div>
    <script>
        var dom = document.getElementById("pie");
        var ctx = dom.getContext("2d");
        var width = ctx.canvas.width;
        var height = ctx.canvas.height;
        var r = width / 2;
        var rem = width / 200;


        function drawBackground() {
            ctx.save();
            ctx.translate(r, r);//重新定義圓點到中心
            ctx.beginPath();
            ctx.lineWidth = rem;
            ctx.fillStyle = "#00AEE8";
            ctx.strokeStyle = "#fff";
            ctx.arc(0, 0, r, 0, Math.PI * 2, false);//圓點坐標，起始角0，結束角2π，順時針
            ctx.stroke();
            ctx.fill();
        }

        function drawsector(sDeg,eDeg) {
            //畫扇形
            ctx.beginPath();
            //定義起點
            ctx.moveTo(0, 0);
            ctx.fillStyle = "#0A73B1";
            //以起點為圓心，畫一個半徑為100的圓弧
            ctx.arc(0, 0, r, sDeg * Math.PI / 180, eDeg * Math.PI / 180);
            ctx.closePath();
            //ctx.stroke();
            ctx.fill();

        }

        function drawtext(PDeg) {
            //寫文字
            ctx.font = "18px Arial";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.strokeStyle = "black";
            ctx.fillStyle = "black";
            var rad = 90 * Math.PI / 180;//弧度
            var x = (r - 30 * rem) * Math.cos(rad);
            var y = (r - 30 * rem) * Math.sin(rad);
            ctx.rotate((PDeg-90) * Math.PI / 180);
            ctx.strokeText("<", x, y);
            ctx.fillText("<", x, y);

        }

        function drawStart(rDeg) {//起始位置
            ctx.save();
            ctx.beginPath();
            var rad = rDeg * Math.PI / 180;//弧度
            var x = (r) * Math.cos(rad);
            var y = (r) * Math.sin(rad);

            ctx.strokeStyle = "black";
            ctx.lineWidth = 2*rem;
            ctx.moveTo(0, 0);
            ctx.lineTo(x, y);
            ctx.lineCap = "round";
            ctx.stroke();
            ctx.restore();
        }
        function drawPosition(PDeg) {//實時位置
            ctx.save();
            ctx.beginPath();
            var rad = PDeg * Math.PI / 180 ;
            //ctx.rotate(rad);
            var x = (r) * Math.cos(rad);
            var y = (r) * Math.sin(rad);

            ctx.strokeStyle = "#fff";

            ctx.lineWidth = 3 * rem;
            ctx.moveTo(0, 0);
            ctx.lineTo(x, y);
            ctx.lineCap = "round";
            ctx.stroke();

            ctx.restore();
        }

        function drawPause() {//暫停
            ctx.save();
            ctx.beginPath();
            var rad = 120 * Math.PI / 180;
            //ctx.rotate(rad);
            var x = (r) * Math.cos(rad);
            var y = (r) * Math.sin(rad);

            ctx.strokeStyle = "#fff";

            ctx.lineWidth = 10 * rem;
            ctx.moveTo(x+30, -y+80);
            ctx.lineTo(x+30, y-80);
            ctx.lineCap = "round";
            ctx.stroke();

            ctx.restore();
            
            
            ctx.save();
            ctx.beginPath();
            var rad = 60 * Math.PI / 180;
           
            var x2 = (r) * Math.cos(rad);
            var y2 = (r) * Math.sin(rad);

            ctx.strokeStyle = "#fff";

            ctx.lineWidth = 10 * rem;
            ctx.moveTo(x2-30, -y2+80);
            ctx.lineTo(x2-30, y2-80);
            ctx.lineCap = "round";
            ctx.stroke();

            ctx.restore();
        }
        function draw() {
            ctx.clearRect(0, 0, width, height);
            drawBackground();//背景
            drawsector(50, 180);
            
            //drawPause();
            
            drawStart(50);
            drawPosition(100);
            drawtext(110);
            ctx.restore();
        }
       

        draw();
    </script>

 

　　圖形如下：

　　值得注意的是，這個圖里面我覺得比較費事的是這個帶方向的黑色小箭頭，用到了rotate，經過反復測試，我發現從0-360度，他都會沿着圓心去旋轉，下圖黑色箭頭80°方向旋轉了，那其實這個位置和+90°后我要的放心是一致的（即紅色箭頭），抓住這個特性我即完成了箭頭沿着圓的方向旋轉這個問題。

 　　整個圖完成后，我感覺幾何圖形又復習了一邊...果然學好數理化，走遍天下都不怕，哈哈。

 　　既然canvas圖已經基本完成，那怎么集成到高德地圖上來，並根據地圖的等比縮放，就成了我下一個需要攻克的難題...

　　　　　　　　　　　　　　　　　　華麗的分割線

　　好了，第一次寫博客，有點像流水賬，(-__-)b，只為了記錄我的一些想法和遇到的難點，希望以后對別人也能有所幫助。

　　下一篇我會着重寫怎么集成到高德地圖上，以及遇到的一些通點。