どのようにvueの中でBaiduの地図を使ってカスタムカバーを追加しますか？

概要
これまでと同じように、プロジェクトで出会った面白いニーズを共有し、それに応じた実現過程を紹介します。
多くの話をしないで、直接上の絵を描きます。

具体的な応用シーンは簡単に言えば、地図に図のようなカスタムカバーを追加する必要があります。実現する過程は次の2点に分けて紹介します。

水波yの実現

カスタムカバーの実現

水波の実現
この需要の実現は私達自身がカスタマイズしたカバーを書くことから切り離せません。まず、水の波紋アニメーションの実現について議論します。
まず図中の覆いはハートと水波yで構成されており、ハートは固定されていないので、直接にこう書くことができます。

 <div class="radar"></div>

 .radar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: red;
 }

このように、まずハート部分のデザインを実現しました。水波yはどうやって実現されますか？
図から見ることができます。全部で三つの水波yが中から外へ徐々に広がっています。水波yを単独で見てみると、水波yの幅がアニメで少しずつ高くなっていくのが原理です。具体的にどれぐらい広がっていますか？読者は自分の需要に応じて水波yの最後の幅の高さを設定できます。
水波yの基本構造と様式は以下の通り実現される。

 <div class="radar">
 <div class="ripple"></div>
 <div class="ripple"></div>
 <div class="ripple"></div>
 </div>

 .radar {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background-color: red;
 position: relative;
 .ripple {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border: 1px solid red;
  animation: ripple 2s linear infinite;
 }
 }

水波yのdomノードをラダノードの中に嵌め込んだ理由は、主に「子絶父相」という位置付けをして水波yの中央揃えの効果を達成するためであり、これは容易に理解できるはずである。水波yの初期幅が高いということは、アニメの遅延時間の計算を容易にするために、ハートの幅と同じ高さに設定すればいいです。読者が興味があれば、幅高を0～40 pxの任意の値に設定してみてもいいです。
アニメーションの実現については、これは簡単です。私たちは同時に水波yの幅を大きくしていけばいいですが、水波yは最後に消えます。ここではopacity:0を使ってアニメと協力して消えていく効果があります。

 @keyframes ripple {
 to {
  width: 150px;
  height: 150px;
  opacity: 0;
 }
 }

コードはここに来ました。私たちはもう実現しましたが、何か足りないですか？約束の三つの水波は？
この問題もよく解決しました。私たちは給水波yの設定に対応する動画の遅延だけでいいです。

 .radar :nth-child(1) {
 animation-delay: 0.666s;
 }
 .radar :nth-child(2) {
 animation-delay: 1.322s;
 }

このようにして私達は水波を実現しました。

カスタムカバーの実装
今回の作者は百度の地図の実現の需要を採用しましたが、どうやって百度の地図を通じてカスタマイズのカバーを実現しますか？
実は、Baiduの地図開発ドキュメントの中でも、直接的にユーザー定義のカバーの開梱方法を示しています。ここで著者はS 6のクラスで書き方を少し書き直しました。道理は同じです。政府の判例はBaiduの地図を参照してください。です。
カスタムカバーの実装は以下の3段階に分けられます。

は、構造関数を定義し、Overlay

を継承する。

カスタムカバーを初期化する

カバーを描画する

コンストラクタを定義し、Overlayを継承します。
公式サイトの説明によると、「まず、カスタマイズしたカバーの構造関数を定義する必要があります。カスタマイズされたカバーオブジェクトのprototype属性は、Overlayの例であり、カバーベースクラスを継承するために設定されます」。
エス6クラスを使って、私達はすぐに実現できます。
ここでポイントが伝達されるのは座標位置であり、カバーの地図上の位置を後で計算するためである。

class RadarOverlay extends BMap.Overlay	{
 constructor(point) {
  super();
  this.point = point;
 }
}

カスタムカバーを初期化
公式の見解は、「initialize方法を実現し、map.addOverlay方法を呼び出すと、APIがこの方法を呼び出す。map.addOverlay方法を呼び出して、カスタマイズされたカバーを追加すると、APIは、オブジェクトのinitialize方法を呼び出して、カバーを初期化するために使用し、初期化の過程でカバーを作成するために必要なDOM要素を作成し、地図に対応するコンテナに追加する。ここでは容器マーカーPaneに追加します。」
Baiduの地図はoverlayを追加する時にカスタムカバーの構造関数のinitialize方法を呼び出すので、このinitialize方法はカバーを初期化するために使われています。彼は初期化の過程で必要なDOMを作成します。だから私達は自分の構造関数（ここではクラスです。）の中でinitializeを実現します。
Baiduの地図の公式サイトの方法：

