Un petit projet est réalisé en combinant Amap + dessin sur toile

Un de mes amis m'a déjà commandé un projet d'entreprise et voulait que je l'aide. J'avais du temps libre à ce moment-là, alors j'ai accepté sans enthousiasme.

Après avoir rejoint l'équipe, j'ai découvert que le front-end et le back-end du projet étaient séparés. L'ingénieur back-end était déjà en place pour implémenter principalement l'interface, et l'ingénieur côté IOS l'était. également en place. Il manquait toujours un ingénieur web front-end. Un frisson m'a parcouru le dos. Même si j'avais déjà écrit du js et du css, même si j'avais certaines compétences, j'étais encore loin d'être un ingénieur front-end. Après avoir expliqué la situation à mon ami, mon ami a été audacieux et m'a demandé d'essayer. La raison principale était qu'il n'avait trouvé personne (il est également possible que les devis actuels pour les ingénieurs front-end soient trop chers). démarrer une entreprise, vous pouvez économiser autant que vous le pouvez. Je comprends... ), il n'y a pas d'autre moyen, il suffit de procéder étape par étape.

Les autres pages de gestion conviennent. Le tableau de bord principal doit dessiner la position en temps réel de la machine d'arrosage et la zone en forme d'éventail de l'arroseur sur la carte en fonction de la longitude, de la latitude, du rayon, angles, etc

Comme je n'avais jamais utilisé Amap auparavant et que je n'avais jamais dessiné d'images, lorsque j'ai eu ce projet pour la première fois, j'étais vraiment confus, je n'avais pas d'autre choix que de me plonger dans l'étude de l'API d'Amap. il existe quelques API pour dessiner des cercles, des polylignes, des polygones, etc. Bientôt, sur la base de la démo officielle fournie par Amap, j'ai rapidement écrit le code suivant :

 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                 }

Afficher le code

Les graphiques suivants sont implémentés. Cependant, j'ai constaté que lors du dessin de polylignes et de secteurs, l'API sur la carte ne peut pas être parfaitement implémentée et les secteurs résultants sont toujours un peu déformés. C'est encore un peu loin de l'effet que je souhaite.

Je n'ai pas d'autre choix que de continuer à lire l'API d'Amap...

J'ai vu le calque d'image dans le calque, qui semble pouvoir répondre mes besoins. Mais j'utilise du JS pur. Si je veux générer dynamiquement une image puis la lier à la carte, cela semble un peu trop compliqué. . . Il est également possible que je sois trop bon en début de course.

D'accord, abandonnez et continuez vos recherches...

J'ai découvert que le calque personnalisé est fait de toile (), et mes yeux se sont illuminés. Ensuite, je peux utiliser la toile pour dessiner l'image. puis collez-le. C'est un peu excitant d'être sur la carte. . .

Mais ensuite j'y ai réfléchi, je n'ai jamais utilisé de toile, donc je n'ai pas le choix, continue de lire...

J'ai cherché beaucoup de matériel d'apprentissage et j'ai trouvé une image qui C'est un peu comme moi. L'horloge dessinée par les maîtres à l'aide de toile peut réellement bouger. C'est comme si une nouvelle porte s'était ouverte. . .

J'ai fait référence à un tas de codes de grands maîtres (au départ je voulais poster tous les liens un par un, mais j'ai oublié de les mettre en favoris, donc je ne trouve plus les liens maintenant). processus d'exploration constante (en quelques jours seulement (j'ai mâché ce mot pendant plusieurs nuits) et j'ai finalement dessiné les graphiques. . .

Pas de bêtises, commençons par le 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>

Voir le code

Le graphique est le suivant :

Il est à noter que ce que je trouve le plus gênant sur cette image, c'est la petite flèche noire avec la direction. utilisé. Après avoir répété Après des tests, j'ai constaté que de 0 à 360 degrés, il tournerait le long du centre du cercle. La flèche noire dans l'image ci-dessous tourne dans la direction de 80°. En fait, cette position est cohérente avec quoi. Je veux après +90° (c'est à dire la flèche rouge). En saisissant cette fonctionnalité, j'ai résolu le problème de la rotation de la flèche dans le sens du cercle.

Une fois l'ensemble du tableau terminé, j'ai eu l'impression de réviser à nouveau des figures géométriques... Comme prévu, je peux bien apprendre les mathématiques, la physique et la chimie, et j'ai gagné Je n'ai pas peur de voyager partout dans le monde, haha.

Maintenant que la carte en toile est pratiquement terminée, comment l'intégrer dans la carte Gaode et la mettre à l'échelle en fonction de la proportion de la carte est devenue mon prochain problème à surmonter...

Magnifique La ligne de démarcation

D'accord, c'est la première fois que j'écris un blog, c'est un peu comme un compte courant, (-__-)b C'est juste pour enregistrer certaines de mes réflexions et difficultés que j'ai rencontrées. j'espère que cela pourra être utile à d'autres à l'avenir.

Dans le prochain article, je m'intéresserai à la manière de l'intégrer dans la carte Gaode, ainsi qu'à quelques points communs rencontrés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!