ツールチップとスタイルを追加します

GeoJSON オブジェクトは properties 、 GeoJSON 機能のメンバーに任意のカスタムデータを含めることができます。 これを使用して、オブジェクトの追加情報を表示したり、カスタムスタイルを適用したりできます。

ツールチップと情報パネルを追加します

GeoJSON 機能からのカスタム情報を表示するには、機能のpropertiesプロパティとそのプロパティのtooltipdescription値を設定します。tooltipは、マウスポインタが機能の上に置かれたときに表示される短いツールチップのレンダリングに使用され、機能をクリックすることで表示される詳細情報を含めるためにdescription使用されます。

tooltip および description は InfoTooltip 、および InfoPanel UI コンポーネントによってレンダリングされます。 これらの構成要素の内容がによって更新 InteractiveIntersectionAgentされます。これにより、マウスポインタの座標が 3D スペースに変換され、ポインタが接続されているデータソース内の任意のオブジェクトと交差するかどうかが確認されます。 ポインタの下にオブジェクトがある場合、InfoPanelおよびInfoTooltipのインスタンスによってイベントが開始されて受信されます。このインスタンスには、 GeoJSON オブジェクトのpropertiesメンバーからの情報が表示されます。

ツールチップ and info パネルを追加するには、まず次の新しいインポートをのインポートセクションに追加する必要が index.tsあります。

import { InteractiveIntersectionAgent } from "@here/interactive-datasource-protocol";
import { InfoPanel } from "@here/interactive-mapview-ui";

次に、 InteractiveIntersectionAgent データソースインスタンスにアタッチするコードを追加し InfoPanel 、およびを初期化 InfoTooltipします。 これを行うには、既存のcreateGeoJsonDataSource関数にGeoJsonDataSource.EVENT_ATTACHEDイベントリスナーを追加します。 イベントハンドラーには、インターセクションエージェントおよび UI ウィジェットを初期化するためのコードが含まれています。

function createGeoJsonDataSource() {
    const geoJsonDataSource = new GeoJsonDataSource({});
    geoJsonDataSource.addEventListener(
        GeoJsonDataSource.EVENT_BEFORE_TILE_RENDERED,
        (event: GeoJsonDataSourceEvent) => {
            const boundingBox = event.boundingBox;
            if (dataInspector.mapView === undefined || boundingBox === undefined) {
                return;
            }

            Utils.fitMapViewToWorldBoundingBox(dataInspector.mapView, boundingBox, dataInspector.mapControls);
        }
    );

    // Initialize intersection agent and UI widgets
    geoJsonDataSource.addEventListener(GeoJsonDataSource.EVENT_ATTACHED, () => {
        if (dataInspector.mapView !== undefined) {
            const intersectionAgent = new InteractiveIntersectionAgent(dataInspector.mapView);
            geoJsonDataSource.setUpIntersectionAgent(intersectionAgent);

            const uiContainer = document.querySelector(".row-container") as HTMLElement;
            Utils.installInfoWidgets(InfoPanel, geoJsonDataSource, uiContainer);
        }
    });

    return geoJsonDataSource;
}

tooltip および descriptionを追加するには geoJsonData 、でオブジェクトの宣言 index.tsを更新します。

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": {
                "tooltip": "Custom feature tooltip",
                "description": {
                    "Text": "Text value",
                    "Number": 42,
                    "Object": { a: "b" }
                }
            }
        }]
};

properties.tooltip メンバーからのデータがツールチップとして表示されます。 このツールチップは GeoJSON オブジェクトの上に描画され、マウスの動きに追従します。

この機能の詳細情報を表示するに properties.description は、プロパティを使用します。 HTML 文字列または ( 上のサンプルコードに示されているように ) オブジェクトのいずれかになります。 GeoJSON 機能をクリックして選択すると、このすべての機能の説明が情報パネルに表示されます。

カスタムスタイルを適用します

異なるデータをより適切に表示するには、レンダリングされた GeoJSON オブジェクトのデフォルトのスタイルを変更することができます。 これを行うには、geoJsonDataオブジェクトのpropertiesに次のアイテムを追加します。

"properties": {
    "tooltip": "Custom feature tooltip",
    "description": {
        "Text": "Text value",
        "Number": 42,
        "Object": { a: "b" }
    },
    "stroke": "#00AA00",
    "stroke-width": 10,
    "fill": "#FFFF00",
    "fill-opacity": 1.0
}

これ により、ポリゴンの塗りつぶし色が黄色 (16 進値#FFFF00) に、ボーダー色が緑色 (16 進値#00AA00) に変更されます。 また、塗りの不透明度は 1.0 ( 完全に不透明 ) に設定され、ボーダーの幅は 10 ピクセルに設定されています。 GeoJSON 機能でサポートされているスタイルの詳細については、このガイドの「 Style GeoJSON Visualization 」の章を参照してください。

その結果、次のシェイプがレンダリングされます。

GeoJsonDataSource これで、静的 GeoJSON データのレンダリング方法についての基本的なチュートリアルは終了です。