GeoJSON データソースを更新します

生成されたコードには、 GeoJsonDataSource アップロードされたファイルのデータを視覚化するのインスタンスがあります。 カスタム GeoJSON オブジェクトを表示するように変更してみましょう。 これを行うに index.ts は、以下の説明に従ってファイルを開き、変更します。

まず、ファイルのインポートセクションに、FeatureCollectionおよびMapViewEventNamesのこのインポートを追加します。

import { FeatureCollection } from "@here/olp-geojson-datasource";
import { MapViewEventNames } from "@here/harp-mapview";

次に、次のコードを index.ts ファイルのcreateGeoJsonDataSource関数の末尾、return geoJsonDataSource;の行の直前に追加し ます。

const geoJsonData: FeatureCollection = {
    "type": "FeatureCollection",
    "features":
        [{
            "type": "Feature",
            "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]
                        ]
                    ]
                },
            "properties": {},
        }]
};

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

ページを更新すると、ベルリンの中央エリアをカバーするペンタゴンの図形がマップに描画されます。