@wayz/react-gl
Version:
React Component for DeckGL, Base on AMap, Mapbox GL
37 lines (36 loc) • 1.88 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useCallback } from 'react';
import { useMapGLContext } from '../..';
import './index.css';
var NavigationControl = function (_a) {
var style = _a.style, className = _a.className;
var setViewState = useMapGLContext().setViewState;
var NavigationControlStyle = useMemo(function () {
var _navigationStyle = {
right: '20px',
bottom: '20px',
};
return Object.assign(_navigationStyle, style ? style : {});
}, [style]);
// zoom -1
var zoomIn = useCallback(function () {
setViewState(function (prevViewState) { return (__assign(__assign({}, prevViewState), { zoom: Math.max(prevViewState.minZoom, prevViewState.zoom - 1) })); });
}, [setViewState]);
// zoom + 1
var zoomOut = useCallback(function () {
setViewState(function (prevViewState) { return (__assign(__assign({}, prevViewState), { zoom: Math.min(prevViewState.maxZoom, prevViewState.zoom + 1) })); });
}, [setViewState]);
return (_jsxs("div", __assign({ className: "react-gl-control react-gl-navigation ".concat(className), style: NavigationControlStyle }, { children: [_jsx("span", __assign({ className: "react-gl-ctrl-zoomin", "data-type": "add", onClick: zoomOut }, { children: "+" })), _jsx("span", __assign({ className: "react-gl-ctrl-zoomout", "data-type": "sub", onClick: zoomIn }, { children: "-" }))] })));
};
export default NavigationControl;