高德地圖+canvas畫圖結(jié)合實(shí)現(xiàn)的案例

發(fā)布時(shí)間：2020-10-24 17:13:47 來源：億速云閱讀：374 作者：小新欄目：web開發(fā)

高德地圖+canvas畫圖結(jié)合實(shí)現(xiàn)的案例？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

之前朋友委托有個(gè)創(chuàng)業(yè)項(xiàng)目，想讓我?guī)兔?，正好那段時(shí)間有點(diǎn)閑，半推半就中就答應(yīng)下來了。

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

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

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

 1 //開始綁定 2                 for (var m = 0; m < deviceList.length; m++) { 3                     var device = deviceList[m]; 4                     var point = new AMap.LngLat(device.longitude, device.latitude);// 圓心位置; 5  6                     var circle = new AMap.Circle({ 7                         center: point,// 圓心位置 8                         radius: device.radius, //半徑 9                         strokeColor: "white", //線顏色10                         strokeOpacity: 1, //線透明度11                         strokeWeight: 1, //線粗細(xì)度12                         fillColor: "#6e97ce", //填充顏色13                         fillOpacity: 0.9//填充透明度14                     });15 16 17                     circle.setMap(map);18 19                     var marker = new AMap.Marker({20                         map: map,21                         position: [device.longitude, device.latitude],22                     });23 24                     //注冊(cè)點(diǎn)擊事件25                     addClickHandler(circle, device);26 27                 }

View Code

　　實(shí)現(xiàn)了如下的圖形。但是我發(fā)現(xiàn)畫折線和扇形，地圖上的api沒辦法很完美的實(shí)現(xiàn)，出來的扇形總是有點(diǎn)變形。跟我想要的效果還是有點(diǎn)距離的。

高德地圖+canvas畫圖結(jié)合實(shí)現(xiàn)的案例

　　沒辦法，繼續(xù)啃高德的api...

　　在圖層里面看到了圖片圖層，貌似可以實(shí)現(xiàn)我的需求，但是我是純js啊，想要?jiǎng)討B(tài)生成一個(gè)圖片再綁定到地圖，貌似有點(diǎn)太復(fù)雜了。。。也有可能我前端太菜了。

　　好吧，放棄，繼續(xù)研究ing...

　　發(fā)現(xiàn)自定義圖層里面使用canvas做的（），眼前一亮，那我可以用canvas畫好圖再貼到地圖上嘛，有點(diǎn)小激動(dòng)。。。

　　可轉(zhuǎn)念一想，canvas我沒有用過啊，沒辦法，繼續(xù)啃吧...

　　找了好多學(xué)習(xí)資料，發(fā)現(xiàn)有個(gè)圖跟我有點(diǎn)像啊，就是大神們用canvas畫的時(shí)鐘，居然還能動(dòng)，感覺被打開了一扇新大門。。。

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

