高徳地図初使用手記

前言
本文は筆者が初めて地図類の需要開発の小記として,深く検討していないが,いくつかの初級APIで使用された記録といくつかの萌新踏坑の総括しか含まれていない.
需要の概要
製品は1つの需要を提供して、高徳の地図のコンポーネントを使って1組あるいは多組の経緯度の座標を地図の中で描く必要があって、同時に一連のインタラクティブな設計があって、機能は全体的に実は多くありません--1つの地図に1つのリストを加えて、地図の上で複数の多角形を描く必要があって、リストの中のすべての記録は1つの描写点に対応します.マウスが記録を上書きすると、描画点がハイライトされ、逆も同様です.
前期準備
ページ全体を2つの部分に分けます:1、地図2、リスト:絶対的な位置決めでページにレイアウトし、リストの位置を確定します.
地図処理:必要に応じて、地図上の処理は実際には多角形、描点、情報フォームを増やすだけで、インタラクティブにAPIを大量に呼び出し、リスニングイベントを使用することができます.
資料:高徳地図:WebAPIの概要 高徳地図：カバー 高徳地図:情報フォーム
コンポーネントの導入
プロジェクトには似たような例があるため,プラグイン導入における投入作業量はほぼゼロであり,直接「開発に着手する」.npm実装またはJS導入プロジェクトにより,高徳地図プラグインを導入する.
地図をロード
準備中の計画により、ページに指定されたIDのコンテナをロードマップとして配置し、スタイルによってコンテナの幅を制御し、地図をインスタンス化する際に、このIDを入力し、同時に地図の中心点を設定し、レベルzoomなどの属性をスケールします.

var map = new AMap.Map('ID', { 
    //       ，（         ）
    center:[117.000923,36.675807], 
    //     ，     ，2.0        2-20
    zoom:11,
    // ...
});
 
 //              this.map = XXX;

多角形をロード
高徳が提供したAPIを呼び出し、バックエンドの同級生が提供した経緯を地図に直接描画する.

let polygon = new AMap.Polygon({
    //          ;
    path: [[lng, lat], ...],
    //        ;
    ...
    //       ：  false，Boolean  ;
    bubble: false,
    //     ：         ，this.map;
    map: this.map,
    //        ，Any;
    extData: {
        //             ...
    },
});

描点Marker&情報フォームinfoWindow
似たようなメモを書くのが少なすぎて、公式サイトを運ぶような感じがします.インスタンス化の過程は記載しないでみましょう.公式サイトのカバー類のドキュメントを掛けてみましょう.高徳地図:上書きクラス
開発プロセスのメモ
どのように需要が多くないことを見て、2つの機能点のようですが、実現するには確かに多くの頭を使って、回り道があって、ドキュメントが全面的で、辛抱強く見て、ある属性は難しい問題を解決することができます.
カスタム属性extData
地図上のカバーは本当に多すぎて、1つの多角形N個の描画点、1つの描画点1個の情報フォーム、便利で迅速に対応するデータを取得したいので、カバーオブジェクトをインスタンス化する時、対応するカスタム情報を縛って、カバーを見つけて欲しい情報を手に入れることができて、更に方法を考えてアクセスする必要はありません.

//        
map.getExtData();

//        
map.setExtData()

もちろんこれは主に参照時に操作され、インスタンス化時にextData属性の下に掛けることができ、多角形、描点にこの属性があり、あるいはカバーにはこの属性があります.

let polygon = new AMap.Polygon({
    ...
    extData: {
         // Any  
    },
    ...
});

あるカバーを取る
現在考えられている方法は、ある種類のカバーを取り、カスタム属性から検索することです.これは、必要に応じて多角形に一意のIDがあり、描画点にも独立した一意のIDがあり、同じ情報フォームでもあるからです.また、そうでない場合は何とかしましょう…カバーの例には独自のIDが入っていますので、このIDで調べてみるのも良い方法でしょう.

/* 
*         ，         ，        
*         ，    、   
*/
this.map.getAllOverLays();

/**
*          ，   for    
*                   
*/
this.map.getAllOverLays().forEach( map => {
    if (map.getExtData().extData === "") {
        // do ...
    }
});

/**
*          ，      ，        
*/

オーバーライドの除去(Remove Overrides)
mapを通ることができます.remove法では、1つ以上のカバーを除去します.入力パラメータはカバーインスタンスであり、複数のカバーを一度に除去する必要がある場合は、配列の形で入力する必要があります.

//       marker
map.remove(marker);

//        marker      polygon
map.remove([marker, polygon]);

カバー範囲の取得

//       ，      
polygon.getBounds();

/**
*         ，               
*/

現在のポリゴン内に点があるかどうかを判断

//                 
polygon.contains(point: LngLat);

/**
*       Boolean，         ，                 ，        LngLat
*
*             
*/

LngLatクラス
緯度座標は、地図上の点を決定します.(公式ドキュメント)緯度座標オブジェクトを構築するために使用することができ、地図上で座標を決定するのに便利である.座標を入力する必要がある場合は、LngLatインスタンスを構築することが望ましい.

const lngLat = new AMap.LngLat(lng:Number,lat:Number,noAutofix:bool);

/**
* Lng:：  
*
* Lat：  
*
* noAutofix：           [-180,180]    ，    false，
*/

SetFitViewの使用
指定した地図インスタンスまたはカバーを視野の中央に表示すると、適切なzoomと中心点が自動的に調整されます.

map.setFitView()

//                     
//       ，       
//       ，      

ピットレコード
イベントリスニングのバインドと削除
イベントのリスニングと削除宣言は完全に一致する必要があります.そうしないと、イベントのリスニングは削除できません.コンテキストオブジェクトをバインドするには、3番目のパラメータを使用します.2番目のパラメータでbindなどの方法でバインドする必要はありません.

map.on('type', method, context);

カスタムデータの更新
プロジェクトでは、大量のカスタムデータが使用されているため、最初はタイムリーに更新されず、データ処理時に変更されていない場合があります.特に、カスタムデータは常に変化する配列に由来します.

//   

//             
userList: [ ... ];

//          
const poylgon = new AMap.Polygon({
    ...
    extData: {
      userList,
    },
    ...
});

//                      ，       
polygon.setExtData({
  userList: updatedUserList,
});

情報フォームのスタイル名
実はHTML文字列で、classを使わなければならないので、混同しないでください.reactを例にとると、classNameを習慣的に使わないでください.
SccGitHub: ヤング