[評価]を使用して@ ArcGISの評価のArcGIS JS APIの開発のための/ CLIの足場とESRI-ローダモード

アウトライン

私はArcGISのJS APIの開発品に@のArcGIS / CLI足場の方法を書いて、ArcGISのJS API開発品へのESRI-ローダーの唯一の方法を書いたときその後、私は「選択もつれを見た後、多くの小さなパートナーが持っていると信じています疾患」、最後に私がどのようArcGISのJSのAPIそれを開発するには？私はあなたの選択、シンプルで実用的なのための参照を与えるだろう、心配しないでください。

プロジェクトが実施中すでにある場合は、真ん中のは、ArcGIS JSのAPI関連の機能モジュールを使用する必要があり、その後、ESRI-ローダモードを選択します。
プロジェクトが開始されていないが、後でJS APIでのArcGIS関連機能に対する需要があるだろう@のArcGIS / CLI足場をお勧めします場合は、もちろん、あなたもESRIローダモードを使用することができます。

選択する方法は2つありますので、我々は、単にこれらの2つの方法の長所と短所を見てください。

アセスメント関連コンテンツ

1、実際のプロジェクトの実施

プロジェクトが実施されている場合はJSのAPIのみがプロジェクトの後半に導入されているため、我々は、JS API ESRI-ローダー方式によってのみを開発することができ、冒頭で述べた記事によると、私たちのプロジェクトは、全体ではないかもしれませんGISプロジェクト、GIS関連の機能モジュールは、我々は、@のArcGIS / CLI足場とプロジェクトの完全な型WebGISベースのフレームワークを構築する必要がないので、それはシステム堅牢なアーキテクチャを作る必要があり、システムのアーキテクチャに影響を与える、システムのほんの一部であります大幅に削減。

プロジェクトが実施を開始した、と明らかにこのシステムが機能後半JSのAPIに関連する要件、および機能モジュールより大きな割合に関連する本プロジェクトのGISシステムになります知っていない場合は、使用することをお勧めします@のArcGIS / CLI足場プロジェクトシステムを構築しますフレームワークは、私たちはプロジェクトのアプリケーション・コードの組織によって構築された足場を見ることができるので非常に良好である、とのWebPACKに基づいたツールとコードチェックツールを構築し、完全な主流のシステムを装備します。

2、主流の技術

JS APIはESRI-ローダモードによって開発された場合には、実際には、多くの場合、我々はまだシステム開発のES6さえES5をコード使用しているすべての主要なプラグインプロジェクトシステムは他に、私たちの取り組みへの割り当てを増やすために使用されますあなたが主流の技術が何であるかを知らない場合言葉は、あなたが食べるか、技術削減されている、システム開発技術の主流に突出していません。

@のArcGIS / CLIと同じ方法ではない足場、それはあなたのプロジェクトコード設定さEslint、バベルと他の主流のプラグインではデフォルトであり、最も重要なのは、そのプロジェクトのコードは、書き込みに活字体で、これらの観点ので、使用される技術を開発する過程でJSのAPIを開発する方法を足場は比較的近い主流の技術の発達の段階にあります。

図3に示すように、符号化

