Gaode マップとキャンバス描画を組み合わせて小規模プロジェクトを実現-H5 チュートリアル-php.cn

Gaode マップとキャンバス描画を組み合わせて小規模プロジェクトを実現

巴扎黑

リリース： 2017-06-23 11:12:09

オリジナル

4578 人が閲覧しました

以前、友人からスタートアップのプロジェクトを依頼されて、たまたま時間があったので協力してほしいとのことで、半ば快諾しました。

チームに参加してみると、プロジェクトのフロントエンドとバックエンドが分かれていて、主にインターフェースを実装するバックエンドエンジニアが配置されており、IOS側のエンジニアも配置されていました。 . Webフロントエンドエンジニアがまだ不足していました。以前に js や css を書いたことはありましたが、ある程度のスキルはありましたが、フロントエンドエンジニアには程遠い状態でした。友人に状況を説明したところ、友人は大胆にも私に「試してみないか」と誘ってくれました。主な理由は、誰も見つからなかったことです (現在のフロントエンドエンジニアの見積もりが高すぎるという可能性もあります。)起業するなら、いくらでも節約できるのはわかります...）、他に方法はありません、一度に一歩ずつ進めるだけです。

他の管理ページは問題ありません。メインのダッシュボードは、経度、緯度、半径、角度などに基づいて、スプリンクラー機械のリアルタイムの位置とスプリンクラーの扇形の領域を地図上に描画する必要があります。

これまでAmapを使ったことも絵を描いたこともなかったので、最初にこのプロジェクトを受け取ったとき、私はAmapのAPIを勉強するしかなく、その中にCirclesが含まれていることを知り、本当に混乱しました。ポリライン描画、ポリゴン、およびその他の API をすぐに、Amap が提供する公式デモに基づいて、次のコードをすぐに書きました:

 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

次のグラフィックが実装されました。ただし、ポリラインやセクターを描画する場合、マップ上の API を完全に実装することはできず、結果として得られるセクターは常に少し変形していることがわかりました。私が望む効果にはまだ少し遠いです。

このままAmapのAPIを使い続けるしかありません…

レイヤーに画像レイヤーがあり、ニーズを満たせそうなのですが、純粋なJSなので動的に生成したい画像へのバインドは少し複雑すぎるようです。。。私のフロントエンドスキルが良すぎる可能性もあります。

よし、諦めて調べ続けよう…

カスタムレイヤーがcanvas()を使って作られていることが分かり、目が輝きました。そうすれば、canvasを使って絵を描いて地図に貼り付けることができます。ちょっと興奮しました。。。

でも、よく考えたら、キャンバスを使ったことがないので、仕方ない、読み続けるしかない…

たくさんの教材を探したところ、私に少し似ている絵を見つけました。巨匠がキャンバスを使って描いた時計ですが、まだまだ動ける、新しい扉が開いたような気がします。。。

偉大なマスターからの大量のコードを参照しました (最初はすべてのリンクを 1 つずつ投稿したかったのですが、ブックマークするのを忘れたので、現在リンクを見つけることができません)。ほんの少しの言葉で、私はそれを数晩噛んだ後、最終的にグラフィックを描きました。。。

ナンセンスではありません。コードから始めましょう:

  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>

ログイン後にコピー

コードを表示

図は次のとおりです:

この図で私がより厄介だと思うのは、注目に値します。小さな黒い矢印は回転を使用します。テストを繰り返した結果、下の図の黒い矢印は 0 ～ 360 度の方向に回転することがわかりました。実は、この位置は+90°と同じです。一致しているのでご安心ください（つまり、赤い矢印）。この特徴を理解することで、円の方向に矢印を回転する問題は完了しました。。