@wayz/react-gl/esm/plugins/navigation-control/index.js

React Component for DeckGL, Base on AMap, Mapbox GL

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useCallback } from 'react';
import { useMapGLContext } from '../..';
import './index.css';
const NavigationControl = ({ style, className }) => {
    const { setViewState } = useMapGLContext();
    const NavigationControlStyle = useMemo(() => {
        const _navigationStyle = {
            right: '20px',
            bottom: '20px',
        };
        return Object.assign(_navigationStyle, style ? style : {});
    }, [style]);
    // zoom -1
    const zoomIn = useCallback(() => {
        setViewState((prevViewState) => ({
            ...prevViewState,
            zoom: Math.max(prevViewState.minZoom, prevViewState.zoom - 1),
        }));
    }, [setViewState]);
    // zoom + 1
    const zoomOut = useCallback(() => {
        setViewState((prevViewState) => ({
            ...prevViewState,
            zoom: Math.min(prevViewState.maxZoom, prevViewState.zoom + 1),
        }));
    }, [setViewState]);
    return (_jsxs("div", { className: `react-gl-control react-gl-navigation ${className}`, style: NavigationControlStyle, children: [_jsx("span", { className: "react-gl-ctrl-zoomin", "data-type": "add", onClick: zoomOut, children: "+" }), _jsx("span", { className: "react-gl-ctrl-zoomout", "data-type": "sub", onClick: zoomIn, children: "-" })] }));
};
export default NavigationControl;