GeoJSON データ
GeoJsonDataSource
GeoJSON 形式で提供されているジオメトリオブジェクトをレンダリングできます。 RFC7946 GeoJSON 仕様に対応 し、次のジオメトリタイプをサポートしています。
Point
LineString
Polygon
MultiPoint
MultiLineString
MultiPolygon
追加のプロパティを持つサポートされているジオメトリオブジェクトは Feature
オブジェクトです。 Feature
オブジェクトのセットが FeatureCollection
オブジェクトに含まれています。
このデータソースでは Feature
、オブジェクトの次のカスタムスタイルプロパティがサポートされています。
tooltip
style.color
style.fill
-
radius
その他
注 : プロパティの継承
MultiPoint
、 MultiLineString
、、または MultiPolygon
( 各ポイント ) のプロパティを定義する場合は、 LineString 、 またはポリゴンは、そのコンテナフィーチャーのプロパティを継承します。 たとえば、カスタム SVG アイコンを MultiPoint
ジオメトリに添付するとします。 その結果、この配列のすべての点について同じアイコンが表示されます。 さらに、これらの点のいずれかを選択すると、この MultiPoint
形状で定義されているすべての点も選択されます。
特定の点を高輝度表示するか、または個別に選択する場合は、コンテナMultiPoint
を独立したPoints
(または小さいセットMultiPoint
のみ)に分割し、それらPoint
のそれぞれに個々の属性を割り当てます。 同様のことが、 LineStrings とポリゴンにも当てはまります。
サポートされているカスタムスタイルのプロパティの詳細については、「スタイル GeoJSON の表示」を参照してください。
サポートされているデータプロバイダ
GeoJSON データソースは、次のデータプロバイダをサポートしています。
- 直接の GeoJSON オブジェクト。ファイルをアップロードすることで提供できます。
Content-Type
が application/geo+json
または application/vnd.geo+json
であり、データが GeoJSON 形式のデータサービスのカタログレイヤー。 - 任意のデータを GeoJSON 形式にデコードできるレンダリングプラグインを含むデータサービスのカタログレイヤー。
- レンダリング プラグインで表示できる経度値および緯度値の代わりに、道路セグメントおよびそのオフセットを参照する場所のカタログレイヤー。
Data API を使用する場合、カタログレイヤーのタイプは versioned
または volatile
で、 HERE Tile Partitioning スキームを使用する必要があります。 パーティション分割の詳細については、 Data ユーザー ガイドの「パーティション」の章を参照してください。
データサービスに接続します
GeoJSON データソースは Content-Type
application/geo+json
application/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);
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"
});
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);
}
});
}
オプションのパラメータ
-
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 データを表示するには、次の手順を実行します。
-
Web アプリジェネレータをインストール し、プロンプトが表示されたらアプリケーション名を入力します。
-
プロンプトが表示されたら What kind of data will you visualize on top of the Base map?
、オプションを選択 GeoJSON from a data layer
します。
-
プロンプトが表示 HRN of the Catalog you want to visualize?
されたら、 GeoJSON データが含まれているカタログの HERE リソースネーム を入力します。
-
メッセージName of the layer you want to visualize?
が表示されたら、GeoJSON レンダリングを含むレイヤーの名前、またはContent-Type
application/geo+json
またはapplication/vnd.geo+json
であるレイヤーの HERE リソースネーム を入力します。
-
プロンプトが表示 On which level the data is stored?
されたら、データのレンダリングに必要な最小ズーム レベルを入力します。
-
コードが生成されたら、次のコマンドを実行して Web アプリを構築し、サービスを提供できます。
npm run start
-
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 データを表示するには、次の手順を実行します。
- Web アプリジェネレータをインストール し、プロンプトが表示されたらアプリケーション名を入力します。
-
GeoJSON from a file
プロンプトが表示されたら、オプションを選択 What kind of data will you visualize on top of the Base map?
します。
-
コードが生成されたら、次のコマンドを実行して Web アプリを構築し、サービスを提供できます。
npm run start
-
http://localhost:8080
お気に入りの Web ブラウザでを開き、生成されたアプリを確認します。
ベース マップを表示するには、プラットフォームポータルから取得した資格情報で認証フォームを更新します。