Vue で SuperMap を使用する練習

序文

なんというか、ぼんやりしながら電話に出て、ぼんやりしながら臨時の仕事を受けて、ぼんやりしながら出張に行って、数日間ぼんやりしながらSuperMapを操作しました。SuperMapは本当に強力ですが、機能が比較的強力で、機能ポイントが多すぎて、短期間で開発を開始できないため、習得するにはある程度の時間がかかります。さあ！私も初心者ですが、長い間取り組んできた結果、ハイパーグラフを Vue プロジェクトに導入する方法と手順をここで整理し、ハイパーグラフを使用する必要があるものの、将来の方向性が定まっていない初心者の同僚の役に立ちたいと思っています。参考用であり、信頼できません。

Vue プロジェクトが 2 次元ハイパーグラフを導入

次のステップは、2 次元ハイパーグラフを Vue プロジェクトに導入することです。

OpenLayers のドキュメントを例に挙げてみましょう。

このドキュメントでは、さまざまなインポート方法を紹介しています。Vue プロジェクトの場合は、npm インポートメソッドを使用してください。

npm をインストール @supermap/iclient-ol

インストールが完了すると、node_modules フォルダーに supermap フォルダーが作成されます。おめでとうございます。インストールは成功しました。

ここに画像の説明を挿入

インストールが完了したら、index.html ファイルに CSS ファイルを導入します。

<link href='https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css' rel='スタイルシート' />

<link href='https://iclient.supermap.io/dist/ol/iclient-ol.min.css' rel='スタイルシート' />

これで、SuperMap がプロジェクトに正常に追加されました。

しかし、プロジェクトの ES6 構文を ES5 に変換できるかどうかという問題があります。これには設定が必要になる可能性があり、そうしないと、後のプロジェクトで Hypergraph を使用してデータをロードするときにエラーが報告されます。

webpack.base.conf.js ファイルにスーパーマップ変換を追加します。

{
   テスト: /\.js$/,
   ローダー: 'babel-loader',
   インクルード: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'), resolve('node_modules/@supermap')]
},

これは問題ないでしょう。2次元は比較的簡単です。簡単な例を見てみましょう。

ハイパーグラフ 2D ケース

引用

まず、ハイパーグラフを使用する必要があるページでいくつかのライブラリを紹介します。

  'ol/Map' から Map をインポートします。
  'ol/View' から View をインポートします。
  'ol/layer/Tile' から TileLayer をインポートします。
  'ol/control' からコントロールとして * をインポートします。
  '@supermap/iclient-ol' から Logo、TileSuperMapRest をインポートします。

これらのライブラリは、公式 Web サイトのドキュメント、つまり OpenLayers API ドキュメントに従って紹介されています。

具体的にどのようなライブラリを導入するかについては、必要に応じて公式 Web サイトからいくつかの例をコピーし、OpenLayers API ドキュメントの例で使用されている対応するライブラリを確認できます。

例えば公式サイトの場合、 var layer = new ol.layer.Tileに変換するときにどのライブラリを導入すればいいかわからないときは、opealayers を見て確認することができます。

ここに画像の説明を挿入

このチェックに似ています。

html

次に、マップを表示するための HTML を記述します。

<div id="マップ"></div>

