Combining Gaode map + canvas drawing to realize a small project

A friend of mine commissioned a startup project before and wanted me to help. I happened to have some free time at that time, so I agreed half-heartedly.

After joining the team, I discovered that the front-end and back-end of the project were separated. The back-end engineer was already in place to mainly implement the interface, and the IOS-side engineer was also in place. There was still a web front-end engineer missing. A chill ran down my spine. Although I had written some js and css before, although I had some skills, I was still far from being a front-end engineer. After explaining the situation to my friend, my friend was bold and asked me to give it a try. The main reason was that he couldn't find anyone (it's also possible that the current quotes for front-end engineers are too expensive. When starting a business, you can save as much as you can. I understand... ), there is no other way, just take it one step at a time.

Other management pages are fine. The main Dashboard needs to draw the real-time position of the sprinkler machine and the fan-shaped area of ​​the sprinkler sprinkler on the map based on longitude, latitude, radius, angle, etc.

Since I have never used Amap before, and I have never drawn pictures, when I first got this project, I was really confused. I had no choice but to immerse myself in studying the API of Amap. I found that there are some APIs for drawing circles, polylines, polygons, etc. Soon, based on the official demo provided by Amap, I quickly wrote the following code:

##

 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, //线粗细度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                     //注册点击事件25                     addClickHandler(circle, device);26 27                 }

View Code

The following graphics are implemented. However, I found that when drawing polylines and sectors, the API on the map cannot be perfectly implemented, and the resulting sectors are always a little deformed. It's still a little far from the effect I want.

I have no choice but to continue to use Amap’s API...

I saw the image layer in the layers, which seems to be able to meet my needs. But I am using pure JS. It seems a bit too complicated to dynamically generate an image and then bind it to the map. . . It's also possible that I'm too good at the front end.

Okay, give up and continue researching...

I found that the custom layer is made of canvas (), and my eyes lit up. Then I can use canvas to draw the picture and then paste it. It's a little exciting to be on the map. . .

But then I thought about it, I have never used canvas before, so I have no choice, just keep reading...

After looking for a lot of learning materials, I found a picture that looks a bit like me. The clock drawn by the masters using canvas can actually move. It feels like a new door has been opened. . .

I referred to a bunch of codes from great masters (I originally wanted to post all the links one by one, but I forgot to save them, so I can’t find the links now). In the process of constant exploration (in just a few days) I chewed on this word for several nights) and finally drew the graphics. . .

No nonsense, let’s start with the code:

  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);//重新定义圆点到中心 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);//圆点坐标，起始角0，结束角2π，顺时针 21             ctx.stroke(); 22             ctx.fill(); 23         } 24  25         function drawsector(sDeg,eDeg) { 26             //画扇形 27             ctx.beginPath(); 28             //定义起点 29             ctx.moveTo(0, 0); 30             ctx.fillStyle = "#0A73B1"; 31             //以起点为圆心，画一个半径为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) {//实时位置 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

The graph is as follows:

It is worth noting that what I find more troublesome in this picture is the small black arrow with direction. Rotate is used. After repeated testing, I found that from 0 to 360 degrees, it will rotate along the center of the circle. The black arrow in the picture below rotates in the direction of 80°. In fact, this position is consistent with what I want after +90° (that is, the red arrow). Grab With this feature, I completed the problem of rotating the arrow in the direction of the circle.

After the whole picture was completed, I felt that I had reviewed the geometric figures again... I really learned mathematics, physics and chemistry well, and I am not afraid of traveling all over the world, haha.

Now that the canvas map has been basically completed, how to integrate it into the Gaode map and scale it according to the proportion of the map has become my next problem to overcome...

　　　　　　　Magnificent The dividing line

Okay, this is my first time writing a blog. It’s a bit like a running account, (-__-)b. It’s just to record some of my thoughts and difficulties I encountered. I hope it can be helpful to others in the future. help.

In the next article, I will focus on how to integrate it into the Gaode map, as well as some common points encountered.

The above is the detailed content of Combining Gaode map + canvas drawing to realize a small project. For more information, please follow other related articles on the PHP Chinese website!