@wayz/react-gl/esm/gl/index.js

React Component for DeckGL, Base on AMap, Mapbox GL

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useRef, useCallback, useMemo, memo, } from 'react';
import { DeckGL } from '@deck.gl/react';
import { Map as StaticMap, ScaleControl } from 'react-map-gl';
import { MapGLContext } from '../context/MapGLContext';
import { diffSetLayer, quickSortLayerByZIndex, isFunction } from '../utils';
import useUpdate from '../hooks/useUpdate';
const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoiZHJhZ29ueXVud2FuZyIsImEiOiJjanYwczlla20xMmpnNGVvNGppZG9vN2F6In0.VegKSG-PHekTitp0uMGUsA';
const INITIAL_VIEW_STATE = {
    longitude: 116.405285,
    latitude: 39.904989,
    zoom: 3,
    bearing: 0,
    pitch: 0,
};
const childrenWrapperStyle = {
    // position: 'absolute',
    zIndex: 1000,
};
const deckToolTipWrapperStyle = {
    zIndex: 1,
    position: 'absolute',
    pointerEvents: 'none',
    top: 0,
    left: 0,
};
export const MapGL = ({ children, MAP_ACCESS_TOKEN = MAPBOX_ACCESS_TOKEN, mapStyle = 'light', glOptions = {}, scaleControl, initialViewState = INITIAL_VIEW_STATE, onViewStateChange, onWebGLInitialized, debug, maxBounds, ...rest }) => {
    const [glContext, setGLContext] = useState();
    const [layers, _setLayers] = useState([]);
    const [viewState, _setViewState] = useState(() => {
        if (initialViewState.altitude === 0) {
            throw new Error('initialViewState.altitude 不能设置为0');
        }
        return initialViewState;
    });
    const [hoverInfo, _setHoverInfo] = useState();
    const update = useUpdate();
    const deckRef = useRef(null);
    const mapRef = useRef(null);
    const viewStateRef = useRef(initialViewState);
    // 控制台输入, layers的状态
    debug && console.info(`layers: `, layers);
    // 添加图层
    const _addLayer = useCallback((layer) => {
        // 合并数组， 并按照zIndex排序
        _setLayers((layers) => {
            return quickSortLayerByZIndex([...layers, ...(Array.isArray(layer) ? layer : [layer])]);
        });
    }, []);
    // 移除图层
    const _removeLayer = useCallback((layer) => {
        // 求差集
        _setLayers((layers) => {
            return diffSetLayer(layers, Array.isArray(layer) ? layer : [layer]);
        });
    }, []);
    // 获取viewState
    const getViewState = useCallback(() => viewStateRef.current, []);
    // 设置viewState
    const setViewState = useCallback((viewState) => {
        _setViewState((vs) => {
            const _viewState = Object.assign({}, vs, isFunction(viewState) ? viewState(vs) : viewState);
            // 设置 maxBounds
            if (maxBounds) {
                _viewState.longitude = Math.min(maxBounds[2], Math.max(maxBounds[0], _viewState.longitude));
                _viewState.latitude = Math.min(maxBounds[3], Math.max(maxBounds[1], _viewState.latitude));
            }
            viewStateRef.current = _viewState;
            onViewStateChange === null || onViewStateChange === void 0 ? void 0 : onViewStateChange(_viewState);
            return _viewState;
        });
    }, [onViewStateChange, maxBounds]);
    // 设置hoverInfo
    const setHoverInfo = useCallback((info) => {
        _setHoverInfo(info);
    }, []);
    // viewState changes
    const handleViewStateChange = useCallback(({ viewState }) => {
        setViewState(viewState);
    }, [setViewState]);
    // get mapbox instance
    const onMapLoad = useCallback(() => update(), []);
    const handleWebGLInitialized = useCallback((gl) => {
        setGLContext(gl);
        onWebGLInitialized === null || onWebGLInitialized === void 0 ? void 0 : onWebGLInitialized(gl);
    }, [setGLContext, onWebGLInitialized]);
    // glOptions
    const glOpts = useMemo(() => {
        return glOptions
            ? { ...glOptions, /* To render vector tile polygons correctly */ stencil: true }
            : { stencil: true, preserveDrawingBuffer: false };
    }, [glOptions]);
    // scaleControl
    const _scaleControl = useMemo(() => {
        const _sControl = {
            style: {
                left: 20,
                bottom: 10,
            },
            unit: 'metric',
            maxWidth: 100,
        };
        return Object.assign(_sControl, scaleControl ? scaleControl : {});
    }, [scaleControl]);
    // map style
    const mapSty = useMemo(() => {
        return mapStyle
            ? typeof mapStyle === 'string'
                ? require(`../mapStyle/${mapStyle}.json`)
                : mapStyle
            : 'blue';
    }, [mapStyle]);
    const MapGLContextValue = useMemo(() => {
        return {
            _addLayer,
            _removeLayer,
            getViewState,
            setViewState,
            setHoverInfo,
            deck: deckRef.current,
            map: mapRef.current,
        };
    }, [
        _addLayer,
        _removeLayer,
        getViewState,
        setViewState,
        setHoverInfo,
        deckRef.current,
        mapRef.current,
    ]);
    return (_jsxs(_Fragment, { children: [_jsxs(DeckGL, { ...rest, layers: layers, ref: deckRef, viewState: viewState, controller: true, onWebGLInitialized: handleWebGLInitialized, onViewStateChange: handleViewStateChange, glOptions: glOpts, children: [glContext && (_jsx(StaticMap, { ref: mapRef, reuseMaps: true, onLoad: onMapLoad, mapboxAccessToken: MAP_ACCESS_TOKEN, mapStyle: mapSty, preserveDrawingBuffer: glOpts.preserveDrawingBuffer, children: (scaleControl === null || scaleControl === void 0 ? void 0 : scaleControl.show) ? _jsx(ScaleControl, { ..._scaleControl }) : null })), hoverInfo && hoverInfo.object && (_jsx("div", { style: {
                            ...deckToolTipWrapperStyle,
                            left: hoverInfo.x,
                            top: hoverInfo.y,
                        }, children: hoverInfo.html }))] }), _jsx(MapGLContext.Provider, { value: MapGLContextValue, children: _jsx("div", { className: "children-wrapper", style: childrenWrapperStyle, children: children }) })] }));
};
export default memo(MapGL);