次に ts コードが来ます。

        var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
        this.map = 新しいマップ({
          ターゲット: 'マップ',
          コントロール: control.defaults({ attributionOptions: { collapsed: false } }).extend([new Logo()]),
          ビュー: 新しいビュー({
            中央: [106.86, 39.71],
            // 最大ズーム: 18,
            // 最小ズーム: 2,
            ズーム: 5,
            投影: 'EPSG:4326',
          })
        });
        var レイヤー = 新しい TileLayer({
          ソース: 新しい TileSuperMapRest({
            URL: URL、
            ラップX: 真
          }）、
          投影法: 'EPSG:4326'
        });
        レイヤーを追加します。

すると、2次元画像が正常に表示されます。

ここに画像の説明を挿入

他の機能が必要な場合は、公式 Web サイトにアクセスしてケースを確認し、直接使用できますが、js コードを vue 構文に変換する必要があります。

Vue が 3D スーパーグラフを導入

3D は少し難しいので、SuperMap 3D ドキュメントを参照してください。公式サイトでは js を使用しています。vue をインストールするには、時間内にダウンロードできるパッケージが必要です。

パッケージのダウンロード場所

ここに画像の説明を挿入

ダウンロードしたらstaticフォルダに入れます。

ここに画像の説明を挿入

次に、widgets.css、Cesium.js、zlib.min.js ファイルを index.html にインポートします。

<link rel="スタイルシート" href="./static/Cesium/Widgets/widgets.css" rel="外部nofollow" >
<script type="text/javascript" src="./static/Cesium/Cesium.js"></script>
<script type="text/javascript" src="./static/Cesium/Workers/zlib.min.js"></script>

ここに画像の説明を挿入

その後は、何もする必要はありません。SuperMap 3D が必要なインターフェイスに直接書き込むことができます。同様に、テスト用に SuperMap 3D の公式 Web サイトで提供されている 3D ケースを参照することもできます。js コードを vue コードに変換する必要があります。

ここでは、レイヤーを導入するデモをいくつか簡単に紹介します。マップを表示するには、div が必要です。この div の幅と高さを設定することを忘れないでください。そうしないと、表示されない場合があります。覚えておいてください。

<div id="map" style="幅: 100%;高さ: 95%"></div>

次に ts コードです。2 次元のライブラリのようにさまざまなライブラリを導入する必要はなく、直接コードを記述するだけです。

3次元の地球儀を簡単に作成

var ビューア = 新しい Cesium.Viewer('map')

このコード行で3次元の地球儀を表示できれば導入は成功しており問題はないということなので、このまま開発を進めていけます。

ここに画像の説明を挿入

その後、詳細なコードは共有しません。必要な場合は、ケースから変換を見つけてください。

いくつかの一般的なレイヤーを導入する方法を皆さんと共有したいと思います。実際、公式 Web サイトでもそれについて説明しています。私はそれらすべてをテストしたので、直接お見せします。

最初の方法は地形図と画像をインポートすることです

例えば、北京のある場所のGIS情報をインポートしたい場合、Baiduでは平面地図しか見えません。平面地図は2次元なので高さは見えません。しかし、HyperMapが地形図を導入すると、高さなどの地形情報を見ることができます。このとき、あるエリアの地形へのリンクと、このエリアの画像へのリンクが必要です。すると、地形は下にあり、高さがあり、その上に画像地図が敷かれています。これで理解できたと思いますか？コードは次のとおりです。

地形図を追加

var ビューア = 新しい Cesium.Viewer('map', {
    //地形サービスプロバイダーのインスタンスを作成します。URL は SuperMap iServer によって公開された TIN 地形サービスです。terrainProvider: new Cesium.CesiumTerrainProvider({
    url: 'http://localhost:8090/iserver/services/3D-DiXing/rest/realspace/datas/面积_Terrain', // データの下のリンクである地形マップをロードします isSct: true, // 地形サービスは SuperMap iServer から提供されるため、公開時に isSct を true に設定する必要があります
    不可視性: 真
  }）、
});

画像を追加する

// 基になる画像を追加 var layer = new Cesium.SuperMapImageryProvider({
    url: 'http://localhost:8090/iserver/services/YingXiang/rest/maps/Image base map' //REST 形式のイメージ サービス アドレス});
var imgLayer = this.viewer.imageryLayers.addImageryProvider(レイヤー)

このようにして、地形と画像が読み込まれます。

次に、カメラの位置、つまり、ロード時に表示される部分を特定できます。そうでない場合は、地球儀が表示され、ズームインして自分で見つける必要があります。

//カメラの視野角を定義するだけです this.scene.camera.setView({
  宛先: Cesium.Cartesian3.fromDegrees(108.19, 40.39, 1000000)
});

次に最初のマップをロードします。

S3Mレイヤーの読み込み

ここでは、このファイルディレクトリ内のすべての S3M レイヤーがロードされます。必要に応じて、一部のみをロードすることもできます。公式ドキュメントを参照してください。

// 川の S3M レイヤーを追加します。Open は、ファイル パスの下にあるすべてのレイヤー情報をマップにインポートします。var promise = this.scene.open("http://localhost:8090/iserver/services/CJ/rest/CJ");
Cesium.when.all([promise], 関数(レイヤー) {
  let layer = that.scene.layers.find('Yangtze River') // 名前でレイヤーをクエリします。この名前はレイヤー接続に対応する名前であり、自分で付けた名前ではありません。layer.style3D.bottomAltitude = 1150 // マップ上のレイヤーの高さを設定します。必要に応じて設定します。this.viewer.zoomTo(layer); // レイヤーはモデルの位置に配置されます })

公式説明:

ここに画像の説明を挿入

MVT レイヤーの追加

// 草MVTレイヤーを追加 this.mc = {
  url: 'http://localhost:8090/iserver/services/CAODI/rest/maps/CD', //MVT サービス アドレス canvasWidth: 512,
  name: 'Grassland', // レイヤーの名前は、自分の名前ではなく、この接続ビューアに対応するレイヤーの名前です: that.viewer
}
this.McMvtMap = this.scene.addVectorTilesMap(this.mc);

上記のコードにより、MVT レイヤーの追加が完了します。

そして削除がある

this.scene.removeVectorTilesMap(McMvtMap.name);

以上です。あと 1 行コードがあるので、追加した方が良いでしょう。

this.scene.globe.depthTestAgainstTerrain = false;

これで、Vue での SuperMap の使用実践に関するこの記事は終了です。Vue での SuperMap の使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: