コンテンツにスキップ

2D データセット

2D データセットは Mapray JS で使用できる 地理情報 (2D データ) を管理することができます。

2D データのアップロード

  1. 「Datasets」ページの、「2D」タブから、「New 2D Dataset」ボタンをクリックします。

    datasets-2d_01

  2. ダイアログが表示されたら、必要事項を入力します。
    入力が完了したら「OK」ボタンをクリックします。

    プロパティ 説明
    Name 任意の名前を指定します。1文字以上128文字以下で入力してください。
    Description 任意の説明を指定します。300文字以下で入力してください。
    Attribution Info 帰属情報を指定します。
    File Type アップロードするフォーマットを指定します。
    サポートするフォーマットはGeoJSON (.geojson/.json)、KML (.kml/.kmz)、GPX (.gpx)、シェープファイルです。
    Coordinate System 座標系を指定します。
    GPX 以外のとき設定できます。シェープファイルのとき prj file の座標系を使用することも可能です。
    SRID 指定した座標系に対応した空間参照系を識別する ID を指定します。
    Geoid ジオイドを指定します。
    Files File Type で指定したファイルを指定します。ドラッグ操作でディレクトリを指定するか、ドラッグ領域をクリックすることでシステムのファイル選択ダイアログから選択することができます。サポートファイル以外のファイルが含まれるとアップロードできませんので、チェックを外してください。

    datasets-2d_02

  3. アップロードに成功したら、下記のようにメッセージが表示され、リストに新しい項目が追加されます。
    この例では、アップロードしたデータセットの ID は 6297188275585024 で、後述する Mapray JS の Viewer で表示する際に指定する ID となります。

    datasets-2d_03

2D データセットの編集

「Name」、「Description」、「Attribution Info」が編集できます。
編集画面では、アップロードした 2D データ、Mapray JS で使用するコードスニペットが確認できます。

  1. 編集したい 2D データセットの編集アイコンをクリックします。
    編集はコンバートが成功したときに可能です。

    datasets-2d_04

  2. 編集したら「Update」ボタンをクリックします。

    datasets-2d_05

2D データセットの削除

  1. 削除したい 2D データセットの削除アイコンをクリックします。
    削除はコンバートが成功、またはエラーのときに可能です。

    datasets-2d_06

  2. 確認ダイアログが表示されたら「OK」ボタンをクリックします。

    datasets-2d_07

2D データの表示

Mapray JS を使用して Mapray Cloud に保存された GeoJSON データを読み込む例を示します。

  // let id = "<container id>";
  const stdViewer = new maprayui.StandardUIViewer(id, "<token>");
  const maprayApi = new mapray.cloud.CloudApiV2({
    tokenType: mapray.cloud.CloudApi.TokenType.API_KEY,
    token: "<token>",
  });
  const resource = maprayApi.getDatasetAsResource("<id>");
  const loader = new mapray.GeoJSONLoader(stdViewer.viewer.scene, resource, {
    onEntity: (loader, entity, prop) => {
      onLoad: (loader, isSuccess) => { console.log("success load geojson") },
      getLineColor: d => d.properties && d.properties.color ? d.properties.color : [0, 0, 255, 1.0],
      getLineWidth: d => d.properties && d.properties.width ? d.properties.width : 3,
      getAltitude: () => 100
    }
  });
  loader.load();

<token> については作成したトークンの値に変更してください。 また、 <id> については、データアップロード時に確認したデータセット ID に変更してください。

screenshot-viewer-2d