GeoJSON データ

GeoJsonDataSource GeoJSON 形式で提供されているジオメトリオブジェクトをレンダリングできます。 RFC7946 GeoJSON 仕様に対応 し、次のジオメトリタイプをサポートしています。

  • Point
  • LineString
  • Polygon
  • MultiPoint
  • MultiLineString
  • MultiPolygon

追加のプロパティを持つサポートされているジオメトリオブジェクトは Feature オブジェクトです。 Feature オブジェクトのセットが FeatureCollection オブジェクトに含まれています。

このデータソースでは Feature 、オブジェクトの次のカスタムスタイルプロパティがサポートされています。

  • tooltip
  • style.color
  • style.fill
  • radius その他

注 : プロパティの継承

MultiPointMultiLineString、、または MultiPolygon( 各ポイント ) のプロパティを定義する場合は、 LineString 、 またはポリゴンは、そのコンテナフィーチャーのプロパティを継承します。 たとえば、カスタム SVG アイコンを MultiPoint ジオメトリに添付するとします。 その結果、この配列のすべての点について同じアイコンが表示されます。 さらに、これらの点のいずれかを選択すると、この MultiPoint 形状で定義されているすべての点も選択されます。

特定の点を高輝度表示するか、または個別に選択する場合は、コンテナMultiPointを独立したPoints(または小さいセットMultiPointのみ)に分割し、それらPointのそれぞれに個々の属性を割り当てます。 同様のことが、 LineStrings とポリゴンにも当てはまります。

サポートされているカスタムスタイルのプロパティの詳細については、「スタイル GeoJSON の表示」を参照してください。

サポートされているデータプロバイダ

GeoJSON データソースは、次のデータプロバイダをサポートしています。

  • 直接の GeoJSON オブジェクト。ファイルをアップロードすることで提供できます。
  • Content-Typeapplication/geo+json または application/vnd.geo+json であり、データが GeoJSON 形式のデータサービスのカタログレイヤー。
  • 任意のデータを GeoJSON 形式にデコードできるレンダリングプラグインを含むデータサービスのカタログレイヤー。
  • レンダリング プラグインで表示できる経度値および緯度値の代わりに、道路セグメントおよびそのオフセットを参照する場所のカタログレイヤー。

Data API を使用する場合、カタログレイヤーのタイプは versioned または volatile で、 HERE Tile Partitioning スキームを使用する必要があります。 パーティション分割の詳細については、 Data ユーザー ガイドの「パーティション」の章を参照してください。

データサービスに接続します

GeoJSON データソースは Content-Typeapplication/geo+jsonapplication/vnd.geo+json 、デコードされているかどうかにかかわらず、そのレイヤーに含まれているデータをレンダリングします。

そうでない場合 protobuf.js 、ライブラリを使用して、レイヤーから JSON オブジェクトに生データがデコードされます。 次に、 JSON オブジェクトは、関連するレンダラ プラグインを使用して GeoJSON オブジェクトにデコードされます。

const geoJsonDataSource = new GeoJsonDataSource({
    dataStore: {
        hrn: HRN.fromString("Your HRN string"),
        layer: "Layer name",
        getBearerToken: () => Promise.resolve("Your Token")
    }
});
mapView.addDataSource(geoJsonDataSource);

// Select tile when data source is ready
mapView.addEventListener(MapViewEventNames.DataSourceConnect, () => {
    geoJsonDataSource.selectTile(geoJsonDataTile);
});

レンダリングプラグインは、データサービスカタログに存在するか、またはローカルファイルから含まれています。 カタログにレンダラ プラグインがない場合は、独自の JavaScript JSON/GeoJSON 変換プログラムを作成し、 GeoJSON データソースでデータを視覚化できます。

独自のプラグインを使用するには externalRenderingPluginName 、次の例のように、プラグインの名前でパラメータを更新します。

const geoJsonDataSource = new GeoJsonDataSource({
    dataStore: {
        hrn: HRN.fromString("Your HRN string"),
        layer: "Layer name",
        getBearerToken: () => Promise.resolve("Your Token")
    },
    externalRenderingPluginName: "renderer.plugin.template" // `renderer.plugin.template.js` file must be placed into project root directory
});
mapView.addDataSource(geoJsonDataSource);
mapView.addEventListener(MapViewEventNames.DataSourceConnect, () => {
    geoJsonDataSource.selectTile(geoJsonDataTile);
});

GeoJSON オブジェクトを指定します

const geoJsonDataSource = new GeoJsonDataSource({});
mapView.addDataSource(geoJsonDataSource);

const geoJsonData: FeatureCollection = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {},
            "geometry": {
                "type": "Point",
                "coordinates": [
                    13.37885856628418,
                    52.516357970439735
                ]
            }
        }
    ]
};