では、私たちは公式サイトの要求に従って、クラスの中でinitializeの方法を定義します。ここではtemplateは初期化に必要なDOM要素であり、ここでのdomノードは上記のように水の波紋を実現する環節よりも多くなります。classNameはrader-boxの親ノードです。公式インスタンスはDOM要素を作成する時にDOMノードにposition:absouteの様式を追加することができます。しかし、私達のradarノードのpositionはrelativeです。したがって、一番外側の層に地図に対して全体のdomの位置を確保するために、階層domノードを多く入れ込む必要がある。もちろんです。この親ノードのpositionも絶対位置です。

 initialize(map) {
  this._map = map;
  const template = `<div class="radar-box">
   <div class="radar">
    <div class="ripple"></div>
    <div class="ripple"></div>
    <div class="ripple"></div>
   </div>
  </div>`;
  //       
  const divFragment = document.createRange().createContextualFragment(template);
  const div = divFragment.querySelectorAll('.radar-box')[0];
  //  div         
  map.getPanes().markerPane.appendChild(div);
  this._div = div;
  return div;
 }

このように成功したのはクラスの中で一つのinitialize方法を定義しました。なぜdivをカバー容器に追加するのかについての公式サイトの説明もあります。
Baiduの地図では、いくつかのカバーの展示方法が提供されています。私たちがカスタマイズしたカバーは実は私たちが選んだカバーの容器の下に保存されています。興味のある仲間は各種のカバーの容器を知ることができます。
上書きを描く
ここで著者はれんがを投げ続けて玉を引くという話です。これまではカバーを地図に加えただけですが、正確な位置に置いていませんでした。あなたはdrawメソッドにカバレッジの位置を設定する必要があります。地図の状態が変化するたびに、APIはカバレッジのdraw方法を呼び出して、カバレッジの位置を再計算します。地理座標は、map.point ToOverlayPixel法によりカバーに必要な画素座標に変換することができる。
簡単に言うと、例えば地図の拡大率の後、覆いの中のドラフト方法を呼び出して、ニワトリを新たに覆いの位置を計算します。
では、問題が来ました。ドラフトの方法はどこから来ましたか？
したがって、公式の意味は、私たちがカスタマイズしたカバーの中の構造関数によって、DRaw方法を定義します。方法は、Baiduの地図のmap.point ToOverlayPixel方法を利用して、地理座標をカバー体の必要なピクセル座標に変換できます。
私たちはクラスの中にdraw方法を入れるだけでいいです。
この中のthis.pointは私達のコンストラクションの中のポイントです。40は水の波紋全体の初期幅の高さを表しています。読者は40をサース.sizeのような形に変えてもいいです。これは後続コードの維持に便利です。ここでは直感的に読者に理解させるためにはあまり複雑ではないです。

 draw() {
  //              ，      
  const position = this._map.pointToOverlayPixel(this.point);
  this._div.style.left = `${position.x - 40 / 2}px`;
  this._div.style.top = `${position.y - 40 / 2}px`;
 }

これで、私達は全体のカスタムカバーの種類が実現されました。全体コード図の下で（ここで40をthis.sizeコードに変更してメンテナンスします。ちょっと便利です。）：

class RadarOverlay extends BMap.Overlay {
 constructor(point, size) {
  super();
  this.point = point;
  this.size = size;
 }

 initialize(map) {
  this._map = map;
  const template = `<div class="radar-box">
    <div class="radar">
     <div class="ripple"></div>
     <div class="ripple"></div>
     <div class="ripple"></div>
    </div>
   </div>`;
  const divFragment = document.createRange().createContextualFragment(template);
  const div = divFragment.querySelectorAll('.radar-box')[0];
  map.getPanes().markerPane.appendChild(div);
  this._div = div;
  return div;
 }

 draw() {
  //              ，      
  const position = this._map.pointToOverlayPixel(this.point);
  this._div.style.left = `${position.x - this.size / 2}px`;
  this._div.style.top = `${position.y - this.size / 2}px`;
 }
}

カスタムカバーの使用
私達はすでにカスタムカバーを実現しましたので、最初のことはもちろんそれを使っています。具体的には以下の通りです。

  initMap() {
   const map = new BMap.Map(this.$refs.map);
   map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
   //                   
   const point = new BMap.Point(116.404, 39.915);   
	//          ,                  
   const radar = new RadarOverlay(point, 40);  
   //         
   map.addOverlay(radar);
  }

効果は図の通りです

おわりに
カスタムカバーの構造については、他の内容については、チャンプの場合は、Baiduの地図のドキュメントを参照してください。文章の内容に問題があれば、歓迎のメッセージを出してください。いろいろな人と交流したいです。作者の文章が好きなら、ほめてくれることも忘れないでください。これは私にとって重要です。
ソースアドレス：https://gitee.com/zhao_jiaao/baidu-map-custom-cover
ここでは、Baiduの地図を使用して、Baiduの地図をカスタマイズしたカバー（水波紋）を追加する方法についての記事を紹介します。Baiduの地図を使って、より多くの関連記事を追加します。以前の記事を検索したり、下記の関連記事を見たりしてください。