地図のズームコントロールを使用します

@here/interactive-mapview-uiパッケージのZoomLevelWidgetは、MapViewのズーム レベルを制御するためのウィジェットを提供します。 現在のズーム レベルが表示され、ズームインとズームアウトのための 2 つのボタンがあります。

インポートされたスタイルを使用するには、 WebPack を適切に設定します。 これらは /resources ディレクトリにバンドルされています。 Web パックで CSS ファイルをインポートするには、style-loaderおよびcss-loader NPM パッケージを追加し、webpack.config.jsのloadersセクションに次のように CSS およびスタイルローダーを追加します。

{ test: /\.css$/, loader: "style-loader!css-loader" }

ZoomLevelWidget MapView ズームを制御するロジックを持たない純粋な UI ウィジェット です。 ズームイン / ズームアウトボタンをクリックしたときにのみイベントが提供 setState され、現在のズームに応じて更新する方法があります。 ズーム レベルを実際に更新するには、MapViewイベントをMapControls使用してその状態を更新するように設定します。

import { MapView, MapViewEventNames } from "@here/harp-mapview";
import { MapControls } from "@here/harp-map-controls";
import { ZoomLevelWidget, ZoomLevelWidgetEvents } from "@here/interactive-mapview-ui";

...

// Create an instance of `MapView`.
const mapView = new MapView({ ... });

// Get a UI container for zoom level widget.
const uiContainer = document.getElementById("ui-container");
if (uiContainer === null) {
    throw new Error("Element 'ui-container' not found in document");
}

// An instance of `MapControls` is needed to control zoom level of `MapView`.
const mapControls = new MapControls(mapView);
mapControls.setZoomLevel(13); // Set some default zoom level.

// Create a UI widget which visualizes current zoom and provides buttons to zoom in/out.
const zoomLevelWidget = new ZoomLevelWidget(
    {},
    uiContainer,
    { zoomLevel: mapView.zoomLevel }
);

// Handler for zoom in button.
zoomLevelWidget.addEventListener(ZoomLevelWidgetEvents.ZOOM_IN,
    () => mapControls.setZoomLevel(mapControls.zoomLevelTargetted + 1)
);

// Handler for zoom out button.
zoomLevelWidget.addEventListener(ZoomLevelWidgetEvents.ZOOM_OUT,
    () => mapControls.setZoomLevel(mapControls.zoomLevelTargetted - 1)
);

// Update zoom widget with current zoom level.
mapView.addEventListener(MapViewEventNames.Render,
    () => {
        zoomLevelWidget.setState({
            zoomLevel: mapView.zoomLevel,
            zoomInDisabled: mapView.zoomLevel >= mapView.maxZoomLevel,
            zoomOutDisabled: mapView.zoomLevel <= mapView.minZoomLevel
        });
    }
);