Thoughts on the combination of AMAP and canvas (1): AMAP canvas

Thoughts on the combination of AMAP and canvas (1): AMAP canvas

My friend entrusted me with a startup project and wanted me to help. It was just a little idle during that time and I agreed to the project.

After entering the team, I found that the current backend separation, the backend engineer is in place to implement the interface, the IOS engineer is in place, and a web front-end engineer is missing. Even though I have written some js and css code before, I still have a distance from front-end engineers. After explaining the situation with my friends, my friend is also bold. Let me try it. He can't find anyone. (maybe the front-end engineer's quote is too expensive. Start a business, can Save, can understand ...), No way. Take one step.

Other management pages are fine. The main Dashboard needs to plot the real-time location of the sprinkler and the fan area of the sprinkler Based on the longitude and latitude, radius, and angle on the map.

Since we have never used or drawn a map of AMAP before, when we first got this project, we were so overwhelmed that we had to study AMAP APIs, I found some APIs such as circle, line drawing, and polygon. Soon, according to the official demo provided by AMAP, I quickly wrote the following code:

1 // start binding 2 for (var m = 0; m <deviceList. length; m ++) {3 var device = deviceList [m]; 4 var point = new AMap. lngLat (device. longpolling, device. latitude); // center position; 5 6 var circle = new AMap. circle ({7 center: point, // center position 8 radius: device. radius, // radius 9 strokeColor: "white", // line color 10 strokeOpacity: 1, // line transparency 11 strokeWeight: 1, // line coarse granularity 12 fillColor: "# 6e97ce", // fill color 13 fillOpacity: 0.9 // fill Transparency 14}); 15 16 17 circle. setMap (map); 18 19 var marker = new AMap. marker ({20 map: map, 21 position: [device. longpolling, device. latitude], 22}); 23 24 // register Click Event 25 addClickHandler (circle, device); 26 27}

View Code

The following figure is implemented. However, I found that the APIs on the map cannot be perfectly implemented by drawing line and slice, And the slice is always a little distorted. It is still a little different from what I want.

No way. Continue to chew on autonavi's api...

I saw an image layer in the layer, which seems to be able to meet my needs, but I am a pure js. It seems a little complicated to dynamically generate an image and then bind it to the map... Maybe I have too many dishes at the front end.

Okay, give up, continue studying ing...

I found that the use of canvas in the Custom layer (http://lbs.amap.com/api/javascript-api/example/layers/custom-layer), a bright eye, then I can use canvas to draw a picture and then paste it on the map, a little excited...

I can think about canvas, but I have never used canvas. No way. Continue...

After finding a lot of learning materials, I found that there was a picture a little like me, that is, the clock drawn by the great gods using canvas was still active, and I felt that a new door was opened...

I have referenced a bunch of great-God code (I wanted to put all links out one by one, but I forgot to add them to my favorites, so I can't find any links now ), in the constant exploration (just a few words, I spent several nights), I finally drew the figure...

No nonsense. Add the code first:

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); // redefine the dot to center 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); // dot coordinate, starting angle 0, ending angle 2 π, clockwise 21 ctx. stroke (); 22 ctx. fill (); 23} 24 25 function drawsector (sDeg, eDeg) {26 // draw sector 27 ctx. beginPath (); 28 // defines the start point 29 ctx. moveTo (0, 0); 30 ctx. fillStyle = "#0A73B1"; 31 // draws an arc 32 ctx with a radius of 100 from the center of the origin. 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 // write text 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; // radian 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) {// start position 56 ctx. save (); 57 ctx. beginPath (); 58 var rad = rDeg * Math. PI/180; // radian 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) {// real-time location 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 () {// pause 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. moeto (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 (); // background 128 drawsector (50,180); 129 130 131 // drawPause (); 132 drawStart (50 ); 133 drawPosition (100); 134 drawtext (110); 135 ctx. restore (); 136} 137 138 139 draw (); 140 </script>

View Code

 

The figure is as follows:

It is worth noting that in this figure, I think it is quite troublesome to use the black arrow with a direction. After repeated tests, I found that from 0 to degrees, he will rotate along the center of the circle, and the black arrow will rotate at 80 °. In fact, this position is the same as that after + 90 ° (that is, the Red Arrow ), by grasping this feature, I completed the problem of rotating arrows along the circle.

After the entire graph is completed, I feel that I have reviewed the geometric graph and learned the Mathematical Physics and Chemistry. I am not afraid to go all over the world. Haha.

Now that the canvas map has been basically completed, how to integrate it into AMAP and scale it according to the map's proportional ratio has become a challenge I need to overcome in the next step...

Gorgeous split line

Well, the first time I wrote a blog, it was a bit like a journal account, (-_-) B. I only wanted to record some of my ideas and difficulties and hope I could help others in the future.

In the next article, I will rewrite how to integrate it into AMAP and some common points.