角度に属しガイド（）調理deck.gl

deck.gl地理データは、WebGL技術の上に構築された生産の可視化フレームワークユーバーの先端、です。ビューの公式サイトからのデモは、それがスムーズに、レンダリング、スタイルが豊富で、かつ3次元可視化のためのサポートは、（すべての後に、WebGLのよくある）、より多くの私の手のプロジェクトよりも持つプロechartsインチしかし、本質的にTSとJSの角に、必ずしも適切なの公式ウェブサイトに基づいている例が達成反応します。そして、この可視化フレームワークのための中国国内のチュートリアルではあまりないです。技術的なプロジェクト計画の更新を利用して、この時間は、だから、さあピットを書き留めて学習経験の公式文書を避けるために、自分の手に従ってください。私はまた、新しいフロントエンド孟、ですので、このガイドが書かれているので、（5と6の試験は480をされていない）どこレヴェル〜

角度8.1ライティング（バージョン番号をペイントしていない犬）に基づいて、

Mapboxアカウントに適用されます

地理的なマップの可視化におけるキー嘘。echarts公式BaiduのBaiduのマップを提供し、ユーザーは、マップソース高地ドイツ語を使用した世界地図など、または単に独自のカスタムJSONファイルを読み込むことができます。そしてdeck.glこのライブラリ、公式のラインは、それがいかなるマップコンポーネントの作業に依存していないですが（間違った紙の地図のプロジェクトを設定している場合あります確かにそうである、そこには地図データがロードされていないが、それはまだ影響を受けないが、適切にロードすることができます）が、それはmapbox-GLこのマップコンポーネントライブラリと組み合わせて使用することをお勧めします。無料からmapbox-GLと私たちの最初のステップは、サイトMapboxに新しいアカウントを登録することですので、カスタムは、サイトMapboxをマップ作成