if (dataInspector.mapView !== undefined) {
    dataInspector.mapView.addEventListener(MapViewEventNames.DataSourceConnect, event => {
        if (geoJsonDataSource !== undefined && event.dataSourceName === geoJsonDataSource.name) {
            geoJsonDataSource.renderGeoJson(geoJsonData); // visualize the GeoJSON object
        }
});

}

オプションのパラメータ

  • intersectionAgent { InteractiveIntersectionAgent }: InteractiveIntersectionAgent ジオメトリオブジェクトと対話したときにイベントを発行するのインスタンス。 マウスオーバーイベントのカスタムハンドラを設定したり、ジオメトリのツールチップを表示したりする場合に使用します。

  • dataStore { GeoJsonDataStoreParameters & DataStoreClientParameters }: データサービスからデータを提供するための接続パラメータ。 省略した場合 renderGeoJsonでも、データソースは渡された GeoJSON データを取得できます。

  • externalRenderingPluginName { string }: カスタムレンダラ プラグインの名前。 同じ名前またはプレフィックスの JavaScript ファイル rendering. がプロジェクトのルートディレクトリに存在している必要があります。 このレンダラ プラグインは、データサービスに付属の標準プラグインの代わりに使用されます。

カタログからの GeoJSON の例アプリ

カタログから GeoJSON データを表示する前に、次のいずれかを把握しておく必要があります。

  • Content-Type またはを持つレイヤーの HERE リソースネーム ( HERE リソースネーム ) application/geo+json application/vnd.geo+json
  • レンダラ プラグインが公開され 、カタログ設定で定義されているカタログの HERE リソースネーム 。Scheme.hrn

HERE Data SDK for Java & Scala で Maven の原型を使用して、独自のスキーマを作成および拡張できます。 詳細については、「 Archetypes 開発者ガイド」の「スキーマの作成と拡張」の章を参照してください。

一部のテストデータを最初に表示するには、次のパブリックサンプルカタログを使用します。

HRN: "hrn:here:data::olp-here:here-geojson-samples"
layer name: "berlin-districts"
level: "12"

カタログから GeoJSON データを表示するには、次の手順を実行します。

  1. Web アプリジェネレータをインストール し、プロンプトが表示されたらアプリケーション名を入力します。

  2. プロンプトが表示されたら What kind of data will you visualize on top of the Base map?、オプションを選択 GeoJSON from a data layerします。

  3. プロンプトが表示 HRN of the Catalog you want to visualize?されたら、 GeoJSON データが含まれているカタログの HERE リソースネーム を入力します。

  4. メッセージName of the layer you want to visualize?が表示されたら、GeoJSON レンダリングを含むレイヤーの名前、またはContent-Typeapplication/geo+jsonまたはapplication/vnd.geo+jsonであるレイヤーの HERE リソースネーム を入力します。

  5. プロンプトが表示 On which level the data is stored?されたら、データのレンダリングに必要な最小ズーム レベルを入力します。

  6. コードが生成されたら、次のコマンドを実行して Web アプリを構築し、サービスを提供できます。

    npm run start
    
  7. http://localhost:8080 お気に入りの Web ブラウザでを開き、生成されたアプリを確認します。

    ベース マップを表示するには、プラットフォームポータルから取得した資格情報で認証フォームを更新します。

ファイルからの GeoJSON データの例アプリ

Web アプリを生成した後 ( 上記の例を参照 ) 、 GeoJSON ファイルをアップロードする必要があります。 一部のテストデータを最初に表示する場合は、次の GeoJSON サンプルを使用できます。

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "tooltip": "You can have some tooltip for each Feature",
                "style": {
                    "fill": "blue"
                }
            },
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [13.304, 52.499],
                        [13.350, 52.458],
                        [13.430, 52.468],
                        [13.441, 52.521],
                        [13.371, 52.537],
                        [13.304, 52.499]
                    ]
                ]
            }
        }
    ]
}

ファイルから GeoJSON データを表示するには、次の手順を実行します。

  1. Web アプリジェネレータをインストール し、プロンプトが表示されたらアプリケーション名を入力します。
  2. GeoJSON from a file プロンプトが表示されたら、オプションを選択 What kind of data will you visualize on top of the Base map?します。

  3. コードが生成されたら、次のコマンドを実行して Web アプリを構築し、サービスを提供できます。

    npm run start
    
  4. http://localhost:8080 お気に入りの Web ブラウザでを開き、生成されたアプリを確認します。

    ベース マップを表示するには、プラットフォームポータルから取得した資格情報で認証フォームを更新します。

」に一致する結果は 件です

    」に一致する結果はありません