前述したように、ESRI-ローダーエンコーディングは、あなたがして、我々はAMDに基づいて各種機能モジュールにおけるAPIはJS、システム開発時にES6またはES5を使用するか、負荷に道場の方法を使用し、ロードされたコードのグローバルな導入を実現することは困難であること次のように：

		// 创建二维地图
        _createMapView: function() {
            const _self = this;
            const option = {
                url: gConfig.arcgis_jsapi_hosturl + 'init.js',
                css: gConfig.arcgis_jsapi_hosturl + 'esri/themes/light/main.css',
            };
            loadModules(['esri/WebMap',
                'esri/views/MapView',
            ], option)
                .then(([WebMap, MapView]) => {
                    
                    // 实例化地图
                    const webmap = new WebMap({
                        portalItem: {
                            // autocasts as new PortalItem()
                            id: gConfig.largeScreenWebMapID,
                        },
                    });

                    const view = new MapView({
                        container: 'mapViewContent',
                        map: webmap,
                        zoom: _self.mapviewLevel,
                        center: [102.714408, 25.043706],
                    });

                }).catch((err) => {
                    _self.$message('底图创建失败，' + err);
                });
        },

        // 创建三维地图
        _createSceneView: function() {
            const _self = this;
            const option = {
                url: gConfig.arcgis_jsapi_hosturl + 'init.js',
                css: gConfig.arcgis_jsapi_hosturl + 'esri/themes/dark/main.css',
            };
            loadModules(['esri/Map',
                'esri/views/SceneView',
            ], option)
                .then(([Map, SceneView]) => {

                    const map = new Map({
                        basemap: {
                            baseLayers: [tiledLayer],
                        },
                    });

                    const view = new SceneView({
                        container: 'mapViewContent',
                        map: map,
                        camera: {
                            position: [102.492874, 25.236805, 500000], 
                            heading: 0,
                        },
                        zoom: 7,
                    });

                }).catch((err) => {
                    _self.$message('底图创建失败，' + err);
                });
        },

あなたが見ることができる上記のコードでは、我々はJS APIのLoadModuleで必要とされる機能モジュールを導入する必要があり、上記のコードは、一つの構成要素である、あなたは二次元マップを作成するために、第1の方法を見ることができる、我々はのLoadModuleを導入します関連する機能モジュール、三次元シーンを作成するための第二の方法は、我々はそれが符号化に煩雑であるのでのLoadModuleは、必要なモジュールを再導入使用します。我々はJSを使用するためのAPIモジュールのどこかにある場合、言い換えれば、我々は適切な場所でのLoadModuleによって導入され、必要なモジュールを持っています。

@のArcGIS / CLIこの問題を解決するためイライラコーディング、私たちは、それぞれのモジュールのアセンブリコードの上に直接導入し、次のサンプルコードは、以下のコードのどこにでもそれらを使用することができます。

import ArcGISMap from 'esri/Map';
import MapView from 'esri/views/MapView';

export default {
    name: 'web-map',
    mounted() {
      const map = new ArcGISMap({
        basemap: 'topo-vector'
      });
      this.view = new MapView({
        container: this.$el,
        map: map,
        center: [-118, 34],
        zoom: 8
      });
    },
    beforeDestroy() {
      // destroy the map view
      if (this.view) {
        this.view.container = null;
      }
    }
};

このコードは、私たちは頂部に導入このメンバーJSのAPIコンポーネントのコードに必要な適切なモジュールを設定する必要があり、その後、このモジュールは以下のコードでどこでも使用することができ、見ることができ、それがすべてのモジュラー道場では必要ありませんアップロードするためのローディング機構。

4、プロジェクトの稼働とパッケージの展開

我々は適切な設定を投影していない場合は、プロジェクトベースに基づいてコマンドを起動するにはVueのフレームワークを反応させ、プロジェクトの枠組みが異なるJS APIプロジェクトシステムを開発するESRI-ローダ道の後、そのパッケージは同じコマンドです。

プロジェクトのアプリケーション@のArcGIS / CLIの足場を作成、またはそれがVueのに基づいているかどうかは、コマンドは同じなので、より親しみやすいパッケージング、同じstartコマンドを反応します。

プロジェクトは、パッケージの展開プロセスと整合二つの方法で作成し、該当の違いはありません。

更新された後のフォローアップの出会いの5、他の側面......

概要

ビューの現在の4点のシンプルな評価、プロジェクトが実装されていない、としたGIS関連の機能モジュールの割合が大きい場合、プロジェクトの足場の枠組みを構築するために、@のArcGIS / cliの方法を使用することが推奨され、特定のコーディングの経験、の一部を体験して自分自身だけ。著者は強く、@のArcGIS / CLI足場の方法をお勧めします。

X北辰北のブログの専門家

公開された138元の記事・ウォンの賞賛201 ・ビュー280 000 +

プライベートの手紙の懸念