　　不廢話，先上代碼：

  1  <div>  2         <canvas id="pie" width="300px" height="300px"></canvas>  3     </div>  4     <script>  5         var dom = document.getElementById("pie");  6         var ctx = dom.getContext("2d");  7         var width = ctx.canvas.width;  8         var height = ctx.canvas.height;  9         var r = width / 2; 10         var rem = width / 200; 11  12  13         function drawBackground() { 14             ctx.save(); 15             ctx.translate(r, r);//重新定義圓點(diǎn)到中心 16             ctx.beginPath(); 17             ctx.lineWidth = rem; 18             ctx.fillStyle = "#00AEE8"; 19             ctx.strokeStyle = "#fff"; 20             ctx.arc(0, 0, r, 0, Math.PI * 2, false);//圓點(diǎn)坐標(biāo)，起始角0，結(jié)束角2π，順時(shí)針 21             ctx.stroke(); 22             ctx.fill(); 23         } 24  25         function drawsector(sDeg,eDeg) { 26             //畫扇形 27             ctx.beginPath(); 28             //定義起點(diǎn) 29             ctx.moveTo(0, 0); 30             ctx.fillStyle = "#0A73B1"; 31             //以起點(diǎn)為圓心，畫一個(gè)半徑為100的圓弧 32             ctx.arc(0, 0, r, sDeg * Math.PI / 180, eDeg * Math.PI / 180); 33             ctx.closePath(); 34             //ctx.stroke(); 35             ctx.fill(); 36  37         } 38  39         function drawtext(PDeg) { 40             //寫文字 41             ctx.font = "18px Arial"; 42             ctx.textAlign = "center"; 43             ctx.textBaseline = "middle"; 44             ctx.strokeStyle = "black"; 45             ctx.fillStyle = "black"; 46             var rad = 90 * Math.PI / 180;//弧度 47             var x = (r - 30 * rem) * Math.cos(rad); 48             var y = (r - 30 * rem) * Math.sin(rad); 49             ctx.rotate((PDeg-90) * Math.PI / 180); 50             ctx.strokeText("<", x, y); 51             ctx.fillText("<", x, y); 52  53         } 54  55         function drawStart(rDeg) {//起始位置 56             ctx.save(); 57             ctx.beginPath(); 58             var rad = rDeg * Math.PI / 180;//弧度 59             var x = (r) * Math.cos(rad); 60             var y = (r) * Math.sin(rad); 61  62             ctx.strokeStyle = "black"; 63             ctx.lineWidth = 2*rem; 64             ctx.moveTo(0, 0); 65             ctx.lineTo(x, y); 66             ctx.lineCap = "round"; 67             ctx.stroke(); 68             ctx.restore(); 69         } 70         function drawPosition(PDeg) {//實(shí)時(shí)位置 71             ctx.save(); 72             ctx.beginPath(); 73             var rad = PDeg * Math.PI / 180 ; 74             //ctx.rotate(rad); 75             var x = (r) * Math.cos(rad); 76             var y = (r) * Math.sin(rad); 77  78             ctx.strokeStyle = "#fff"; 79  80             ctx.lineWidth = 3 * rem; 81             ctx.moveTo(0, 0); 82             ctx.lineTo(x, y); 83             ctx.lineCap = "round"; 84             ctx.stroke(); 85  86             ctx.restore(); 87         } 88  89         function drawPause() {//暫停 90             ctx.save(); 91             ctx.beginPath(); 92             var rad = 120 * Math.PI / 180; 93             //ctx.rotate(rad); 94             var x = (r) * Math.cos(rad); 95             var y = (r) * Math.sin(rad); 96  97             ctx.strokeStyle = "#fff"; 98  99             ctx.lineWidth = 10 * rem;100             ctx.moveTo(x+30, -y+80);101             ctx.lineTo(x+30, y-80);102             ctx.lineCap = "round";103             ctx.stroke();104 105             ctx.restore();106             107             108             ctx.save();109             ctx.beginPath();110             var rad = 60 * Math.PI / 180;111            112             var x2 = (r) * Math.cos(rad);113             var y2 = (r) * Math.sin(rad);114 115             ctx.strokeStyle = "#fff";116 117             ctx.lineWidth = 10 * rem;118             ctx.moveTo(x2-30, -y2+80);119             ctx.lineTo(x2-30, y2-80);120             ctx.lineCap = "round";121             ctx.stroke();122 123             ctx.restore();124         }125         function draw() {126             ctx.clearRect(0, 0, width, height);127             drawBackground();//背景128             drawsector(50, 180);129             130             //drawPause();131             132             drawStart(50);133             drawPosition(100);134             drawtext(110);135             ctx.restore();136         }137        138 139         draw();140     </script>

View Code

　　圖形如下：

高德地圖+canvas畫圖結(jié)合實(shí)現(xiàn)的案例

　　值得注意的是，這個(gè)圖里面我覺得比較費(fèi)事的是這個(gè)帶方向的黑色小箭頭，用到了rotate，經(jīng)過反復(fù)測(cè)試，我發(fā)現(xiàn)從0-360度，他都會(huì)沿著圓心去旋轉(zhuǎn)，下圖黑色箭頭80°方向旋轉(zhuǎn)了，那其實(shí)這個(gè)位置和+90°后我要的放心是一致的（即紅色箭頭），抓住這個(gè)特性我即完成了箭頭沿著圓的方向旋轉(zhuǎn)這個(gè)問題。

高德地圖+canvas畫圖結(jié)合實(shí)現(xiàn)的案例

　　整個(gè)圖完成后，我感覺幾何圖形又復(fù)習(xí)了一邊...果然學(xué)好數(shù)理化，走遍天下都不怕，哈哈。

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

　　　　　　　　　　　　　　　　　　華麗的分割線

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)高德地圖+canvas畫圖結(jié)合實(shí)現(xiàn)的案例大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

高德地圖+canvas畫圖結(jié)合實(shí)現(xiàn)的案例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