アカウント登録インタフェースは、1ページのみ、少数のデータボックス非常に簡単です、あなたも確認メールは必要ありません。だから、ここでは省略話すことはありません。アカウント登録ページを入力した後、まだアクセストークンインタフェースを参照してください？、「トークンの作成」をクリックして[名前記入し、他のキープデフォルト、あなたはトークンに属するマップを作成することができます。

新しいプロジェクトを作成します。アンギュラ

次に、新しい角度プロジェクトを作成します。NPMで、プロジェクトフォルダに、スイッチを作成することはdeck.gl 2つのライブラリをインストール@ deck.gl /コアおよび@ deck.gl /レイヤーを

NPMインストール@ deck.gl /コア@ deck.gl /レイヤーを

これは公式のチュートリアルで推奨される方法です。NPMエラーをインストールするときしかし、私は遭遇した：「使用、式中の変数を参照するには、引数としてコマンド」@deck「のみすることができ、」$デッキ「」、新バージョンにアップデートした後、NPMはまだこのコマンドをサポートしていません。。私は手動でプロジェクトファイルpackage.jsonに依存関係手動その後、NPMをインストールし、これら2つのライブラリーを追加

    "@ deck.gl /コア"： "〜7.2.3" 、
     "@ deck.gl /レイヤー"： "〜7.2.3"、

NPMインストール

TSファイルとテンプレートファイルを変更します。

インストール後、我々は最初のインデックスファイルにスタイルを使用mapbox追加します

< リンクのhref = 'HTTPS：//api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' のrel = 'スタイルシート' />

次に、テンプレートファイルapp.component.htmlを見つける新しいプロジェクトが作成されたときに自動的に生成醜い置き換えて、その中に以下をコピー（次のバージョンは、この生成されたテンプレート、新しいテンプレートの多くを置き換えることを聞いた角度格好良いです）

< DIV ID = "コンテナ" > 
  < DIV ID = "マップ" > </ DIV > 
  < キャンバスID = "デッキキャンバス" > </ キャンバス> 
</ DIV >

そして、TSファイルを見つけ、または空の、その中に以下のコードをコピー

「@角度/コア」からインポート{コンポーネント、のOnInit} 。
インポート{デッキ}「@ deck.gl /コア」。
インポート{GeoJsonLayer、ArcLayer} '@ deck.gl /層' 。
以下からの輸入mapboxgl 'mapboxgl' ;

@成分（{
  セレクター：「アプリルート」、
  templateUrl： './app.component.html' 、
  styleUrls：[」./app.component.css' ]
}）
エクスポートクラスAppComponent実装のOnInit {
  タイトル = 'ngDeckGL' ;
  ngOnInit（）：ボイド{
     // データソースのセット
    constのAIR_PORTS =
      'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson' ;

    CONST INITIAL_VIEW_STATE = {
      緯度： 51.47 、
      経度： 0.45 、
      ズーム： 4 、
      ベアリング： 0 、
      ピッチ： 30
    }。

    // アプリケーションMapBoxにおける接辞自分のアカウント 
    mapboxgl.accessToken =「MapBoxで自分のアカウントを固定するためのアプリケーション」; // eslintディセーブルライン

    // マップのスタイル設定 
    地図= constの新しい新mapboxgl.Map（{
      コンテナ：「マップ」、
      スタイル：「mapbox：//スタイル/ mapbox /光-V9」、
       // 注：deck.glが相互作用し、イベント処理を担当する 
      インタラクティブ：偽、
      センター：[INITIAL_VIEW_STATE.longitude、INITIAL_VIEW_STATE.latitude]、
      ズーム：INITIAL_VIEW_STATE.zoom、
      ベアリング：INITIAL_VIEW_STATE.bearing、
      ピッチ：INITIAL_VIEW_STATE.pitch
    }）;

    // ビジュアルデータ投影 
    のconst =デッキ新新デッキ（{
      キャンバス：「デッキキャンバス」、
      幅： '100％' 、
      高さ： '100％' 、
      initialViewState：INITIAL_VIEW_STATE、
      コントローラ：真、
      onViewStateChange：（{ビューステート}） => {
        map.jumpTo（{
          センター：[viewState.longitude、viewState.latitude]、
          ズーム：viewState.zoom、
          ベアリング：viewState.bearing、
          ピッチ：viewState.pitch
        }）;
      }、
      レイヤー：[
        新しいGeoJsonLayer（{
          ID： '空港' 、
          データ：AIR_PORTS、
          // スタイルが 
          いっぱい：真、
          pointRadiusMinPixels： 2 、
          不透明度： 1 、
          pointRadiusScale： 2000 、
          getRadius：F => 11 - f.properties.scalerank、
          getFillColor：[ 200、0、80、180 ]、
           // インタラクティブ小道具 
          pickable：真、
          自動ハイライト：真、
          onClick：情報 =>
             // eslintディセーブル-次の行 
            info.object && 警告（ `$ {info.object.properties.name}（$ {info.object.properties.abbrev}）`）
        }）、
        新しいArcLayer（{
          ID： '弧' 、
          データ：AIR_PORTS、
          するDataTransform：D => d.features.filter（F => f.properties.scalerank <4 ）、
           // スタイル 
          getSourcePosition：F => [-0.4531566、51.4709959] // ロンドン 
          getTargetPosition：F => f.geometry。座標、
          getSourceColor：[ 0、128、200 ]、
          getTargetColor：[ 200、0、80 ]、
          getWidth： 1
        }）
      ]
    }）;
  }
}

上記のコメントは、特定の友人に基づいて、基本的に重要なパラメータであることは、私は一つ一つを紹介しませんので、コードは、それが何を意味するのか理解することができ、基本的です。記事では、自然を説明したように、我々は、各行の意味場所について心配する必要はありません。行うには唯一のものは、ちょうど彼らのトークンを登録mapboxにトークンを交換することです。後でその保存完了、あなたは少しプロジェクトを開始することができます

修正cssファイル

この時点で、私の友人は、データプロジェクタを見ることができるはずですが、地面には、マップがない、広大です。これはなぜでしょうか？我々は良いスタイルのCSSテンプレートファイルを設定していないので。このビューには、ゴーン搾り地理的なビューに配置する必要があります。私たちは、CSSのテンプレートファイルには、幅と高さの両方が、我々はわずか最終結果を見ることができ、100％表示されている設定なので、以下の変更されました

#container { 
  位置：固定されました。
  トップ：0 ; 
  左：0 ; 
  右：0 ; 
  下：0 ;
} 
#container> * { 
  位置：絶対。
  トップ：0 ; 
  左：0 ; 
  幅：100％ ; 
  高さ：100％ ;
}